ctf-server
old server for hosting capture-the-flag
git clone https://9o.is/git/ctf-server.git
navbar.less
(12002B)
1 //
2 // Navbars (Redux)
3 // --------------------------------------------------
4
5
6 // COMMON STYLES
7 // -------------
8
9 // Base class and wrapper
10 .navbar {
11 overflow: visible;
12 margin-bottom: @baseLineHeight;
13
14 // Fix for IE7's bad z-indexing so dropdowns don't appear below content that follows the navbar
15 *position: relative;
16 *z-index: 2;
17 }
18
19 // Inner for background effects
20 // Gradient is applied to its own element because overflow visible is not honored by IE when filter is present
21 .navbar-inner {
22 min-height: @navbarHeight;
23 padding-left: 20px;
24 padding-right: 20px;
25 #gradient > .vertical(@navbarBackgroundHighlight, @navbarBackground);
26 border: 1px solid @navbarBorder;
27 .border-radius(@baseBorderRadius);
28 .box-shadow(0 1px 4px rgba(0,0,0,.065));
29
30 // Prevent floats from breaking the navbar
31 .clearfix();
32 }
33
34 // Set width to auto for default container
35 // We then reset it for fixed navbars in the #gridSystem mixin
36 .navbar .container {
37 width: auto;
38 }
39
40 // Override the default collapsed state
41 .nav-collapse.collapse {
42 height: auto;
43 overflow: visible;
44 }
45
46
47 // Brand: website or project name
48 // -------------------------
49 .navbar .brand {
50 float: left;
51 display: block;
52 // Vertically center the text given @navbarHeight
53 padding: ((@navbarHeight - @baseLineHeight) / 2) 20px ((@navbarHeight - @baseLineHeight) / 2);
54 margin-left: -20px; // negative indent to left-align the text down the page
55 font-size: 20px;
56 font-weight: 200;
57 color: @navbarBrandColor;
58 text-shadow: 0 1px 0 @navbarBackgroundHighlight;
59 &:hover,
60 &:focus {
61 text-decoration: none;
62 }
63 }
64
65 // Plain text in topbar
66 // -------------------------
67 .navbar-text {
68 margin-bottom: 0;
69 line-height: @navbarHeight;
70 color: @navbarText;
71 }
72
73 // Janky solution for now to account for links outside the .nav
74 // -------------------------
75 .navbar-link {
76 color: @navbarLinkColor;
77 &:hover,
78 &:focus {
79 color: @navbarLinkColorHover;
80 }
81 }
82
83 // Dividers in navbar
84 // -------------------------
85 .navbar .divider-vertical {
86 height: @navbarHeight;
87 margin: 0 9px;
88 border-left: 1px solid @navbarBackground;
89 border-right: 1px solid @navbarBackgroundHighlight;
90 }
91
92 // Buttons in navbar
93 // -------------------------
94 .navbar .btn,
95 .navbar .btn-group {
96 .navbarVerticalAlign(30px); // Vertically center in navbar
97 }
98 .navbar .btn-group .btn,
99 .navbar .input-prepend .btn,
100 .navbar .input-append .btn,
101 .navbar .input-prepend .btn-group,
102 .navbar .input-append .btn-group {
103 margin-top: 0; // then undo the margin here so we don't accidentally double it
104 }
105
106 // Navbar forms
107 // -------------------------
108 .navbar-form {
109 margin-bottom: 0; // remove default bottom margin
110 .clearfix();
111 input,
112 select,
113 .radio,
114 .checkbox {
115 .navbarVerticalAlign(30px); // Vertically center in navbar
116 }
117 input,
118 select,
119 .btn {
120 display: inline-block;
121 margin-bottom: 0;
122 }
123 input[type="image"],
124 input[type="checkbox"],
125 input[type="radio"] {
126 margin-top: 3px;
127 }
128 .input-append,
129 .input-prepend {
130 margin-top: 5px;
131 white-space: nowrap; // preven two items from separating within a .navbar-form that has .pull-left
132 input {
133 margin-top: 0; // remove the margin on top since it's on the parent
134 }
135 }
136 }
137
138 // Navbar search
139 // -------------------------
140 .navbar-search {
141 position: relative;
142 float: left;
143 .navbarVerticalAlign(30px); // Vertically center in navbar
144 margin-bottom: 0;
145 .search-query {
146 margin-bottom: 0;
147 padding: 4px 14px;
148 #font > .sans-serif(13px, normal, 1);
149 .border-radius(15px); // redeclare because of specificity of the type attribute
150 }
151 }
152
153
154
155 // Static navbar
156 // -------------------------
157
158 .navbar-static-top {
159 position: static;
160 margin-bottom: 0; // remove 18px margin for default navbar
161 .navbar-inner {
162 .border-radius(0);
163 }
164 }
165
166
167
168 // Fixed navbar
169 // -------------------------
170
171 // Shared (top/bottom) styles
172 .navbar-fixed-top,
173 .navbar-fixed-bottom {
174 position: fixed;
175 right: 0;
176 left: 0;
177 z-index: @zindexFixedNavbar;
178 margin-bottom: 0; // remove 18px margin for default navbar
179 }
180 .navbar-fixed-top .navbar-inner,
181 .navbar-static-top .navbar-inner {
182 border-width: 0 0 1px;
183 }
184 .navbar-fixed-bottom .navbar-inner {
185 border-width: 1px 0 0;
186 }
187 .navbar-fixed-top .navbar-inner,
188 .navbar-fixed-bottom .navbar-inner {
189 padding-left: 0;
190 padding-right: 0;
191 .border-radius(0);
192 }
193
194 // Reset container width
195 // Required here as we reset the width earlier on and the grid mixins don't override early enough
196 .navbar-static-top .container,
197 .navbar-fixed-top .container,
198 .navbar-fixed-bottom .container {
199 #grid > .core > .span(@gridColumns);
200 }
201
202 // Fixed to top
203 .navbar-fixed-top {
204 top: 0;
205 }
206 .navbar-fixed-top,
207 .navbar-static-top {
208 .navbar-inner {
209 .box-shadow(~"0 1px 10px rgba(0,0,0,.1)");
210 }
211 }
212
213 // Fixed to bottom
214 .navbar-fixed-bottom {
215 bottom: 0;
216 .navbar-inner {
217 .box-shadow(~"0 -1px 10px rgba(0,0,0,.1)");
218 }
219 }
220
221
222
223 // NAVIGATION
224 // ----------
225
226 .navbar .nav {
227 position: relative;
228 left: 0;
229 display: block;
230 float: left;
231 margin: 0 10px 0 0;
232 }
233 .navbar .nav.pull-right {
234 float: right; // redeclare due to specificity
235 margin-right: 0; // remove margin on float right nav
236 }
237 .navbar .nav > li {
238 float: left;
239 }
240
241 // Links
242 .navbar .nav > li > a {
243 float: none;
244 // Vertically center the text given @navbarHeight
245 padding: ((@navbarHeight - @baseLineHeight) / 2) 15px ((@navbarHeight - @baseLineHeight) / 2);
246 color: @navbarLinkColor;
247 text-decoration: none;
248 text-shadow: 0 1px 0 @navbarBackgroundHighlight;
249 }
250 .navbar .nav .dropdown-toggle .caret {
251 margin-top: 8px;
252 }
253
254 // Hover/focus
255 .navbar .nav > li > a:focus,
256 .navbar .nav > li > a:hover {
257 background-color: @navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover/:focus from .active
258 color: @navbarLinkColorHover;
259 text-decoration: none;
260 }
261
262 // Active nav items
263 .navbar .nav > .active > a,
264 .navbar .nav > .active > a:hover,
265 .navbar .nav > .active > a:focus {
266 color: @navbarLinkColorActive;
267 text-decoration: none;
268 background-color: @navbarLinkBackgroundActive;
269 .box-shadow(inset 0 3px 8px rgba(0,0,0,.125));
270 }
271
272 // Navbar button for toggling navbar items in responsive layouts
273 // These definitions need to come after '.navbar .btn'
274 .navbar .btn-navbar {
275 display: none;
276 float: right;
277 padding: 7px 10px;
278 margin-left: 5px;
279 margin-right: 5px;
280 .buttonBackground(darken(@navbarBackgroundHighlight, 5%), darken(@navbarBackground, 5%));
281 .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075)");
282 }
283 .navbar .btn-navbar .icon-bar {
284 display: block;
285 width: 18px;
286 height: 2px;
287 background-color: #f5f5f5;
288 .border-radius(1px);
289 .box-shadow(0 1px 0 rgba(0,0,0,.25));
290 }
291 .btn-navbar .icon-bar + .icon-bar {
292 margin-top: 3px;
293 }
294
295
296
297 // Dropdown menus
298 // --------------
299
300 // Menu position and menu carets
301 .navbar .nav > li > .dropdown-menu {
302 &:before {
303 content: '';
304 display: inline-block;
305 border-left: 7px solid transparent;
306 border-right: 7px solid transparent;
307 border-bottom: 7px solid #ccc;
308 border-bottom-color: @dropdownBorder;
309 position: absolute;
310 top: -7px;
311 left: 9px;
312 }
313 &:after {
314 content: '';
315 display: inline-block;
316 border-left: 6px solid transparent;
317 border-right: 6px solid transparent;
318 border-bottom: 6px solid @dropdownBackground;
319 position: absolute;
320 top: -6px;
321 left: 10px;
322 }
323 }
324 // Menu position and menu caret support for dropups via extra dropup class
325 .navbar-fixed-bottom .nav > li > .dropdown-menu {
326 &:before {
327 border-top: 7px solid #ccc;
328 border-top-color: @dropdownBorder;
329 border-bottom: 0;
330 bottom: -7px;
331 top: auto;
332 }
333 &:after {
334 border-top: 6px solid @dropdownBackground;
335 border-bottom: 0;
336 bottom: -6px;
337 top: auto;
338 }
339 }
340
341 // Caret should match text color on hover/focus
342 .navbar .nav li.dropdown > a:hover .caret,
343 .navbar .nav li.dropdown > a:focus .caret {
344 border-top-color: @navbarLinkColorHover;
345 border-bottom-color: @navbarLinkColorHover;
346 }
347
348 // Remove background color from open dropdown
349 .navbar .nav li.dropdown.open > .dropdown-toggle,
350 .navbar .nav li.dropdown.active > .dropdown-toggle,
351 .navbar .nav li.dropdown.open.active > .dropdown-toggle {
352 background-color: @navbarLinkBackgroundActive;
353 color: @navbarLinkColorActive;
354 }
355 .navbar .nav li.dropdown > .dropdown-toggle .caret {
356 border-top-color: @navbarLinkColor;
357 border-bottom-color: @navbarLinkColor;
358 }
359 .navbar .nav li.dropdown.open > .dropdown-toggle .caret,
360 .navbar .nav li.dropdown.active > .dropdown-toggle .caret,
361 .navbar .nav li.dropdown.open.active > .dropdown-toggle .caret {
362 border-top-color: @navbarLinkColorActive;
363 border-bottom-color: @navbarLinkColorActive;
364 }
365
366 // Right aligned menus need alt position
367 .navbar .pull-right > li > .dropdown-menu,
368 .navbar .nav > li > .dropdown-menu.pull-right {
369 left: auto;
370 right: 0;
371 &:before {
372 left: auto;
373 right: 12px;
374 }
375 &:after {
376 left: auto;
377 right: 13px;
378 }
379 .dropdown-menu {
380 left: auto;
381 right: 100%;
382 margin-left: 0;
383 margin-right: -1px;
384 .border-radius(6px 0 6px 6px);
385 }
386 }
387
388
389 // Inverted navbar
390 // -------------------------
391
392 .navbar-inverse {
393
394 .navbar-inner {
395 #gradient > .vertical(@navbarInverseBackgroundHighlight, @navbarInverseBackground);
396 border-color: @navbarInverseBorder;
397 }
398
399 .brand,
400 .nav > li > a {
401 color: @navbarInverseLinkColor;
402 text-shadow: 0 -1px 0 rgba(0,0,0,.25);
403 &:hover,
404 &:focus {
405 color: @navbarInverseLinkColorHover;
406 }
407 }
408
409 .brand {
410 color: @navbarInverseBrandColor;
411 }
412
413 .navbar-text {
414 color: @navbarInverseText;
415 }
416
417 .nav > li > a:focus,
418 .nav > li > a:hover {
419 background-color: @navbarInverseLinkBackgroundHover;
420 color: @navbarInverseLinkColorHover;
421 }
422
423 .nav .active > a,
424 .nav .active > a:hover,
425 .nav .active > a:focus {
426 color: @navbarInverseLinkColorActive;
427 background-color: @navbarInverseLinkBackgroundActive;
428 }
429
430 // Inline text links
431 .navbar-link {
432 color: @navbarInverseLinkColor;
433 &:hover,
434 &:focus {
435 color: @navbarInverseLinkColorHover;
436 }
437 }
438
439 // Dividers in navbar
440 .divider-vertical {
441 border-left-color: @navbarInverseBackground;
442 border-right-color: @navbarInverseBackgroundHighlight;
443 }
444
445 // Dropdowns
446 .nav li.dropdown.open > .dropdown-toggle,
447 .nav li.dropdown.active > .dropdown-toggle,
448 .nav li.dropdown.open.active > .dropdown-toggle {
449 background-color: @navbarInverseLinkBackgroundActive;
450 color: @navbarInverseLinkColorActive;
451 }
452 .nav li.dropdown > a:hover .caret,
453 .nav li.dropdown > a:focus .caret {
454 border-top-color: @navbarInverseLinkColorActive;
455 border-bottom-color: @navbarInverseLinkColorActive;
456 }
457 .nav li.dropdown > .dropdown-toggle .caret {
458 border-top-color: @navbarInverseLinkColor;
459 border-bottom-color: @navbarInverseLinkColor;
460 }
461 .nav li.dropdown.open > .dropdown-toggle .caret,
462 .nav li.dropdown.active > .dropdown-toggle .caret,
463 .nav li.dropdown.open.active > .dropdown-toggle .caret {
464 border-top-color: @navbarInverseLinkColorActive;
465 border-bottom-color: @navbarInverseLinkColorActive;
466 }
467
468 // Navbar search
469 .navbar-search {
470 .search-query {
471 color: @white;
472 background-color: @navbarInverseSearchBackground;
473 border-color: @navbarInverseSearchBorder;
474 .box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15)");
475 .transition(none);
476 .placeholder(@navbarInverseSearchPlaceholderColor);
477
478 // Focus states (we use .focused since IE7-8 and down doesn't support :focus)
479 &:focus,
480 &.focused {
481 padding: 5px 15px;
482 color: @grayDark;
483 text-shadow: 0 1px 0 @white;
484 background-color: @navbarInverseSearchBackgroundFocus;
485 border: 0;
486 .box-shadow(0 0 3px rgba(0,0,0,.15));
487 outline: 0;
488 }
489 }
490 }
491
492 // Navbar collapse button
493 .btn-navbar {
494 .buttonBackground(darken(@navbarInverseBackgroundHighlight, 5%), darken(@navbarInverseBackground, 5%));
495 }
496
497 }