]> BookStack Code Mirror - bookstack/blob - resources/assets/sass/_components.scss
Update settings.php
[bookstack] / resources / assets / sass / _components.scss
1 // System wide notifications
2 [notification] {
3   position: fixed;
4   top: 0;
5   right: 0;
6   margin: $-xl*2 $-xl;
7   padding: $-l $-xl;
8   background-color: #EEE;
9   border-radius: 3px;
10   box-shadow: $bs-med;
11   z-index: 999999;
12   cursor: pointer;
13   max-width: 360px;
14   transition: transform ease-in-out 280ms;
15   transform: translate3d(580px, 0, 0);
16   display: grid;
17   grid-template-columns: 64px 1fr;
18   span, svg {
19     vertical-align: middle;
20     justify-self: center;
21     align-self: center;
22   }
23   svg {
24     fill: #EEEEEE;
25     width: 4em;
26     padding-right: $-m;
27   }
28   span {
29     vertical-align: middle;
30     line-height: 1.3;
31   }
32   &.pos {
33     background-color: $positive;
34     color: #EEE;
35   }
36   &.neg {
37     background-color: $negative;
38     color: #EEE;
39   }
40   &.warning {
41     background-color: $secondary;
42     color: #EEE;
43   }
44   &.showing {
45     transform: translate3d(0, 0, 0);
46   }
47   &.showing:hover {
48     transform: translate3d(0, -2px, 0);
49   }
50 }
51
52 [chapter-toggle] {
53   cursor: pointer;
54   margin: 0;
55   transition: all ease-in-out 180ms;
56   user-select: none;
57   svg[data-icon="caret-right"] {
58     transition: all ease-in-out 180ms;
59     transform: rotate(0deg);
60     transform-origin: 25% 50%;
61   }
62   &.open svg[data-icon="caret-right"] {
63     transform: rotate(90deg);
64   }
65 }
66
67 [overlay] {
68   background-color: rgba(0, 0, 0, 0.333);
69   position: fixed;
70   z-index: 95536;
71   width: 100%;
72   height: 100%;
73   min-width: 100%;
74   min-height: 100%;
75   top: 0;
76   left: 0;
77   right: 0;
78   bottom: 0;
79   align-items: center;
80   justify-content: center;
81   display: none;
82 }
83
84 .popup-body-wrap {
85   display: flex;
86 }
87
88 .popup-body {
89   background-color: #FFF;
90   max-height: 90%;
91   width: 1200px;
92   height: auto;
93   margin: 2% 5%;
94   border-radius: 4px;
95   box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.3);
96   overflow: hidden;
97   z-index: 999;
98   display: flex;
99   flex-direction: column;
100   &.small {
101     margin: 2% auto;
102     width: 800px;
103     max-width: 90%;
104   }
105   &:before {
106     display: flex;
107     align-self: flex-start;
108   }
109   .popup-content {
110     overflow-y: auto;
111   }
112 }
113
114 .corner-button {
115   position: absolute;
116   top: 0;
117   right: 0;
118   margin: 0;
119   height: 40px;
120   border-radius: 0;
121   box-shadow: none;
122 }
123
124 .popup-header, .popup-footer {
125   display: block !important;
126   position: relative;
127   height: 40px;
128   flex: none !important;
129   .popup-title {
130     color: #FFF;
131     padding: 8px $-m;
132   }
133 }
134 body.flexbox-support #entity-selector-wrap .popup-body .form-group {
135   height: 444px;
136   min-height: 444px;
137 }
138 #entity-selector-wrap .popup-body .form-group {
139   margin: 0;
140 }
141
142 .image-manager-body {
143   min-height: 70vh;
144 }
145
146 .dropzone-container {
147   position: relative;
148   border: 3px dashed #DDD;
149 }
150
151 .image-manager-list .image {
152   display: block;
153   position: relative;
154   border-radius: 0;
155   float: left;
156   margin: 0;
157   cursor: pointer;
158   width: (100%/6);
159   height: auto;
160   border: 1px solid #DDD;
161   box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
162   transition: all cubic-bezier(.4, 0, 1, 1) 160ms;
163   overflow: hidden;
164   &.selected {
165     transform: scale3d(0.92, 0.92, 0.92);
166     border: 1px solid #444;
167     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
168   }
169   img {
170     width: 100%;
171     max-width: 100%;
172     display: block;
173   }
174   .image-meta {
175     position: absolute;
176     width: 100%;
177     bottom: 0;
178     left: 0;
179     color: #EEE;
180     background-color: rgba(0, 0, 0, 0.4);
181     font-size: 10px;
182     padding: 3px 4px;
183     span {
184       display: block;
185     }
186   }
187   @include smaller-than($xl) {
188     width: (100%/4);
189   }
190   @include smaller-than($m) {
191     .image-meta {
192       display: none;
193     }
194   }
195 }
196
197 #image-manager .load-more {
198   display: block;
199   text-align: center;
200   background-color: #EEE;
201   padding: $-s $-m;
202   color: #AAA;
203   clear: both;
204   font-size: 20px;
205   cursor: pointer;
206   font-style: italic;
207 }
208
209 .image-manager-sidebar {
210   width: 300px;
211   margin-left: 1px;
212   padding: $-m $-l;
213   overflow-y: auto;
214   border-left: 1px solid #DDD;
215   .dropzone-container {
216     margin-top: $-m;
217   }
218 }
219
220 .image-manager-list {
221   overflow-y: scroll;
222   flex: 1;
223 }
224
225 .image-manager-content {
226   display: flex;
227   flex-direction: column;
228   flex: 1;
229   .container {
230     width: 100%;
231   }
232   .full-tab {
233     text-align: center;
234   }
235 }
236
237 // Dropzone
238 /*
239  * The MIT License
240  * Copyright (c) 2012 Matias Meno <[email protected]>
241  */
242 .dz-message {
243   font-size: 1.2em;
244   line-height: 1.1;
245   font-style: italic;
246   color: #aaa;
247   text-align: center;
248   cursor: pointer;
249   padding: $-l $-m;
250   transition: all ease-in-out 120ms;
251 }
252
253 .dz-drag-hover .dz-message {
254   background-color: rgb(16, 126, 210);
255   color: #EEE;
256 }
257
258 @keyframes passing-through {
259   0% {
260     opacity: 0;
261     transform: translateY(40px);
262   }
263   30%, 70% {
264     opacity: 1;
265     transform: translateY(0px);
266   }
267   100% {
268     opacity: 0;
269     transform: translateY(-40px);
270   }
271 }
272
273 @keyframes slide-in {
274   0% {
275     opacity: 0;
276     transform: translateY(40px);
277   }
278   30% {
279     opacity: 1;
280     transform: translateY(0px);
281   }
282 }
283
284 @keyframes pulse {
285   0% {
286     transform: scale(1);
287   }
288   10% {
289     transform: scale(1.1);
290   }
291   20% {
292     transform: scale(1);
293   }
294 }
295
296 .dropzone, .dropzone * {
297   box-sizing: border-box;
298 }
299
300 .dz-preview {
301   position: relative;
302   display: inline-block;
303   vertical-align: top;
304   margin: 12px;
305   min-height: 80px;
306 }
307
308 .dz-preview:hover {
309   z-index: 1000;
310 }
311
312 .dz-preview:hover .dz-details {
313   opacity: 1;
314 }
315
316 .dz-preview.dz-file-preview .dz-image {
317   border-radius: 4px;
318   background: #999;
319   background: linear-gradient(to bottom, #eee, #ddd);
320 }
321
322 .dz-preview.dz-file-preview .dz-details {
323   opacity: 1;
324 }
325
326 .dz-preview.dz-image-preview {
327   background: white;
328 }
329
330 .dz-preview.dz-image-preview .dz-details {
331   transition: opacity 0.2s linear;
332 }
333
334 .dz-preview .dz-remove {
335   font-size: 14px;
336   text-align: center;
337   display: block;
338   cursor: pointer;
339   border: none;
340 }
341
342 .dz-preview .dz-remove:hover {
343   text-decoration: underline;
344 }
345
346 .dz-preview:hover .dz-details {
347   opacity: 1;
348 }
349
350 .dz-preview .dz-details {
351   z-index: 20;
352   position: absolute;
353   top: 0;
354   left: 0;
355   opacity: 0;
356   font-size: 10px;
357   min-width: 100%;
358   max-width: 100%;
359   padding: 6px 3px;
360   text-align: center;
361   color: rgba(0, 0, 0, 0.9);
362   line-height: 150%;
363 }
364
365 .dz-preview .dz-details .dz-size {
366   margin-bottom: 0.5em;
367   font-size: 12px;
368 }
369
370 .dz-preview .dz-details .dz-filename {
371   white-space: nowrap;
372 }
373
374 .dz-preview .dz-details .dz-filename:hover span {
375   border: 1px solid rgba(200, 200, 200, 0.8);
376   background-color: rgba(255, 255, 255, 0.8);
377 }
378
379 .dz-preview .dz-details .dz-filename:not(:hover) {
380   overflow: hidden;
381   text-overflow: ellipsis;
382 }
383
384 .dz-preview .dz-details .dz-filename:not(:hover) span {
385   border: 1px solid transparent;
386 }
387
388 .dz-preview .dz-details .dz-filename span, .dz-preview .dz-details .dz-size span {
389   background-color: rgba(255, 255, 255, 0.4);
390   padding: 0 0.4em;
391   border-radius: 3px;
392 }
393
394 .dz-preview:hover .dz-image img {
395   filter: blur(8px);
396 }
397
398 .dz-preview .dz-image {
399   border-radius: 4px;
400   overflow: hidden;
401   width: 80px;
402   height: 80px;
403   position: relative;
404   display: block;
405   z-index: 10;
406 }
407
408 .dz-preview .dz-image img {
409   display: block;
410 }
411
412 .dz-preview.dz-success .dz-success-mark {
413   animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
414 }
415
416 .dz-preview.dz-error .dz-error-mark {
417   opacity: 1;
418   animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
419 }
420
421 .dz-preview .dz-success-mark, .dz-preview .dz-error-mark {
422   pointer-events: none;
423   opacity: 0;
424   z-index: 500;
425   position: absolute;
426   display: block;
427   top: 50%;
428   left: 50%;
429   margin-left: -27px;
430   margin-top: -27px;
431 }
432
433 .dz-preview .dz-success-mark svg, .dz-preview .dz-error-mark svg {
434   display: block;
435   width: 54px;
436   height: 54px;
437 }
438
439 .dz-preview.dz-processing .dz-progress {
440   opacity: 1;
441   transition: all 0.2s linear;
442 }
443
444 .dz-preview.dz-complete .dz-progress {
445   opacity: 0;
446   transition: opacity 0.4s ease-in;
447 }
448
449 .dz-preview:not(.dz-processing) .dz-progress {
450   animation: pulse 6s ease infinite;
451 }
452
453 .dz-preview .dz-progress {
454   opacity: 1;
455   z-index: 1000;
456   pointer-events: none;
457   position: absolute;
458   height: 16px;
459   left: 50%;
460   top: 50%;
461   margin-top: -8px;
462   width: 80px;
463   margin-left: -40px;
464   background: rgba(255, 255, 255, 0.9);
465   transform: scale(1);
466   border-radius: 8px;
467   overflow: hidden;
468 }
469
470 .dz-preview .dz-progress .dz-upload {
471   background: #333;
472   background: linear-gradient(to bottom, #666, #444);
473   position: absolute;
474   top: 0;
475   left: 0;
476   bottom: 0;
477   width: 0;
478   transition: width 300ms ease-in-out;
479 }
480
481 .dz-preview.dz-error .dz-error-message {
482   display: block;
483 }
484
485 .dz-preview.dz-error:hover .dz-error-message {
486   opacity: 1;
487   pointer-events: auto;
488 }
489
490 .dz-preview .dz-error-message {
491   pointer-events: none;
492   z-index: 1000;
493   position: absolute;
494   display: block;
495   display: none;
496   opacity: 0;
497   transition: opacity 0.3s ease;
498   border-radius: 4px;
499   font-size: 11.5px;
500   line-height: 1.2;
501   top: 88px;
502   left: -26px;
503   width: 148px;
504   background: $negative;
505   padding: $-xs;
506   color: white;
507 }
508
509 .dz-preview .dz-error-message:after {
510   content: '';
511   position: absolute;
512   top: -6px;
513   left: 64px;
514   width: 0;
515   height: 0;
516   border-left: 6px solid transparent;
517   border-right: 6px solid transparent;
518   border-bottom: 6px solid $negative;
519 }
520
521
522 .tab-container .nav-tabs {
523   text-align: left;
524   border-bottom: 1px solid #DDD;
525   margin-bottom: $-m;
526   .tab-item {
527     padding: $-s;
528     color: #666;
529     &.selected {
530       border-bottom-width: 3px;
531     }
532   }
533 }
534
535 .image-picker .none {
536   display: none;
537 }
538
539 #code-editor .CodeMirror {
540   height: 400px;
541 }
542
543 #code-editor .lang-options {
544   max-width: 400px;
545   margin-bottom: $-s;
546   a {
547     margin-right: $-xs;
548     text-decoration: underline;
549   }
550 }
551
552 @include smaller-than($m) {
553   #code-editor .lang-options {
554     max-width: 100%;
555   }
556   #code-editor .CodeMirror {
557     height: 200px;
558   }
559 }
560
561 .comment-box {
562   border: 1px solid #DDD;
563   margin-bottom: $-s;
564   border-radius: 3px;
565   .content {
566     padding: $-s;
567     font-size: 0.666em;
568     p, ul, ol {
569       font-size: $fs-m;
570       margin: .5em 0;
571     }
572   }
573   .reply-row {
574     padding: $-xs $-s;
575   }
576 }
577
578 .comment-box .header {
579   padding: $-xs $-s;
580   background-color: #f8f8f8;
581   border-bottom: 1px solid #DDD;
582   .meta {
583     img, a, span {
584       display: inline-block;
585       vertical-align: top;
586     }
587     a, span {
588       padding: $-xxs 0 $-xxs 0;
589       line-height: 1.6;
590     }
591     a { color: #666; }
592     span {
593       color: #888;
594       padding-left: $-xxs;
595     }
596   }
597   .text-muted {
598     color: #999;
599   }
600 }