d02883e73f8a9c5d74fe8b57b01d3d38e748584e
[Packages/TYPO3.CMS.git] / Build / Resources / Public / Sass / adminpanel.scss
1 /*!
2 * Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
3 * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
4 */
5
6 /* FONT PATH
7 * -------------------------- */
8 @font-face {
9 font-family: 'TYPO3FontAwesome';
10 src: url('../../../../backend/Resources/Public/Fonts/FontAwesome/fontawesome-webfont.eot?v=4.6.3');
11 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');
12 font-weight: normal;
13 font-style: normal;
14 }
15
16 /*!
17 * Font Awesome icons are prefixed with #TSFE_ADMIN_PANEL_FORM to prevent issues with
18 * CSS from the website that uses Font Awesome too.
19 */
20 #TSFE_ADMIN_PANEL_FORM .fa:before,
21 .frontEndEditIconLinks .fa:before,
22 .typo3-editPanel .fa:before {
23 display: inline-block;
24 font: normal normal normal 14px/1 TYPO3FontAwesome;
25 font-size: 15px;
26 text-rendering: auto;
27 -webkit-font-smoothing: antialiased;
28 -moz-osx-font-smoothing: grayscale;
29 transform: translate(0, 0);
30 }
31
32 #TSFE_ADMIN_PANEL_FORM .fa-pencil:before,
33 .typo3-feedit-element .fa-pencil:before {
34 content: "\f040";
35 }
36
37 #TSFE_ADMIN_PANEL_FORM .fa-angle-up:before,
38 .typo3-editPanel .fa-angle-up:before {
39 content: "\f106";
40 }
41
42 #TSFE_ADMIN_PANEL_FORM .fa-angle-down:before,
43 .typo3-editPanel .fa-angle-down:before {
44 content: "\f107";
45 }
46
47 #TSFE_ADMIN_PANEL_FORM .fa-toggle-off:before,
48 .typo3-editPanel .fa-toggle-off:before {
49 content: "\f204";
50 }
51
52 #TSFE_ADMIN_PANEL_FORM .fa-toggle-on:before,
53 .typo3-editPanel .fa-toggle-on:before {
54 content: "\f205";
55 }
56
57 #TSFE_ADMIN_PANEL_FORM .fa-google-plus-square:before,
58 .typo3-editPanel .fa-google-plus-square:before {
59 content: "\f0d4";
60 }
61
62 #TSFE_ADMIN_PANEL_FORM .fa-trash:before,
63 .typo3-editPanel .fa-trash:before {
64 content: "\f1f8";
65 }
66
67 #TSFE_ADMIN_PANEL_FORM .fa-history:before,
68 .typo3-editPanel .fa-history:before {
69 content: "\f1da";
70 }
71
72 #TSFE_ADMIN_PANEL_FORM .fa-list-alt:before,
73 .typo3-editPanel .fa-list-alt:before {
74 content: "\f022";
75 }
76
77 #TSFE_ADMIN_PANEL_FORM .fa-plus-square:before,
78 .typo3-feedit-element .fa-plus-square:before {
79 content: "\f0fe";
80 }
81
82 #TSFE_ADMIN_PANEL_FORM .fa-arrows:before,
83 .typo3-editPanel .fa-arrows:before {
84 content: "\f047";
85 }
86
87 #TSFE_ADMIN_PANEL_FORM .fa-exclamation-circle:before {
88 content: "\f06a";
89 }
90
91 #TSFE_ADMIN_PANEL_FORM .fa-exclamation-triangle:before {
92 content: "\f071";
93 }
94
95 #TSFE_ADMIN_PANEL_FORM .fa-info-circle:before {
96 content: "\f05a";
97 }
98
99 #TSFE_ADMIN_PANEL_FORM .fa-caret-down:before {
100 content: "\f0d7";
101 }
102
103 #TSFE_ADMIN_PANEL_FORM .fa-caret-up:before {
104 content: "\f0d8";
105 }
106
107 #TSFE_ADMIN_PANEL_FORM .fa-bolt:before {
108 content: "\f0e7";
109 }
110
111 /**
112 * General Styles
113 **/
114
115 #TSFE_ADMIN_PANEL_FORM *:before,
116 #TSFE_ADMIN_PANEL_FORM *:after {
117 -webkit-box-sizing: border-box;
118 -moz-box-sizing: border-box;
119 box-sizing: border-box;
120 }
121
122 /**
123 * Frontend Editing Styles
124 **/
125
126 .typo3-editPanel {
127 background: #ccc;
128 padding: 5px 10px;
129 }
130
131 .typo3-editPanel a {
132 text-decoration: none;
133 }
134
135 .typo3-editPanel-label {
136 display: inline;
137 margin: 0 10px;
138 }
139
140 .typo3-editPanel .t3-icon {
141 display: inline-block;
142 position: relative;
143 overflow: hidden;
144 }
145
146 .typo3-feedit-element .btn-default.content-link {
147 background-color: #eee;
148 margin: 3px;
149 }
150
151 .typo3-feedit-element-hidden {
152 opacity: 0.2;
153 }
154
155 /**
156 * Admin Panel Styles
157 **/
158
159 #TSFE_ADMIN_PANEL_FORM {
160 display: block;
161 max-width: 50%;
162 }
163
164 #TSFE_ADMIN_PANEL_FORM {
165 background-color: #fff;
166 box-shadow: 0 3px 15px #808080;
167 margin: 0;
168 padding: 0;
169 z-index: 10002;
170 border-top-right-radius: 4px;
171 border-top-left-radius: 4px;
172 }
173
174 #TSFE_ADMIN_PANEL_FORM .typo3-adminPanel {
175 border: 1px solid #ccc;
176 border-spacing: 0;
177 border-collapse: separate;
178 border-top-right-radius: 4px;
179 border-top-left-radius: 4px;
180 margin: 0;
181 min-width: 315px;
182 padding: 0;
183 line-height: 0.8;
184 }
185
186 #TSFE_ADMIN_PANEL_FORM .typo3-adminPanel * {
187 line-height: 1;
188 }
189
190 #TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .typo3-adminPanel-table * {
191 line-height: 1.55;
192 }
193
194 #TSFE_ADMIN_PANEL_FORM,
195 #TSFE_ADMIN_PANEL_FORM table,
196 #TSFE_ADMIN_PANEL_FORM a {
197 color: black;
198 font-family: Verdana, Arial, sans-serif;
199 font-size: 12px;
200 text-decoration: none;
201 }
202
203 #TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-header {
204 line-height: 0.5;
205 }
206
207 #TSFE_ADMIN_PANEL_FORM #typo3-adminPanel-header {
208 border-top-right-radius: 4px;
209 border-top-left-radius: 4px;
210 cursor: move;
211 }
212
213 #TSFE_ADMIN_PANEL_FORM #typo3-adminPanel-header {
214 display: inline-block;
215 width: 100%;
216 background-color: #222;
217 color: white;
218 }
219
220 #TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-header a {
221 color: #fff;
222 }
223
224 #TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-header-title {
225 float: left;
226 padding-top: 11px;
227 padding-left: 15px;
228 }
229
230 #TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-header-buttonWrapper {
231 display: inline-block;
232 float: right;
233 margin-left: 10px;
234 }
235
236 #TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-panel-open .typo3-adminPanel-header-button:before,
237 #TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-panel-closed .typo3-adminPanel-header-button:before {
238 display: inline-block;
239 float: right;
240 padding: 10px 15px;
241 font-size: 16px;
242 content: "\f106";
243 }
244
245 #TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-panel-closed .typo3-adminPanel-header-button:before {
246 content: "\f107";
247 }
248
249 #TSFE_ADMIN_PANEL_FORM .updatebutton {
250 text-align: right;
251 background-color: #222;
252 width: 100%;
253 }
254
255 #TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-section-title .wrapper {
256 clear: left;
257 margin: 0;
258 padding: 0;
259 border-top: 1px solid #888;
260 border-bottom: 1px solid #888;
261 background-color: #ddd;
262 }
263
264 #TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-section-title a {
265 display: block;
266 padding-top: 5px;
267 padding-bottom: 5px;
268 line-height: 25px;
269 }
270
271 #TSFE_ADMIN_PANEL_FORM label {
272 display: inline;
273 line-height: 16px;
274 font-weight: 500;
275 }
276
277 #TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-section-title a .typo3-adminPanel-label {
278 padding-top: 4px;
279 white-space: nowrap;
280 }
281
282 #TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-section-title .wrapper:hover {
283 color: #fff;
284 background-color: #7e7e7e;
285 }
286
287 #TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-section-title .wrapper:hover a {
288 color: #fff;
289 }
290
291 #TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-section-title .typo3-adminPanel-section-open,
292 #TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-section-title .typo3-adminPanel-section-closed {
293 display: inline-block;
294 width: 100%;
295 padding-left: 26px;
296 }
297
298 #TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-section-title .typo3-adminPanel-section-open:before,
299 #TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-section-title .typo3-adminPanel-section-closed:before {
300 margin-left: -13px;
301 padding-right: 13px;
302 font-size: 14px;
303 content: "\f0d8";
304 }
305
306 #TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-section-title .typo3-adminPanel-section-closed:before {
307 content: "\f0d7";
308 }
309
310 #TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-itemRow .typo3-adminPanel-section-content {
311 padding: 7px 15px;
312 line-height: 16px;
313 }
314
315 #TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-section-content {
316 padding-right: 11px;
317 }
318
319 #TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-section-content .toolbar span {
320 padding: 1px;
321 }
322
323 #TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-section-content label {
324 padding-right: 5px;
325 }
326
327 #TSFE_ADMIN_PANEL_FORM #typo3-adminPanel-tsLog {
328 border: 1px solid #7e7e7e;
329 border-spacing: 0;
330 }
331
332 #TSFE_ADMIN_PANEL_FORM .clear-cache-icon:before {
333 position: relative;
334 left: 34px;
335 top: 3px;
336 }
337
338 #TSFE_ADMIN_PANEL_FORM .btn.clear-cache {
339 margin-left: 15px;
340 padding-left: 25px;
341 }
342
343 #TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-table {
344 width: 100%;
345 border-collapse: collapse;
346 border-spacing: 0;
347 border: 1px solid #ccc;
348 }
349
350 #TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-table tr {
351 margin: 0;
352 padding: 0;
353 vertical-align: inherit;
354 border-color: inherit;
355 }
356
357 #TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-table td {
358 margin: 0;
359 vertical-align: inherit;
360 border-color: inherit;
361 padding: 0 15px;
362 text-align: left;
363 white-space: nowrap;
364 }
365
366 #TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-table th {
367 padding: 10px 10px 10px 15px;
368 border-bottom: 1px solid #aaa;
369 text-align: left;
370 background-color: #ededed;
371 }
372
373 #TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-table th span[style] {
374 color: #fff !important;
375 }
376
377 #TSFE_ADMIN_PANEL_FORM #typo3-adminPanel-tsLog .typo3-adminPanel-logRow-highlight {
378 background-color: #fcd3cf;
379 }
380
381 #TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-table-wrapper {
382 padding: 10px 0;
383 }
384
385 #TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-table-wrapper.scroll-table {
386 overflow-x: scroll;
387 }
388
389 #TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-table .line-odd,
390 #TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-table .line-even {
391 background-color: #f0f0f0;
392 text-align: left;
393 vertical-align: top;
394 }
395
396 #TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-table .line-even {
397 background-color: #dedede;
398 }
399
400 #TSFE_ADMIN_PANEL_FORM #typo3-adminPanel-tsLog .stackPointer {
401 color: maroon;
402 vertical-align: top;
403 }
404
405 /**
406 * General Form and Button Styles
407 **/
408
409 .t3-icon {
410 display: inline-block;
411 position: relative;
412 vertical-align: middle;
413 text-align: center;
414 }
415
416 .btn .t3-icon {
417 margin: 0;
418 }
419
420 #TSFE_ADMIN_PANEL_FORM input,
421 #TSFE_ADMIN_PANEL_FORM select {
422 position: static;
423 padding: 0;
424 }
425
426 #TSFE_ADMIN_PANEL_FORM input[type="checkbox"] {
427 display: block;
428 float: left;
429 margin-top: 1px;
430 margin-left: 0;
431 margin-right: 5px;
432 }
433
434 #TSFE_ADMIN_PANEL_FORM input[type="text"],
435 #TSFE_ADMIN_PANEL_FORM select {
436 display: block;
437 width: 100%;
438 margin-top: 5px;
439 padding: 6px;
440 box-sizing: border-box;
441 }
442
443 #TSFE_ADMIN_PANEL_FORM input {
444 font-family: inherit;
445 font-size: inherit;
446 line-height: inherit;
447 color: inherit;
448 margin: 0;
449 }
450
451 #TSFE_ADMIN_PANEL_FORM .btn {
452 display: inline-block;
453 margin-bottom: 0;
454 padding: 6px 8px;
455 border: 1px solid transparent;
456 border-radius: 2px;
457 font-weight: normal;
458 font-size: 12px;
459 line-height: 1.5;
460 text-align: center;
461 vertical-align: middle;
462 touch-action: manipulation;
463 cursor: pointer;
464 background-image: none;
465 white-space: nowrap;
466 -webkit-user-select: none;
467 -moz-user-select: none;
468 -ms-user-select: none;
469 user-select: none;
470 }
471
472 #TSFE_ADMIN_PANEL_FORM .btn:hover {
473 background-color: #c4c4c4;
474 }
475
476 #TSFE_ADMIN_PANEL_FORM .btn-default {
477 color: #333;
478 background-color: #eee;
479 border-color: #bbb;
480 cursor: pointer;
481 }
482
483 #TSFE_ADMIN_PANEL_FORM .btn-group {
484 position: relative;
485 display: inline-block;
486 vertical-align: middle;
487 }
488
489 #TSFE_ADMIN_PANEL_FORM .btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
490 border-radius: 0;
491 }
492
493 #TSFE_ADMIN_PANEL_FORM .btn-group > .btn:first-child {
494 margin-left: 0;
495 }
496
497 #TSFE_ADMIN_PANEL_FORM input[type="text"] {
498 font-size: 12px;
499 line-height: 1.5;
500 color: #333;
501 background-color: #fefefe;
502 background-image: none;
503 border: 1px solid #bbb;
504 border-radius: 2px;
505 -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
506 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
507 -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
508 -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
509 transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
510 }
511
512 #TSFE_ADMIN_PANEL_FORM .treeline-icon {
513 position: relative;
514 display: inline-block;
515 margin-right: 2px;
516 padding: 0;
517 height: 18px;
518 width: 16px;
519 white-space: nowrap;
520 overflow: hidden;
521 vertical-align: middle;
522 }
523
524 #TSFE_ADMIN_PANEL_FORM .treeline-icon:after,
525 #TSFE_ADMIN_PANEL_FORM .treeline-icon:before {
526 position: absolute;
527 content: '';
528 left: 50%;
529 }
530
531 #TSFE_ADMIN_PANEL_FORM .treeline-icon:before {
532 top: 0;
533 height: 100%;
534 width: 2px;
535 margin-left: -1px;
536 border-left: 1px dotted #666;
537 }
538
539 #TSFE_ADMIN_PANEL_FORM .treeline-icon:after {
540 border-top: 1px dotted #666;
541 height: 2px;
542 width: 100%;
543 top: 50%;
544 margin-top: -1px;
545 }
546
547 #TSFE_ADMIN_PANEL_FORM .treeline-icon-jointop:before {
548 top: 50%;
549 }
550
551 #TSFE_ADMIN_PANEL_FORM .treeline-icon-joinbottom:before {
552 top: -50%;
553 }
554
555 #TSFE_ADMIN_PANEL_FORM .treeline-icon-line:after {
556 display: none;
557 }
558
559 #TSFE_ADMIN_PANEL_FORM .treeline-icon-blank {
560 display: none;
561 }
562
563 #TSFE_ADMIN_PANEL_FORM .treeline-icon-clear:before,
564 #TSFE_ADMIN_PANEL_FORM .treeline-icon-clear:after {
565 display: none;
566 }