[TASK] Streamline Admin Panel
[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 //
8 // Load Variables
9 //
10 @import "variables/main";
11 @import "bootstrap/variables";
12
13 //
14 // Shared Components
15 //
16 #TSFE_ADMIN_PANEL_FORM .typo3-adminPanel,
17 .typo3-editPanel-btn,
18 .typo3-editPanel-link {
19 @import "component/icon";
20 }
21
22 /*!
23 * Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
24 * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
25 */
26
27 /* FONT PATH
28 * -------------------------- */
29 @font-face {
30 font-family: 'TYPO3FontAwesome';
31 src: url('../../../../backend/Resources/Public/Fonts/FontAwesome/fontawesome-webfont.eot?v=4.6.3');
32 src: url('../../../../backend/Resources/Public/Fonts/FontAwesome/fontawesome-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'), url('../../../../backend/Resources/Public/Fonts/FontAwesome/fontawesome-webfont.woff2?v=4.6.3') format('woff2'), url('../../../../backend/Resources/Public/Fonts/FontAwesome/fontawesome-webfont.woff?v=4.6.3') format('woff'), url('../../../../backend/Resources/Public/Fonts/FontAwesome/fontawesome-webfont.ttf?v=4.6.3') format('truetype'), url('../../../../backend/Resources/Public/Fonts/FontAwesome/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') format('svg');
33 font-weight: normal;
34 font-style: normal;
35 }
36
37 /*!
38 * Font Awesome icons are prefixed with #TSFE_ADMIN_PANEL_FORM to prevent issues with
39 * CSS from the website that uses Font Awesome too.
40 */
41 #TSFE_ADMIN_PANEL_FORM,
42 .typo3-feedit-element,
43 .typo3-editPanel {
44 .fa:before {
45 display: inline-block;
46 font: normal normal normal 14px/1 TYPO3FontAwesome;
47 font-size: 15px;
48 text-rendering: auto;
49 -webkit-font-smoothing: antialiased;
50 -moz-osx-font-smoothing: grayscale;
51 transform: translate(0, 0);
52 }
53
54 .fa-pencil:before {
55 content: "\f040";
56 }
57
58 .fa-angle-up:before {
59 content: "\f106";
60 }
61
62 .fa-angle-down:before {
63 content: "\f107";
64 }
65
66 .fa-toggle-off:before {
67 content: "\f204";
68 }
69
70 .fa-toggle-on:before {
71 content: "\f205";
72 }
73
74 .fa-google-plus-square:before {
75 content: "\f0d4";
76 }
77
78 .fa-trash:before {
79 content: "\f1f8";
80 }
81
82 .fa-history:before {
83 content: "\f1da";
84 }
85
86 .fa-list-alt:before {
87 content: "\f022";
88 }
89
90 .fa-plus-square:before {
91 content: "\f0fe";
92 }
93
94 .fa-arrows:before {
95 content: "\f047";
96 }
97
98 .fa-exclamation-circle:before {
99 content: "\f06a";
100 }
101
102 .fa-exclamation-triangle:before {
103 content: "\f071";
104 }
105
106 .fa-info-circle:before {
107 content: "\f05a";
108 }
109
110 .fa-caret-down:before {
111 content: "\f0d7";
112 }
113
114 .fa-caret-up:before {
115 content: "\f0d8";
116 }
117
118 .fa-bolt:before {
119 content: "\f0e7";
120 }
121 }
122
123 //
124 // Placeholder
125 //
126 %adminpanelicon {
127 &:before {
128 display: inline-block;
129 font: normal normal normal 14px/1 TYPO3FontAwesome;
130 font-size: 15px;
131 text-rendering: auto;
132 -webkit-font-smoothing: antialiased;
133 -moz-osx-font-smoothing: grayscale;
134 transform: translate(0, 0);
135 }
136 }
137
138 %basestyles {
139 background-color: #fafafa;
140 color: #333;
141 font-family: sans-serif;
142 font-size: 12px;
143 line-height: 1.35em;
144
145 a {
146 color: inherit;
147 text-decoration: none;
148 }
149 }
150
151 //
152 // Container
153 //
154 #TSFE_ADMIN_PANEL_FORM {
155 display: block !important;
156 position: fixed;
157 bottom: 0;
158 left: 0;
159 max-width: 100%;
160 max-height: 100%;
161 z-index: 10002;
162 padding: 0;
163 margin: 0;
164
165 * {
166 box-sizing: border-box;
167 }
168
169 *,
170 *:focus,
171 *:hover,
172 *:active {
173 outline: none;
174 }
175
176 *:before,
177 *:after {
178 -webkit-box-sizing: border-box;
179 -moz-box-sizing: border-box;
180 box-sizing: border-box;
181 }
182 }
183
184 //
185 // Panel
186 //
187 #TSFE_ADMIN_PANEL_FORM .typo3-adminPanel {
188 @extend %basestyles;
189
190 border: 1px solid #cacaca;
191 max-height: 100vh;
192 max-width: 100%;
193 min-width: 280px;
194 border-left: 0;
195 border-bottom: 0;
196 border-top-left-radius: 2px;
197 display: flex;
198 flex-direction: column;
199 }
200
201 //
202 // Enabling
203 //
204 #TSFE_ADMIN_PANEL_FORM {
205 #typo3AdminPanelEnable,
206 #typo3AdminPanelCollapse {
207 display: none;
208 }
209
210 #typo3AdminPanelEnable:checked + #typo3AdminPanelCollapse + .typo3-adminPanel {
211 .typo3-adminPanel-header {
212 .typo3-adminPanel-header-enable-enabled {
213 display: inline;
214 }
215
216 .typo3-adminPanel-header-enable-disabled {
217 display: none;
218 }
219
220 .typo3-adminPanel-header-collapse {
221 display: block;
222 }
223 }
224 }
225
226 #typo3AdminPanelCollapse:checked + .typo3-adminPanel {
227 .typo3-adminPanel-actions,
228 .typo3-adminPanel-body {
229 display: none;
230 }
231
232 .typo3-adminPanel-header {
233 .typo3-adminPanel-header-collapse-enabled {
234 display: inline;
235 }
236
237 .typo3-adminPanel-header-collapse-disabled {
238 display: none;
239 }
240 }
241 }
242 }
243
244 //
245 // Header
246 //
247 #TSFE_ADMIN_PANEL_FORM .typo3-adminPanel {
248 .typo3-adminPanel-header {
249 position: relative;
250 background-color: $brand-notice;
251 color: #fafafa;
252 padding: 1em 3em;
253
254 .typo3-adminPanel-header-user:before {
255 content: ':';
256 margin-right: 0.5em;
257 }
258
259 .typo3-adminPanel-header-enable,
260 .typo3-adminPanel-header-collapse {
261 position: absolute;
262 cursor: pointer;
263 top: 50%;
264 left: 0;
265 padding: 1em;
266 transform: translate(0, -50%);
267 }
268
269 .typo3-adminPanel-header-collapse {
270 display: none;
271 left: auto;
272 right: 0;
273 }
274
275 .typo3-adminPanel-header-enable-enabled {
276 display: none;
277 color: $brand-success;
278 }
279
280 .typo3-adminPanel-header-enable-disabled {
281 color: $brand-danger;
282 }
283
284 .typo3-adminPanel-header-collapse-enabled {
285 display: none;
286 }
287 }
288 }
289
290 //
291 // Actions
292 //
293 #TSFE_ADMIN_PANEL_FORM .typo3-adminPanel {
294 .typo3-adminPanel-actions {
295 text-align: right;
296 padding: 0 1em 0.75em;
297 background-color: $brand-notice;
298 color: #fafafa;
299 }
300 }
301
302 //
303 // Body
304 //
305 #TSFE_ADMIN_PANEL_FORM .typo3-adminPanel {
306 .typo3-adminPanel-body {
307 height: 100%;
308 overflow: auto;
309
310 > .typo3-adminPanel-section-title:first-child {
311 border-top: none;
312 }
313 }
314 }
315
316 //
317 // Section
318 //
319 #TSFE_ADMIN_PANEL_FORM .typo3-adminPanel {
320 .typo3-adminPanel-section-title {
321 position: relative;
322 overflow: hidden;
323 border-top: 1px solid #bbb;
324 background-color: #eee;
325 padding: 0.75em 3em 0.75em 1em;
326
327 &:hover {
328 background-color: #ddd;
329 }
330
331 a {
332 position: relative;
333 display: block;
334 padding: 0.75em 3em 0.75em 1em;
335 margin: -0.75em -3em -0.75em -1em;
336 }
337 }
338
339 .typo3-adminPanel-section-title-identifier {
340 position: absolute;
341 top: 50%;
342 right: 0;
343 padding: 1em;
344 transform: translate(0, -50%);
345
346 @extend %adminpanelicon;
347
348 &:before {
349 content: "\f105";
350 }
351 }
352
353 .typo3-adminPanel-section-open {
354 .typo3-adminPanel-section-title-identifier:before {
355 content: "\f107 ";
356 }
357 }
358
359 .typo3-adminPanel-section-body {
360 padding: 0.75em 1em;
361 }
362 }
363
364 //
365 // Inputs
366 //
367 #TSFE_ADMIN_PANEL_FORM .typo3-adminPanel {
368 label {
369 display: block;
370 font-weight: normal;
371 padding: 0;
372 margin: 0;
373 overflow: hidden;
374 }
375
376 input[type=text],
377 select {
378 display: block;
379 width: 100%;
380 padding: 0.5em;
381 border: 1px solid #ccc;
382 margin: 0.5em 0;
383 font-size: inherit;
384
385 &:focus,
386 &:hover {
387 border-color: #aaa;
388 }
389 }
390
391 .typo3-adminPanel-form-group {
392 margin: 1em 0;
393 }
394
395 .typo3-adminPanel-form-group-checkbox,
396 .typo3-adminPanel-form-group-radio {
397 margin: 0.5em 0;
398
399 label {
400 padding-left: 20px;
401 }
402
403 input[type=checkbox],
404 input[type=radio] {
405 float: left;
406 padding: 0;
407 margin: 1px 0 0 -20px;
408 }
409 }
410 }
411
412 //
413 // Table
414 //
415 #TSFE_ADMIN_PANEL_FORM .typo3-adminPanel {
416 .typo3-adminPanel-table-overflow {
417 max-width: 100%;
418 margin: 1em 0;
419 overflow-x: auto;
420 }
421
422 .typo3-adminPanel-table {
423 width: 100%;
424 border: 1px solid #ccc;
425 border-collapse: collapse;
426 border-spacing: 0;
427
428 td,
429 th {
430 text-align: left;
431 overflow: hidden;
432 position: relative;
433 vertical-align: top;
434 padding: 0.75em;
435 }
436
437 thead {
438 tr {
439 background-color: rgba(0, 0, 0, 0.15);
440 }
441
442 td,
443 th {
444 font-weight: normal;
445 }
446 }
447
448 tbody {
449 tr:nth-of-type(odd) {
450 background-color: rgba(0, 0, 0, 0.05);
451 }
452 }
453 }
454
455 .typo3-adminPanel-table-cell-content {
456 word-wrap: break-word;
457 }
458
459 .typo3-adminPanel-table-cell-nowrap {
460 white-space: nowrap;
461 }
462
463 .typo3-adminPanel-logRow-highlight {
464 background-color: #fcd3cf;
465 }
466
467 .stackPointer {
468 color: maroon;
469 vertical-align: top;
470 }
471 }
472
473 //
474 // Button
475 //
476 #TSFE_ADMIN_PANEL_FORM .typo3-adminPanel {
477 .typo3-adminPanel-btn {
478 display: inline-block;
479 margin-bottom: 0;
480 padding: 6px 8px;
481 border: 1px solid transparent;
482 border-radius: 0;
483 font-weight: normal;
484 line-height: 1.5;
485 text-align: center;
486 vertical-align: middle;
487 touch-action: manipulation;
488 cursor: pointer;
489 white-space: nowrap;
490 user-select: none;
491
492 &:focus,
493 &:hover,
494 &:active {
495 outline: none;
496 }
497 }
498
499 .typo3-adminPanel-btn-default {
500 color: #333;
501 background-color: #eee;
502 border-color: #bbb;
503 cursor: pointer;
504
505 &:hover {
506 background-color: #c4c4c4;
507 }
508 }
509
510 .typo3-adminPanel-btn-dark {
511 color: #fafafa;
512 background-color: #555;
513 border-color: rgba(0, 0, 0, 0.5);
514 cursor: pointer;
515
516 &:hover {
517 background-color: #444;
518 }
519 }
520
521 .typo3-adminPanel-btn-group {
522 position: relative;
523 display: inline-block;
524 vertical-align: middle;
525
526 .typo3-adminPanel-btn + .typo3-adminPanel-btn {
527 margin-left: -1px;
528 }
529 }
530 }
531
532 //
533 // Treeline
534 //
535 #TSFE_ADMIN_PANEL_FORM .typo3-adminPanel {
536 .treeline-icon {
537 display: inline-block;
538 margin-right: 2px;
539 padding: 0;
540 height: 18px;
541 width: 16px;
542 white-space: nowrap;
543 overflow: hidden;
544 vertical-align: middle;
545 }
546
547 .treeline-icon:after,
548 .treeline-icon:before {
549 position: absolute;
550 content: '';
551 margin-left: 7px;
552 }
553
554 .treeline-icon:before {
555 top: 0;
556 height: 100%;
557 width: 2px;
558 margin-left: 7px;
559 border-left: 1px dotted #666;
560 }
561
562 .treeline-icon:after {
563 border-top: 1px dotted #666;
564 height: 2px;
565 width: 8px;
566 margin-top: 8px;
567 }
568
569 .treeline-icon-jointop:before {
570 top: 50%;
571 }
572
573 .treeline-icon-joinbottom:before {
574 height: 26px;
575 margin-top: -8px;
576 }
577
578 .treeline-icon-line:after {
579 display: none;
580 }
581
582 .treeline-icon-blank {
583 display: none;
584 }
585
586 .treeline-icon-clear:before,
587 .treeline-icon-clear:after {
588 display: none;
589 }
590 }
591
592 //
593 // Frontend Editing Styles
594 //
595 .typo3-feedit-element {
596 border: 1px solid #cacaca;
597 margin: 1em 0;
598 }
599
600 .typo3-editPanel {
601 @extend %basestyles;
602
603 display: block !important;
604 border-top: 1px solid #cacaca;
605 padding: 0.5em;
606
607 .typo3-editPanel-label {
608 margin-left: 1.5em;
609 display: inline-block;
610 vertical-align: middle;
611 }
612
613 .typo3-editPanel-btn {
614 display: inline-block !important;
615 margin-bottom: 0;
616 padding: 6px 8px;
617 line-height: 1.5em;
618 border: 1px solid transparent;
619 border-radius: 0;
620 font-weight: normal;
621 text-align: center;
622 vertical-align: middle;
623 touch-action: manipulation;
624 cursor: pointer;
625 white-space: nowrap;
626 user-select: none;
627
628 &:focus,
629 &:hover,
630 &:active {
631 outline: none;
632 }
633 }
634
635 .typo3-editPanel-btn-default {
636 color: #333;
637 background-color: #eee;
638 border-color: #bbb;
639 cursor: pointer;
640
641 &:hover {
642 background-color: #c4c4c4;
643 }
644 }
645
646 .typo3-editPanel-btn-group {
647 position: relative;
648 display: inline-block;
649 vertical-align: middle;
650
651 .typo3-editPanel-btn + .typo3-editPanel-btn {
652 margin-left: -1px;
653 }
654 }
655 }
656
657 .typo3-editPanel-btn {
658 display: inline-block !important;
659 }
660
661 .typo3-feedit-element-hidden {
662 border-color: darken(#f8ecce, 20%);
663
664 .typo3-editPanel {
665 border-top-color: darken(#f8ecce, 20%);
666 background-color: #f8ecce;
667
668 .typo3-editPanel-btn-default {
669 border-color: darken(#f8ecce, 30%);
670 background-color: darken(#f8ecce, 10%);
671
672 &:hover {
673 background-color: darken(#f8ecce, 15%);
674 }
675 }
676 }
677 }