Dotclear

source: admin/style/scss/themes/_light.scss @ 3868:dae3038ae341

Revision 3868:dae3038ae341, 21.3 KB checked in by franck <carnet.franck.paul@…>, 7 years ago (diff)

Add badge styles to standard CSS

Line 
1// ========================================================================== //
2// =Couleurs
3// ========================================================================== //
4
5// Palette de base
6
7$blue:            #137bbb;
8$green:           #9ac123;
9$red:             #c44d58;
10$light-blue:      #a2cbe9;
11$orange:          #d33800;
12
13$gray:            #b2b2b2;
14$gray-dark:       #676e78;
15
16$gray-very-dark:    shade($gray, 72%);  // #323232 (near to #333 used before)
17$gray-darker:       shade($gray, 50%);  // #595b5d
18$gray-semi-dark:    shade($gray, 25%);  // #868686 (near to #999 used before)
19$gray-light:        tint($gray, 30%);   // #c9c9c9 (near to #ccc used before)
20$gray-lighter:      tint($gray, 75%);   // #ececec (near to #eee used before)
21$gray-very-light:   tint($gray, 85%);   // #f3f3f3 (near to #f7f7f7 used before)
22
23$white:           #fff;
24$black:           #000;
25
26// Palette secondaire
27
28$warning:         #fefacd;
29$warning-alt:     #ffd478;
30
31$info:            #d9edf7;
32$info-alt:        #bce8f1;
33
34$error:           #ffbaba;
35$error-alt:       #ae323b;
36
37$required:        #ae323b;
38
39$success:         #bee74b;
40$success-alt:     #9bca1c;
41
42$link:            #2373a8;
43$link-outline:    #bee74b;
44
45$current-page:    #d30e60;
46
47$legacy:          #eef1ec;
48$code:            #fefacd;
49$tooltip:         #910ed3;
50
51$pw-very-weak:    #c44d58;
52$pw-weak:         #e1732c;
53$pw-mediocre:     #ff9900;
54$pw-strong:       #cdad12;
55$pw-very-strong:  #9ac123;
56
57$submit:          #25a6e1;
58$submit-alt:      #188bc0;
59
60$reset:           #eaeaea;
61$reset-alt:       #f9f9f9;
62$reset-ter:       #dadada;
63
64$delete:          #ae323b;
65$delete-alt:      #b33630;
66$delete-ter:      #dc5f59;
67
68$add:             #bee74b;
69$add-alt:         #9bca1c;
70
71$badge:           #d54e21;  /* bright red */
72$badge-soft:      #708090;  /* slategray */
73$badge-info:      #3f51b5;  /* soft dark blue */
74
75// Common
76
77$body-color:                      $gray-very-dark;                    // #323232
78$body-background:                 $white;                             // #ffffff
79
80$title-color:                     $gray-dark;                         // #676e78 : h2, h4, h5, h6
81$title-alt-color:                 $orange;                            // #d33800 : h3
82
83// Layout
84
85$header-color:                    $white;                             // #ffffff
86$header-background:               $gray-dark;                         // #676e78
87$header-background-alt:           $gray-very-dark;                    // #323232
88$header-border:                   $light-blue;                        // #a2cbe9
89$header-border-alt:               $gray-very-dark;                    // #323232
90$header-link-border:              $gray-semi-dark;                    // #868686
91$header-active-color:             $orange;                            // #d33800
92$header-active-background:        $gray-very-light;                   // #f3f3f3
93$header-active-color-alt:         $white;                             // #ffffff
94$header-active-background-alt:    $gray-semi-dark;                    // #868686
95
96$wrapper-background:              $white;                             // #ffffff
97
98$content-background:              $white;                             // #ffffff
99
100$tabs-color:                      $gray-very-dark;                    // #323232
101$tabs-border:                     $gray-light;                        // #c9c9c9
102$tabs-background:                 $gray-very-light;                   // #f3f3f3
103$tabs-active-color:               $orange;                            // #d33800
104$tabs-active-background:          $white;                             // #ffffff
105
106$main-menu-background:            $gray-very-light;                   // #f3f3f3
107$main-menu-title-color:           $gray-dark;                         // #676e78
108$main-menu-item-color:            $gray-very-dark;                    // #323232
109$main-menu-item-border:           tint($gray-dark, 66%);              // #c5c5c5
110$main-menu-active-color:          $current-page;                      // #d30e60
111$main-menu-active-background:     $white;                             // #ffffff
112$main-menu-border:                $light-blue;                        // #a2cbe9
113
114$search-color:                    $gray-very-dark;                    // #323232
115$search-border:                   $gray-semi-dark;                    // #868686
116$search-background:               $gray-light;                        // #c9c9c9
117$search-submit-color:             $white;                             // #ffffff
118$search-submit-background:        $gray-semi-dark;                    // #868686
119$search-outline:                  $link-outline;                      // #bee74b
120
121$footer-background:               $white;                             // #ffffff
122$footer-border:                   tint($gray-dark, 66%);              // #c5c5c5
123
124$collapser-focus:                 $light-blue;                        // #a2cbe9
125$collapser-background:            $gray-light;                        // #c9c9c9
126
127$popup-title-color:               $white;                             // #ffffff
128$popup-title-background:          $gray-dark;                         // #676e78
129
130// Markup
131
132$breadcrumb-background:           $white;                             // #ffffff
133$breadcrumb-border:               $gray-semi-dark;                    // #868686
134$breadcrumb-current:              $current-page;                      // #d30e60
135
136$fieldset-pretty-title-color:     $orange;                            // #d33800
137$fieldset-smart-title-color:      $gray-very-dark;                    // #323232
138$entry-sidebar-title-color:       $gray-very-dark;                    // #323232
139$title-label-color:               $gray-very-dark;                    // #323232
140
141$table-caption-color:             $gray-very-dark;                    // #323232
142$head-border:                     shade($gray-very-light, 10%);       // #dbdbdb
143$head-background:                 $gray-very-light;                   // #f3f3f3
144$line-input-background:           $white;                             // #ffffff
145$line-background-over:            $gray-very-light;                   // #f3f3f3 tr:hover
146$line-focus-background:           shade($white, 7%);                  // #ededed
147$cell-border:                     $gray-lighter;                      // #ececec
148$cell-noborder-color:             shade($gray-very-light, 10%);       // #dbdbdb td/th .noborder
149
150$hr-color:                        shade($gray-very-light, 10%);       // #dbdbdb
151
152$code-color:                      $body-color;
153$code-background:                 $code;                              // #fefacd
154
155$link-color:                      $link;                              // #2373a8
156$link-border:                     $gray-semi-dark;                    // #868686
157$discrete-link-color:             $gray-very-dark;                    // #323232
158
159$outgoing-link-filter:            50%;
160
161// Forms
162
163$fieldset-border:                 tint($gray-dark, 66%);              // #c5c5c5
164$fieldset-background:             $white;                             // #ffffff
165$fieldset-focus-background:       shade($white, 7%);                  // #ededed
166
167$legend-border:                   $gray-dark;                         // #676e78
168$legend-background:               $white;                             // #ffffff
169
170$invalid-input-color:             $black;                             // #000000
171$invalid-input-border:            $error-alt;                         // #ae323b
172$invalid-input-background:        $error;                             // #ffbaba
173$invalid-input-shadow:            rgba($error-alt, 0.3);
174
175$input-color:                     $black;                             // #000000
176$input-background:                tint($gray-very-light, 50%);        // #f9f9f9
177$input-border:                    shade($gray-very-light, 10%);       // #dbdbdb
178$input-shadow:                    $gray-very-light;                   // #f3f3f3
179$input-focus:                     $link-outline;                      // #bee74b
180
181$input-file-color:                $body-color;
182$input-file-background:           $body-background;
183
184$form-note-color:                 $gray-dark;                         // #676e78
185
186$error-background:                $error;                             // #ffbaba
187
188// Buttons
189
190$button-color:                    $black;                             // #000000
191$button-border:                   tint($gray-dark, 66%);              // #c5c5c5
192$button-shadow:                   rgba($black, 0.05);
193
194$submit-color:                    $white;                             // #ffffff
195$submit-background:               $submit;                            // #25a6e1
196$submit-background-alt:           $submit-alt;                        // #188bc0
197$submit-border:                   tint($gray-dark, 66%);              // #c5c5c5
198
199$reset-color:                     $black;                             // #000000
200$reset-background:                $reset;                             // #eaeaea
201$reset-background-alt:            $reset-alt;                         // #f9f9f9
202$reset-background-ter:            $reset-ter;                         // #dadada
203$reset-border:                    tint($gray-dark, 66%);              // #c5c5c5
204
205$delete-color:                    $delete;                            // #ae323b
206$delete-hover-color:              $white;                             // #ffffff
207$delete-hover-background:         $delete-alt;                        // #b33630
208$delete-hover-background-alt:     $delete-ter;                        // #dc5f59
209$delete-hover-border:             $delete-ter;                        // #dc5f59
210
211$add-color:                       $black;                             // #000000
212$add-background:                  $add;                               // #bee74b
213$add-background-alt:              $add-alt;                           // #9bca1c
214$add-border:                      $add;                               // #bee74b
215$add-border-alt:                  $add-alt;                           // #9bca1c
216
217$button-disabled-color:           $gray-dark;                         // #676e78
218$button-disabled-background:      $gray-very-light;                   // #f3f3f3
219$button-disabled-background-alt:  $gray-lighter;                      // #ececec
220$button-disabled-border:          tint($gray-dark, 66%);              // #c5c5c5
221
222$ajax-color:                      $gray-very-dark;                    // #323232
223$ajax-background:                 $white;                             // #ffffff
224$ajax-background-alt:             $light-blue;                        // #a2cbe9
225$ajax-border:                     $gray-dark;                         // #676e78
226
227$gotop-color:                     $gray-very-dark;                    // #323232
228$gotop-background:                transparent;
229$gotop-border:                    none;
230
231$addmeta-color:                   $black;                             // #000000
232$addmeta-background:              transparent;
233$addmeta-focus-color:             $black;                             // #000000
234$addmeta-focus-background:        tint($light-blue, 10%);             // #abd0eb
235
236// Messages
237
238$msg-color:                       $white;                             // #ffffff
239$msg-background:                  $gray-dark;                         // #676e78
240$msg-background-alt:              tint($gray-dark, 66%);              // #c5c5c5
241$msg-shadow:                      rgba($gray-very-dark, 0.1);
242
243$msg-info-color:                  $gray-very-dark;                    // #323232
244$msg-info-background:             $info;                              // #d9edf7
245$msg-info-border:                 $info-alt;                          // #bce8f1
246
247$msg-warn-color:                  $gray-very-dark;                    // #323232
248$msg-warn-background:             $warning;                           // #fefacd
249$msg-warn-background-alt:         $warning-alt;                       // #ffd478
250$msg-warn-border:                 $warning-alt;                       // #ffd478
251
252$msg-error-color:                 $black;                             // #000000
253$msg-error-background:            $error;                             // #ffbaba
254$msg-error-background-alt:        $warning;                           // #fefacd
255
256$msg-success-color:               $black;                             // #000000
257$msg-success-background:          $success;                           // #bee74b
258$msg-success-background-alt:      $success-alt;                       // #9bca1c
259
260$dc-update-color:                 $black;                             // #000000
261$dc-update-background:            $light-blue;                        // #a2cbe9
262
263$ajax-loader:                     shade($light-blue, 10%);            // #92b7d2
264
265// Filters
266
267$form-control-color:              $black;                             // #000000
268
269$filter-border:                   $light-blue;                        // #a2cbe9
270$filter-options-border:           $gray-light;                        // #c9c9c9
271$filter-focus-background:         shade($white, 7%);                  // #ededed
272
273// Prelude
274
275$prelude-color:                   $gray-very-dark;                    // #323232
276$prelude-background:              $light-blue;                        // #a2cbe9
277$prelude-background-alt:          $white;                             // #ffffff
278
279// Help
280
281$help-background:                 $gray-very-light;                   // #f3f3f3
282$help-border:                     $warning-alt;                       // #ffd478
283$help-button-border:              $gray-light;                        // #c9c9c9
284$help-button-background:          $gray-very-light;                   // #f3f3f3
285$help-title-color:                $gray-dark;                         // #676e78
286
287// Tooltip (in footer)
288
289$tooltip-color:                   $tooltip;                           // #910ed3
290$tooltip-background:              rgba($white, 0.9);
291
292// Application pages:
293// - Auth (white background page)
294
295$login-fieldset-background:       $white;                             // #ffffff
296$login-fieldset-border:           $success-alt;                       // #9bca1c
297
298// - Index
299
300$index-link-color:                $gray-very-dark;                    // #323232
301$index-link-border:               $gray-semi-dark;                    // #868686
302$index-icon-background:           tint($gray-very-light, 50%);        // #f9f9f9
303$index-icon-border:               shade($gray-very-light, 10%);       // #dbdbdb
304$index-icon-outline:              $link-outline;                      // #bee74b
305$index-icon-contrast:             100%;
306
307$quick-background:                $gray-very-light;                   // #f3f3f3
308$quick-border:                    shade($gray-very-light, 10%);       // #dbdbdb
309$quick-info-background:           $info;                              // #d9edf7
310$quick-info-border:               $info-alt;                          // #bce8f1
311$quick-info-color:                $gray-very-dark;                    // #323232
312
313$index-box-border:                tint($gray-dark, 66%);              // #c5c5c5
314
315// - Blog params
316
317$blog-user-border:                tint($gray-dark, 66%);              // #c5c5c5
318$blog-super-background:           rgba($info, 0.5);                   // #d9edf7 - 50%
319$blog-super-border:               $link-outline;                      // #bee74b
320
321// - Blog theme
322
323$theme-box-border:                shade($gray-very-light, 10%);       // #dbdbdb
324$theme-box-over:                  $gray-very-light;                   // #f3f3f3
325
326$theme-name-color:                $gray-dark;                         // #676e78
327
328$theme-img-background:            $gray-very-light;                   // #f3f3f3
329$theme-img-border:                $white;                             // #ffffff
330$theme-img-shadow:                rgba($gray-very-dark, 0.1);
331
332$theme-action-background:         $gray-very-light;                   // #f3f3f3
333$theme-action-border:             $gray-lighter;                      // #ececec
334
335$theme-current-background:        $gray-very-light;                   // #f3f3f3
336$theme-current-border:            $gray-lighter;                      // #ececec
337$theme-current-shadow:            rgba($gray-very-dark, 0.1);
338
339$theme-current-img-border:        $white;                             // #ffffff
340$theme-current-name-color:        $orange;                            // #d33800
341
342// - Categories
343
344$cat-placeholder-outline:         $link;                              // #2373a8
345
346$cat-line-border:                 tint($gray-dark, 66%);              // #c5c5c5
347$subcat-line-border:              shade($gray-very-light, 10%);       // #dbdbdb
348
349$cat-post-counter:                $gray-very-dark;                    // #323232
350
351// - Media
352
353$media-folder-background:         transparent;
354$media-folder-border:             $gray-lighter;                      // #ececec
355$media-folderup-border:           transparent;
356$media-folder-link:               $gray-dark;                         // #676e78
357$media-item-border:               shade($gray-very-light, 10%);       // #dbdbdb
358$media-files-border:              shade($gray-very-light, 10%);       // #dbdbdb
359
360$upload-color:                    shade($success-alt, 45%);           // #556f0f
361$upload-filemsg-color:            $white;                             // #ffffff
362$upload-progress-color:           $white;                             // #ffffff
363$upload-progress-background:      shade($success-alt, 45%);           // #556f0f
364$upload-file-border:              shade($gray-very-light, 10%);       // #dbdbdb
365$upload-error-color:              $error-alt;                         // #ae323b
366
367// - Plugins
368
369$modules-background:              $gray-very-light;                   // #f3f3f3
370$modules-border:                  $light-blue;                        // #a2cbe9
371
372// - Entry
373
374$entry-sb-title-border:           $gray-dark;                         // #676e78
375$entry-sb-background:             $gray-very-light;                   // #f3f3f3
376$entry-sb-focus-background:       shade($white, 7%);                  // #ededed
377
378// - Preferences
379
380$fav-list-background:             $gray-very-light;                   // #f3f3f3
381$fav-list-background-over:        $gray-very-light;                   // #f3f3f3
382$fav-list-border:                 $gray-lighter;                      // #ececec
383$fav-list-border-alt:             shade($gray-very-light, 10%);       // #dbdbdb
384
385$my-favs-border:                  $green;                             // #9ac123
386
387// - Charte
388
389$charte-title:                    $orange;                            // #d33800
390$charte-one-box-border:           shade($gray-very-light, 10%);       // #dbdbdb
391
392// Classes
393
394$ac-results-background:           $white;                             // #ffffff
395$ac-results-border:               $warning-alt;                       // #ffd478
396$ac-results-over:                 $white;                             // #ffffff
397$ac-results-over-background:      $link;                              // #2373a8
398
399$nav-background:                  $white;                             // #ffffff
400$nav-prevnext:                    $link;                              // #2373a8
401$nav-prevnext-background:         $gray-very-light;                   // #f3f3f3
402$nav-prevnext-border:             shade($gray-very-light, 10%);       // #dbdbdb
403
404$onblog-link:                     $gray-very-dark;                    // #323232
405$onblog-link-background:          $gray-lighter;                      // #ececec
406$onblog-link-border:              $gray-lighter;                      // #ececec
407$onblog-link-shadow:              rgba($gray-very-dark, 0.3);         // #323232 30%
408
409$pager-link:                      $link;                              // #2373a8
410$pager-active:                    $gray-dark;                         // #676e78
411$pager-background:                $gray-very-light;                   // #f3f3f3
412$pager-background-over:           shade($gray-very-light, 10%);       // #dbdbdb
413$pager-off-background:            $white;                             // #ffffff
414$pager-input-background:          $white;                             // #ffffff
415$pager-border:                    shade($gray-very-light, 10%);       // #dbdbdb
416
417$index-no-link:                   $gray-light;                        // #c9c9c9
418$index-active:                    $white;                             // #ffffff
419$index-active-background:         $gray-dark;                         // #676e78
420
421$step:                            $gray-dark;                         // #676e78
422$step-background:                 $gray-very-light;                   // #f3f3f3
423$step-border:                     tint($gray-dark, 66%);              // #c5c5c5
424
425$offline:                         $gray-dark;                         // #676e78
426$offline-background:              $gray-very-light;                   // #f3f3f3
427
428$mark-attach-img:                 url('../images/attach.svg');
429$mark-attach-filter:              hue-rotate(300deg) saturate(.64);
430
431// Utils
432
433$color-picker-border:             $black;                             // #000000
434$color-picker-background:         $white;                             // #ffffff
435
436$color-div-border:                $gray-light;                        // #c9c9c9
437
438$badge-color:                     $white;                             // #ffffff
439$badge-std-background:            $badge;                             // #d54e21
440$badge-soft-background:           $badge-soft;
441$badge-info-background:           $badge-info;
442
443// Debug
444
445$debug-color:                     $error-alt;                         // #ae323b
446$debug-background:                $warning-alt;                       // #ffd478
447$debug-border:                    $warning-alt;                       // #ffd478
Note: See TracBrowser for help on using the repository browser.

Sites map