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