e6ccba5512a07c9104b70162868911233beefcff
[Packages/TYPO3.CMS.git] / Build / Resources / Public / Sass / adminpanel.scss
1 //
2 // Admin panel
3 // ===========
4 // Contains all needed styles for the Admin Panel.
5 //
6 //
7 // Load Variables
8 //
9 @import "bootstrap/variables";
10 @import "variables/main";
11
12 //
13 // Variables
14 //
15 $adminPanel-zindex: 99990;
16 $adminPanel-zindex-backdrop: 99991;
17 $adminPanel-zindex-bar: 99992;
18 $adminPanel-zindex-popup: 99994;
19 $adminPanel-prefix: '#TSFE_ADMIN_PANEL_FORM.typo3-kidjls9dksoje.typo3-adminPanel';
20 $adminPanel-bg: $gray-darker;
21 $adminPanel-color: $gray-lighter;
22 $adminPanel-success: #629755;
23 $adminPanel-danger: $brand-danger;
24
25 // Message
26 $adminPanel-message-bg: #fff;
27 $adminPanel-message-padding: 20px;
28 $adminPanel-message-default-border: #cacaca;
29 $adminPanel-message-info-border: #538bb3;
30
31 // Bar
32 $adminPanel-bar-height: 36px;
33 $adminPanel-bar-bg: #424242;
34 $adminPanel-bar-border-color: #383838;
35 $adminPanel-bar-color: #fff;
36 $adminPanel-bar-active-bg: #525252;
37 $adminPanel-bar-hover-bg: #525252;
38
39 // Header
40 $adminPanel-header-height: 36px;
41 $adminPanel-header-bg: #eaeaea;
42 $adminPanel-header-border-color: #dadada;
43 $adminPanel-header-color: #333;
44 $adminPanel-header-active-bg: #fafafa;
45 $adminPanel-header-hover-bg: #e1e1e1;
46
47 // Content
48 $adminPanel-content-padding: 20px;
49 $adminPanel-content-bg: #fafafa;
50 $adminPanel-content-border-color: #dadada;
51 $adminPanel-content-color: #333;
52
53 // Table
54 $adminPanel-table-bg: #fff;
55 $adminPanel-table-border: #e0e0e0;
56 $adminPanel-table-header-bg: #e0e0e0;
57
58 // Card
59 $adminPanel-card-bg: #fff;
60 $adminPanel-card-padding: 20px;
61
62 // Input
63 $adminPanel-input-bg: #fff;
64 $adminPanel-input-border: #dadada;
65 $adminPanel-input-hover-border: #cacaca;
66 $adminPanel-input-border-radius: 2px;
67 $adminPanel-input-vertical-padding: 1.25em;
68 $adminPanel-input-horizontal-padding: 0.75em;
69
70 // Progress
71 $adminPanel-progress-default: #333;
72 $adminPanel-progress-green: #629755;
73
74 //
75 // Mixins
76 //
77 @mixin make-col($size, $columns: 12) {
78     flex: 0 0 percentage($size / $columns);
79     max-width: percentage($size / $columns);
80 }
81
82 //
83 // Font Awesome
84 //
85 @font-face {
86     font-family: 'TYPO3FontAwesome';
87     src: url('#{$fa-font-path}/fontawesome-webfont.eot?v=4.6.3');
88     src: url('#{$fa-font-path}/fontawesome-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'), url('#{$fa-font-path}/fontawesome-webfont.woff2?v=4.6.3') format('woff2'), url('#{$fa-font-path}/fontawesome-webfont.woff?v=4.6.3') format('woff'), url('#{$fa-font-path}/fontawesome-webfont.ttf?v=4.6.3') format('truetype'), url('#{$fa-font-path}/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') format('svg');
89     font-weight: normal;
90     font-style: normal;
91 }
92
93 //
94 // NoScroll
95 //
96 body.typo3-adminPanel-noscroll {
97     overflow: hidden;
98 }
99
100 //
101 // Reset
102 //
103 #{$adminPanel-prefix} {
104     z-index: $adminPanel-zindex;
105
106     * {
107         background: none;
108         border: 0;
109         box-shadow: none;
110         box-sizing: border-box;
111         vertical-align: baseline;
112         letter-spacing: normal;
113         width: auto;
114         height: auto;
115         font-family: $font-family-sans-serif;
116         font-size: $font-size-base;
117         font-weight: normal;
118         white-space: normal;
119         margin: 0;
120         padding: 0;
121     }
122
123     *,
124     *:active,
125     *:focus,
126     *:hover {
127         outline: 0;
128     }
129 }
130
131 //
132 // Shared Components
133 //
134 #{$adminPanel-prefix} {
135     @import "component/icon";
136 }
137
138 //
139 // Backdrop
140 //
141 #{$adminPanel-prefix} {
142     .typo3-adminPanel-backdrop {
143         z-index: $adminPanel-zindex-backdrop;
144         content: '';
145         position: fixed;
146         top: 0;
147         left: 0;
148         right: 0;
149         bottom: 0;
150         background-color: rgba(0, 0, 0, 0.5);
151     }
152 }
153
154 //
155 // Message
156 //
157 #{$adminPanel-prefix} {
158     .typo3-adminPanel-message {
159         padding: $adminPanel-message-padding;
160         background-color: $adminPanel-message-bg;
161         border-left: 3px solid $adminPanel-message-default-border;
162         margin-bottom: 1em;
163         box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
164     }
165
166     .typo3-adminPanel-message-info {
167         border-left-color: $adminPanel-message-info-border;
168     }
169 }
170
171 //
172 // Bar
173 //
174 #{$adminPanel-prefix} {
175     .typo3-adminPanel-bar {
176         z-index: $adminPanel-zindex-bar;
177         display: flex;
178         flex-flow: row;
179         justify-content: stretch;
180         position: fixed;
181         bottom: 0;
182         left: auto;
183         right: 0;
184         height: $adminPanel-bar-height + 1px;
185         background-color: $adminPanel-bar-bg;
186         color: $adminPanel-bar-color;
187         border-bottom: 1px solid $adminPanel-bar-border-color;
188     }
189
190     &.typo3-adminPanel-active .typo3-adminPanel-bar {
191         left: 0;
192     }
193
194     @media (min-width: 768px) {
195         .typo3-adminPanel-bar {
196             right: 20px;
197         }
198
199         &.typo3-adminPanel-active .typo3-adminPanel-bar {
200             left: 20px;
201         }
202     }
203 }
204
205 //
206 // Module
207 //
208 #{$adminPanel-prefix} {
209     .typo3-adminPanel-module {
210         display: flex;
211         padding: 0 10px;
212         align-items: center;
213         border-right: 1px solid $adminPanel-bar-border-color;
214     }
215
216     .typo3-adminPanel-module-settings {
217         margin-left: auto;
218     }
219
220     .typo3-adminPanel-module-logo + .typo3-adminPanel-module-toggle {
221         border-left: none;
222     }
223
224     .typo3-adminPanel-module-settings {
225         .typo3-adminPanel-module-trigger-label {
226             display: none;
227
228             @media (min-width: $screen-sm) {
229                 display: block;
230             }
231         }
232     }
233
234     .typo3-adminPanel-module-settings,
235     .typo3-adminPanel-module-toggle {
236         border-left: 1px solid $adminPanel-bar-border-color;
237         border-right: none;
238     }
239 }
240
241 //
242 // Module Group
243 //
244 #{$adminPanel-prefix} {
245     .typo3-adminPanel-module-group {
246         width: 100%;
247         overflow: hidden;
248         display: flex;
249     }
250 }
251
252 //
253 // Trigger
254 //
255 #{$adminPanel-prefix} {
256     .typo3-adminPanel-module-trigger {
257         display: flex;
258         align-items: center;
259         padding: 0 10px;
260         margin-left: -10px;
261         margin-right: -10px;
262         font-size: 12px;
263         color: #fff;
264         height: $adminPanel-bar-height;
265
266         > span {
267             white-space: nowrap;
268
269             + span {
270                 margin-left: 4px;
271             }
272         }
273     }
274
275     .typo3-adminPanel-module-active .typo3-adminPanel-module-trigger {
276         background-color: $adminPanel-bar-active-bg;
277     }
278
279     [data-typo3-role="typo3-adminPanel-module-trigger"],
280     [data-typo3-role="typo3-adminPanel-trigger"] {
281         cursor: pointer;
282
283         &:focus,
284         &:hover {
285             background-color: $adminPanel-bar-hover-bg;
286         }
287     }
288
289     .typo3-adminPanel-module-trigger-icon {
290         .icon-color {
291             fill: currentColor;
292         }
293
294         .icon-actions-edit-hide {
295             color: $adminPanel-success;
296         }
297
298         .icon-actions-edit-unhide {
299             color: $adminPanel-danger;
300         }
301     }
302
303     .typo3-adminPanel-module-trigger-information {
304         display: none;
305         opacity: 0.5;
306
307         @media (min-width: $screen-sm) {
308             display: block;
309         }
310     }
311 }
312
313 //
314 // Content
315 //
316 #{$adminPanel-prefix} {
317     .typo3-adminPanel-content {
318         display: none;
319         flex-direction: column;
320         position: fixed;
321         bottom: $adminPanel-bar-height + 1;
322         top: 20vh;
323         left: 20px;
324         right: 20px;
325         background-color: $adminPanel-content-bg;
326         color: $adminPanel-content-color;
327         border-bottom: 1px solid $adminPanel-bar-border-color;
328     }
329
330     .typo3-adminPanel-content-main {
331         position: relative;
332         padding: 20px;
333         height: 100%;
334         overflow: auto;
335
336         > *:first-child {
337             margin-top: 0;
338         }
339
340         > *:last-child {
341             margin-bottom: 0;
342         }
343     }
344
345     .typo3-adminPanel-module-active {
346         .typo3-adminPanel-content {
347             display: flex;
348         }
349     }
350 }
351
352 //
353 // Content Header
354 //
355 #{$adminPanel-prefix} {
356     .typo3-adminPanel-content-header {
357         position: relative;
358         display: flex;
359         align-items: center;
360         justify-content: space-between;
361         height: $adminPanel-header-height + 1;
362         flex-shrink: 0;
363         color: $adminPanel-header-color;
364         background-color: $adminPanel-header-bg;
365
366         &:before {
367             content: '';
368             position: absolute;
369             bottom: 0;
370             left: 0;
371             right: 0;
372             height: 1px;
373             background-color: $adminPanel-header-border-color;
374         }
375     }
376
377     .typo3-adminPanel-content-header-item {
378         display: flex;
379         align-items: center;
380         height: $adminPanel-header-height + 1;
381         padding: 0 10px;
382         border-right: 1px solid $adminPanel-header-border-color;
383         border-bottom: 1px solid $adminPanel-header-border-color;
384     }
385
386     a.typo3-adminPanel-content-header-item {
387         color: inherit;
388         text-decoration: none;
389         position: relative;
390
391         &:hover,
392         &:focus {
393             background-color: $adminPanel-header-hover-bg;
394         }
395
396         &.typo3-adminPanel-content-header-item-active {
397             background-color: $adminPanel-header-active-bg;
398
399             &:before {
400                 content: '';
401                 position: absolute;
402                 bottom: -1px;
403                 left: 0;
404                 right: 0;
405                 height: 1px;
406                 background-color: $adminPanel-header-active-bg;
407             }
408         }
409     }
410
411     .typo3-adminPanel-content-header-title {
412         position: relative;
413         color: $adminPanel-bar-color;
414         background-color: $adminPanel-bar-bg;
415         border-right: 1px solid $adminPanel-bar-border-color;
416
417         &:before {
418             content: '';
419             position: absolute;
420             bottom: -1px;
421             left: 0;
422             right: 0;
423             height: 1px;
424             background-color: lighten($adminPanel-bar-border-color, 15%);
425         }
426
427         > span + span {
428             margin-left: 4px;
429         }
430     }
431
432     .typo3-adminPanel-content-header-settings,
433     .typo3-adminPanel-content-header-close {
434         cursor: pointer;
435         border-right: 0;
436         border-left: 1px solid $adminPanel-header-border-color;
437     }
438 }
439
440 //
441 // Content Navigation
442 //
443 #{$adminPanel-prefix} {
444     .typo3-adminPanel-content-nav {
445         width: 100%;
446         overflow: hidden;
447         display: flex;
448     }
449 }
450
451 //
452 // Content Settings
453 //
454 #{$adminPanel-prefix} {
455     .typo3-adminPanel-content-settings {
456         flex-shrink: 0;
457         max-height: 50%;
458         overflow-y: auto;
459         display: none;
460         background-color: $adminPanel-content-bg;
461         padding: $adminPanel-content-padding;
462         border-bottom: 1px solid $adminPanel-content-border-color;
463         box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
464
465         &.typo3-adminPanel-content-settings-active {
466             display: block;
467         }
468     }
469
470     .typo3-adminPanel-content-settings,
471     .typo3-adminPanel-content-settings-group {
472         > *:first-child {
473             margin-top: 0;
474         }
475
476         > *:last-child {
477             margin-bottom: 0;
478         }
479     }
480
481     .typo3-adminPanel-content-settings-group + .typo3-adminPanel-content-settings-group {
482         margin-top: $adminPanel-content-padding;
483         padding-top: $adminPanel-content-padding;
484         border-top: 1px solid rgba(0, 0, 0, 0.1);
485     }
486 }
487
488 //
489 // Tabs
490 //
491 #{$adminPanel-prefix} {
492     .typo3-adminPanel-content-panes {
493         position: absolute;
494         top: 0;
495         bottom: 0;
496         left: 0;
497         right: 0;
498         display: flex;
499     }
500
501     .typo3-adminPanel-content-panes-item {
502         display: none;
503         overflow: auto;
504         height: 100%;
505         width: 100%;
506         padding: $adminPanel-content-padding;
507
508         > *:first-child {
509             margin-top: 0;
510         }
511
512         > *:last-child {
513             margin-bottom: 0;
514         }
515     }
516
517     .typo3-adminPanel-content-panes-item-active {
518         display: block;
519     }
520 }
521
522 //
523 // Row
524 //
525 #{$adminPanel-prefix} {
526     .typo3-adminPanel-row {
527         display: flex;
528         flex-wrap: wrap;
529         padding: 8px 0;
530     }
531
532     .typo3-adminPanel-row-nowrap {
533         flex-wrap: nowrap;
534         justify-content: space-between;
535     }
536
537     .typo3-adminPanel-row-header {
538         > * {
539             font-weight: bold;
540         }
541     }
542
543     .typo3-adminPanel-col {
544         padding: 0 10px;
545         word-break: break-all;
546     }
547
548     .typo3-adminPanel-col-icon {
549         width: 34px;
550         flex-shrink: 0;
551         flex-grow: 0;
552     }
553
554     .typo3-adminPanel-col-auto {
555         flex-grow: 1;
556     }
557
558     .typo3-adminPanel-col-ellipsis {
559         white-space: nowrap;
560         overflow: hidden;
561         text-overflow: ellipsis;
562     }
563
564     @for $i from 1 through 12 {
565         .typo3-adminPanel-col-#{$i} {
566             @include make-col($i);
567         }
568     }
569
570     @media (max-width: $screen-sm-max) {
571         @for $i from 1 through 12 {
572             .typo3-adminPanel-col-sm-#{$i} {
573                 @include make-col($i);
574             }
575         }
576     }
577 }
578
579 //
580 // Text
581 //
582 #{$adminPanel-prefix} {
583     .typo3-adminPanel-headline {
584         font-weight: bold;
585         margin-top: 1.5em;
586         margin-bottom: 0.75em;
587     }
588
589     h1.typo3-adminPanel-headline {
590         font-weight: normal;
591         font-size: 1.75em;
592     }
593
594     h2.typo3-adminPanel-headline {
595         font-weight: normal;
596         font-size: 1.5em;
597     }
598
599     h3.typo3-adminPanel-headline {
600         font-size: 1.35em;
601     }
602
603     h4.typo3-adminPanel-headline {
604         font-size: 1.25em;
605     }
606 }
607
608 //
609 // Table
610 //
611 #{$adminPanel-prefix} {
612     .typo3-adminPanel-table-overflow {
613         display: block;
614         width: 100%;
615         overflow-x: auto;
616         -webkit-overflow-scrolling: touch;
617         -ms-overflow-style: -ms-autohiding-scrollbar;
618         border: 1px solid $adminPanel-table-border;
619         box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
620
621         .typo3-adminPanel-table {
622             border: none;
623         }
624     }
625
626     .typo3-adminPanel-table {
627         width: 100%;
628         max-width: 100%;
629         background-color: $adminPanel-table-bg;
630         display: table;
631         border-collapse: separate;
632         border-spacing: 0;
633         border: 1px solid $adminPanel-table-border;
634
635         thead {
636             tr {
637                 background-color: $adminPanel-table-header-bg;
638             }
639
640             th,
641             td {
642                 border-top: none;
643                 font-family: $font-family-sans-serif;
644             }
645         }
646
647         th {
648             font-weight: bold;
649             text-align: inherit;
650
651             > span {
652                 font-weight: bold;
653             }
654         }
655
656         tr {
657             font-family: inherit;
658         }
659
660         th,
661         td {
662             padding: 0.75em;
663             vertical-align: top;
664             border-top: 1px solid #dee2e6;
665         }
666     }
667
668     .typo3-adminPanel-table-debug {
669         tbody {
670             font-family: monospace;
671
672             * {
673                 font-family: inherit;
674             }
675
676             td {
677                 word-wrap: break-word;
678             }
679         }
680     }
681
682     .typo3-adminPanel-table-cell-icon {
683         width: 34px;
684     }
685
686     .typo3-adminPanel-table-cell-icon {
687         width: 34px;
688         min-width: 34px;
689         white-space: nowrap;
690     }
691
692     .typo3-adminPanel-table-cell-time {
693         width: 250px;
694         min-width: 250px;
695         white-space: nowrap;
696     }
697
698     .typo3-adminPanel-table-cell-key {
699         width: 19%;
700     }
701
702     .typo3-adminPanel-table-cell-space {
703         width: 100%;
704     }
705
706     .typo3-adminPanel-table-cell-break {
707         word-wrap: break-word;
708     }
709
710     .typo3-adminPanel-table-cell-nowrap {
711         white-space: nowrap;
712     }
713 }
714
715 //
716 // Cards
717 //
718 #{$adminPanel-prefix} {
719     .typo3-adminPanel-card-group {
720         display: flex;
721         margin: -5px;
722         margin-bottom: 1em;
723         flex-wrap: wrap;
724
725         .typo3-adminPanel-card {
726             margin: 5px;
727             flex-grow: 1;
728             flex-shrink: 0;
729             max-width: 100%;
730         }
731     }
732
733     .typo3-adminPanel-card {
734         background-color: $adminPanel-card-bg;
735         margin-bottom: 1em;
736         box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
737     }
738
739     .typo3-adminPanel-card-header,
740     .typo3-adminPanel-card-body {
741         > *:first-child {
742             margin-top: 0;
743         }
744
745         > *:last-child {
746             margin-bottom: 0;
747         }
748     }
749
750     .typo3-adminPanel-card-header {
751         display: flex;
752         align-items: center;
753         padding: $adminPanel-card-padding;
754         padding-bottom: 0;
755     }
756
757     .typo3-adminPanel-card-header-headline {
758         display: flex;
759         align-items: center;
760     }
761
762     .typo3-adminPanel-card-header-icon {
763         position: relative;
764         height: 1em;
765         width: 1em;
766         opacity: 0.75;
767
768         .icon {
769             position: absolute;
770             top: 50%;
771             left: 50%;
772             transform: translate(-50%, -50%);
773         }
774     }
775
776     .typo3-adminPanel-card-header-text {
777         padding-left: 0.5em;
778         font-size: 1.25em;
779     }
780
781     .typo3-adminPanel-card-body {
782         padding: $adminPanel-card-padding;
783     }
784 }
785
786 //
787 // Dump
788 //
789 #{$adminPanel-prefix} {
790     .typo3-adminPanel-dump {
791         font-family: monospace;
792         word-wrap: break-word;
793         white-space: pre-wrap;
794         position: relative;
795         z-index: 99999;
796         word-break: break-all;
797     }
798
799     .typo3-adminPanel-dump-string {
800         color: #75a75a;
801
802         &:before,
803         &:after {
804             color: #bf6500;
805             content: '"';
806         }
807     }
808
809     .typo3-adminPanel-dump-float,
810     .typo3-adminPanel-dump-integer {
811         color: #538bb3;
812     }
813 }
814
815 //
816 // Form
817 //
818 #{$adminPanel-prefix} {
819     .typo3-adminPanel-form-group {
820         display: block;
821         margin: 1.5em 0;
822     }
823
824     .typo3-adminPanel-form-group-checkbox {
825         + .typo3-adminPanel-form-group-checkbox {
826             margin-top: -0.5em;
827         }
828     }
829 }
830
831 //
832 // Checkbox
833 //
834 #{$adminPanel-prefix} {
835     .typo3-adminPanel-form-checkbox {
836         padding-left: 1.75em;
837     }
838
839     .typo3-adminPanel-form-checkbox-label {
840         position: relative;
841         cursor: pointer;
842
843         &:before {
844             position: absolute;
845             top: 0;
846             left: -1.75em;
847             display: block;
848             width: 1.25em;
849             height: 1.25em;
850             pointer-events: none;
851             content: '';
852             user-select: none;
853             background-color: #dadada;
854             border-radius: $adminPanel-input-border-radius;
855         }
856
857         &:after {
858             position: absolute;
859             top: 0;
860             left: -1.75em;
861             display: block;
862             width: 1.25em;
863             height: 1.25em;
864             content: '';
865             background-repeat: no-repeat;
866             background-position: center center;
867             background-size: 50% 50%;
868         }
869     }
870
871     .typo3-adminPanel-form-checkbox-input {
872         display: none;
873
874         &:checked + .typo3-adminPanel-form-checkbox-label {
875             &:before {
876                 background-color: #629755;
877             }
878
879             &:after {
880                 background-image: url("data:image/svg+xml;charset=utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/></svg>");
881             }
882         }
883     }
884 }
885
886 //
887 // Select
888 //
889 #{$adminPanel-prefix} {
890     .typo3-adminPanel-form-select {
891         .typo3-adminPanel-form-select-label {
892             margin-bottom: 0.5em;
893             display: block;
894         }
895
896         .typo3-adminPanel-form-select-input {
897             padding: $adminPanel-input-horizontal-padding 3em $adminPanel-input-horizontal-padding $adminPanel-input-vertical-padding;
898             display: block;
899             border-radius: $adminPanel-input-border-radius;
900             border: 1px solid $adminPanel-input-border;
901             background: $adminPanel-input-bg url("data:image/svg+xml;charset=utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'><path fill='%23333' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>") no-repeat right 0.75em center;
902             background-size: 8px 10px;
903             appearance: none;
904
905             &:hover,
906             &:focus {
907                 border: 1px solid $adminPanel-input-hover-border;
908             }
909         }
910     }
911 }
912
913 //
914 // DateTime
915 //
916 #{$adminPanel-prefix} {
917     .typo3-adminPanel-form-datetime {
918         .typo3-adminPanel-form-datetime-label {
919             margin-bottom: 0.5em;
920             display: block;
921         }
922
923         .typo3-adminPanel-form-datetime-input-group {
924             margin: -5px;
925             display: flex;
926             flex-wrap: wrap;
927         }
928
929         .typo3-adminPanel-form-datetime-input {
930             flex-grow: 1;
931             flex-shrink: 0;
932             margin: 5px;
933             display: block;
934             padding: $adminPanel-input-horizontal-padding $adminPanel-input-vertical-padding;
935             border-radius: $adminPanel-input-border-radius;
936             border: 1px solid $adminPanel-input-border;
937             background-color: $adminPanel-input-bg;
938
939             &:hover,
940             &:focus {
941                 border: 1px solid $adminPanel-input-hover-border;
942             }
943         }
944     }
945 }
946
947 //
948 // Button
949 //
950 #{$adminPanel-prefix} {
951     .typo3-adminPanel-btn {
952         position: relative;
953         cursor: pointer;
954         color: inherit;
955         text-decoration: none;
956         padding: $adminPanel-input-horizontal-padding $adminPanel-input-vertical-padding;
957         display: inline-block;
958         background-color: rgba(0, 0, 0, 0.1);
959         border: 1px solid $adminPanel-input-border;
960         border-radius: $adminPanel-input-border-radius;
961
962         &:hover,
963         &:focus {
964             z-index: 1;
965             background-color: rgba(0, 0, 0, 0.15);
966             border: 1px solid $adminPanel-input-hover-border;
967         }
968     }
969
970     .typo3-adminPanel-btn-primary {
971         color: #fff;
972         background-color: #538bb3;
973         border: 1px solid darken(#538bb3, 10%);
974
975         &:hover,
976         &:focus {
977             background-color: lighten(#538bb3, 5%);
978             border: 1px solid darken(#538bb3, 15%);
979         }
980     }
981
982     .typo3-adminPanel-btn-group {
983         &:after {
984             content: '';
985             display: table;
986             clear: both;
987         }
988
989         .typo3-adminPanel-btn {
990             border-radius: 0;
991             float: left;
992
993             &:first-child {
994                 border-radius: $adminPanel-input-border-radius 0 0 $adminPanel-input-border-radius;
995             }
996
997             &:last-child {
998                 border-radius: 0 $adminPanel-input-border-radius $adminPanel-input-border-radius 0;
999             }
1000
1001             & + .typo3-adminPanel-btn {
1002                 margin-left: -1px;
1003             }
1004         }
1005     }
1006 }
1007
1008 //
1009 // Progress
1010 //
1011 #{$adminPanel-prefix} {
1012     .typo3-adminPanel-progress {
1013         position: relative;
1014         height: 1.5em;
1015     }
1016
1017     .typo3-adminPanel-progress-bar {
1018         position: absolute;
1019         top: 0;
1020         left: 0;
1021         height: 100%;
1022         width: 100%;
1023         background-color: $adminPanel-progress-default;
1024     }
1025
1026     .typo3-adminPanel-progress-bar-green {
1027         background-color: $adminPanel-progress-green;
1028     }
1029
1030     .typo3-adminPanel-progress-value {
1031         text-align: right;
1032     }
1033 }
1034
1035 //
1036 // Zoom
1037 //
1038 #{$adminPanel-prefix} {
1039     .typo3-adminPanel-zoom {
1040         position: absolute;
1041         z-index: $adminPanel-zindex-popup;
1042         background-color: #fafafa;
1043         top: 0;
1044         left: 0;
1045         width: 100%;
1046         height: 100%;
1047         display: none;
1048         flex-direction: column;
1049     }
1050
1051     .typo3-adminPanel-zoom-show {
1052         display: flex;
1053     }
1054
1055     .typo3-adminPanel-zoom-header {
1056         padding: 20px;
1057         border-bottom: 1px solid #dadada;
1058     }
1059
1060     .typo3-adminPanel-zoom-body {
1061         padding: 20px;
1062         height: 100%;
1063         overflow: auto;
1064
1065         > *:first-child {
1066             margin-top: 0;
1067         }
1068
1069         > *:last-child {
1070             margin-bottom: 0;
1071         }
1072     }
1073 }
1074
1075 //
1076 // SQL
1077 //
1078 #{$adminPanel-prefix} {
1079     .typo3-adminPanel-sql-col-count {
1080         text-align: right;
1081         width: 90px;
1082         flex-shrink: 0;
1083     }
1084
1085     .typo3-adminPanel-sql-col-time {
1086         width: 250px;
1087         flex-shrink: 0;
1088     }
1089
1090     .typo3-adminPanel-sql-header {
1091         color: $gray;
1092         border-bottom: 1px solid $gray-light;
1093     }
1094
1095     .typo3-adminPanel-sql-queries-header {
1096         color: $gray;
1097         border-bottom: 1px solid $gray-light;
1098     }
1099
1100     .typo3-adminPanel-sql-query-ellipsis {
1101         white-space: nowrap;
1102         overflow: hidden;
1103         text-overflow: ellipsis;
1104     }
1105
1106     > .typo3-adminPanel-sql-panel {
1107         border-bottom: 1px dashed $gray-light;
1108
1109         &:nth-child(2n+1) {
1110             background: $gray-lighter;
1111         }
1112     }
1113
1114     .typo3-adminPanel-bar {
1115         display: flex;
1116         height: auto;
1117         overflow: hidden; // force rounded corners by cropping it
1118         font-size: $font-size-small;
1119
1120         .typo3-adminPanel-bar-value {
1121             display: flex;
1122             flex-direction: column;
1123             justify-content: center;
1124             color: $gray-darker;
1125             text-align: left;
1126             white-space: nowrap;
1127             background-color: $adminPanel-bar-color;
1128             transition: all 0.5s ease;
1129             width: 0;
1130         }
1131     }
1132 }
1133
1134 //
1135 // SQL Statement
1136 //
1137 #{$adminPanel-prefix} {
1138     .typo3-adminPanel-sql-statement {
1139         margin: 1em 0;
1140         padding: 0.75em 1em;
1141         font-family: $font-family-monospace;
1142         background: #f2f2f2;
1143         font-size: $font-size-small;
1144     }
1145 }
1146
1147 //
1148 // SQL Backtrace
1149 //
1150 #{$adminPanel-prefix} {
1151     .typo3-adminPanel-sql-backtrace {
1152         margin: 1em 0;
1153     }
1154
1155     .typo3-adminPanel-sql-backtrace-item {
1156         margin: 1px 0;
1157         padding: 0.75em 1em;
1158         background-color: #f2f2f2;
1159         font-family: $font-family-monospace;
1160         word-break: break-word;
1161     }
1162
1163     .typo3-adminPanel-sql-backtrace-item-function,
1164     .typo3-adminPanel-sql-backtrace-item-file {
1165         display: block;
1166     }
1167
1168     .typo3-adminPanel-sql-backtrace-item-file {
1169         opacity: 0.5;
1170         font-size: 0.8em;
1171     }
1172 }