Skip to content

Instantly share code, notes, and snippets.

@R3DIANCE

R3DIANCE/gbgroa.markdown

Created May 16, 2019 22:17
Show Gist options
  • Save R3DIANCE/4de02cdac8ce32f5db7a7da7274b754c to your computer and use it in GitHub Desktop.
Save R3DIANCE/4de02cdac8ce32f5db7a7da7274b754c to your computer and use it in GitHub Desktop.
Download ZIP
gBGROa
Raw
index.html
<div class="media-library-wrap">
<div class="media-library-inner-wrap">
<div class="react-resizable" style="width: 1000px; height: 620px;">
<div class="media-library">
<div class="media-library-header">
<div class="media-library-header-left-part">
<div class="media-library-header-left-part-item"><svg viewBox="0 0 20 20"><path d="M18.5 20h-17c-0.827 0-1.5-0.673-1.5-1.5v-17c0-0.827 0.673-1.5 1.5-1.5h17c0.827 0 1.5 0.673 1.5 1.5v17c0 0.827-0.673 1.5-1.5 1.5zM1.5 1c-0.276 0-0.5 0.224-0.5 0.5v17c0 0.276 0.224 0.5 0.5 0.5h17c0.276 0 0.5-0.224 0.5-0.5v-17c0-0.276-0.224-0.5-0.5-0.5h-17z"></path><path d="M13 9c-1.103 0-2-0.897-2-2s0.897-2 2-2 2 0.897 2 2-0.897 2-2 2zM13 6c-0.551 0-1 0.449-1 1s0.449 1 1 1 1-0.449 1-1-0.449-1-1-1z"></path><path d="M17.5 18h-7c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5h7c0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5z"></path><path d="M17.5 2h-15c-0.276 0-0.5 0.224-0.5 0.5v12c0 0.276 0.224 0.5 0.5 0.5h15c0.276 0 0.5-0.224 0.5-0.5v-12c0-0.276-0.224-0.5-0.5-0.5zM3 11.69l3.209-3.611c0.082-0.092 0.189-0.144 0.302-0.145s0.221 0.048 0.305 0.138l5.533 5.928h-9.349v-2.31zM17 14h-3.283l-6.169-6.61c-0.279-0.299-0.651-0.461-1.049-0.456s-0.766 0.176-1.037 0.481l-2.462 2.77v-7.185h14v11z"></path></svg></div>
<div
class="media-library-header-left-part-item"><span>Media Library</span></div>
</div>
<div class="media-library-header-right-part">
<div class="media-library-download-project-items" data-for="tooltip-global" data-tip="Upload all project media files into gallery" currentitem="false"><svg viewBox="0 0 20 20"><path d="M14.853 9.647c-0.195-0.195-0.512-0.195-0.707 0l-4.146 4.146v-11.293c0-0.276-0.224-0.5-0.5-0.5s-0.5 0.224-0.5 0.5v11.293l-4.146-4.146c-0.195-0.195-0.512-0.195-0.707 0s-0.195 0.512 0 0.707l5 5c0.098 0.098 0.226 0.146 0.354 0.146s0.256-0.049 0.354-0.147l5-5c0.195-0.195 0.195-0.512-0-0.707z"></path><path d="M17.5 19h-16c-0.827 0-1.5-0.673-1.5-1.5v-2c0-0.276 0.224-0.5 0.5-0.5s0.5 0.224 0.5 0.5v2c0 0.276 0.224 0.5 0.5 0.5h16c0.276 0 0.5-0.224 0.5-0.5v-2c0-0.276 0.224-0.5 0.5-0.5s0.5 0.224 0.5 0.5v2c0 0.827-0.673 1.5-1.5 1.5z"></path></svg></div>
<div
class="media-library-close-icon"><svg viewBox="0 0 20 20"><path d="M10.707 10.5l5.646-5.646c0.195-0.195 0.195-0.512 0-0.707s-0.512-0.195-0.707 0l-5.646 5.646-5.646-5.646c-0.195-0.195-0.512-0.195-0.707 0s-0.195 0.512 0 0.707l5.646 5.646-5.646 5.646c-0.195 0.195-0.195 0.512 0 0.707 0.098 0.098 0.226 0.146 0.354 0.146s0.256-0.049 0.354-0.146l5.646-5.646 5.646 5.646c0.098 0.098 0.226 0.146 0.354 0.146s0.256-0.049 0.354-0.146c0.195-0.195 0.195-0.512 0-0.707l-5.646-5.646z"></path></svg></div>
</div>
</div>
<div class="media-library-body" style="height: calc(100% - 81px);">
<div class="media-library-body-left-part">
<div class="media-library-body-left-part-top">Categories:</div>
<div class="media-library-body-left-part-middle">
<div class="media-library-category-list">
<div class="media-library-category-list-item active"><span class="icon"><svg viewBox="0 0 20 20"><path d="M19.817 11.113c-0.116-0.095-0.268-0.133-0.415-0.104l-5 1c-0.234 0.047-0.402 0.252-0.402 0.49v2.695c-0.293-0.124-0.633-0.195-1-0.195-1.122 0-2 0.659-2 1.5s0.878 1.5 2 1.5 2-0.659 2-1.5v-3.59l4-0.8v2.085c-0.293-0.124-0.633-0.195-1-0.195-1.122 0-2 0.659-2 1.5s0.878 1.5 2 1.5 2-0.659 2-1.5v-4c0-0.15-0.067-0.292-0.183-0.387zM13 17c-0.61 0-1-0.296-1-0.5s0.39-0.5 1-0.5 1 0.296 1 0.5-0.39 0.5-1 0.5zM18 16c-0.61 0-1-0.296-1-0.5s0.39-0.5 1-0.5 1 0.296 1 0.5-0.39 0.5-1 0.5z"></path><path d="M13.5 11c-0.827 0-1.5-0.673-1.5-1.5s0.673-1.5 1.5-1.5 1.5 0.673 1.5 1.5-0.673 1.5-1.5 1.5zM13.5 9c-0.276 0-0.5 0.224-0.5 0.5s0.224 0.5 0.5 0.5 0.5-0.224 0.5-0.5-0.224-0.5-0.5-0.5z"></path><path d="M16.5 6h-4.5v-3.5c0-0.276-0.224-0.5-0.5-0.5h-11c-0.276 0-0.5 0.224-0.5 0.5v6c0 0.276 0.224 0.5 0.5 0.5h4.5v3.5c0 0.276 0.224 0.5 0.5 0.5h7c0.276 0 0.5-0.224 0.5-0.5s-0.224-0.5-0.5-0.5h-0.775l-3.187-3.585c-0.272-0.306-0.65-0.476-1.039-0.466s-0.758 0.199-1.014 0.519l-0.485 0.606v-2.075h10v3c0 0.276 0.224 0.5 0.5 0.5s0.5-0.224 0.5-0.5v-3.5c0-0.276-0.224-0.5-0.5-0.5zM10 5h1v1h-1v-1zM11 4h-1v-1h1v1zM1 5h1v1h-1v-1zM2 3v1h-1v-1h1zM1 7h1v1h-1v-1zM7.266 9.093c0.073-0.091 0.165-0.142 0.259-0.144s0.189 0.044 0.266 0.131l2.596 2.92h-4.387v-1.325l1.266-1.582zM5.5 6c-0.276 0-0.5 0.224-0.5 0.5v1.5h-2v-5h6v3h-3.5z"></path></svg></span>
<div
class="title-wrap"><input type="text" disabled="" class="input-title" value="Show All"><span class="title">Show All</span></div><span class="file-count">(36)</span></div>
<div class="media-library-category-list-item"><span class="icon"><svg viewBox="0 0 20 20"><path d="M18.5 18h-17c-0.827 0-1.5-0.673-1.5-1.5v-10.5c0-0.352 0.119-0.856 0.276-1.171l0.553-1.106c0.206-0.413 0.71-0.724 1.171-0.724h7c0.461 0 0.965 0.311 1.171 0.724l0.553 1.106c0.038 0.077 0.191 0.171 0.276 0.171h7.5c0.827 0 1.5 0.673 1.5 1.5v10c0 0.827-0.673 1.5-1.5 1.5zM2 4c-0.086 0-0.238 0.094-0.276 0.171l-0.553 1.106c-0.088 0.176-0.171 0.527-0.171 0.724v10.5c0 0.276 0.224 0.5 0.5 0.5h17c0.276 0 0.5-0.224 0.5-0.5v-10c0-0.276-0.224-0.5-0.5-0.5h-7.5c-0.461 0-0.965-0.311-1.171-0.724l-0.553-1.106c-0.038-0.077-0.191-0.171-0.276-0.171h-7z"></path><path d="M12.5 13c0.827 0 1.5-0.673 1.5-1.5s-0.673-1.5-1.5-1.5-1.5 0.673-1.5 1.5 0.673 1.5 1.5 1.5zM12.5 11c0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5-0.5-0.224-0.5-0.5 0.224-0.5 0.5-0.5z"></path><path d="M15.5 8h-11c-0.276 0-0.5 0.224-0.5 0.5v6c0 0.276 0.224 0.5 0.5 0.5h11c0.276 0 0.5-0.224 0.5-0.5v-6c0-0.276-0.224-0.5-0.5-0.5zM5 12.675l1.266-1.582c0.073-0.091 0.164-0.142 0.259-0.144s0.189 0.044 0.266 0.131l2.596 2.92h-4.387v-1.325zM15 14h-4.275l-3.187-3.585c-0.272-0.306-0.651-0.476-1.039-0.466s-0.758 0.199-1.014 0.519l-0.485 0.606v-2.075h10v5z"></path></svg></span>
<div
class="title-wrap"><input type="text" disabled="" class="input-title" value="Images Only"><span class="title">Images Only</span></div><span class="file-count">(36)</span></div>
<div class="media-library-category-list-item disabled"><span class="icon"><svg viewBox="0 0 20 20"><path d="M18.5 18h-17c-0.827 0-1.5-0.673-1.5-1.5v-10.5c0-0.352 0.119-0.856 0.276-1.171l0.553-1.106c0.206-0.413 0.71-0.724 1.171-0.724h7c0.461 0 0.964 0.311 1.171 0.724l0.553 1.106c0.038 0.077 0.191 0.171 0.276 0.171h7.5c0.827 0 1.5 0.673 1.5 1.5v10c0 0.827-0.673 1.5-1.5 1.5zM2 4c-0.086 0-0.238 0.094-0.276 0.171l-0.553 1.106c-0.088 0.176-0.171 0.527-0.171 0.724v10.5c0 0.276 0.224 0.5 0.5 0.5h17c0.276 0 0.5-0.224 0.5-0.5v-10c0-0.276-0.224-0.5-0.5-0.5h-7.5c-0.461 0-0.965-0.311-1.171-0.724l-0.553-1.106c-0.038-0.077-0.191-0.171-0.276-0.171h-7z"></path><path d="M15.5 8h-11c-0.276 0-0.5 0.224-0.5 0.5v6c0 0.276 0.224 0.5 0.5 0.5h11c0.276 0 0.5-0.224 0.5-0.5v-6c0-0.276-0.224-0.5-0.5-0.5zM5 11h1v1h-1v-1zM7 9h6v5h-6v-5zM14 11h1v1h-1v-1zM15 10h-1v-1h1v1zM6 9v1h-1v-1h1zM5 13h1v1h-1v-1zM14 14v-1h1v1h-1z"></path></svg></span>
<div
class="title-wrap"><input type="text" disabled="" class="input-title" value="Videos Only"><span class="title">Videos Only</span></div>
</div>
</div>
</div>
<div class="media-library-body-left-part-bottom">
<div class="media-library-category-list-divider"></div>
<div class="media-library-category-list-item-add"><span class="icon"><svg viewBox="0 0 20 20"><path d="M18.5 18h-17c-0.827 0-1.5-0.673-1.5-1.5v-10.5c0-0.352 0.119-0.856 0.276-1.171l0.553-1.106c0.206-0.413 0.71-0.724 1.171-0.724h7c0.461 0 0.964 0.311 1.171 0.724l0.553 1.106c0.038 0.077 0.191 0.171 0.276 0.171h7.5c0.827 0 1.5 0.673 1.5 1.5v10c0 0.827-0.673 1.5-1.5 1.5zM2 4c-0.086 0-0.238 0.094-0.276 0.171l-0.553 1.106c-0.088 0.176-0.171 0.527-0.171 0.724v10.5c0 0.276 0.224 0.5 0.5 0.5h17c0.276 0 0.5-0.224 0.5-0.5v-10c0-0.276-0.224-0.5-0.5-0.5h-7.5c-0.461 0-0.965-0.311-1.171-0.724l-0.553-1.106c-0.038-0.077-0.191-0.171-0.276-0.171h-7z"></path><path d="M12.5 11h-2.5v-2.5c0-0.276-0.224-0.5-0.5-0.5s-0.5 0.224-0.5 0.5v2.5h-2.5c-0.276 0-0.5 0.224-0.5 0.5s0.224 0.5 0.5 0.5h2.5v2.5c0 0.276 0.224 0.5 0.5 0.5s0.5-0.224 0.5-0.5v-2.5h2.5c0.276 0 0.5-0.224 0.5-0.5s-0.224-0.5-0.5-0.5z"></path></svg></span>
<span
class="title">Add New Category</span>
</div>
</div>
</div>
<div class="media-library-body-right-part">
<div class="media-library-items-container">
<div class="media-library-items-container-header">
<div class="media-library-items-container-header-left-part">
<div class="media-library-items-link-description"><span class="icon"><svg viewBox="0 0 58 58"><path d="m 42.033203,17.990234 c -0.588533,-0.0072 -1.151997,0.24623 -1.537109,0.691407 L 25.765625,35.251953 17.25,28.4375 c -0.455623,-0.364704 -1.054802,-0.518478 -1.574219,-0.429688 -0.519416,0.08879 -0.943169,0.373297 -1.238281,0.742188 -0.295112,0.368891 -0.478565,0.844855 -0.451172,1.371094 0.02739,0.526238 0.307848,1.076953 0.763672,1.441406 l 10,8 c 0.823817,0.659265 2.045913,0.554962 2.746094,-0.234375 L 43.486328,21.337891 c 0.556074,-0.609914 0.645924,-1.479892 0.357422,-2.144532 -0.288272,-0.664109 -0.984167,-1.192006 -1.808594,-1.203125 l -0.002,0 z"></path></svg></span><span> - File is located in the project directory</span></div>
</div>
<div class="media-library-items-upload"><span>Upload Files</span><span class="icon"><svg viewBox="0 0 20 20"><path d="M12.853 11.647l-2-2c-0.195-0.195-0.512-0.195-0.707 0l-2 2c-0.195 0.195-0.195 0.512 0 0.707s0.512 0.195 0.707 0l1.146-1.146v4.293c0 0.276 0.224 0.5 0.5 0.5s0.5-0.224 0.5-0.5v-4.293l1.147 1.146c0.098 0.098 0.226 0.146 0.353 0.146s0.256-0.049 0.353-0.147c0.195-0.195 0.195-0.512 0-0.707z"></path><path d="M16.006 16h-3.506c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5h3.506c1.651 0 2.994-1.343 2.994-2.994s-1.343-2.994-2.994-2.994c-0.354 0-0.699 0.061-1.026 0.18-0.218 0.080-0.462-0.001-0.59-0.195s-0.104-0.45 0.056-0.619c0.357-0.376 0.554-0.865 0.554-1.379 0-1.103-0.897-2-2-2-0.642 0-1.229 0.297-1.61 0.814-0.23 0.312-0.365 0.678-0.388 1.057-0.013 0.212-0.159 0.392-0.363 0.45s-0.423-0.020-0.545-0.193c-0.11-0.156-0.229-0.307-0.354-0.447-0.949-1.068-2.312-1.681-3.74-1.681-2.757 0-5 2.243-5 5s2.243 5 5 5h2.5c0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5h-2.5c-3.308 0-6-2.692-6-6s2.692-6 6-6c1.602 0 3.137 0.643 4.26 1.775 0.088-0.194 0.196-0.38 0.325-0.555 0.564-0.764 1.467-1.22 2.415-1.22 1.654 0 3 1.346 3 3 0 0.351-0.061 0.694-0.178 1.017 0.061-0.003 0.122-0.004 0.184-0.004 2.202 0 3.994 1.792 3.994 3.994s-1.792 3.994-3.994 3.994z"></path></svg></span>
<input
class="media-library-upload-button" type="file" multiple="" accept="image/gif,image/jpeg,image/jpg,image/png,video/webm,video/ogg,video/mp4"></div>
</div>
<div class="media-library-items-container-body">
<div class="media-shell">
<div class="media-range">
<div class="cell-1-5" draggable="true">
<div class="media-library-item">
<div class="media-library-item-body">
<div class="media-library-item-body-content"><span class="media-library-item-preview with-bg"><span class="media-library-item-preview-img" style="background-image: url(&quot;projects/template/novi/media/thumbnails/grid-gallery-8_original.jpg&quot;);"></span></span><span class="media-library-item-dimension-label"><span class="width">1200</span> x <span class="height">800</span></span>
</div>
</div>
</div>
</div>
<div class="cell-1-5" draggable="true">
<div class="media-library-item">
<div class="media-library-item-body">
<div class="media-library-item-body-content"><span class="media-library-item-preview with-bg"><span class="media-library-item-preview-img" style="background-image: url(&quot;projects/template/novi/media/thumbnails/grid-gallery-8.jpg&quot;);"></span></span><span class="media-library-item-dimension-label"><span class="width">640</span> x <span class="height">426</span></span>
</div>
</div>
</div>
</div>
<div class="cell-1-5" draggable="true">
<div class="media-library-item">
<div class="media-library-item-body">
<div class="media-library-item-body-content"><span class="media-library-item-preview with-bg"><span class="media-library-item-preview-img" style="background-image: url(&quot;projects/template/novi/media/thumbnails/grid-gallery-7_original.jpg&quot;);"></span></span><span class="media-library-item-dimension-label"><span class="width">1200</span> x <span class="height">800</span></span>
</div>
</div>
</div>
</div>
<div class="cell-1-5" draggable="true">
<div class="media-library-item">
<div class="media-library-item-body">
<div class="media-library-item-body-content"><span class="media-library-item-preview with-bg"><span class="media-library-item-preview-img" style="background-image: url(&quot;projects/template/novi/media/thumbnails/grid-gallery-7.jpg&quot;);"></span></span><span class="media-library-item-dimension-label"><span class="width">640</span> x <span class="height">426</span></span>
</div>
</div>
</div>
</div>
<div class="cell-1-5" draggable="true">
<div class="media-library-item">
<div class="media-library-item-body">
<div class="media-library-item-body-content"><span class="media-library-item-preview with-bg"><span class="media-library-item-preview-img" style="background-image: url(&quot;projects/template/novi/media/thumbnails/grid-gallery-4_original.jpg&quot;);"></span></span><span class="media-library-item-dimension-label"><span class="width">1200</span> x <span class="height">800</span></span>
</div>
</div>
</div>
</div>
<div class="cell-1-5" draggable="true">
<div class="media-library-item">
<div class="media-library-item-body">
<div class="media-library-item-body-content"><span class="media-library-item-preview with-bg"><span class="media-library-item-preview-img" style="background-image: url(&quot;projects/template/novi/media/thumbnails/grid-gallery-4.jpg&quot;);"></span></span><span class="media-library-item-dimension-label"><span class="width">640</span> x <span class="height">426</span></span>
</div>
</div>
</div>
</div>
<div class="cell-1-5" draggable="true">
<div class="media-library-item">
<div class="media-library-item-body">
<div class="media-library-item-body-content"><span class="media-library-item-preview with-bg"><span class="media-library-item-preview-img" style="background-image: url(&quot;projects/template/novi/media/thumbnails/grid-gallery-3_original.jpg&quot;);"></span></span><span class="media-library-item-dimension-label"><span class="width">1200</span> x <span class="height">800</span></span>
</div>
</div>
</div>
</div>
<div class="cell-1-5" draggable="true">
<div class="media-library-item">
<div class="media-library-item-body">
<div class="media-library-item-body-content"><span class="media-library-item-preview with-bg"><span class="media-library-item-preview-img" style="background-image: url(&quot;projects/template/novi/media/thumbnails/grid-gallery-3.jpg&quot;);"></span></span><span class="media-library-item-dimension-label"><span class="width">640</span> x <span class="height">426</span></span>
</div>
</div>
</div>
</div>
<div class="cell-1-5" draggable="true">
<div class="media-library-item">
<div class="media-library-item-body">
<div class="media-library-item-body-content"><span class="media-library-item-preview with-bg"><span class="media-library-item-preview-img" style="background-image: url(&quot;projects/template/novi/media/thumbnails/grid-gallery-2_original.jpg&quot;);"></span></span><span class="media-library-item-dimension-label"><span class="width">1200</span> x <span class="height">800</span></span>
</div>
</div>
</div>
</div>
<div class="cell-1-5" draggable="true">
<div class="media-library-item">
<div class="media-library-item-body">
<div class="media-library-item-body-content"><span class="media-library-item-preview with-bg"><span class="media-library-item-preview-img" style="background-image: url(&quot;projects/template/novi/media/thumbnails/grid-gallery-2.jpg&quot;);"></span></span><span class="media-library-item-dimension-label"><span class="width">640</span> x <span class="height">426</span></span>
</div>
</div>
</div>
</div>
<div class="cell-1-5" draggable="true">
<div class="media-library-item">
<div class="media-library-item-body">
<div class="media-library-item-body-content"><span class="media-library-item-preview with-bg"><span class="media-library-item-preview-img" style="background-image: url(&quot;projects/template/novi/media/thumbnails/grid-gallery-1_original.jpg&quot;);"></span></span><span class="media-library-item-dimension-label"><span class="width">1200</span> x <span class="height">800</span></span>
</div>
</div>
</div>
</div>
<div class="cell-1-5" draggable="true">
<div class="media-library-item">
<div class="media-library-item-body">
<div class="media-library-item-body-content"><span class="media-library-item-preview with-bg"><span class="media-library-item-preview-img" style="background-image: url(&quot;projects/template/novi/media/thumbnails/grid-gallery-1.jpg&quot;);"></span></span><span class="media-library-item-dimension-label"><span class="width">640</span> x <span class="height">426</span></span>
</div>
</div>
</div>
</div>
<div class="cell-1-5" draggable="true">
<div class="media-library-item">
<div class="media-library-item-body">
<div class="media-library-item-body-content"><span class="media-library-item-preview with-bg"><span class="media-library-item-preview-img" style="background-image: url(&quot;projects/template/novi/media/thumbnails/video-1-1.jpeg&quot;);"></span></span><span class="media-library-item-dimension-label"><span class="width">1903</span> x <span class="height">893</span></span>
</div>
</div>
</div>
</div>
<div class="cell-1-5" draggable="true">
<div class="media-library-item">
<div class="media-library-item-body">
<div class="media-library-item-body-content"><span class="media-library-item-preview with-bg"><span class="media-library-item-preview-img" style="background-image: url(&quot;projects/template/novi/media/thumbnails/gmap_marker_active.png&quot;);"></span></span><span class="media-library-item-dimension-label"><span class="width">36</span> x <span class="height">50</span></span>
</div>
</div>
</div>
</div>
<div class="cell-1-5" draggable="true">
<div class="media-library-item">
<div class="media-library-item-body">
<div class="media-library-item-body-content"><span class="media-library-item-preview with-bg"><span class="media-library-item-preview-img" style="background-image: url(&quot;projects/template/novi/media/thumbnails/gmap_marker.png&quot;);"></span></span><span class="media-library-item-dimension-label"><span class="width">36</span> x <span class="height">50</span></span>
</div>
</div>
</div>
</div>
<div class="cell-1-5" draggable="true">
<div class="media-library-item">
<div class="media-library-item-body">
<div class="media-library-item-body-content"><span class="media-library-item-preview with-bg"><span class="media-library-item-preview-img" style="background-image: url(&quot;projects/template/novi/media/thumbnails/slide-12.jpg&quot;);"></span></span><span class="media-library-item-dimension-label"><span class="width">1918</span> x <span class="height">950</span></span>
</div>
</div>
</div>
</div>
<div class="cell-1-5" draggable="true">
<div class="media-library-item">
<div class="media-library-item-body">
<div class="media-library-item-body-content"><span class="media-library-item-preview with-bg"><span class="media-library-item-preview-img" style="background-image: url(&quot;projects/template/novi/media/thumbnails/slide-11.jpg&quot;);"></span></span><span class="media-library-item-dimension-label"><span class="width">1918</span> x <span class="height">950</span></span>
</div>
</div>
</div>
</div>
<div class="cell-1-5" draggable="true">
<div class="media-library-item">
<div class="media-library-item-body">
<div class="media-library-item-body-content"><span class="media-library-item-preview with-bg"><span class="media-library-item-preview-img" style="background-image: url(&quot;projects/template/novi/media/thumbnails/slide-10.jpg&quot;);"></span></span><span class="media-library-item-dimension-label"><span class="width">1918</span> x <span class="height">950</span></span>
</div>
</div>
</div>
</div>
<div class="cell-1-5" draggable="true">
<div class="media-library-item">
<div class="media-library-item-body">
<div class="media-library-item-body-content"><span class="media-library-item-preview with-bg"><span class="media-library-item-preview-img" style="background-image: url(&quot;projects/template/novi/media/thumbnails/slide-9.jpg&quot;);"></span></span><span class="media-library-item-dimension-label"><span class="width">1918</span> x <span class="height">950</span></span>
</div>
</div>
</div>
</div>
<div class="cell-1-5" draggable="true">
<div class="media-library-item">
<div class="media-library-item-body">
<div class="media-library-item-body-content"><span class="media-library-item-preview with-bg"><span class="media-library-item-preview-img" style="background-image: url(&quot;projects/template/novi/media/thumbnails/slide-8.jpg&quot;);"></span></span><span class="media-library-item-dimension-label"><span class="width">1918</span> x <span class="height">950</span></span>
</div>
</div>
</div>
</div>
<div class="cell-1-5" draggable="true">
<div class="media-library-item">
<div class="media-library-item-body">
<div class="media-library-item-body-content"><span class="media-library-item-preview with-bg"><span class="media-library-item-preview-img" style="background-image: url(&quot;projects/template/novi/media/thumbnails/slide-7.jpg&quot;);"></span></span><span class="media-library-item-dimension-label"><span class="width">1918</span> x <span class="height">950</span></span>
</div>
</div>
</div>
</div>
<div class="cell-1-5" draggable="true">
<div class="media-library-item">
<div class="media-library-item-body">
<div class="media-library-item-body-content"><span class="media-library-item-preview with-bg"><span class="media-library-item-preview-img" style="background-image: url(&quot;projects/template/novi/media/thumbnails/slide-6.jpg&quot;);"></span></span><span class="media-library-item-dimension-label"><span class="width">1918</span> x <span class="height">950</span></span>
</div>
</div>
</div>
</div>
<div class="cell-1-5" draggable="true">
<div class="media-library-item">
<div class="media-library-item-body">
<div class="media-library-item-body-content"><span class="media-library-item-preview with-bg"><span class="media-library-item-preview-img" style="background-image: url(&quot;projects/template/novi/media/thumbnails/slide-5.jpg&quot;);"></span></span><span class="media-library-item-dimension-label"><span class="width">1918</span> x <span class="height">950</span></span>
</div>
</div>
</div>
</div>
<div class="cell-1-5" draggable="true">
<div class="media-library-item">
<div class="media-library-item-body">
<div class="media-library-item-body-content"><span class="media-library-item-preview with-bg"><span class="media-library-item-preview-img" style="background-image: url(&quot;projects/template/novi/media/thumbnails/slide-4.jpg&quot;);"></span></span><span class="media-library-item-dimension-label"><span class="width">1918</span> x <span class="height">950</span></span>
</div>
</div>
</div>
</div>
<div class="cell-1-5" draggable="true">
<div class="media-library-item">
<div class="media-library-item-body">
<div class="media-library-item-body-content"><span class="media-library-item-preview with-bg"><span class="media-library-item-preview-img" style="background-image: url(&quot;projects/template/novi/media/thumbnails/slide-3.jpg&quot;);"></span></span><span class="media-library-item-dimension-label"><span class="width">1918</span> x <span class="height">949</span></span>
</div>
</div>
</div>
</div>
<div class="cell-1-5" draggable="true">
<div class="media-library-item">
<div class="media-library-item-body">
<div class="media-library-item-body-content"><span class="media-library-item-preview with-bg"><span class="media-library-item-preview-img" style="background-image: url(&quot;projects/template/novi/media/thumbnails/slide-2.jpg&quot;);"></span></span><span class="media-library-item-dimension-label"><span class="width">1918</span> x <span class="height">950</span></span>
</div>
</div>
</div>
</div>
<div class="cell-1-5" draggable="true">
<div class="media-library-item">
<div class="media-library-item-body">
<div class="media-library-item-body-content"><span class="media-library-item-preview with-bg"><span class="media-library-item-preview-img" style="background-image: url(&quot;projects/template/novi/media/thumbnails/slide-1.jpg&quot;);"></span></span><span class="media-library-item-dimension-label"><span class="width">1918</span> x <span class="height">950</span></span>
</div>
</div>
</div>
</div>
<div class="cell-1-5" draggable="true">
<div class="media-library-item">
<div class="media-library-item-body">
<div class="media-library-item-body-content"><span class="media-library-item-preview with-bg"><span class="media-library-item-preview-img" style="background-image: url(&quot;projects/template/novi/media/thumbnails/bg-image-10.jpg&quot;);"></span></span><span class="media-library-item-dimension-label"><span class="width">1920</span> x <span class="height">879</span></span>
</div>
</div>
</div>
</div>
<div class="cell-1-5" draggable="true">
<div class="media-library-item">
<div class="media-library-item-body">
<div class="media-library-item-body-content"><span class="media-library-item-preview with-bg"><span class="media-library-item-preview-img" style="background-image: url(&quot;projects/template/novi/media/thumbnails/bg-image-9.jpg&quot;);"></span></span><span class="media-library-item-dimension-label"><span class="width">1700</span> x <span class="height">591</span></span>
</div>
</div>
</div>
</div>
<div class="cell-1-5" draggable="true">
<div class="media-library-item">
<div class="media-library-item-body">
<div class="media-library-item-body-content"><span class="media-library-item-preview with-bg"><span class="media-library-item-preview-img" style="background-image: url(&quot;projects/template/novi/media/thumbnails/bg-image-8.jpg&quot;);"></span></span><span class="media-library-item-dimension-label"><span class="width">1700</span> x <span class="height">702</span></span>
</div>
</div>
</div>
</div>
<div class="cell-1-5" draggable="true">
<div class="media-library-item">
<div class="media-library-item-body">
<div class="media-library-item-body-content"><span class="media-library-item-preview with-bg"><span class="media-library-item-preview-img" style="background-image: url(&quot;projects/template/novi/media/thumbnails/bg-image-7.jpg&quot;);"></span></span><span class="media-library-item-dimension-label"><span class="width">1700</span> x <span class="height">1101</span></span>
</div>
</div>
</div>
</div>
<div class="cell-1-5" draggable="true">
<div class="media-library-item">
<div class="media-library-item-body">
<div class="media-library-item-body-content"><span class="media-library-item-preview with-bg"><span class="media-library-item-preview-img" style="background-image: url(&quot;projects/template/novi/media/thumbnails/bg-image-6.jpg&quot;);"></span></span><span class="media-library-item-dimension-label"><span class="width">1900</span> x <span class="height">672</span></span>
</div>
</div>
</div>
</div>
<div class="cell-1-5" draggable="true">
<div class="media-library-item">
<div class="media-library-item-body">
<div class="media-library-item-body-content"><span class="media-library-item-preview with-bg"><span class="media-library-item-preview-img" style="background-image: url(&quot;projects/template/novi/media/thumbnails/bg-image-5.jpg&quot;);"></span></span><span class="media-library-item-dimension-label"><span class="width">1900</span> x <span class="height">592</span></span>
</div>
</div>
</div>
</div>
<div class="cell-1-5" draggable="true">
<div class="media-library-item">
<div class="media-library-item-body">
<div class="media-library-item-body-content"><span class="media-library-item-preview with-bg"><span class="media-library-item-preview-img" style="background-image: url(&quot;projects/template/novi/media/thumbnails/bg-image-3.jpg&quot;);"></span></span><span class="media-library-item-dimension-label"><span class="width">1920</span> x <span class="height">397</span></span>
</div>
</div>
</div>
</div>
<div class="cell-1-5" draggable="true">
<div class="media-library-item">
<div class="media-library-item-body">
<div class="media-library-item-body-content"><span class="media-library-item-preview with-bg"><span class="media-library-item-preview-img" style="background-image: url(&quot;projects/template/novi/media/thumbnails/bg-image-2.jpg&quot;);"></span></span><span class="media-library-item-dimension-label"><span class="width">1911</span> x <span class="height">295</span></span>
</div>
</div>
</div>
</div>
<div class="cell-1-5" draggable="true">
<div class="media-library-item">
<div class="media-library-item-body">
<div class="media-library-item-body-content"><span class="media-library-item-preview with-bg"><span class="media-library-item-preview-img" style="background-image: url(&quot;projects/template/novi/media/thumbnails/bg-image-1.jpg&quot;);"></span></span><span class="media-library-item-dimension-label"><span class="width">1920</span> x <span class="height">386</span></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="dropzone-overlay"><span class="icon"><svg viewBox="0 0 20 20"><path d="M12.853 11.647l-2-2c-0.195-0.195-0.512-0.195-0.707 0l-2 2c-0.195 0.195-0.195 0.512 0 0.707s0.512 0.195 0.707 0l1.146-1.146v4.293c0 0.276 0.224 0.5 0.5 0.5s0.5-0.224 0.5-0.5v-4.293l1.147 1.146c0.098 0.098 0.226 0.146 0.353 0.146s0.256-0.049 0.353-0.147c0.195-0.195 0.195-0.512 0-0.707z"></path><path d="M16.006 16h-3.506c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5h3.506c1.651 0 2.994-1.343 2.994-2.994s-1.343-2.994-2.994-2.994c-0.354 0-0.699 0.061-1.026 0.18-0.218 0.080-0.462-0.001-0.59-0.195s-0.104-0.45 0.056-0.619c0.357-0.376 0.554-0.865 0.554-1.379 0-1.103-0.897-2-2-2-0.642 0-1.229 0.297-1.61 0.814-0.23 0.312-0.365 0.678-0.388 1.057-0.013 0.212-0.159 0.392-0.363 0.45s-0.423-0.020-0.545-0.193c-0.11-0.156-0.229-0.307-0.354-0.447-0.949-1.068-2.312-1.681-3.74-1.681-2.757 0-5 2.243-5 5s2.243 5 5 5h2.5c0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5h-2.5c-3.308 0-6-2.692-6-6s2.692-6 6-6c1.602 0 3.137 0.643 4.26 1.775 0.088-0.194 0.196-0.38 0.325-0.555 0.564-0.764 1.467-1.22 2.415-1.22 1.654 0 3 1.346 3 3 0 0.351-0.061 0.694-0.178 1.017 0.061-0.003 0.122-0.004 0.184-0.004 2.202 0 3.994 1.792 3.994 3.994s-1.792 3.994-3.994 3.994z"></path></svg></span>
<span
class="dropzone-label">Add files to media gallery</span>
</div>
</div>
</div>
</div>
<div class="media-library-footer disabled">
<div class="link-default"><span class="link-text">Insert Image</span></div>
</div>
</div><span class="react-resizable-handle" style="touch-action: none;"></span></div>
</div>
</div>
Raw
style.css
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
}
footer,
header {
display: block;
}
video {
display: inline-block;
vertical-align: baseline;
}
[hidden],
template {
display: none;
}
h1 {
font-size: 2em;
margin: 0.67em 0;
}
img {
border: 0;
}
svg:not(:root) {
overflow: hidden;
}
button,
input {
color: inherit;
font: inherit;
margin: 0;
}
button {
overflow: visible;
}
button {
text-transform: none;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
cursor: pointer;
}
button[disabled],
html input[disabled] {
cursor: default;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
input {
line-height: normal;
}
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
padding: 0;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
input[type="search"] {
-webkit-appearance: textfield;
box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
@font-face {
font-family: "Material Design Icons";
src: url(../fonts/materialdesignicons-webfont.eot?v=1.4.57);
src: url(../fonts/materialdesignicons-webfont.eot?#iefix&v=1.4.57)
format("embedded-opentype"),
url(../fonts/materialdesignicons-webfont.woff2?v=1.4.57) format("woff2"),
url(../fonts/materialdesignicons-webfont.woff?v=1.4.57) format("woff"),
url(../fonts/materialdesignicons-webfont.ttf?v=1.4.57) format("truetype"),
url(../fonts/materialdesignicons-webfont.svg?v=1.4.57#materialdesigniconsregular)
format("svg");
font-weight: 400;
font-style: normal;
}
@-webkit-keyframes rotation {
0% {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-moz-keyframes rotation {
0% {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-o-keyframes rotation {
0% {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotation {
0% {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(720deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.novi-button {
-webkit-display: inline-flex;
display: inline-flex;
-webkit-align-items: center;
align-items: center;
cursor: pointer;
height: 34px;
color: #109df7;
font-family: "Open Sans", sans-serif;
font-size: 10px;
font-weight: 400;
letter-spacing: 0.15em;
text-transform: uppercase;
text-decoration: none;
padding-left: 15px;
padding-right: 15px;
-webkit-transition: 0.15s all ease;
transition: 0.15s all ease;
position: relative;
-webkit-user-select: none;
user-select: none;
border-radius: 3px;
}
.novi-button-icon {
height: 18px;
width: 18px;
margin-right: 10px;
float: left;
}
.novi-button-icon > svg {
fill: #109df7;
-webkit-transition: 0.15s all ease;
transition: 0.15s all ease;
}
.novi-button:hover {
color: #10b7f7;
}
.novi-button:hover .novi-button-icon svg {
fill: #10b7f7;
}
.novi-button.disabled {
pointer-events: none;
opacity: 0.5;
}
@-moz-keyframes indeterminate {
0% {
-webkit-transform: translateX(-100%) scaleX(0.2);
-moz-transform: translateX(-100%) scaleX(0.2);
-ms-transform: translateX(-100%) scaleX(0.2);
-o-transform: translateX(-100%) scaleX(0.2);
transform: translateX(-100%) scaleX(0.2);
}
20% {
-webkit-transform: translateX(-40%) scaleX(0.2);
-moz-transform: translateX(-40%) scaleX(0.2);
-ms-transform: translateX(-40%) scaleX(0.2);
-o-transform: translateX(-40%) scaleX(0.2);
transform: translateX(-40%) scaleX(0.2);
}
30% {
-webkit-transform: translateX(0) scaleX(0.5);
-moz-transform: translateX(0) scaleX(0.5);
-ms-transform: translateX(0) scaleX(0.5);
-o-transform: translateX(0) scaleX(0.5);
transform: translateX(0) scaleX(0.5);
}
55% {
-webkit-transform: translateX(100%) scaleX(0.7);
-moz-transform: translateX(100%) scaleX(0.7);
-ms-transform: translateX(100%) scaleX(0.7);
-o-transform: translateX(100%) scaleX(0.7);
transform: translateX(100%) scaleX(0.7);
}
55.99% {
-webkit-transform: scaleX(0);
-moz-transform: scaleX(0);
-ms-transform: scaleX(0);
-o-transform: scaleX(0);
transform: scaleX(0);
}
56% {
-webkit-transform: translateX(-100%) scaleX(0);
-moz-transform: translateX(-100%) scaleX(0);
-ms-transform: translateX(-100%) scaleX(0);
-o-transform: translateX(-100%) scaleX(0);
transform: translateX(-100%) scaleX(0);
}
56.99% {
-webkit-transform: translateX(-100%) scaleX(0.6);
-moz-transform: translateX(-100%) scaleX(0.6);
-ms-transform: translateX(-100%) scaleX(0.6);
-o-transform: translateX(-100%) scaleX(0.6);
transform: translateX(-100%) scaleX(0.6);
}
75% {
-webkit-transform: translateX(-5%) scaleX(0.6);
-moz-transform: translateX(-5%) scaleX(0.6);
-ms-transform: translateX(-5%) scaleX(0.6);
-o-transform: translateX(-5%) scaleX(0.6);
transform: translateX(-5%) scaleX(0.6);
}
85% {
-webkit-transform: translateX(30%) scaleX(0.3);
-moz-transform: translateX(30%) scaleX(0.3);
-ms-transform: translateX(30%) scaleX(0.3);
-o-transform: translateX(30%) scaleX(0.3);
transform: translateX(30%) scaleX(0.3);
}
98% {
-webkit-transform: translateX(100%) scaleX(0.2);
-moz-transform: translateX(100%) scaleX(0.2);
-ms-transform: translateX(100%) scaleX(0.2);
-o-transform: translateX(100%) scaleX(0.2);
transform: translateX(100%) scaleX(0.2);
}
99.99% {
-webkit-transform: scaleX(0);
-moz-transform: scaleX(0);
-ms-transform: scaleX(0);
-o-transform: scaleX(0);
transform: scaleX(0);
}
100% {
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
}
}
@-webkit-keyframes indeterminate {
0% {
-webkit-transform: translateX(-100%) scaleX(0.2);
-moz-transform: translateX(-100%) scaleX(0.2);
-ms-transform: translateX(-100%) scaleX(0.2);
-o-transform: translateX(-100%) scaleX(0.2);
transform: translateX(-100%) scaleX(0.2);
}
20% {
-webkit-transform: translateX(-40%) scaleX(0.2);
-moz-transform: translateX(-40%) scaleX(0.2);
-ms-transform: translateX(-40%) scaleX(0.2);
-o-transform: translateX(-40%) scaleX(0.2);
transform: translateX(-40%) scaleX(0.2);
}
30% {
-webkit-transform: translateX(0) scaleX(0.5);
-moz-transform: translateX(0) scaleX(0.5);
-ms-transform: translateX(0) scaleX(0.5);
-o-transform: translateX(0) scaleX(0.5);
transform: translateX(0) scaleX(0.5);
}
55% {
-webkit-transform: translateX(100%) scaleX(0.7);
-moz-transform: translateX(100%) scaleX(0.7);
-ms-transform: translateX(100%) scaleX(0.7);
-o-transform: translateX(100%) scaleX(0.7);
transform: translateX(100%) scaleX(0.7);
}
55.99% {
-webkit-transform: scaleX(0);
-moz-transform: scaleX(0);
-ms-transform: scaleX(0);
-o-transform: scaleX(0);
transform: scaleX(0);
}
56% {
-webkit-transform: translateX(-100%) scaleX(0);
-moz-transform: translateX(-100%) scaleX(0);
-ms-transform: translateX(-100%) scaleX(0);
-o-transform: translateX(-100%) scaleX(0);
transform: translateX(-100%) scaleX(0);
}
56.99% {
-webkit-transform: translateX(-100%) scaleX(0.6);
-moz-transform: translateX(-100%) scaleX(0.6);
-ms-transform: translateX(-100%) scaleX(0.6);
-o-transform: translateX(-100%) scaleX(0.6);
transform: translateX(-100%) scaleX(0.6);
}
75% {
-webkit-transform: translateX(-5%) scaleX(0.6);
-moz-transform: translateX(-5%) scaleX(0.6);
-ms-transform: translateX(-5%) scaleX(0.6);
-o-transform: translateX(-5%) scaleX(0.6);
transform: translateX(-5%) scaleX(0.6);
}
85% {
-webkit-transform: translateX(30%) scaleX(0.3);
-moz-transform: translateX(30%) scaleX(0.3);
-ms-transform: translateX(30%) scaleX(0.3);
-o-transform: translateX(30%) scaleX(0.3);
transform: translateX(30%) scaleX(0.3);
}
98% {
-webkit-transform: translateX(100%) scaleX(0.2);
-moz-transform: translateX(100%) scaleX(0.2);
-ms-transform: translateX(100%) scaleX(0.2);
-o-transform: translateX(100%) scaleX(0.2);
transform: translateX(100%) scaleX(0.2);
}
99.99% {
-webkit-transform: scaleX(0);
-moz-transform: scaleX(0);
-ms-transform: scaleX(0);
-o-transform: scaleX(0);
transform: scaleX(0);
}
100% {
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
}
}
@-o-keyframes indeterminate {
0% {
-webkit-transform: translateX(-100%) scaleX(0.2);
-moz-transform: translateX(-100%) scaleX(0.2);
-ms-transform: translateX(-100%) scaleX(0.2);
-o-transform: translateX(-100%) scaleX(0.2);
transform: translateX(-100%) scaleX(0.2);
}
20% {
-webkit-transform: translateX(-40%) scaleX(0.2);
-moz-transform: translateX(-40%) scaleX(0.2);
-ms-transform: translateX(-40%) scaleX(0.2);
-o-transform: translateX(-40%) scaleX(0.2);
transform: translateX(-40%) scaleX(0.2);
}
30% {
-webkit-transform: translateX(0) scaleX(0.5);
-moz-transform: translateX(0) scaleX(0.5);
-ms-transform: translateX(0) scaleX(0.5);
-o-transform: translateX(0) scaleX(0.5);
transform: translateX(0) scaleX(0.5);
}
55% {
-webkit-transform: translateX(100%) scaleX(0.7);
-moz-transform: translateX(100%) scaleX(0.7);
-ms-transform: translateX(100%) scaleX(0.7);
-o-transform: translateX(100%) scaleX(0.7);
transform: translateX(100%) scaleX(0.7);
}
55.99% {
-webkit-transform: scaleX(0);
-moz-transform: scaleX(0);
-ms-transform: scaleX(0);
-o-transform: scaleX(0);
transform: scaleX(0);
}
56% {
-webkit-transform: translateX(-100%) scaleX(0);
-moz-transform: translateX(-100%) scaleX(0);
-ms-transform: translateX(-100%) scaleX(0);
-o-transform: translateX(-100%) scaleX(0);
transform: translateX(-100%) scaleX(0);
}
56.99% {
-webkit-transform: translateX(-100%) scaleX(0.6);
-moz-transform: translateX(-100%) scaleX(0.6);
-ms-transform: translateX(-100%) scaleX(0.6);
-o-transform: translateX(-100%) scaleX(0.6);
transform: translateX(-100%) scaleX(0.6);
}
75% {
-webkit-transform: translateX(-5%) scaleX(0.6);
-moz-transform: translateX(-5%) scaleX(0.6);
-ms-transform: translateX(-5%) scaleX(0.6);
-o-transform: translateX(-5%) scaleX(0.6);
transform: translateX(-5%) scaleX(0.6);
}
85% {
-webkit-transform: translateX(30%) scaleX(0.3);
-moz-transform: translateX(30%) scaleX(0.3);
-ms-transform: translateX(30%) scaleX(0.3);
-o-transform: translateX(30%) scaleX(0.3);
transform: translateX(30%) scaleX(0.3);
}
98% {
-webkit-transform: translateX(100%) scaleX(0.2);
-moz-transform: translateX(100%) scaleX(0.2);
-ms-transform: translateX(100%) scaleX(0.2);
-o-transform: translateX(100%) scaleX(0.2);
transform: translateX(100%) scaleX(0.2);
}
99.99% {
-webkit-transform: scaleX(0);
-moz-transform: scaleX(0);
-ms-transform: scaleX(0);
-o-transform: scaleX(0);
transform: scaleX(0);
}
100% {
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
}
}
@keyframes indeterminate {
0% {
-webkit-transform: translateX(-100%) scaleX(0.2);
-moz-transform: translateX(-100%) scaleX(0.2);
-ms-transform: translateX(-100%) scaleX(0.2);
-o-transform: translateX(-100%) scaleX(0.2);
transform: translateX(-100%) scaleX(0.2);
}
20% {
-webkit-transform: translateX(-40%) scaleX(0.2);
-moz-transform: translateX(-40%) scaleX(0.2);
-ms-transform: translateX(-40%) scaleX(0.2);
-o-transform: translateX(-40%) scaleX(0.2);
transform: translateX(-40%) scaleX(0.2);
}
30% {
-webkit-transform: translateX(0) scaleX(0.5);
-moz-transform: translateX(0) scaleX(0.5);
-ms-transform: translateX(0) scaleX(0.5);
-o-transform: translateX(0) scaleX(0.5);
transform: translateX(0) scaleX(0.5);
}
55% {
-webkit-transform: translateX(100%) scaleX(0.7);
-moz-transform: translateX(100%) scaleX(0.7);
-ms-transform: translateX(100%) scaleX(0.7);
-o-transform: translateX(100%) scaleX(0.7);
transform: translateX(100%) scaleX(0.7);
}
55.99% {
-webkit-transform: scaleX(0);
-moz-transform: scaleX(0);
-ms-transform: scaleX(0);
-o-transform: scaleX(0);
transform: scaleX(0);
}
56% {
-webkit-transform: translateX(-100%) scaleX(0);
-moz-transform: translateX(-100%) scaleX(0);
-ms-transform: translateX(-100%) scaleX(0);
-o-transform: translateX(-100%) scaleX(0);
transform: translateX(-100%) scaleX(0);
}
56.99% {
-webkit-transform: translateX(-100%) scaleX(0.6);
-moz-transform: translateX(-100%) scaleX(0.6);
-ms-transform: translateX(-100%) scaleX(0.6);
-o-transform: translateX(-100%) scaleX(0.6);
transform: translateX(-100%) scaleX(0.6);
}
75% {
-webkit-transform: translateX(-5%) scaleX(0.6);
-moz-transform: translateX(-5%) scaleX(0.6);
-ms-transform: translateX(-5%) scaleX(0.6);
-o-transform: translateX(-5%) scaleX(0.6);
transform: translateX(-5%) scaleX(0.6);
}
85% {
-webkit-transform: translateX(30%) scaleX(0.3);
-moz-transform: translateX(30%) scaleX(0.3);
-ms-transform: translateX(30%) scaleX(0.3);
-o-transform: translateX(30%) scaleX(0.3);
transform: translateX(30%) scaleX(0.3);
}
98% {
-webkit-transform: translateX(100%) scaleX(0.2);
-moz-transform: translateX(100%) scaleX(0.2);
-ms-transform: translateX(100%) scaleX(0.2);
-o-transform: translateX(100%) scaleX(0.2);
transform: translateX(100%) scaleX(0.2);
}
99.99% {
-webkit-transform: scaleX(0);
-moz-transform: scaleX(0);
-ms-transform: scaleX(0);
-o-transform: scaleX(0);
transform: scaleX(0);
}
100% {
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
}
}
@keyframes glow {
0% {
transform: translateX(-100%);
left: 0;
}
100% {
transform: translateX(100%);
left: 100%;
}
}
.link-default {
-webkit-user-select: none;
user-select: none;
color: #99a0af;
-webkit-transition: 0.15s all ease;
transition: 0.15s all ease;
cursor: pointer;
text-align: center;
text-decoration: none;
}
.link-default.link-disabled {
opacity: 0.5;
pointer-events: none;
}
.link-default .link-text {
font-family: "Open Sans", sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
line-height: 14px;
text-transform: uppercase;
}
.link-default:hover {
color: #fff;
}
@-webkit-keyframes intro-scale-infinite {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
@keyframes intro-scale-infinite {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
@-webkit-keyframes intro-fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes intro-fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-webkit-keyframes intro-fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes intro-fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.react-resizable {
position: relative;
}
.react-resizable-handle {
position: absolute;
width: 20px;
height: 20px;
bottom: 0;
right: 0;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAALCAYAAABLcGxfAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABmSURBVHgBrc+xCYAwEAXQy3kDuYpriGiVtJZC7F3DUXQgUYlwEETPX/i7fN6HHNHfqX0s2xAXfcsXFqZ526nSziF4GsNqDt7w48DCKYzg/HBBcH64Q7H215cKPnoEm2n80KXRvT8BifhSlOEjSy0AAAAASUVORK5CYII=);
background-position: bottom right;
padding: 0 3px 3px 0;
background-repeat: no-repeat;
background-origin: content-box;
box-sizing: border-box;
cursor: se-resize;
}
.novi-input {
display: inline-block;
position: relative;
-webkit-user-select: none;
user-select: none;
border-radius: 3px;
width: 100%;
font-family: "Open Sans", sans-serif;
}
.novi-input input {
background: #171b23;
color: #fff;
width: 100%;
border-radius: 3px;
outline: 0;
border: 1px solid #171b23;
height: 30px;
line-height: 16px;
font-size: 11px;
padding: 7px 12px;
box-sizing: border-box;
-webkit-user-select: initial;
user-select: initial;
}
.novi-input input[disabled] {
opacity: 0.7;
cursor: not-allowed;
}
.novi-input-label {
position: absolute;
left: 12px;
top: 9px;
font-size: 11px;
color: #fff;
right: 12px;
display: none;
pointer-events: none;
}
.novi-input-with-icon input {
padding-left: 31px;
}
.novi-input-with-icon .novi-input-label {
left: 31px;
}
.novi-input .icon {
position: absolute;
left: 2px;
top: 0;
width: 30px;
height: 30px;
}
.novi-input .icon > svg {
width: 16px;
height: 16px;
fill: #fff;
}
input[type="file"],
input[type="file"]::-webkit-file-upload-button {
cursor: pointer;
}
.novi-file-input-wrap {
position: relative;
}
.novi-file-input {
position: absolute;
top: 0;
left: 0;
width: 100%;
opacity: 0;
z-index: 1;
}
.novi-file-input-text {
position: relative;
z-index: -1;
}
@-webkit-keyframes Select-animation-fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes Select-animation-fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes Select-animation-spin {
to {
transform: rotate(1turn);
}
}
@-webkit-keyframes Select-animation-spin {
to {
-webkit-transform: rotate(1turn);
}
}
.add-content-wrap {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
}
.add-content-wrap.active .add-content-inner {
pointer-events: auto;
}
.add-content-inner {
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
.add-content {
position: absolute;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-family: "Open Sans", sans-serif;
}
[class*="editor-expand"] {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.novi-icon {
width: 40px;
height: 40px;
margin: 0;
padding: 0;
display: inline-block;
position: relative;
border-radius: 2px;
background: #1f2531;
}
.novi-icon > * {
fill: #fff;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.novi-icon > * > * {
vertical-align: top;
}
.novi-icon.active svg {
fill: #109df7;
}
.novi-icon.active.disabled,
.novi-icon.disabled {
pointer-events: none;
}
.novi-icon.active.disabled svg,
.novi-icon.disabled svg {
opacity: 0.3;
}
.novi-icon.button-type {
cursor: pointer;
}
.link-default {
-webkit-user-select: none;
user-select: none;
color: #99a0af;
-webkit-transition: 0.15s all ease;
transition: 0.15s all ease;
cursor: pointer;
text-align: center;
text-decoration: none;
}
.link-default.link-disabled {
opacity: 0.5;
pointer-events: none;
}
.link-default .link-text {
font-family: "Open Sans", sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
line-height: 14px;
text-transform: uppercase;
}
.link-default:hover {
color: #fff;
}
@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-webkit-keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes intro-fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@-webkit-keyframes move-from-left {
from {
transform: translate(-210%, -50%);
}
to {
transform: translate(-98%, -50%);
}
}
@keyframes move-from-left {
from {
transform: translate(-210%, -50%);
}
to {
transform: translate(-98%, -50%);
}
}
@-webkit-keyframes move-from-top {
from {
transform: translate(-50%, -175%);
}
to {
transform: translate(-50%, -100%);
}
}
@keyframes move-from-top {
from {
transform: translate(-50%, -175%);
}
to {
transform: translate(-50%, -100%);
}
}
@-webkit-keyframes move-from-right {
from {
transform: translate(75%, -50%);
}
to {
transform: translate(0, -50%);
}
}
@keyframes move-from-right {
from {
transform: translate(75%, -50%);
}
to {
transform: translate(0, -50%);
}
}
@-webkit-keyframes move-from-bottom {
from {
transform: translate(-50%, 75%);
}
to {
transform: translate(-50%, 0);
}
}
@keyframes move-from-bottom {
from {
transform: translate(-50%, 75%);
}
to {
transform: translate(-50%, 0);
}
}
@-webkit-keyframes from-left-to-right {
from {
transform: translate(-98%, -50%);
}
to {
transform: translate(-2%, -50%);
}
}
@keyframes from-left-to-right {
from {
transform: translate(-98%, -50%);
}
to {
transform: translate(-2%, -50%);
}
}
@-webkit-keyframes from-left-to-top {
from {
transform: translate(-100%, -50%);
}
to {
transform: translate(-50%, -100%);
}
}
@keyframes from-left-to-top {
from {
transform: translate(-100%, -50%);
}
to {
transform: translate(-50%, -100%);
}
}
@-webkit-keyframes from-left-to-bottom {
from {
transform: translate(-100%, -50%);
}
to {
transform: translate(-50%, 0);
}
}
@keyframes from-left-to-bottom {
from {
transform: translate(-100%, -50%);
}
to {
transform: translate(-50%, 0);
}
}
@-webkit-keyframes from-top-to-right {
from {
transform: translate(-50%, -100%);
}
to {
transform: translate(0, -50%);
}
}
@keyframes from-top-to-right {
from {
transform: translate(-50%, -100%);
}
to {
transform: translate(0, -50%);
}
}
@-webkit-keyframes from-top-to-bottom {
from {
transform: translate(-50%, -100%);
}
to {
transform: translate(-50%, 0);
}
}
@keyframes from-top-to-bottom {
from {
transform: translate(-50%, -100%);
}
to {
transform: translate(-50%, 0);
}
}
@-webkit-keyframes from-top-to-left {
from {
transform: translate(-50%, -100%);
}
to {
transform: translate(-100%, -50%);
}
}
@keyframes from-top-to-left {
from {
transform: translate(-50%, -100%);
}
to {
transform: translate(-100%, -50%);
}
}
@-webkit-keyframes from-right-to-left {
from {
transform: translate(-2%, -50%);
}
to {
transform: translate(-98%, -50%);
}
}
@keyframes from-right-to-left {
from {
transform: translate(-2%, -50%);
}
to {
transform: translate(-98%, -50%);
}
}
@-webkit-keyframes from-right-to-top {
from {
transform: translate(0, -50%);
}
to {
transform: translate(-50%, -100%);
}
}
@keyframes from-right-to-top {
from {
transform: translate(0, -50%);
}
to {
transform: translate(-50%, -100%);
}
}
@-webkit-keyframes from-right-to-bottom {
from {
transform: translate(0, -50%);
}
to {
transform: translate(-50%, 0);
}
}
@keyframes from-right-to-bottom {
from {
transform: translate(0, -50%);
}
to {
transform: translate(-50%, 0);
}
}
@-webkit-keyframes from-bottom-to-left {
from {
transform: translate(-50%, 0);
}
to {
transform: translate(-100%, -50%);
}
}
@keyframes from-bottom-to-left {
from {
transform: translate(-50%, 0);
}
to {
transform: translate(-100%, -50%);
}
}
@-webkit-keyframes from-bottom-to-top {
from {
transform: translate(-50%, 0);
}
to {
transform: translate(-50%, -100%);
}
}
@keyframes from-bottom-to-top {
from {
transform: translate(-50%, 0);
}
to {
transform: translate(-50%, -100%);
}
}
@-webkit-keyframes from-bottom-to-right {
from {
transform: translate(-50%, 0);
}
to {
transform: translate(0, -50%);
}
}
@keyframes from-bottom-to-right {
from {
transform: translate(-50%, 0);
}
to {
transform: translate(0, -50%);
}
}
.novi-tooltip {
padding: 10px 16px !important;
background-color: #1c222e !important;
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.25);
}
.novi-tooltip.show {
opacity: 1 !important;
}
.novi-tooltip .novi-tooltip-description,
.novi-tooltip .novi-tooltip-title {
font-family: "Open Sans", sans-serif;
font-weight: 600;
font-size: 10px;
letter-spacing: 0.06em;
color: #fff;
line-height: 14px;
margin: 0;
text-align: center;
}
.novi-tooltip .novi-tooltip-title {
text-transform: uppercase;
}
.novi-tooltip .novi-tooltip-description {
color: #6e778a;
font-weight: 400;
letter-spacing: normal;
}
@-webkit-keyframes rotation {
0% {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-moz-keyframes rotation {
0% {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-o-keyframes rotation {
0% {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotation {
0% {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(720deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-moz-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-o-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.react-resizable {
position: relative;
}
.react-resizable-handle {
position: absolute;
width: 20px;
height: 20px;
bottom: 0;
right: 0;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAALCAYAAABLcGxfAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABmSURBVHgBrc+xCYAwEAXQy3kDuYpriGiVtJZC7F3DUXQgUYlwEETPX/i7fN6HHNHfqX0s2xAXfcsXFqZ526nSziF4GsNqDt7w48DCKYzg/HBBcH64Q7H215cKPnoEm2n80KXRvT8BifhSlOEjSy0AAAAASUVORK5CYII=);
background-position: bottom right;
padding: 0 3px 3px 0;
background-repeat: no-repeat;
background-origin: content-box;
box-sizing: border-box;
cursor: se-resize;
}
.media-library-inner-wrap {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: inline-block;
}
.media-library-wrap {
position: absolute;
z-index: 9;
left: 0;
right: 0;
top: 0;
bottom: 0;
-webkit-user-select: none;
user-select: none;
font-family: "Open Sans", sans-serif;
background: rgba(25, 29, 40, 0.7);
height: 100%;
}
.media-library {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
-webkit-border-radius: 3px;
border-radius: 3px;
background: #181d27;
border: 1px solid #090a0d;
}
.media-library-header {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: space-between;
justify-content: space-between;
border-bottom: 1px solid #090a0d;
background: #1f2532;
position: relative;
z-index: 1;
}
.media-library-header-left-part {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
max-width: calc(100% - 100px);
resize: none;
}
.media-library-header-right-part {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
resize: none;
}
.media-library-download-project-items,
.media-library-header-left-part-item {
display: inline-block;
height: 40px;
width: auto;
position: relative;
font-size: 11px;
line-height: 40px;
margin-left: 10px;
color: #fff;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.media-library-download-project-items {
margin-right: 10px;
cursor: pointer;
}
.media-library-item:hover .media-library-item-dimension-label {
bottom: 4px;
opacity: 1;
}
.media-library-item-dimension-label {
font-size: 10px;
line-height: 10px;
position: absolute;
bottom: -20px;
left: 50%;
color: #fff;
transform: translateX(-50%);
padding: 2px 4px;
box-sizing: border-box;
display: block;
background: #000;
border-radius: 2px;
font-family: "Open Sans", sans-serif;
white-space: nowrap;
opacity: 0;
transition: 0.15s all ease;
}
.media-library-item-link-icon {
position: absolute;
right: -5px;
top: -5px;
width: 18px;
height: 18px;
background: #109df7;
border-radius: 50%;
font-size: 0;
z-index: 2;
}
.media-library-item-link-icon svg {
fill: #fff;
}
.media-library-items-link-description {
font-size: 11px;
color: #6e778a;
display: flex;
align-items: center;
}
.media-library-items-container-header-left-part {
display: flex;
align-items: center;
}
.media-library-items-link-description .icon {
width: 14px;
height: 14px;
background: #109df7;
border-radius: 50%;
font-size: 0;
z-index: 2;
display: inline-block;
}
.media-library-items-link-description .icon + span {
margin-left: 5px;
}
.media-library-items-link-description .icon svg {
fill: #fff;
}
.media-library-download-project-items svg,
.media-library-header-left-part-item svg {
fill: #fff;
vertical-align: top;
}
.media-library-download-project-items > svg,
.media-library-header-left-part-item > svg {
width: 20px;
height: 20px;
margin-top: 10px;
}
.media-library-download-project-items > svg {
width: 18px;
height: 18px;
}
.media-library-close-icon {
position: relative;
width: 40px;
height: 40px;
cursor: pointer;
}
.media-library-close-icon:before {
content: "";
position: absolute;
left: 0;
width: 1px;
height: 20px;
top: 50%;
margin-top: -10px;
background: #090a0d;
}
.media-library-close-icon svg {
width: 16px;
height: 16px;
fill: #fff;
position: absolute;
left: 50%;
top: 50%;
margin-top: -8px;
margin-left: -8px;
}
.media-library-body {
display: flex;
justify-content: space-between;
height: calc(100% - 41px);
}
.media-library-body-right-part {
width: calc(100% - 200px);
height: 100%;
overflow: scroll;
box-sizing: border-box;
flex-shrink: 0;
max-width: 80%;
}
.media-library-body-right-part::-webkit-scrollbar {
width: 8px;
height: 8px;
background: #181d27;
}
.media-library-body-right-part::-webkit-scrollbar-thumb {
height: 6px;
width: 6px;
border: 2px solid transparent;
background-clip: padding-box;
-webkit-border-radius: 4px;
background-color: #109df7;
}
.media-library-body-right-part::-webkit-scrollbar-button {
width: 0;
height: 0;
display: none;
}
.media-library-body-right-part::-webkit-scrollbar-corner {
background-color: transparent;
}
.media-library-items-container {
padding: 20px;
padding-right: 12px;
height: 100%;
box-sizing: border-box;
}
.media-library-items-container .dropzone-overlay {
content: "";
position: absolute;
right: 0;
bottom: 0;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.75);
display: none;
}
.media-library-items-container .dropzone-overlay .icon {
height: 100px;
width: 100px;
margin-left: 10px;
display: inline-block;
position: absolute;
left: 58%;
top: 50%;
transform: translate(-50%, -50%);
margin-top: -30px;
}
.media-library-items-container .dropzone-overlay .icon > svg {
fill: #109df7;
}
.media-library-items-container .dropzone-label {
position: absolute;
top: 50%;
left: 59%;
color: #fff;
transform: translate(-50%, -50%);
margin-top: 30px;
}
.media-library-items-container.dropzone .dropzone-label,
.media-library-items-container.dropzone .dropzone-overlay {
display: block;
}
.media-library-items-container-header {
display: flex;
align-items: center;
justify-content: space-between;
padding-left: 6px;
padding-right: 6px;
}
.media-library-items-container-header .media-library-items-count {
font-size: 11px;
color: #6e778a;
}
.media-library-items-container-header .media-library-upload-button {
position: absolute;
left: 0;
height: 100%;
max-width: 100%;
z-index: 2;
opacity: 0;
cursor: pointer;
}
.media-library-items-container-header .media-library-items-upload {
position: relative;
font-size: 11px;
line-height: 11px;
color: #fff;
display: flex;
align-items: center;
cursor: pointer;
}
.media-library-items-container-header .media-library-items-upload .icon {
height: 20px;
width: 20px;
margin-left: 10px;
display: inline-block;
}
.media-library-items-container-header .media-library-items-upload .icon > svg {
fill: #109df7;
}
.media-library-items-container-body {
margin-top: 15px;
font-size: 0;
}
.media-library-item {
background: #10131a;
border-radius: 3px;
cursor: pointer;
border: 1px solid transparent;
transition: all 0.25s ease;
position: relative;
}
.media-library-item:hover {
box-shadow: inset 0 0 0 1px rgba(16, 157, 247, 0.75);
}
.media-library-item.active:hover {
box-shadow: none;
}
.media-library-item.active {
border-color: #109df7;
}
.media-library-item-body {
padding-bottom: 100%;
overflow: hidden;
position: relative;
}
.media-library-item-body-content {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
width: 100%;
}
.media-library-item-preview {
height: 100%;
position: absolute;
left: 5px;
right: 5px;
top: 0;
}
.media-library-item-preview-img {
width: 100%;
height: 100%;
background-size: contain;
-webkit-background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
}
.media-library-item-preview-icon {
display: block;
position: absolute;
left: -5px;
right: -5px;
top: 0;
height: 100%;
background: rgba(0, 0, 0, 0.2);
}
.media-library-item-preview-icon svg {
fill: #fff;
width: 25%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.media-library-body-left-part {
background: #1f2532;
min-width: 200px;
flex-shrink: 1;
max-width: 20%;
width: 100%;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
z-index: 1;
}
.media-library-body-left-part-top {
height: 55px;
flex-shrink: 0;
font-size: 11px;
line-height: 55px;
color: #fff;
letter-spacing: 0.0545em;
margin-left: 20px;
font-weight: 500;
}
.media-library-body-left-part-middle {
flex-shrink: 1;
overflow-y: scroll;
}
.media-library-body-left-part-middle::-webkit-scrollbar {
width: 0;
height: 0;
}
.media-library-body-left-part-middle::-webkit-scrollbar-thumb {
height: 0;
width: 0;
border: none;
background-clip: padding-box;
}
.media-library-body-left-part-middle::-webkit-scrollbar-button {
width: 0;
height: 0;
display: none;
}
.media-library-body-left-part-middle::-webkit-scrollbar-corner {
background-color: transparent;
}
.media-library-body-left-part-bottom {
flex-shrink: 0;
margin-bottom: 10px;
}
.media-library-category-list-item .file-count,
.media-library-category-list-item .title {
font-size: 11px;
line-height: 20px;
color: #fff;
font-weight: 400;
}
.media-library-category-list-item .title-wrap {
flex-shrink: 1;
position: relative;
z-index: 0;
display: inline-block;
margin-left: 10px;
cursor: pointer;
overflow: hidden;
font-size: 0;
background: inherit;
}
.media-library-category-list-item .title {
display: inline-block;
white-space: pre;
text-overflow: ellipsis;
overflow: hidden;
max-width: 100%;
}
.media-library-category-list-item .input-title[disabled] {
cursor: pointer;
user-select: none;
z-index: -1;
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.media-library-category-list-item .input-title {
position: absolute;
left: 0;
width: 100%;
top: 0;
border: none;
font-size: 11px;
line-height: 20px;
color: #fff;
background: inherit;
height: 20px;
font-family: "Open Sans", sans-serif;
z-index: 1;
outline: 0;
pointer-events: auto;
box-sizing: border-box;
padding: 0;
}
.media-library-category-list-item .file-count {
margin-left: 4px;
}
.media-library-category-list-item .icon {
width: 20px;
height: 20px;
flex-shrink: 0;
}
.media-library-category-list-item .icon svg {
fill: #6e778a;
}
.media-library-category-list-item-add .title {
font-size: 11px;
line-height: 20px;
color: #fff;
height: 20px;
margin-left: 10px;
}
.media-library-category-list-item-add .icon {
width: 20px;
height: 20px;
flex-shrink: 0;
display: inline-block;
}
.media-library-category-list-item-add .icon svg {
fill: #6e778a;
}
.media-library-category-list-divider {
height: 1px;
background: #0c0e13;
margin: 12px 20px 8px;
}
.media-library-category-list-item,
.media-library-category-list-item-add {
height: 31px;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
position: relative;
padding-left: 20px;
padding-right: 20px;
-webkit-align-items: center;
align-items: center;
cursor: pointer;
border: 1px solid transparent;
background: #1f2532;
}
.media-library-category-list-item.active {
background: #181d27;
}
.media-library-category-list-item.active .icon svg {
fill: #109df7;
}
.media-library-category-list-item.disabled {
cursor: default;
}
.media-library-category-list-item.disabled .file-count,
.media-library-category-list-item.disabled .title {
color: #6e778a;
}
.media-shell {
margin-right: auto;
margin-left: auto;
padding-left: 6px;
padding-right: 6px;
box-sizing: border-box;
}
.media-shell {
min-width: 300px;
width: 100%;
}
.media-range {
margin-left: -6px;
margin-right: -6px;
}
[class*="cell-"] {
padding-left: 6px;
padding-right: 6px;
box-sizing: border-box;
}
.media-range {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex: 0 1 auto;
-webkit-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
transform: translateY(-12px);
margin-bottom: -12px;
}
.media-range > * {
margin-top: 12px;
}
.media-range > [class*="cell"] {
-ms-flex: 0 0 auto;
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
-webkit-flex-basis: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
max-width: 100%;
}
.media-range > .cell-1 {
-webkit-flex-basis: 8.33333%;
-ms-flex-preferred-size: 8.33333%;
flex-basis: 8.33333%;
max-width: 8.33333%;
}
.media-range > .cell-2 {
-webkit-flex-basis: 16.66667%;
-ms-flex-preferred-size: 16.66667%;
flex-basis: 16.66667%;
max-width: 16.66667%;
}
.media-range > .cell-1-5 {
-webkit-flex-basis: 20%;
-ms-flex-preferred-size: 20%;
flex-basis: 20%;
max-width: 20%;
}
.media-range > .cell-3 {
-webkit-flex-basis: 25%;
-ms-flex-preferred-size: 25%;
flex-basis: 25%;
max-width: 25%;
}
.media-range > .cell-4 {
-webkit-flex-basis: 33.33333%;
-ms-flex-preferred-size: 33.33333%;
flex-basis: 33.33333%;
max-width: 33.33333%;
}
.media-range > .cell-5 {
-webkit-flex-basis: 41.66667%;
-ms-flex-preferred-size: 41.66667%;
flex-basis: 41.66667%;
max-width: 41.66667%;
}
.media-range > .cell-6 {
-webkit-flex-basis: 50%;
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
max-width: 50%;
}
.media-range > .cell-7 {
-webkit-flex-basis: 58.33333%;
-ms-flex-preferred-size: 58.33333%;
flex-basis: 58.33333%;
max-width: 58.33333%;
}
.media-range > .cell-8 {
-webkit-flex-basis: 66.66667%;
-ms-flex-preferred-size: 66.66667%;
flex-basis: 66.66667%;
max-width: 66.66667%;
}
.media-range > .cell-9 {
-webkit-flex-basis: 75%;
-ms-flex-preferred-size: 75%;
flex-basis: 75%;
max-width: 75%;
}
.media-range > .cell-10 {
-webkit-flex-basis: 83.33333%;
-ms-flex-preferred-size: 83.33333%;
flex-basis: 83.33333%;
max-width: 83.33333%;
}
.media-range > .cell-11 {
-webkit-flex-basis: 91.66667%;
-ms-flex-preferred-size: 91.66667%;
flex-basis: 91.66667%;
max-width: 91.66667%;
}
.media-range > .cell-12 {
-webkit-flex-basis: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
max-width: 100%;
}
@-webkit-keyframes rotation {
0% {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-moz-keyframes rotation {
0% {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-o-keyframes rotation {
0% {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotation {
0% {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(720deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.media-library-footer {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: flex-end;
justify-content: flex-end;
border-top: 1px solid #090a0d;
background: #1f2532;
height: 40px;
padding-left: 20px;
padding-right: 20px;
position: relative;
}
.media-library-footer.disabled .link-default {
opacity: 0.5;
}
@keyframes rcSliderTooltipZoomDownIn {
0% {
opacity: 0;
transform-origin: 50% 100%;
transform: scale(0, 0);
}
100% {
transform-origin: 50% 100%;
transform: scale(1, 1);
}
}
@keyframes rcSliderTooltipZoomDownOut {
0% {
transform-origin: 50% 100%;
transform: scale(1, 1);
}
100% {
opacity: 0;
transform-origin: 50% 100%;
transform: scale(0, 0);
}
}
body,
html {
width: 100%;
height: 100%;
overflow: hidden;
}
.media-library-wrap {
z-index: 9 !important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment