[FEATURE] Add SQL Logging to AdminPanel
[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 }