]> BookStack Code Mirror - bookstack/blob - resources/assets/sass/_image-manager.scss
Added issue template
[bookstack] / resources / assets / sass / _image-manager.scss
1 .overlay {
2   background-color: rgba(0, 0, 0, 0.2);
3   position: fixed;
4   z-index: 95536;
5   width: 100%;
6   height: 100%;
7   min-width: 100%;
8   min-height: 100%;
9   top: 0;
10   left: 0;
11   right: 0;
12   bottom: 0;
13 }
14
15 .image-manager-body {
16   background-color: #FFF;
17   max-height: 90%;
18   width: 90%;
19   height: 90%;
20   margin: 2% 5%;
21   border-radius: 4px;
22   box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.3);
23   overflow: hidden;
24   position: fixed;
25   top: 0;
26   bottom: 0;
27   left: 0;
28   z-index: 999;
29   display: flex;
30   h1, h2, h3 {
31     font-weight: 300;
32   }
33 }
34
35 #image-manager .dropzone-container {
36   position: relative;
37   border: 3px dashed #DDD;
38 }
39
40 .image-manager-bottom {
41   position: absolute;
42   bottom: 0;
43   right: 0;
44 }
45
46 .image-manager-list .image {
47   display: block;
48   position: relative;
49   border-radius: 0;
50   float: left;
51   margin: 0;
52   cursor: pointer;
53   width: (100%/6);
54   height: auto;
55   border: 1px solid #DDD;
56   box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
57   transition: all cubic-bezier(.4, 0, 1, 1) 160ms;
58   overflow: hidden;
59   &.selected {
60     transform: scale3d(0.92, 0.92, 0.92);
61     border: 1px solid #444;
62     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
63   }
64   img {
65     width: 100%;
66     max-width: 100%;
67     display: block;
68   }
69   .image-meta {
70     position: absolute;
71     width: 100%;
72     bottom: 0;
73     left: 0;
74     color: #EEE;
75     background-color: rgba(0, 0, 0, 0.4);
76     font-size: 10px;
77     padding: 3px 4px;
78     span {
79       display: block;
80     }
81   }
82   @include smaller-than($xl) {
83     width: (100%/4);
84   }
85   @include smaller-than($m) {
86     .image-meta {
87       display: none;
88     }
89   }
90 }
91
92 #image-manager .load-more {
93   display: block;
94   text-align: center;
95   background-color: #EEE;
96   padding: $-s $-m;
97   color: #AAA;
98   clear: both;
99   font-size: 20px;
100   cursor: pointer;
101   font-style: italic;
102 }
103
104 .image-manager-sidebar {
105   width: 300px;
106   height: 100%;
107   margin-left: 1px;
108   padding: 0 $-l;
109   border-left: 1px solid #DDD;
110 }
111
112 .image-manager-close {
113   position: absolute;
114   top: 0;
115   right: 0;
116   margin: 0;
117   border-radius: 0;
118 }
119
120 .image-manager-list {
121   overflow-y: scroll;
122   flex: 1;
123 }
124
125 .image-manager-content {
126   display: flex;
127   flex-direction: column;
128   height: 100%;
129   flex: 1;
130   .container {
131     width: 100%;
132   }
133   .full-tab {
134     text-align: center;
135   }
136 }
137
138 // Dropzone
139 /*
140  * The MIT License
141  * Copyright (c) 2012 Matias Meno <[email protected]>
142  */
143 .dz-message {
144   font-size: 1.4em;
145   font-style: italic;
146   color: #aaa;
147   text-align: center;
148   cursor: pointer;
149   padding: $-xl $-m;
150   transition: all ease-in-out 120ms;
151 }
152
153 .dz-drag-hover .dz-message {
154   background-color: rgb(16, 126, 210);
155   color: #EEE;
156 }
157
158 @keyframes passing-through {
159   0% {
160     opacity: 0;
161     transform: translateY(40px);
162   }
163   30%, 70% {
164     opacity: 1;
165     transform: translateY(0px);
166   }
167   100% {
168     opacity: 0;
169     transform: translateY(-40px);
170   }
171 }
172
173 @keyframes slide-in {
174   0% {
175     opacity: 0;
176     transform: translateY(40px);
177   }
178   30% {
179     opacity: 1;
180     transform: translateY(0px);
181   }
182 }
183
184 @keyframes pulse {
185   0% {
186     transform: scale(1);
187   }
188   10% {
189     transform: scale(1.1);
190   }
191   20% {
192     transform: scale(1);
193   }
194 }
195
196 .dropzone, .dropzone * {
197   box-sizing: border-box;
198 }
199
200 .dz-preview {
201   position: relative;
202   display: inline-block;
203   vertical-align: top;
204   margin: 12px;
205   min-height: 80px;
206 }
207
208 .dz-preview:hover {
209   z-index: 1000;
210 }
211
212 .dz-preview:hover .dz-details {
213   opacity: 1;
214 }
215
216 .dz-preview.dz-file-preview .dz-image {
217   border-radius: 4px;
218   background: #999;
219   background: linear-gradient(to bottom, #eee, #ddd);
220 }
221
222 .dz-preview.dz-file-preview .dz-details {
223   opacity: 1;
224 }
225
226 .dz-preview.dz-image-preview {
227   background: white;
228 }
229
230 .dz-preview.dz-image-preview .dz-details {
231   transition: opacity 0.2s linear;
232 }
233
234 .dz-preview .dz-remove {
235   font-size: 14px;
236   text-align: center;
237   display: block;
238   cursor: pointer;
239   border: none;
240 }
241
242 .dz-preview .dz-remove:hover {
243   text-decoration: underline;
244 }
245
246 .dz-preview:hover .dz-details {
247   opacity: 1;
248 }
249
250 .dz-preview .dz-details {
251   z-index: 20;
252   position: absolute;
253   top: 0;
254   left: 0;
255   opacity: 0;
256   font-size: 10px;
257   min-width: 100%;
258   max-width: 100%;
259   padding: 6px 3px;
260   text-align: center;
261   color: rgba(0, 0, 0, 0.9);
262   line-height: 150%;
263 }
264
265 .dz-preview .dz-details .dz-size {
266   margin-bottom: 0.5em;
267   font-size: 12px;
268 }
269
270 .dz-preview .dz-details .dz-filename {
271   white-space: nowrap;
272 }
273
274 .dz-preview .dz-details .dz-filename:hover span {
275   border: 1px solid rgba(200, 200, 200, 0.8);
276   background-color: rgba(255, 255, 255, 0.8);
277 }
278
279 .dz-preview .dz-details .dz-filename:not(:hover) {
280   overflow: hidden;
281   text-overflow: ellipsis;
282 }
283
284 .dz-preview .dz-details .dz-filename:not(:hover) span {
285   border: 1px solid transparent;
286 }
287
288 .dz-preview .dz-details .dz-filename span, .dz-preview .dz-details .dz-size span {
289   background-color: rgba(255, 255, 255, 0.4);
290   padding: 0 0.4em;
291   border-radius: 3px;
292 }
293
294 .dz-preview:hover .dz-image img {
295   filter: blur(8px);
296 }
297
298 .dz-preview .dz-image {
299   border-radius: 4px;
300   overflow: hidden;
301   width: 80px;
302   height: 80px;
303   position: relative;
304   display: block;
305   z-index: 10;
306 }
307
308 .dz-preview .dz-image img {
309   display: block;
310 }
311
312 .dz-preview.dz-success .dz-success-mark {
313   animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
314 }
315
316 .dz-preview.dz-error .dz-error-mark {
317   opacity: 1;
318   animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
319 }
320
321 .dz-preview .dz-success-mark, .dz-preview .dz-error-mark {
322   pointer-events: none;
323   opacity: 0;
324   z-index: 500;
325   position: absolute;
326   display: block;
327   top: 50%;
328   left: 50%;
329   margin-left: -27px;
330   margin-top: -27px;
331 }
332
333 .dz-preview .dz-success-mark svg, .dz-preview .dz-error-mark svg {
334   display: block;
335   width: 54px;
336   height: 54px;
337 }
338
339 .dz-preview.dz-processing .dz-progress {
340   opacity: 1;
341   transition: all 0.2s linear;
342 }
343
344 .dz-preview.dz-complete .dz-progress {
345   opacity: 0;
346   transition: opacity 0.4s ease-in;
347 }
348
349 .dz-preview:not(.dz-processing) .dz-progress {
350   animation: pulse 6s ease infinite;
351 }
352
353 .dz-preview .dz-progress {
354   opacity: 1;
355   z-index: 1000;
356   pointer-events: none;
357   position: absolute;
358   height: 16px;
359   left: 50%;
360   top: 50%;
361   margin-top: -8px;
362   width: 80px;
363   margin-left: -40px;
364   background: rgba(255, 255, 255, 0.9);
365   transform: scale(1);
366   border-radius: 8px;
367   overflow: hidden;
368 }
369
370 .dz-preview .dz-progress .dz-upload {
371   background: #333;
372   background: linear-gradient(to bottom, #666, #444);
373   position: absolute;
374   top: 0;
375   left: 0;
376   bottom: 0;
377   width: 0;
378   transition: width 300ms ease-in-out;
379 }
380
381 .dz-preview.dz-error .dz-error-message {
382   display: block;
383 }
384
385 .dz-preview.dz-error:hover .dz-error-message {
386   opacity: 1;
387   pointer-events: auto;
388 }
389
390 .dz-preview .dz-error-message {
391   pointer-events: none;
392   z-index: 1000;
393   position: absolute;
394   display: block;
395   display: none;
396   opacity: 0;
397   transition: opacity 0.3s ease;
398   border-radius: 4px;
399   font-size: 11.5px;
400   line-height: 1.2;
401   top: 88px;
402   left: -26px;
403   width: 148px;
404   background: $negative;
405   padding: $-xs;
406   color: white;
407 }
408
409 .dz-preview .dz-error-message:after {
410   content: '';
411   position: absolute;
412   top: -6px;
413   left: 64px;
414   width: 0;
415   height: 0;
416   border-left: 6px solid transparent;
417   border-right: 6px solid transparent;
418   border-bottom: 6px solid $negative;
419 }