[FEATURE] Refactor toolbar / topbar HTML5 & layout
[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 background-color: @navbar-inverse-bg;
20 z-index: 200;
21
22 div {
23 overflow: visible !important;
24 }
25
26 #typo3-top-container {
27 margin-bottom: 0;
28
29 #typo3-logo {
30 margin: 8px 0 0 0;
31 padding: 1px 0 0 0;
32 width: 159px;
33 }
34
35 #typo3-toolbar {
36 list-style: none;
37 display: inline;
38
39 div {
40 overflow: visible !important;
41 }
42
43 span.spinner {
44 background-image: url('../../../../images/spinner/3f3f3f.gif');
45 }
46
47 > li {
48 .dropdown;
49 }
50
51 .toolbar-item {
52 .badge {
53 position: absolute;
54 top: 6px;
55 right: 4px;
56 font-size: 7px;
57 }
58 }
59
60 .toolbar-item-active {
61 background-color: @navbar-inverse-link-active-bg;
62 color: @navbar-inverse-link-active-color;
63 }
64
65 .toolbar-item-menu {
66 .dropdown-menu;
67
68 // Migration between Toolbaritem -> Bootstrap
69 display: block;
70 visiblity: hidden;
71 left: auto;
72 right: 0;
73
74 background-color: @navbar-inverse-link-active-bg;
75 color: @navbar-inverse-link-active-color;
76 border: 0;
77 margin: 0;
78
79 li,
80 td {
81 a {
82 color: @navbar-inverse-link-active-color;
83 text-decoration: none;
84
85 &:hover {
86 background-color: darken(@navbar-inverse-link-active-bg, 10%);
87 color: @navbar-inverse-link-active-color;
88 text-decoration: none;
89 }
90 }
91 }
92 }
93 }
94 }
95 }
96
97 /* - - - - - - - - - - - - - - - - - - - - -
98 Clear cache
99 - - - - - - - - - - - - - - - - - - - - - */
100
101 #clear-cache-actions-menu {
102 li {
103 text-align: left;
104
105 img {
106 float: left;
107 padding-right: 6px;
108 }
109 a {
110 text-decoration: none;
111
112 span.t3-icon {
113 vertical-align: middle;
114 }
115 }
116 }
117 }
118
119 /* - - - - - - - - - - - - - - - - - - - - -
120 Shortcuts menu
121 - - - - - - - - - - - - - - - - - - - - - */
122
123 #shortcut-menu {
124 .shortcut-list {
125 width: 100%;
126
127 tr.shortcut td {
128 line-height: 16px;
129 padding: 2px 1px;
130 }
131
132 }
133 }
134
135
136 #shortcut-menu .shortcut-list tr.shortcut-group td.shortcut-group-icon,
137 #shortcut-menu .shortcut-list tr.shortcut td.shortcut-icon,
138 #shortcut-menu .shortcut-list td.shortcut-edit,
139 #shortcut-menu .shortcut-list td.shortcut-delete {
140 text-align: center;
141 }
142
143 #shortcut-menu .shortcut-list tr.shortcut td.shortcut-label a,
144 #shortcut-menu .shortcut-list tr.shortcut td.shortcut-edit img,
145 #shortcut-menu .shortcut-list tr.shortcut td.shortcut-delete img {
146 cursor: pointer;
147 }
148
149 #shortcut-menu .shortcut-list .shortcut-group td {
150 background-color: #dbdbdb;
151 color: #000;
152 border-bottom: 1px solid #a5a5a5;
153 border-top: 1px solid #a5a5a5;
154 }
155
156
157 #shortcut-menu .shortcut-list tr.shortcut-group td.shortcut-group-icon,
158 #shortcut-menu .shortcut-list tr.shortcut td.shortcut-icon,
159 #shortcut-menu .shortcut-list td.shortcut-edit,
160 #shortcut-menu .shortcut-list td.shortcut-delete {
161 vertical-align: top;
162 width: 18px;
163 }
164
165 #shortcut-menu .shortcut-list tr.shortcut td.shortcut-label a {
166 display: block;
167 }
168
169 #shortcut-menu .shortcut-list tr.shortcut td.shortcut-edit img,
170 #shortcut-menu .shortcut-list tr.shortcut td.shortcut-delete img {
171 display: none;
172 }
173
174 #shortcut-menu .shortcut-list tr.shortcut:hover td.shortcut-edit img,
175 #shortcut-menu .shortcut-list tr.shortcut:hover td.shortcut-delete img {
176 display: inline;
177 }
178
179 #shortcut-menu .shortcut-list tr.shortcut-group td.shortcut-group-icon,
180 #shortcut-menu .shortcut-list tr.shortcut td.shortcut-icon {
181 padding-left: 7px;
182 vertical-align: top;
183 }
184
185 /* - - - - - - - - - - - - - - - - - - - - -
186 Username inside the toolbar
187 - - - - - - - - - - - - - - - - - - - - - */
188
189 #username {
190 color: #fff;
191
192 a {
193 color: #ffffff;
194 font-weight: bold;
195 font-size: 11px;
196 text-decoration: none;
197 line-height: 18px;
198
199 span.t3-icon {
200 vertical-align: top;
201 margin-top: 1px;
202 }
203 }
204
205 img {
206 padding-right: 4px;
207 }
208
209
210 &.su-user {
211 a {
212 color: #eb6e5a;
213 }
214
215 }
216 }
217
218 #logout-button {
219 margin-top: (@navbar-padding-vertical - 2);
220 padding: 0 @navbar-padding-horizontal;
221 }
222
223 /* - - - - - - - - - - - - - - - - - - - - -
224 Logon / Logout
225 - - - - - - - - - - - - - - - - - - - - - */
226
227 #login-info p {
228 padding-bottom: 30px;
229 padding-top: 5px;
230 }
231
232 #logout-button {
233 padding-top: 1px;
234 padding-bottom: 2px;
235
236 input {
237 height: 20px;
238 padding: 0 0 2px 0;
239 background: #494949;
240 border: 1px solid #636363;
241 color: #fff;
242 cursor: pointer;
243 text-align: center;
244 padding: 0 5px;
245 padding-top: 1px;
246 }
247
248 input:hover {
249 background-color: #c8c8c8;
250 background-image: url('../../../../images/backgrounds/button-hover.png');
251 background-image: linear-gradient(center top, #f6f6f6 10%, #c8c8c8 90%);
252 border: 1px solid #737f91;
253 color: #000;
254 }
255 }
256
257 /* - - - - - - - - - - - - - - - - - - - - -
258 Workspace Selector
259 - - - - - - - - - - - - - - - - - - - - - */
260 #workspace-selector-menu {
261 ul {
262 li {
263 span.t3-icon {
264 float: left;
265 margin-top: 0;
266 margin-right: 2px;
267 }
268
269 img {
270 float: left;
271 position: relative;
272 margin-right: 2px;
273 }
274 }
275 }
276
277 .items {
278 list-style: none;
279 overflow-y: auto;
280 max-height: 300px;
281 }
282 }
283
284
285 body.typo3-in-workspace {
286 #typo3-top-container {
287 background-image:
288 url('../../../../images/backgrounds/topbar-in-workspace-background-left.png'),
289 url('../../../../images/backgrounds/topbar-in-workspace-background-right.png'),
290 url('../../../../images/backgrounds/topbar-in-workspace-background.gif');
291 background-repeat: no-repeat, no-repeat, repeat-x;
292 background-position: left top, right top, left top;
293
294 #username {
295 text-shadow: 0 0 5px #000000;
296 }
297 }
298 }
299
300 /* - - - - - - - - - - - - - - - - - - - - -
301 Live Search
302 - - - - - - - - - - - - - - - - - - - - - */
303
304 #typo3-toolbar #live-search-menu {
305 padding-top: 13px;
306 padding-left: @navbar-padding-horizontal;
307 padding-right: @navbar-padding-horizontal;
308 }
309
310 .live-search-results .t3-icon-toolbar-menu-search {
311 position: absolute;
312 z-index: 3000;
313 top: 13px;
314 margin: 3px;
315 }
316
317 .t3-icon-input-clear {
318 cursor: pointer;
319 position: absolute;
320 top: 0px;
321 right: 20px;
322 }
323
324 #live-search-box {
325 padding-left: 20px;
326 width: 180px;
327 border: none;
328 }
329
330 .live-search-list {
331 background-color: white;
332 border: none;
333
334 .x-combo-list {
335 background-color: white;
336 }
337
338 .search-item-type {
339 border-right: 1px solid #ddd;
340 padding: 2px 5px 2px 0;
341 }
342
343 .search-item-content {
344 padding: 0 8px;
345
346 .search-item-title {
347 padding: 2px;
348 border: none !important;
349 }
350 }
351
352 .x-combo-list-inner {
353 padding-bottom: 5px;
354 }
355
356 .x-combo-list-hd {
357 background: none;
358 border: none;
359 margin-left: 110px;
360 color: #ddd;
361 }
362 }
363
364 .search-list-help-content {
365 margin: 5px;
366 height: 100%;
367 padding: 0.6em 0.6em 0.6em 2.6em;
368 background-repeat: no-repeat;
369 background-position: 0.5em 0.7em;
370 border: 1px solid;
371 color: #000000;
372
373 background-color: #ddeef9;
374 border-color: #8aafc4;
375 }