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