source: spip-zone/_squelettes_/spiplogo/theme/css/bootswatch.less @ 69858

Last change on this file since 69858 was 69858, checked in by cyril@…, 7 years ago

on adopte un thème bleu (comme le plan de la XFLR7 dans Objectif Lune);

File size: 11.8 KB
Line 
1// Bootswatch.less
2// Swatch: Amelia
3// Version: 2.1.1
4// -----------------------------------------------------
5
6// TYPOGRAPHY
7// -----------------------------------------------------
8
9@import url('http://fonts.googleapis.com/css?family=Roboto');
10
11h6 {
12        color: @textColor;
13}
14
15h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
16        font-family: @baseFontFamily;
17        color: @textColor;
18}
19
20code, pre {
21        background-color: rgba(255, 255, 255, 0.3);
22        padding: 2px;
23}
24
25blockquote {
26
27        border-left-color: lighten(#147E88, 12%);
28
29        &.pull-right {
30                border-right-color: lighten(#147E88, 12%);
31        }
32
33        small {
34                color: rgba(255, 255, 255, 0.6);
35        }
36}
37
38.muted {
39        color: rgba(255, 255, 255, 0.5);
40}
41
42// SCAFFOLDING
43// -----------------------------------------------------
44
45body {
46        #gradient > .radial(lighten(#0F66A2, 7%), #0F66A2);
47}
48
49hr {
50        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
51}
52
53.page-header {
54        margin: 30px 0 15px;
55        border-bottom: 0px solid transparent;
56}
57
58// NAVBAR
59// -----------------------------------------------------
60
61.navbar {
62
63        .navbar-inner {
64                .border-radius(0);
65        }
66
67        .brand {
68                padding: 15px 20px 14px;
69                font-family: @headingsFontFamily;
70                font-size: 24px;
71                font-weight: normal;
72        }
73
74        .nav > li > a {
75                padding-top: 17px;
76                padding-bottom: 14px;
77                text-shadow: none;
78        }
79
80        .nav > .active > a,
81        .nav > .active > a:hover,
82        .navbar .nav > .active > a:focus {
83                .box-shadow(none);
84        }
85
86        .navbar-search {
87                margin-top: 10px;
88        }
89
90        .navbar-search .search-query {
91                .border-radius(0);
92                padding-top: 5px;
93                padding-bottom: 5px;
94        }
95
96        .navbar-text {
97                margin: 17px 15px 14px;
98                line-height: 20px;
99        }
100
101        .btn,
102        .btn-group {
103                padding: 4px;
104        }
105
106        &-inverse {
107
108                .dropdown-menu li > a:hover,
109                .dropdown-menu li > a:focus,
110                .dropdown-submenu:hover > a {
111                        background-image: none;
112                        background-color: @bleuextraclair;
113                }
114        }
115}
116
117@media (max-width: @navbarCollapseWidth) {
118
119        .navbar .nav-collapse {
120
121                .nav li > a {
122
123                        color: @textColor;
124                        .border-radius(0);
125
126                        &:hover {
127                                background-color: lighten(@navbarBackground, 10%);
128                        }
129                }
130
131                .dropdown-menu li > a:hover,
132                .dropdown-menu li > a:focus,
133                .dropdown-submenu:hover > a {
134                        background-image: none;
135                }
136
137                .navbar-form,
138                .navbar-search {
139                        .box-shadow(none);
140                        border: none;
141                }
142
143                .navbar-search .search-query {
144                        border: 2px solid @textColor;
145                }
146
147                .nav-header {
148                        color: rgba(255, 255, 255, 0.5);
149                }
150        }
151
152        .navbar-inverse .nav-collapse {
153
154                .nav li > a:hover,
155                .dropdown-menu a:hover {
156                        background-color: lighten(@navbarInverseBackground, 10%) !important;
157                }
158        }
159}
160
161div.subnav {
162
163        background-color: rgba(42, 99, 105, 0.9);
164        background-image: none;
165        border: 0px solid transparent;
166        .border-radius(0);
167        .box-shadow(none);
168
169        .nav > li.open > a {
170                border-color: transparent;
171                background-color: rgba(255, 255, 255, 0.4);
172        }
173
174        .nav > li > a {
175                color: @textColor;
176                border-color: transparent;
177        }
178
179        .nav > li:first-child > a,
180        .nav > li:first-child > a:hover {
181                .border-radius(0);
182        }
183
184        .nav > .active > a {
185                background-color: transparent;
186                border-color: transparent;
187                color: @textColor;
188                .box-shadow(none);
189        }
190
191        .nav > .active > a:hover,
192        .nav > li > a:hover,
193        .nav > li.active > a:hover, {
194                border-right-color: transparent;
195                background-color: rgba(255, 255, 255, 0.4);
196                color: @textColor;
197        }
198
199        .nav > li:first-child > a:hover {
200                border-left-color: rgba(255, 255, 255, 0.4);
201                border-left-width: 1px;
202        }
203
204        &-fixed {
205                top: 50px;
206        }
207}
208
209// NAV
210// -----------------------------------------------------
211
212.nav-tabs li.open > .dropdown-toggle,
213.nav-pills li.open > .dropdown-toggle {
214        background-color: #8AD5DC;
215        color: @linkColor;
216        border-color: transparent;
217}
218
219.nav-tabs, .nav-pills {
220        border-color: transparent;
221
222        li > a {
223                border-color: transparent;
224                .border-radius(0);
225                .box-shadow(0);
226        }
227
228        li.active > a,
229        li:active > a,
230        li.active > a:hover,
231        li:active > a:hover {
232                color: @textColor;
233        }
234
235        li.active > a,
236        li:active > a,
237        li > a:hover,
238        li.active > a:hover,
239        li:active > a:hover {
240                background-color: #8AD5DC;
241                border-color: transparent;
242                text-shadow: none;
243        }
244}
245
246.nav-tabs, .nav-tabs > li > a {
247        border-bottom: 1px solid rgba(255, 255, 255, 0.5);
248}
249
250.nav-tabs > li > a {
251        background-color: #3CB9C6;
252}
253
254.nav-tabs.nav-stacked {
255
256        li > a:first-child,
257        li > a:last-child {
258                .border-radius(0);
259        }
260
261        li > a,
262        li > a:hover,
263        li.active > a,
264        li:active > a,
265        li.active > a:hover,
266        li:active > a:hover {
267                border-color: transparent;
268        }
269}
270
271.nav-list {
272        .nav-header {
273                text-shadow: none;
274                color: @textColor;
275        }
276
277        li > a {
278                text-shadow: none;
279        }
280
281        li.active > a,
282        li:active > a,
283        li > a:hover,
284        li.active > a:hover,
285        li:active > a:hover {
286                background-color: #8AD5DC;
287                text-shadow: none;
288        }
289
290        .divider {
291                background-color: rgba(255, 255, 255, 0.3);
292                border-bottom: none;
293        }
294}
295
296.breadcrumb, .pager > li > a {
297        border-color: transparent;
298        .border-radius(0);
299        .box-shadow(none);
300        text-shadow: none;
301}
302
303.breadcrumb {
304        background-color: #3CB9C6;
305        background-image: none;
306
307        li {
308                text-shadow: none;
309        }
310
311        .active {
312                color: @white;
313        }
314
315        .divider {
316                color: @linkColor;
317        }
318}
319
320.pagination {
321
322        ul  {
323                background-color: @paginationBackground;
324                background-image: none;
325        }
326
327        .disabled a, .disabled a:hover {
328                color: @textColor;
329        }
330
331        li a:hover {
332                background-color: rgba(255, 255, 255, 0.4);
333                color: @linkColor;
334        }
335
336        .active a, .active a:hover {
337                background-color: rgba(255, 255, 255, 0.4);
338                color: @textColor;
339        }
340
341        ul,
342        li:first-child a,
343        li:last-child a {
344                .border-radius(0);
345        }
346}
347
348.pager {
349
350        li > a {
351                background-color: #3CB9C6;
352
353                &:hover {
354                        background-color: #8AD5DC;
355                }
356        }
357
358        .disabled a,
359        .disabled a:hover {
360                background-color: #3CB9C6;
361                color: @white;
362        }
363}
364
365// BUTTONS
366// -----------------------------------------------------
367
368.buttonBackgroundCustom(@color) {
369
370  background-color: @color;
371  border-color: transparent;
372
373  &:hover, &:active, &.active, &.disabled, &[disabled] {
374    background-color: darken(@color, 5%);
375        text-shadow: none;
376  }
377
378  &:active, &.active {
379    background-color: darken(@color, 15%);
380        .box-shadow(none);
381  }
382
383  // IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves
384  &:active,
385  &.active {
386    background-color: darken(@color, 15%) e("\9");
387  }
388}
389
390.btn {
391        padding: 12px 16px;
392        .border-radius(0);
393        background-image: none;
394        text-shadow: none;
395        .box-shadow(none);
396        .buttonBackgroundCustom(@btnBackground)
397}
398
399.btn-group .btn:first-child {
400        margin-left: 0;
401        .border-radius(0);
402}
403
404.btn-group .btn:last-child,
405.btn-group .dropdown-toggle {
406     .border-radius(0);
407}
408
409.btn-group .dropdown-toggle,
410.btn-group.open .dropdown-toggle,
411.btn.open .dropdown-toggle {
412        .box-shadow(none);
413}
414
415.btn-primary {
416  .buttonBackgroundCustom(@btnPrimaryBackground);
417}
418
419.btn-info {
420  .buttonBackgroundCustom(@btnInfoBackground);
421}
422
423.btn-success {
424  .buttonBackgroundCustom(@btnSuccessBackground);
425}
426
427.btn-warning {
428  .buttonBackgroundCustom(@btnWarningBackground);
429}
430
431.btn-danger {
432  .buttonBackgroundCustom(@btnDangerBackground);
433}
434
435.btn-inverse {
436  .buttonBackgroundCustom(@btnInverseBackground);
437}
438
439.btn-link {
440        .buttonBackgroundCustom(@btnPrimaryBackground);
441}
442
443.btn-small {
444        padding: 13px 16px 12px;
445}
446
447[class^="icon-"], [class*=" icon-"] {
448        margin-top: 2px;
449        margin-right: 8px;
450}
451
452.btn-small [class^="icon-"] {
453        margin-top: 1px;
454}
455
456.add-on [class^="icon-"] {
457        margin-left: 5px;
458}
459
460// TABLES
461// -----------------------------------------------------
462
463.table th, .table td,
464.table tbody + tbody {
465        border-top: 0px solid transparent;
466}
467
468.table-bordered {
469        .border-radius(0);
470}
471
472.table tbody {
473
474        tr.success td {
475                background-color: @green;
476        }
477
478        tr.error td {
479                background-color: @red;
480        }
481
482        tr.info td {
483                background-color: @blue;
484        }
485}
486
487// FORMS
488// -----------------------------------------------------
489
490legend {
491        font-family: @headingsFontFamily;
492}
493
494legend, label, .help-block, .input-file {
495        color: @textColor;
496        border: 0px solid transparent;
497}
498
499input, textarea, .uneditable-input {
500        border: 0px solid transparent;
501        padding: 10px;
502}
503
504.uneditable-input {
505        padding-bottom: 30px;
506}
507
508select {
509        border: 0px solid transparent;
510}
511
512button {
513        margin-left: 12px;
514}
515
516input, textarea, .search-query, .uneditable-input,
517.input-append input, .input-append .uneditable-input,
518.input-prepend input, .input-prepend .uneditable-input {
519        border-color: transparent;
520        .box-shadow(none);
521}
522
523.form-actions {
524        border-top: 0px solid transparent;
525}
526
527.control-group.warning > label,
528.control-group.warning .help-inline {
529        color: lighten(@orange, 30%);
530}
531
532.control-group.error > label,
533.control-group.error .help-inline {
534        color: lighten(@linkColor, 10%);
535}
536
537.control-group.success > label,
538.control-group.success .help-inline {
539        color: lighten(@green, 20%);
540}
541
542.input-prepend .add-on,
543.input-append .add-on {
544        height: 20px;
545        padding-top: 4px;
546        background-color: @grayLighter;
547        border-color: transparent;
548        .border-radius(0);
549        color: @gray;
550        text-shadow: none;
551}
552
553.input-append .btn,
554.input-prepend .btn {
555        padding: 4px 10px;
556}
557
558// ALERTS, LABELS, BADGES
559// -----------------------------------------------------
560
561.alert, .label {
562        border-color: transparent;
563        .border-radius(0);
564        .box-shadow(none);
565        text-shadow: none;
566}
567
568.alert-heading {
569        color: @textColor;
570}
571
572.label, .label:hover {
573        background-color: @grayLighter;
574        text-shadow: none;
575        color: @grayDark;
576}
577
578.label-warning, .label-warning:hover, .alert {
579        background-color: @orange;
580        color: @textColor;
581}
582
583.label-important, .label-important:hover, .alert-error {
584        background-color: darken(@bleuextraclair, 3%);
585        color: @textColor;
586}
587
588.label-success, .label-success:hover, .alert-success {
589        background-color: @green;
590        color: @textColor;
591}
592
593.label-info, .label-info:hover, .alert-info {
594        background-color: @purple;
595        color: @textColor;
596}
597
598// MISCELLANEOUS
599// -----------------------------------------------------
600
601.progress, .well, pre, code {
602        border-color: transparent;
603        .border-radius(0);
604        .box-shadow(none);
605        text-shadow: none;
606}
607
608.well {
609        background-image: none;
610}
611
612.hero-unit {
613        .border-radius(0);
614}
615
616.thumbnail {
617        border: 0 solid transparent;
618        .border-radius(0);
619        .box-shadow(none);
620}
621
622.progress {
623
624        background-image: none;
625        background-color: #27666D;
626
627        .bar {
628
629                .box-shadow(none);
630                background-image: none;
631                background-color: @bleuextraclair;
632
633                &-success {
634                        background-color: @green;
635                }
636
637                &-warning {
638                        background-color: @orange;
639                }
640
641                &-error {
642                        background-color: @red;
643                }
644        }
645}
646
647.progress-danger .bar {
648        background-image: none;
649        background-color: #AD1D28;
650}
651
652.progress-danger.progress-striped .bar {
653        #gradient > .striped(#AD1D28);
654}
655
656.progress-success .bar {
657        background-image: none;
658        background-color: @green;
659}
660
661.progress-success.progress-striped .bar {
662        #gradient > .striped(@green);
663}
664
665.progress-info .bar {
666        background-image: none;
667        background-color: @blue;
668}
669
670.progress-info.progress-striped .bar {
671        #gradient > .striped(@blue);
672}
673
674.modal {
675
676        .border-radius(0);
677
678        &-header {
679                background-color: @navbarBackground;
680                color: @white;
681        }
682
683        &-body {
684
685                color: @grayDark;
686
687                h1, h2, h3, h4, h5, h6,
688                legend {
689                        color: @red;
690                }
691
692                label,
693                .input-file {
694                        color: @grayDark;
695                }
696
697                .help-block,
698                .help-inline {
699                        color: @grayLight;
700                }
701
702                textarea,
703                input,
704                .uneditable-input {
705                        border: 1px solid @grayLight;
706                }
707        }
708}
709
710.popover {
711
712        padding: 0;
713        .border-radius(0);
714        color: @grayDark;
715
716        .popover-title {
717                .border-radius(0);
718                color: @white;
719        }
720}
721
722// MEDIA QUERIES
723// -----------------------------------------------------
Note: See TracBrowser for help on using the repository browser.