Dotclear

source: admin/style/scss/themes/_dark.scss @ 3771:ee48b80e8d04

Revision 3771:ee48b80e8d04, 13.4 KB checked in by franck <carnet.franck.paul@…>, 7 years ago (diff)

Use svg image rather than png for outgoing links

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

Sites map