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