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

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

1e utilisation bootstrap;

File size: 12.5 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  border-left-color : lighten(#147E88, 12%);
27
28  &.pull-right {
29        border-right-color : lighten(#147E88, 12%);
30  }
31
32  small {
33        color : rgba(255, 255, 255, 0.6);
34  }
35}
36
37.muted {
38  color : rgba(255, 255, 255, 0.5);
39}
40
41// SCAFFOLDING
42// -----------------------------------------------------
43
44body {
45  #gradient > .radial(lighten(#0F66A2, 7%), #0F66A2);
46  background-image    : url('../img/spip_table.png');
47  background-repeat   : no-repeat;
48  background-position : center;
49}
50
51hr {
52  border-bottom : 1px solid rgba(255, 255, 255, 0.3);
53}
54
55.page-header {
56  margin        : 30px 0 15px;
57  border-bottom : 0px solid transparent;
58}
59
60// NAVBAR
61// -----------------------------------------------------
62
63.navbar {
64
65  .navbar-inner {
66        .border-radius(0);
67  }
68
69  .brand {
70        padding     : 15px 20px 14px;
71        font-family : @headingsFontFamily;
72        font-size   : 24px;
73        font-weight : normal;
74  }
75
76  .nav > li > a {
77        padding-top    : 17px;
78        padding-bottom : 14px;
79        text-shadow    : none;
80  }
81
82  .nav > .active > a,
83  .nav > .active > a:hover,
84  .navbar .nav > .active > a:focus {
85        .box-shadow(none);
86  }
87
88  .navbar-search {
89        margin-top : 10px;
90  }
91
92  .navbar-search .search-query {
93        .border-radius(0);
94        padding-top    : 5px;
95        padding-bottom : 5px;
96  }
97
98  .navbar-text {
99        margin      : 17px 15px 14px;
100        line-height : 20px;
101  }
102
103  .btn,
104  .btn-group {
105        padding : 4px;
106  }
107
108  &-inverse {
109
110        .dropdown-menu li > a:hover,
111        .dropdown-menu li > a:focus,
112        .dropdown-submenu:hover > a {
113          background-image : none;
114          background-color : @bleuextraclair;
115        }
116  }
117}
118
119@media (max-width: @navbarCollapseWidth) {
120
121  .navbar .nav-collapse {
122
123        .nav li > a {
124          color : @textColor;
125          .border-radius(0);
126
127          &:hover {
128                background-color : lighten(@navbarBackground, 10%);
129          }
130        }
131
132        .dropdown-menu li > a:hover,
133        .dropdown-menu li > a:focus,
134        .dropdown-submenu:hover > a {
135          background-image : none;
136        }
137
138        .navbar-form,
139        .navbar-search {
140          .box-shadow(none);
141          border : none;
142        }
143
144        .navbar-search .search-query {
145          border : 2px solid @textColor;
146        }
147
148        .nav-header {
149          color : rgba(255, 255, 255, 0.5);
150        }
151  }
152
153  .navbar-inverse .nav-collapse {
154
155        .nav li > a:hover,
156        .dropdown-menu a:hover {
157          background-color : lighten(@navbarInverseBackground, 10%) !important;
158        }
159  }
160}
161
162div.subnav {
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  background-color : @color;
370  border-color     : transparent;
371
372  &:hover, &:active, &.active, &.disabled, &[disabled] {
373        background-color : darken(@color, 5%);
374        text-shadow      : none;
375  }
376
377  &:active, &.active {
378        background-color : darken(@color, 15%);
379        .box-shadow(none);
380  }
381
382// IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves
383  &:active,
384  &.active {
385        background-color : darken(@color, 15%) e("\9");
386  }
387}
388
389.btn {
390  padding          : 12px 16px;
391  .border-radius(0);
392  background-image : none;
393  text-shadow      : none;
394  .box-shadow(none);
395  .buttonBackgroundCustom(@btnBackground)
396}
397
398.btn-group .btn:first-child {
399  margin-left : 0;
400  .border-radius(0);
401}
402
403.btn-group .btn:last-child,
404.btn-group .dropdown-toggle {
405  .border-radius(0);
406}
407
408.btn-group .dropdown-toggle,
409.btn-group.open .dropdown-toggle,
410.btn.open .dropdown-toggle {
411  .box-shadow(none);
412}
413
414.btn-primary {
415  .buttonBackgroundCustom(@btnPrimaryBackground);
416}
417
418.btn-info {
419  .buttonBackgroundCustom(@btnInfoBackground);
420}
421
422.btn-success {
423  .buttonBackgroundCustom(@btnSuccessBackground);
424}
425
426.btn-warning {
427  .buttonBackgroundCustom(@btnWarningBackground);
428}
429
430.btn-danger {
431  .buttonBackgroundCustom(@btnDangerBackground);
432}
433
434.btn-inverse {
435  .buttonBackgroundCustom(@btnInverseBackground);
436}
437
438.btn-link {
439  .buttonBackgroundCustom(@btnPrimaryBackground);
440}
441
442.btn-small {
443  padding : 13px 16px 12px;
444}
445
446[class^="icon-"], [class*=" icon-"] {
447  margin-top   : 2px;
448  margin-right : 8px;
449}
450
451.btn-small [class^="icon-"] {
452  margin-top : 1px;
453}
454
455.add-on [class^="icon-"] {
456  margin-left : 5px;
457}
458
459// TABLES
460// -----------------------------------------------------
461
462.table th, .table td,
463.table tbody + tbody {
464  border-top : 0px solid transparent;
465}
466
467.table-bordered {
468  .border-radius(0);
469}
470
471.table tbody {
472
473  tr.success td {
474        background-color : @green;
475  }
476
477  tr.error td {
478        background-color : @red;
479  }
480
481  tr.info td {
482        background-color : @blue;
483  }
484}
485
486// FORMS
487// -----------------------------------------------------
488
489legend {
490  font-family : @headingsFontFamily;
491}
492
493legend, label, .help-block, .input-file {
494  color  : @textColor;
495  border : 0px solid transparent;
496}
497
498input, textarea, .uneditable-input {
499  border  : 0px solid transparent;
500  padding : 10px;
501}
502
503.uneditable-input {
504  padding-bottom : 30px;
505}
506
507select {
508  border : 0px solid transparent;
509}
510
511button {
512  margin-left : 12px;
513}
514
515input, textarea, .search-query, .uneditable-input,
516.input-append input, .input-append .uneditable-input,
517.input-prepend input, .input-prepend .uneditable-input {
518  border-color : transparent;
519  .box-shadow(none);
520}
521
522.form-actions {
523  border-top : 0px solid transparent;
524}
525
526.control-group.warning > label,
527.control-group.warning .help-inline {
528  color : lighten(@orange, 30%);
529}
530
531.control-group.error > label,
532.control-group.error .help-inline {
533  color : lighten(@linkColor, 10%);
534}
535
536.control-group.success > label,
537.control-group.success .help-inline {
538  color : lighten(@green, 20%);
539}
540
541.input-prepend .add-on,
542.input-append .add-on {
543  height           : 20px;
544  padding-top      : 4px;
545  background-color : @grayLighter;
546  border-color     : transparent;
547  .border-radius(0);
548  color            : @gray;
549  text-shadow      : none;
550}
551
552.input-append .btn,
553.input-prepend .btn {
554  padding : 4px 10px;
555}
556
557// ALERTS, LABELS, BADGES
558// -----------------------------------------------------
559
560.alert, .label {
561  border-color : transparent;
562  .border-radius(0);
563  .box-shadow(none);
564  text-shadow  : none;
565}
566
567.alert-heading {
568  color : @textColor;
569}
570
571.label, .label:hover {
572  background-color : @grayLighter;
573  text-shadow      : none;
574  color            : @grayDark;
575}
576
577.label-warning, .label-warning:hover, .alert {
578  background-color : @orange;
579  color            : @textColor;
580}
581
582.label-important, .label-important:hover, .alert-error {
583  background-color : darken(@bleuextraclair, 3%);
584  color            : @textColor;
585}
586
587.label-success, .label-success:hover, .alert-success {
588  background-color : @green;
589  color            : @textColor;
590}
591
592.label-info, .label-info:hover, .alert-info {
593  background-color : @purple;
594  color            : @textColor;
595}
596
597// MISCELLANEOUS
598// -----------------------------------------------------
599
600.progress, .well, pre, code {
601  border-color : transparent;
602  .border-radius(0);
603  .box-shadow(none);
604  text-shadow  : none;
605}
606
607.well {
608  background-image : none;
609}
610
611.hero-unit {
612  .border-radius(0);
613}
614
615.thumbnail {
616  border : 0 solid transparent;
617  .border-radius(0);
618  .box-shadow(none);
619}
620
621.progress {
622  background-image : none;
623  background-color : #27666D;
624
625  .bar {
626
627        .box-shadow(none);
628        background-image : none;
629        background-color : @bleuextraclair;
630
631        &-success {
632          background-color : @green;
633        }
634
635        &-warning {
636          background-color : @orange;
637        }
638
639        &-error {
640          background-color : @red;
641        }
642  }
643}
644
645.progress-danger .bar {
646  background-image : none;
647  background-color : #AD1D28;
648}
649
650.progress-danger.progress-striped .bar {
651  #gradient > .striped(#AD1D28);
652}
653
654.progress-success .bar {
655  background-image : none;
656  background-color : @green;
657}
658
659.progress-success.progress-striped .bar {
660  #gradient > .striped(@green);
661}
662
663.progress-info .bar {
664  background-image : none;
665  background-color : @blue;
666}
667
668.progress-info.progress-striped .bar {
669  #gradient > .striped(@blue);
670}
671
672.modal {
673
674  .border-radius(0);
675
676  &-header {
677        background-color : @navbarBackground;
678        color            : @white;
679  }
680
681  &-body {
682        color : @grayDark;
683
684        h1, h2, h3, h4, h5, h6,
685        legend {
686          color : @red;
687        }
688
689        label,
690        .input-file {
691          color : @grayDark;
692        }
693
694        .help-block,
695        .help-inline {
696          color : @grayLight;
697        }
698
699        textarea,
700        input,
701        .uneditable-input {
702          border : 1px solid @grayLight;
703        }
704  }
705}
706
707.popover {
708  padding : 0;
709  .border-radius(0);
710  color   : @grayDark;
711
712  .popover-title {
713        .border-radius(0);
714        color : @white;
715  }
716}
717
718// MEDIA QUERIES
719// -----------------------------------------------------
Note: See TracBrowser for help on using the repository browser.