[FEATURE] Introduce System Information dropdown item
[Packages/TYPO3.CMS.git] / typo3 / sysext / t3skin / Resources / Private / Styles / TYPO3 / _topbar.less
1 //
2 // Topbar
3 //
4
5 @topbar-color: #ddd;
6 @topbar-height: 45px;
7 @topbar-zindex: @zindex-navbar;
8 @topbar-bg: @navbar-inverse-bg;
9
10 @topbar-navigation-color: @topbar-color;
11 @topbar-navigation-bg: #222;
12 @topbar-navigation-border-color: #111;
13
14 @topbar-dropdown-padding: 16px;
15 @topbar-dropdown-color: @topbar-navigation-color;
16 @topbar-dropdown-bg: @topbar-navigation-bg;
17
18 @topbar-dropdown-link-bg: @topbar-navigation-bg;
19 @topbar-dropdown-link-color: #ddd;
20 @topbar-dropdown-link-hover-bg: #333;
21 @topbar-dropdown-link-hover-color: #fff;
22 @topbar-dropdown-link-active-bg: lighten(@topbar-dropdown-bg, 15%);
23 @topbar-dropdown-link-active-color: #fff;
24
25 @tobar-navigation-search-bg: @topbar-navigation-bg;
26 @tobar-navigation-search-hover-bg: @topbar-dropdown-link-hover-bg;
27 @tobar-navigation-search-focus-bg: @topbar-dropdown-link-active-bg;
28
29
30 // HOTFIX SCAFFOLDING
31 [id="typo3-topbar"],
32 [id="typo3-topbar"] .x-panel-body {
33 min-width: 1000px;
34 }
35
36 // Topbar
37 [id="typo3-topbar"]{
38 height: @topbar-height;
39 position: relative;
40 background-color: @topbar-bg;
41 color: @topbar-color;
42 .x-panel-bwrap,
43 .x-panel-body {
44 overflow: visible;
45 }
46 }
47 .typo3-in-workspace [id="typo3-topbar"] {
48 background-color: #6d860d;
49 .typo3-topbar-site-name {
50 color: #fff;
51 }
52 }
53
54 // Container
55 .typo3-topbar-container {
56 .user-select(none);
57 height: @topbar-height;
58 position: relative;
59 }
60
61 // Site
62 .typo3-topbar-site {
63 display: table;
64 padding: 0;
65 height: @navbar-height;
66 float: left;
67 }
68 .typo3-topbar-site-logo,
69 .typo3-topbar-site-name {
70 display: table-cell;
71 vertical-align: middle;
72 text-align: center;
73 }
74 .typo3-topbar-site-logo {
75 background-color: @topbar-bg;
76 width: 51px;
77 .box-shadow(2px 0px 0px rgba(0, 0, 0, 0.15));
78 &:hover {
79 background-color: @tobar-navigation-search-hover-bg;
80 }
81 > img {
82 max-height: 50px;
83 }
84 }
85 .typo3-topbar-site-name {
86 cursor: default;
87 padding: 0 (@grid-gutter-width / 2);
88 }
89
90
91 // Shared
92 .typo3-topbar-navigation {
93 color: @topbar-navigation-color;
94 background-color: @topbar-navigation-bg;
95 float: right;
96 // Shortcut
97 .shortcut {
98 min-width: 180px;
99 }
100 .shortcut-form {
101 padding: @topbar-dropdown-padding;
102 margin: (@topbar-dropdown-padding / 4) -@topbar-dropdown-padding;
103 border-top: 1px solid lighten(@topbar-navigation-border-color,15%);
104 background-color: lighten(@topbar-navigation-border-color,10%);
105 border-bottom: 1px solid @topbar-navigation-border-color;
106 }
107 }
108
109
110 // Navigation Items
111 .typo3-topbar-navigation-items {
112 height: @topbar-height;
113 margin-bottom: 0;
114 padding-left: 0;
115 list-style: none;
116 float: left;
117 a {
118 color: @topbar-navigation-color;
119 text-decoration: none;
120 }
121 > li {
122 float: left;
123 height: @topbar-height;
124 > a {
125 position: relative;
126 display: block;
127 padding: @navbar-padding-vertical 10px;
128 border-left: 1px solid lighten(@topbar-navigation-border-color,10%);
129 border-right: 1px solid @topbar-navigation-border-color;
130 &:hover,
131 &:focus,
132 &:active {
133 color: @topbar-dropdown-link-hover-color;
134 background-color: @topbar-dropdown-link-hover-bg;
135 border-left-color: lighten(@topbar-dropdown-link-hover-bg,3%)
136 }
137 }
138 }
139 > li.open {
140 > a {
141 color: @topbar-dropdown-link-active-color;
142 background-color: @topbar-dropdown-link-active-bg;
143 border-left-color: lighten(@topbar-dropdown-link-active-bg,3%);
144 }
145 }
146 }
147
148 // Dropdown
149 .typo3-topbar-navigation-items {
150 .dropdown {
151 min-width: @topbar-height;
152 text-align: center;
153 > a > .fa {
154 font-size: 16px;
155 margin: 0;
156 display: inline-block;
157 position: relative;
158 vertical-align: middle;
159 width: auto;
160 height: auto;
161 }
162 }
163 .dropdown-toggle {
164 position: relative;
165 .badge {
166 display: none;
167 font-size: 10px;
168 min-width: 15px;
169 height: 15px;
170 position: absolute;
171 padding: 0;
172 border-radius: @border-radius-small;
173 line-height: 15px;
174 bottom: 5px;
175 right: 5px;
176 }
177 }
178 .dropdown-menu {
179 left: auto;
180 right: 0;
181 margin: 0;
182 padding: (@topbar-dropdown-padding / 2) @topbar-dropdown-padding;
183 color: @topbar-dropdown-color;
184 background-color: @topbar-dropdown-bg;
185 border-color: @topbar-navigation-border-color;
186 border-top: 1px solid lighten(@topbar-navigation-border-color, 20%);
187 border-left: 0;
188 border-right: 0;
189 border-radius: 0 0 @border-radius-small @border-radius-small;
190 .box-shadow(0px 3px 0px rgba(0, 0, 0, 0.15));
191 a {
192 color: @topbar-dropdown-link-color;
193 white-space: nowrap;
194 }
195 > *:last-child {
196 margin-bottom: 0;
197 }
198 }
199 .dropdown-list {
200 .list-unstyled();
201 > li {
202 .clearfix();
203 position: relative;
204 &.active .dropdown-list-link {
205 background-color: @topbar-dropdown-link-active-bg;
206 color: @topbar-dropdown-link-active-color;
207 }
208 }
209 > li + li {
210 margin-top: 1px;
211 }
212 > li.divider + li {
213 margin-top: 0;
214 }
215 .divider {
216 border-top: 1px solid @topbar-navigation-border-color;
217 background-color: lighten(@topbar-navigation-border-color, 10%);
218 margin: (@topbar-dropdown-padding / 2) -@topbar-dropdown-padding;
219 padding: 1px 0 0;
220 }
221 .modlink {
222 .clearfix();
223 width: 210px;
224 .submodule-icon {
225 float: left;
226 margin-right: 10px;
227 }
228 .submodule-label {
229 white-space: nowrap;
230 text-overflow: ellipsis;
231 padding-top: 5px;
232 display: block;
233 overflow: hidden;
234 *zoom: 1;
235 }
236 }
237 .dropdown-header {
238 font-size: 1em;
239 margin-left: -@topbar-dropdown-padding;
240 margin-right: -@topbar-dropdown-padding;
241 padding: (@topbar-dropdown-padding / 2) @topbar-dropdown-padding;
242 }
243 .dropdown-intro {
244 color: darken(@topbar-color, 20%);
245 margin-left: -@topbar-dropdown-padding;
246 margin-right: -@topbar-dropdown-padding;
247 padding: (@topbar-dropdown-padding / 2) @topbar-dropdown-padding;
248 }
249 .dl-horizontal {
250 dt {
251 width: 140px;
252 text-align: left;
253 font-weight: normal;
254 }
255 dd {
256 margin-left: 150px;
257 width: 170px;
258 }
259 }
260 }
261 .dropdown-list-link {
262 max-width: 300px;
263 overflow: hidden;
264 text-overflow: ellipsis;
265 display: block;
266 text-decoration: none;
267 cursor: pointer;
268 white-space: nowrap;
269 color: @topbar-dropdown-link-color;
270 margin-left: -@topbar-dropdown-padding;
271 margin-right: -@topbar-dropdown-padding;
272 padding: (@topbar-dropdown-padding / 4) @topbar-dropdown-padding;
273 &:hover {
274 color: @topbar-dropdown-link-hover-color;
275 background-color: @topbar-dropdown-link-hover-bg;
276 }
277 .badge {
278 background-color: @brand-danger;
279 color: @btn-danger-color;
280 }
281 }
282 .dropdown-list-link-edit,
283 .dropdown-list-link-delete,
284 .dropdown-list-link-close {
285 display: table;
286 position: absolute;
287 top: 0;
288 bottom: 0;
289 right: -(@topbar-dropdown-padding / 2);
290 padding: 0;
291 text-align: center;
292 width: 26px;
293 height: 26px;
294 .t3-icon {
295 display: table-cell;
296 margin: 0;
297 height: auto;
298 width: auto;
299 }
300 &:hover {
301 color: @topbar-dropdown-link-hover-color;
302 background-color: @topbar-dropdown-link-hover-bg;
303 }
304 }
305 .dropdown-list-link-edit {
306 right: 18px;
307 }
308 .dropdown-list-link-delete,
309 .dropdown-list-link-close {
310 &:hover {
311 color: @topbar-dropdown-link-hover-color;
312 background-color: @btn-danger-bg;
313 }
314 }
315 .dropdown-link-list-add-close {
316 padding-right: 50px;
317 }
318 .dropdown-link-list-add-editdelete {
319 padding-right: 85px;
320 }
321 .topbar-workspaces-title {
322 margin-left: 3px;
323 }
324 }
325
326 // Navigation Search
327 .typo3-topbar-navigation-search {
328 position: relative;
329 padding: 0;
330 margin: 0;
331 .form-group {
332 &:before {
333 content: "\f002";
334 font: normal normal normal 14px/1 FontAwesome;
335 position: absolute;
336 top: 50%;
337 left: 15px;
338 margin-top: -8px;
339 z-index: 1;
340 }
341 }
342 .form-control {
343 box-sizing: content-box;
344 background-color: @tobar-navigation-search-bg;
345 color: @topbar-navigation-color;
346 height: @topbar-height - 27px;
347 padding: 14px 30px 13px 35px;
348 border: none;
349 border-left: 1px solid lighten(@topbar-navigation-border-color, 10%);
350 border-radius: 0;
351 &:hover {
352 border-left-color: lighten(@topbar-navigation-border-color, 15%);
353 background-color: @tobar-navigation-search-hover-bg;
354 }
355 &:focus {
356 outline: none;
357 border-left-color: lighten(@topbar-navigation-border-color, 15%);
358 background-color: @tobar-navigation-search-focus-bg;
359 .box-shadow(none);
360 }
361 + .t3-icon {
362 text-align: center;
363 position: absolute;
364 top: 50%;
365 right: 15px;
366 margin-right: 0;
367 margin-top: -8px;
368 }
369 }
370 }
371
372 // Livesearch
373 .live-search-list {
374 .typo3-topbar-navigation-items .dropdown-menu();
375 right: auto;
376 padding: 0;
377 .x-toolbar {
378 padding: 0;
379 border: none;
380 background: transparent;
381 }
382 .x-combo-list-hd,
383 .x-combo-list-inner,
384 .x-combo-list-ft {
385 border: none;
386 background: transparent;
387 color: @topbar-dropdown-color;
388 padding: @topbar-dropdown-padding;
389 }
390 .x-combo-list-hd {
391 background-color: lighten(@topbar-dropdown-bg,3%);
392 border-top: 0;
393 border-bottom: 1px solid @topbar-navigation-border-color;
394 }
395 .x-combo-list-ft {
396 padding-top: 0;
397 border-bottom: 0;
398 }
399 .x-combo-list-inner {
400 padding-right: 0;
401 border-top: 1px solid lighten(@topbar-navigation-border-color, 10%);
402 }
403 .x-btn {
404 background: none;
405 border: none;
406 color: inherit;
407 .x-btn-tl,
408 .x-btn-tc,
409 .x-btn-tr,
410 .x-btn-ml,
411 .x-btn-mr,
412 .x-btn-bl,
413 .x-btn-bc,
414 .x-btn-br {
415 display: none;
416 }
417 button {
418 .btn();
419 .btn-sm();
420 .btn-default();
421 height: auto!important;
422 }
423 }
424 .search-item-type {
425 padding: 5px 20px 5px 0;
426 white-space: nowrap;
427 }
428 .search-item-title {
429 border-radius: 2px 0 0 2px;
430 padding: 5px 20px 5px 10px;
431 &.x-combo-selected {
432 border: none!important;
433 background-color: lighten(@topbar-dropdown-bg, 10%);
434 }
435 }
436 }
437 .search-list-help-content {
438 padding: @topbar-dropdown-padding;
439 strong {
440 display: block;
441 margin-bottom: 0.5em;
442 }
443 p {
444 margin-top: 0.5em;
445 margin-bottom: 0;
446 }
447 }