24f344a65c88686aee233e3c203df3efbaf1bf58
[Packages/TYPO3.CMS.git] / typo3 / sysext / t3skin / Resources / Private / Styles / TYPO3 / _topbar.less
1 /**
2 * This file is part of the TYPO3 CMS project.
3 *
4 * It is free software; you can redistribute it and/or modify it under
5 * the terms of the GNU General Public License, either version 2
6 * of the License, or any later version.
7 *
8 * For the full copyright and license information, please read the
9 * LICENSE.txt file that was distributed with this source code.
10 *
11 * The TYPO3 project - inspiring people to share!
12 */
13
14 /* - - - - - - - - - - - - - - - - - - - - -
15 Topbar
16 - - - - - - - - - - - - - - - - - - - - - */
17
18 #typo3-topbar {
19 z-index: 200;
20
21 div {
22 overflow: visible !important;
23 }
24
25 #typo3-top-container {
26 background: #000;
27 color: @navbar-inverse-color;
28
29 height: 100%;
30 padding: 0 24px;
31
32 #typo3-logo {
33 margin: 8px 0 0 0;
34 padding: 1px 0 0 0;
35 width: 159px;
36 }
37
38 .typo3-top-toolbar {
39 margin-top: 6px;
40 padding-right: 24px;
41 position: absolute;
42 right: 0px;
43
44 .separator {
45 border-right: 1px solid #000;
46 box-shadow: 1px 0 #585858;
47 }
48
49 #typo3-toolbar {
50 list-style: none;
51 display: inline;
52 margin: 0px;
53 padding: 0px;
54
55 div {
56 overflow: visible !important;
57 }
58
59 span.spinner {
60 background-image: url('../../../../images/spinner/3f3f3f.gif');
61 }
62
63 >li {
64 display: inline;
65 float: left;
66 }
67
68 li {
69 padding-top: 3px;
70 position: relative;
71 padding-bottom: 2px;
72 }
73
74 .separator {
75 padding-right: 12px;
76 margin-right: 13px;
77
78 .toolbar-item-menu {
79 right: 12px;
80 }
81 }
82
83 .toolbar-item {
84 display: block;
85 padding-bottom: 4px;
86 padding-top: 2px;
87 text-align: center;
88 color: #fff;
89
90 .badge {
91 position: absolute;
92 top: -3px;
93 right: -3px;
94 font-size: 7px;
95 }
96 }
97
98 .toolbar-item-active {
99 background-image: url('../../../../icons/gfx/toolbar_item_active_bg.png');
100 height: 25px;
101 color: #000;
102 }
103
104 .toolbar-item-menu {
105 background-color: #f9f9f9;
106 border: 1px solid #abb2bc;
107 border-top: none;
108 list-style: none;
109 position: absolute;
110 top: 28px;
111 z-index: 100;
112 right: 0;
113 margin: 0;
114 padding: 2px 0 0;
115 width: 180px;
116
117 li {
118 padding-top: 0;
119 padding-bottom: 0;
120
121 a {
122 float: none;
123 min-height: 19px;
124 padding-left: 2px;
125 padding-top: 1px;
126 vertical-align: middle;
127 display: block;
128 padding-bottom: 2px;
129 padding-left: 3px;
130 vertical-align: middle;
131 }
132 }
133 }
134 }
135 }
136 }
137 }
138
139 #typo3-toolbar * li:hover,
140 tr.shortcut:hover,
141 tr.recentdoc:hover,
142 tr.opendoc:hover {
143 background: #eee;
144 }
145
146 /* - - - - - - - - - - - - - - - - - - - - -
147 Clear cache
148 - - - - - - - - - - - - - - - - - - - - - */
149
150 #clear-cache-actions-menu {
151 width: 30px;
152
153 li {
154 text-align: left;
155
156 img {
157 float: left;
158 padding-right: 6px;
159 }
160 a {
161 text-decoration: none;
162
163 span.t3-icon {
164 vertical-align: middle;
165 }
166 }
167 }
168 }
169
170 /* - - - - - - - - - - - - - - - - - - - - -
171 Shortcuts menu
172 - - - - - - - - - - - - - - - - - - - - - */
173
174 #shortcut-menu {
175 width: 30px;
176
177 .toolbar-item-menu {
178 margin: 0px;
179 padding: 2px 0px 0px;
180 position: absolute;
181 width: 220px;
182 }
183
184 .shortcut-list {
185 width: 100%;
186
187 tr.shortcut.first-row td {
188 background-image: url('../../../../icons/gfx/shortcutgroups-bg.png');
189 background-repeat: repeat-x;
190 padding-top: 4px;
191 }
192
193 tr.shortcut td {
194 line-height: 16px;
195 padding: 2px 1px;
196 }
197
198 }
199 }
200
201
202 #shortcut-menu .shortcut-list tr.shortcut-group td.shortcut-group-icon,
203 #shortcut-menu .shortcut-list tr.shortcut td.shortcut-icon,
204 #shortcut-menu .shortcut-list td.shortcut-edit,
205 #shortcut-menu .shortcut-list td.shortcut-delete {
206 text-align: center;
207 }
208
209 #shortcut-menu .shortcut-list tr.shortcut td.shortcut-label a,
210 #shortcut-menu .shortcut-list tr.shortcut td.shortcut-edit img,
211 #shortcut-menu .shortcut-list tr.shortcut td.shortcut-delete img {
212 cursor: pointer;
213 }
214
215 #shortcut-menu .shortcut-list .shortcut-group td {
216 background-color: #dbdbdb;
217 border-bottom: 1px solid #a5a5a5;
218 border-top: 1px solid #a5a5a5;
219 }
220
221
222 #shortcut-menu .shortcut-list tr.shortcut-group td.shortcut-group-icon,
223 #shortcut-menu .shortcut-list tr.shortcut td.shortcut-icon,
224 #shortcut-menu .shortcut-list td.shortcut-edit,
225 #shortcut-menu .shortcut-list td.shortcut-delete {
226 vertical-align: top;
227 width: 18px;
228 }
229
230 #shortcut-menu .shortcut-list tr.shortcut td.shortcut-label a {
231 display: block;
232 }
233
234 #shortcut-menu .shortcut-list tr.shortcut td.shortcut-edit img,
235 #shortcut-menu .shortcut-list tr.shortcut td.shortcut-delete img {
236 display: none;
237 }
238
239 #shortcut-menu .shortcut-list tr.shortcut:hover td.shortcut-edit img,
240 #shortcut-menu .shortcut-list tr.shortcut:hover td.shortcut-delete img {
241 display: inline;
242 }
243
244 #shortcut-menu .shortcut-list tr.shortcut-group td.shortcut-group-icon,
245 #shortcut-menu .shortcut-list tr.shortcut td.shortcut-icon {
246 padding-left: 7px;
247 vertical-align: top;
248 }
249
250 /* - - - - - - - - - - - - - - - - - - - - -
251 Username inside the toolbar
252 - - - - - - - - - - - - - - - - - - - - - */
253
254 #username {
255 font-weight: bold;
256 margin-right: 12px;
257
258 a {
259 color: #ffffff;
260 font-weight: bold;
261 font-size: 11px;
262 text-decoration: none;
263 line-height: 18px;
264
265 span.t3-icon {
266 vertical-align: top;
267 margin-top: 1px;
268 }
269 }
270
271 img {
272 padding-right: 4px;
273 }
274
275
276 &.su-user {
277 a {
278 color: #eb6e5a;
279 }
280
281 }
282 }
283
284 /* - - - - - - - - - - - - - - - - - - - - -
285 Logon / Logout
286 - - - - - - - - - - - - - - - - - - - - - */
287
288 #login-info p {
289 padding-bottom: 30px;
290 padding-top: 5px;
291 }
292
293 #logout-button {
294 padding-top: 1px;
295 padding-bottom: 2px;
296
297 input {
298 height: 20px;
299 padding: 0 0 2px 0;
300 background: #494949;
301 border: 1px solid #636363;
302 color: #fff;
303 cursor: pointer;
304 text-align: center;
305 padding: 0 5px;
306 padding-top: 1px;
307 }
308
309 input:hover {
310 background-color: #c8c8c8;
311 background-image: url('../../../../images/backgrounds/button-hover.png');
312 background-image: linear-gradient(center top, #f6f6f6 10%, #c8c8c8 90%);
313 border: 1px solid #737f91;
314 color: #000;
315 }
316 }
317
318 /* - - - - - - - - - - - - - - - - - - - - -
319 Workspace Selector
320 - - - - - - - - - - - - - - - - - - - - - */
321 #workspace-selector-menu {
322 width: 30px;
323
324 ul {
325 position: static;
326 list-style: none;
327 margin: 0px;
328 padding: 2px 0px 0px;
329 width: 180px;
330
331 li {
332 text-align: left;
333 float: none;
334 min-height: 19px;
335 vertical-align: middle;
336
337 span.t3-icon {
338 float: left;
339 margin-top: 0;
340 margin-right: 2px;
341 }
342
343 a {
344 text-decoration: none;
345 display: block;
346 padding-bottom: 2px;
347 padding-left: 3px;
348 vertical-align: middle;
349 }
350
351 img {
352 float: left;
353 position: relative;
354 margin-right: 2px;
355 }
356 }
357
358 li.divider {
359 border: 0;
360 background-image: url('../../../../icons/gfx/shortcutgroups-bg.png');
361 background-repeat: repeat-x;
362 min-height: 10px;
363 padding-right: 0;
364 padding-top: 4px;
365
366 &:hover {
367 background-color: transparent;
368 }
369 }
370
371 }
372
373 .items {
374 list-style: none;
375 background-color: #f9f9f9;
376 overflow-y: auto;
377 max-height: 300px;
378 }
379 }
380
381 body.typo3-in-workspace #typo3-top-container {
382 background: none;
383 }
384
385 body.typo3-in-workspace #typo3-topbar .x-panel-bwrap {
386 background: url('../../../../images/backgrounds/topbar-in-workspace-background-left.png') no-repeat;
387 }
388
389 body.typo3-in-workspace #typo3-topbar .x-panel-body {
390 background: url('../../../../images/backgrounds/topbar-in-workspace-background-right.png') no-repeat right 0;
391 }
392
393 body.typo3-in-workspace #typo3-topbar {
394 background: url('../../../../images/backgrounds/topbar-in-workspace-background.gif');
395 }
396
397 body.typo3-in-workspace #typo3-topbar #username {
398 text-shadow: 0 0 5px #000000;
399 }
400
401 /* - - - - - - - - - - - - - - - - - - - - -
402 Live Search
403 - - - - - - - - - - - - - - - - - - - - - */
404
405 #typo3-toolbar #live-search-menu {
406 padding-top: 4px;
407 }
408
409 .live-search-results .t3-icon-toolbar-menu-search {
410 position: absolute;
411 z-index: 3000;
412 top: 3px;
413 margin: 3px;
414 }
415
416 .t3-icon-input-clear {
417 cursor: pointer;
418 position: absolute;
419 top: 0px;
420 right: 20px;
421 }
422
423 #live-search-box {
424 padding-left: 20px;
425 width: 180px;
426 border: none;
427 }
428
429 .live-search-list {
430 background-color: white;
431 border: none;
432
433 .x-combo-list {
434 background-color: white;
435 }
436
437 .search-item-type {
438 border-right: 1px solid #ddd;
439 padding: 2px 5px 2px 0;
440 }
441
442 .search-item-content {
443 padding: 0 8px;
444
445 .search-item-title {
446 padding: 2px;
447 border: none !important;
448 }
449 }
450
451 .x-combo-list-inner {
452 padding-bottom: 5px;
453 }
454
455 .x-combo-list-hd {
456 background: none;
457 border: none;
458 margin-left: 110px;
459 color: #ddd;
460 }
461
462 }
463
464 .search-list-help-content {
465 margin: 5px;
466 height: 100%;
467 padding: 0.6em 0.6em 0.6em 2.6em;
468 background-repeat: no-repeat;
469 background-position: 0.5em 0.7em;
470 border: 1px solid;
471 color: #000000;
472
473 background-color: #ddeef9;
474 border-color: #8aafc4;
475 }