spruce: remove !important from background-repeat
[bootswatch] / spruce / bootswatch.less
1 // Bootswatch.less
2 // Swatch: Spruce
3 // Version: 2.0.3
4 // -----------------------------------------------------
5
6 // TYPOGRAPHY
7 // --------------------------------------------------
8
9 @import url('https://fonts.googleapis.com/css?family=Josefin+Slab:400,700');
10
11 .navbar .brand, legend, .btn,
12 .navbar .nav > li > a,
13 div.subnav li > a,
14 .navbar-text  {
15         font-family: @headingsFontFamily;
16         font-weight: @headingsFontWeight;
17 }
18
19 h3 { font-size: 20px; }
20 h4 { font-size: 16px; }
21 h5 { font-size: 14px; }
22
23 h1, h2, h3, h4, h5, h6 {
24         color: @yellow;
25 }
26
27 h1 > small, h2 > small, h3 > small, h4 > small, h5 > small, h6 > small, .muted {
28         color: @linkColor;
29         font-family: @baseFontFamily;
30 }
31
32 .alert-heading {
33         font-family: @baseFontFamily;
34 }
35
36 // SCAFFOLDING
37 // --------------------------------------------------
38
39 body {
40         #gradient > .vertical-three-colors (#90A38F, #AEAD8E, 60%, #90A38F);
41         background-size: 100% 1400px;
42         background-repeat: repeat-y;
43 }
44
45 blockquote {
46         border-left: 2px solid @linkColor;
47         
48         &.pull-right {
49                 border-right: 2px solid @linkColor;
50         }
51         
52         small {
53                 color: @blueDark;
54         }
55 }
56
57 code, pre {
58         color: lighten(@blueDark, 10%);
59         background-color: @linkColor;
60 }
61
62 // NAVBAR
63 // --------------------------------------------------
64
65 .navbar {
66         
67         .navbar-inner {
68                 background-image: none;
69                 .box-shadow(none);
70         }
71         
72         .brand {
73                 font-size: 26px;
74                 padding: 18px 20px 12px;
75         }
76
77         .nav > li > a {
78                 font-size: 20px;
79                 padding: 22px 10px 11px;
80         }
81         
82         .nav .active > a,
83         .nav .active > a:hover {
84                 color: @yellow;
85         }
86         
87         .navbar-text {
88                 font-size: 20px;
89                 padding-top: 12px;
90         }
91
92         .navbar-search {
93                 margin-top: 12px;
94         }
95
96         .navbar-search .search-query {
97                 border-color: transparent;
98                 padding: 6px 9px 2px 9px;
99                 background-color: rgba(255, 255, 255, 0.4);
100         }
101
102         .nav > .open > a {
103                 color: @yellow;
104         }
105
106         .nav > .open > .dropdown-menu {
107                 background-color: @linkColor;
108                 color: @textColor;
109                 border-color: transparent;
110         }
111
112         .nav > .open > .dropdown-menu a:hover {
113                 background-color: darken(#90A38F, 10%);
114                 color: @linkColor;
115         }
116
117         .btn-navbar {
118                 margin-top: 14px;
119         }
120
121         .nav-collapse.in .nav li > a {
122                 color: @linkColor;
123
124                 &:hover {
125                         color: @yellow;
126                         background-color: @blue;
127                 }
128         }
129
130         .navbar-form, .navbar-search {
131                 border-color: transparent;
132                 .box-shadow(none);
133         }
134 }
135
136 .dropdown-menu .divider {
137         background-color: transparent;
138         border-bottom: 1px solid #AEAD8E;
139 }
140
141 div.subnav {
142         background-color: @green;
143         background-image: none;
144         border-color: transparent;
145         .box-shadow(0 1px 5px rgba(0,0,0,.1));
146         font-size: 18px;
147         
148         .nav > li > a {
149                 color: @linkColor;
150                 border-color: transparent;
151                 background-color: transparent;
152         }
153
154         .nav > li + li > a {
155                 border-color: transparent;
156         }
157
158         .nav > li.active > a,
159         .nav > li > a:hover,
160         .nav > li.active > a:hover,
161         .dropdown.open .dropdown-toggle,
162         .dropdown.open.active .dropdown-toggle:hover {
163                 .box-shadow(none);
164                 background-color: transparent;
165                 border-color: transparent;
166                 color: @yellow;
167         }
168
169         .dropdown.open > .dropdown-menu {
170                 background-color: @linkColor;
171                 color: @textColor;
172                 border-color: transparent;
173         }
174
175         .dropdown.open > .dropdown-menu a:hover {
176                 background-color: darken(#90A38F, 10%);
177                 color: @linkColor;
178         }
179
180         &.subnav-fixed {
181                 top: 54px;
182         }
183 }
184
185 // TABLES
186 // --------------------------------------------------
187
188 .table,
189 .table.table-bordered,
190 .table.table-striped {
191         .border-radius(0 0 8px 8px);
192 }
193
194 .table-bordered thead:first-child tr:first-child th:first-child,
195 .table-bordered tbody:first-child tr:first-child td:first-child,
196 .table-bordered thead:first-child tr:first-child th:last-child,
197 .table-bordered tbody:first-child tr:first-child td:last-child {
198         .border-radius(0);
199 }
200
201 .table-striped tbody:last-child tr:last-child td:first-child {
202         .border-radius(0 0 0 8px);
203 }
204
205 .table-striped tbody:last-child tr:last-child td:last-child {
206         .border-radius(0 0 8px 0);
207 }
208
209 .table-bordered {
210         border: none;
211 }
212
213 .table thead tr th:first-child,
214 .table tbody tr td:first-child {
215         border-left: none;
216 }
217
218 .table th,
219 .table-striped tbody tr:nth-child(odd) th {
220         background-color: darken(#90A38F, 10%);
221         color: @linkColor;
222 }
223
224 // BUTTONS
225 // --------------------------------------------------
226
227 .btn {
228   .buttonBackground(lighten(@blueDark, 5%), @blueDark);
229     text-shadow: none;
230     color: @white;
231         border-color: transparent;
232         .box-shadow(none);
233         
234         &:hover {
235                 color: @grayLighter;
236         }
237 }
238
239 .btn-large {
240         font-size: 18px;
241 }
242
243 .btn-primary {
244         .buttonBackground(lighten(@blue, 10%), lighten(@blue, 5%));
245 }
246
247 .btn-warning {
248   .buttonBackground(@orange, darken(@orange, 5%));
249 }
250
251 .btn-danger {
252   .buttonBackground(lighten(@red, 5%), @red);
253 }
254
255 .btn-success {
256   .buttonBackground(#62c462, #51a351);
257 }
258
259 .btn-info {
260   .buttonBackground(#5bc0de, #2f96b4);
261 }
262
263 .btn-inverse {
264   .buttonBackground(@yellow, darken(@yellow, 5%));
265 }
266
267 .btn-group .dropdown-toggle {
268         .box-shadow(none);
269 }
270
271 // NAVIGATION
272 // --------------------------------------------------
273
274 .breadcrumb {
275         background-color: darken(#90A38F, 10%);
276         background-image: none;
277         border-color: transparent;
278         .box-shadow(none);
279         
280         li {
281                 color: @yellow;
282                 text-shadow: none;
283
284                 a {
285                         color: @linkColor;
286                 }
287
288                 a:hover {
289                         color: @yellow;
290                 }
291
292                 .divider {
293                         color: @blue;
294                 }
295         }
296 }
297
298 .pagination > ul {
299         background-color: darken(#90A38F, 10%);
300         background-image: none;
301         border-color: transparent;
302         .box-shadow(none);
303 }
304
305 .pagination a {
306         color: @linkColor;
307         border-color: transparent;
308         
309         &:hover {
310                 color: @yellow;
311                 background-color: #748C73;
312         }
313 }
314
315 .pagination .active a {
316         color: @blue;
317         background-color: #A2CDB5;
318 }
319
320 .pagination .disabled a,
321 .pagination .disabled a:hover {
322         color: @blue;
323 }
324
325 .nav-list {
326         
327         li > a,
328         .nav-header {
329                 text-shadow: none;
330         }
331
332         li > a:hover {
333                 background-color: transparent;
334         }
335         
336         li.active > a,
337         li.active > a:hover {
338                 background-color: #A2CDB5;
339                 text-shadow: none;
340         }
341         
342         .divider {
343                 background-color: transparent;
344                 border-bottom: 1px solid @linkColor;
345         }
346 }
347
348 .nav-tabs {
349         border-color: transparent;
350 }
351
352 .nav-tabs > li > a,
353 .nav-pills > li > a {
354         background-color: #748C73;
355         
356         &:hover {
357                 background-color: #748C73;
358                 border-color: transparent;
359         }
360 }
361
362 .nav-tabs > .active > a,
363 .nav-tabs > .active > a:hover,
364 .nav-pills .active > a,
365 .nav-pills .active > a:hover {
366         background-color: #A2CDB5;
367         border-color: transparent;
368         color: @blue;
369 }
370
371 .nav-tabs.nav-stacked > li > a {
372         border-color: transparent;
373         
374         &:hover {
375                 border-color: transparent;
376         }
377 }
378
379 .nav-tabs .open .dropdown-toggle,
380 .nav-pills .open .dropdown-toggle  {
381         background-color: #748C73;
382         border-color: transparent;
383         color: @yellow;
384 }
385
386 .nav-tabs .active.open .dropdown-toggle,
387 .nav-pills .active.open .dropdown-toggle {
388         background-color: #A2CDB5;
389 }
390
391 .nav-tabs .dropdown-menu,
392 .nav-pills .dropdown-menu {
393         background-color: @linkColor;
394         color: @textColor;
395         border-color: transparent;
396         
397         a:hover {
398                 background-color: #A2CDB5;
399                 color: @linkColor;
400         }
401 }
402
403 .nav .nav-header {
404         color: @blue;
405 }
406
407 .tabbable {
408         .nav-tabs,
409         .nav-tabs > li > a,
410         .nav-tabs > li > a:hover,
411         .nav-tabs > li.active > a,
412         .nav-tabs > li.active > a:hover  {
413                 border-color: transparent;
414         }
415 }
416
417 .pager a {
418         border: none;
419         background-color: #748C73;
420         
421         &:hover {
422                 background-color: transparent;
423                 background-color: #748C73;
424         }
425 }
426
427 // FORMS
428 // --------------------------------------------------
429
430 legend {
431         color: @yellow;
432 }
433
434 label, .help-block, input[type="file"] {
435         color: @linkColor;
436 }
437
438 input, textarea, select {
439         color: @textColor;
440 }
441
442 .uneditable-input {
443         color: @gray;
444 }
445
446 legend {
447         border-bottom: 2px solid @white;
448 }
449
450 .form-actions {
451         border-top: none;
452         .border-radius(4px);
453 }
454
455 // MODALS
456 // --------------------------------------------------
457
458 .modal-header {
459         background-color: @green;
460 }
461
462 .modal-body,
463 .modal-footer {
464         background-color: @linkColor;
465         border: none;
466         .box-shadow(none);
467 }
468
469 .modal-footer {
470         .border-radius(0 0 4px 4px);
471 }
472
473 // MISCELLANEOUS
474 // --------------------------------------------------
475
476 .alert {
477         text-shadow: none;
478         border: none;
479 }
480
481 .label {
482         color: @linkColor;
483         opacity: 1;
484         text-shadow: none;
485 }
486
487 .progress {
488         background-color: darken(#90A38F, 10%);
489         background-image: none;
490         .box-shadow(none);
491         
492         .bar {
493                 background-image: none; 
494                 background-color: #A2CDB5;
495         }
496 }
497
498 .well {
499         background-color: darken(#90A38F, 10%);
500         border: none;
501         .box-shadow(none);
502 }
503
504 .thumbnail {
505         border: none;
506         .box-shadow(none);
507         
508         img {
509                 .border-radius(4px);
510         }
511 }
512
513 hr {
514         border-top: none;
515         border-bottom: 2px solid @linkColor;
516 }
517
518 .page-header {
519         border-bottom: 2px solid @linkColor;
520         padding-bottom: 5px;
521 }
522
523 footer.footer {
524         border-top: 2px solid @linkColor;
525 }