Dotclear

source: admin/style/scss/themes/_light.scss @ 3780:2a4c7e88ca8b

Revision 3780:2a4c7e88ca8b, 20.8 KB checked in by franck <carnet.franck.paul@…>, 7 years ago (diff)

Fix required indicator contrast for dark mode

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

Sites map