453 lines
14 KiB
SCSS
453 lines
14 KiB
SCSS
// ========================================================================== //
|
|
// =Couleurs
|
|
// ========================================================================== //
|
|
|
|
// Palette de base
|
|
|
|
$blue: #76c2f1;
|
|
$green: #9ac123;
|
|
$red: #c44d58;
|
|
$light-blue: #a2cbe9;
|
|
$orange: #ff6e3a;
|
|
|
|
$gray: #b2b5ba;
|
|
$gray-dark: #676e78;
|
|
|
|
$gray-very-dark: shade($gray, 72%); // #323232
|
|
$gray-darker: shade($gray, 50%); // #595b5d
|
|
$gray-semi-dark: shade($gray, 25%); // #868686
|
|
$gray-light: tint($gray, 30%); // #c9c9c9
|
|
$gray-lighter: tint($gray, 75%); // #ececec
|
|
$gray-very-light: tint($gray, 85%); // #f3f3f3
|
|
|
|
$white: #fff;
|
|
$black: #000;
|
|
|
|
// Palette secondaire
|
|
|
|
$warning: #fefacd;
|
|
$warning-alt: #ffd478;
|
|
|
|
$info: #d9edf7;
|
|
$info-alt: #bce8f1;
|
|
|
|
$error: #ffbaba;
|
|
$error-alt: #ae323b;
|
|
|
|
$required: #f783b3;
|
|
|
|
$success: #bee74b;
|
|
$success-alt: #9bca1c;
|
|
|
|
$link: #76c2f1;
|
|
$link-outline: #bee74b;
|
|
|
|
$current-page: #f783b3;
|
|
|
|
$legacy: #eef1ec;
|
|
$code: #fefacd;
|
|
$tooltip: #910ed3;
|
|
|
|
$pw-very-weak: #c44d58;
|
|
$pw-weak: #e1732c;
|
|
$pw-mediocre: #ff9900;
|
|
$pw-strong: #cdad12;
|
|
$pw-very-strong: #9ac123;
|
|
|
|
$submit: #25a6e1;
|
|
$submit-alt: #188bc0;
|
|
|
|
$reset: #eaeaea;
|
|
$reset-alt: #f9f9f9;
|
|
$reset-ter: #dadada;
|
|
|
|
$delete: #ae323b;
|
|
$delete-alt: #b33630;
|
|
$delete-ter: #dc5f59;
|
|
|
|
$add: #bee74b;
|
|
$add-alt: #9bca1c;
|
|
|
|
$badge: #d54e21; /* bright red */
|
|
$badge-soft: #607d8b; /* slategray */
|
|
$badge-info: #3f51b5; /* soft dark blue */
|
|
|
|
// Common
|
|
|
|
$body-color: #dcdee0;
|
|
$body-background: #272b30;
|
|
|
|
$title-color: $gray;
|
|
$title-alt-color: $orange;
|
|
|
|
// Layout
|
|
|
|
$header-color: $body-color;
|
|
$header-background: $body-background;
|
|
$header-background-alt: $gray-darker;
|
|
$header-border: $green;
|
|
$header-border-alt: $gray-very-dark;
|
|
$header-link-border: $gray-semi-dark;
|
|
$header-active-color: $white;
|
|
$header-active-background: $gray-semi-dark;
|
|
$header-active-color-alt: $white;
|
|
$header-active-background-alt: $gray-semi-dark;
|
|
|
|
$wrapper-background: $body-background;
|
|
|
|
$content-background: $body-background;
|
|
|
|
$tabs-color: $gray-very-dark;
|
|
$tabs-border: $gray-lighter;
|
|
$tabs-background: $gray-light;
|
|
$tabs-active-color: $white;
|
|
$tabs-active-background: $gray-semi-dark;
|
|
|
|
$main-menu-background: shade($gray-darker, 15%);
|
|
$main-menu-title-color: $gray-light;
|
|
$main-menu-item-color: $body-color;
|
|
$main-menu-item-border: tint($gray-dark, 66%);
|
|
$main-menu-active-color: $white;
|
|
$main-menu-active-background: $gray-semi-dark;
|
|
$main-menu-border: $light-blue;
|
|
|
|
$search-color: $white;
|
|
$search-border: $gray-light;
|
|
$search-background: $submit;
|
|
$search-submit-color: $white;
|
|
$search-submit-background: $submit-alt;
|
|
$search-outline: $link-outline;
|
|
|
|
$footer-background: $body-background;
|
|
$footer-border: tint($gray-dark, 66%);
|
|
|
|
$collapser-focus: $green;
|
|
$collapser-background: $gray-darker;
|
|
|
|
$popup-title-color: $body-color;
|
|
$popup-title-background: $gray-darker;
|
|
|
|
// Markup
|
|
|
|
$breadcrumb-background: $body-background;
|
|
$breadcrumb-border: $gray-semi-dark;
|
|
$breadcrumb-current: $current-page;
|
|
|
|
$fieldset-pretty-title-color: $orange;
|
|
$fieldset-smart-title-color: $gray-very-light;
|
|
$entry-sidebar-title-color: $gray-lighter;
|
|
$title-label-color: $gray-lighter;
|
|
|
|
$table-caption-color: $body-color;
|
|
$head-border: shade($gray-very-light, 10%);
|
|
$head-background: $gray-darker;
|
|
$line-input-background: $gray-light;
|
|
$line-background-over: shade($gray-darker, 15%);
|
|
$line-focus-background: shade($gray-darker, 15%);
|
|
$cell-border: $gray-lighter;
|
|
$cell-noborder-color: shade($gray-very-light, 10%);
|
|
|
|
$hr-color: $gray-light;
|
|
|
|
$code-color: $body-background;
|
|
$code-background: $code;
|
|
|
|
$link-color: $link;
|
|
$link-border: $gray-semi-dark;
|
|
$discrete-link-color: $body-color;
|
|
|
|
$outgoing-link-filter: 100%;
|
|
|
|
// Forms
|
|
|
|
$fieldset-border: tint($gray-dark, 66%);
|
|
$fieldset-background: $body-background;
|
|
$fieldset-focus-background: tint($body-background, 7%);
|
|
|
|
$legend-border: tint($gray-dark, 66%);
|
|
$legend-background: $gray-darker;
|
|
|
|
$invalid-input-color: $black;
|
|
$invalid-input-border: $error-alt;
|
|
$invalid-input-background: $error;
|
|
$invalid-input-shadow: rgba($error-alt, 0.3);
|
|
|
|
$input-color: $black;
|
|
$input-background: $gray-lighter;
|
|
$input-border: tint($gray-dark, 10%);
|
|
$input-shadow: $gray-lighter;
|
|
$input-focus: $link-outline;
|
|
|
|
$input-file-color: $body-color;
|
|
$input-file-background: $body-background;
|
|
|
|
$form-note-color: $info-alt;
|
|
|
|
$error-background: $error;
|
|
|
|
// Buttons
|
|
|
|
$button-color: $black;
|
|
$button-border: $gray-semi-dark;
|
|
$button-shadow: rgba($black, 0.05);
|
|
|
|
$submit-color: $white;
|
|
$submit-background: $submit;
|
|
$submit-background-alt: $submit-alt;
|
|
$submit-border: $gray-semi-dark;
|
|
|
|
$reset-color: $black;
|
|
$reset-background: $reset;
|
|
$reset-background-alt: $reset-alt;
|
|
$reset-background-ter: $reset-ter;
|
|
$reset-border: $gray-semi-dark;
|
|
|
|
$delete-color: $delete;
|
|
$delete-hover-color: $white;
|
|
$delete-hover-background: $delete-alt;
|
|
$delete-hover-background-alt: $delete-ter;
|
|
$delete-hover-border: $delete-ter;
|
|
|
|
$add-color: $black;
|
|
$add-background: $add;
|
|
$add-background-alt: $add-alt;
|
|
$add-border: $add;
|
|
$add-border-alt: $add-alt;
|
|
|
|
$button-disabled-color: $gray-dark;
|
|
$button-disabled-background: $gray-very-light;
|
|
$button-disabled-background-alt: $gray-lighter;
|
|
$button-disabled-border: $gray-semi-dark;
|
|
|
|
$ajax-color: $gray-very-dark;
|
|
$ajax-background: $white;
|
|
$ajax-background-alt: $light-blue;
|
|
$ajax-border: $gray-dark;
|
|
|
|
$gotop-color: $gray-very-dark;
|
|
$gotop-background: transparent;
|
|
$gotop-border: none;
|
|
|
|
$addmeta-color: $white;
|
|
$addmeta-background: transparent;
|
|
$addmeta-focus-color: $black;
|
|
$addmeta-focus-background: tint($light-blue, 10%);
|
|
|
|
// Messages
|
|
|
|
$msg-color: $white;
|
|
$msg-background: $gray-dark;
|
|
$msg-background-alt: tint($gray-dark, 66%);
|
|
$msg-shadow: rgba($gray-very-dark, 0.1);
|
|
|
|
$msg-info-color: $gray-very-dark;
|
|
$msg-info-background: $info;
|
|
$msg-info-border: $info-alt;
|
|
|
|
$msg-warn-color: $gray-very-dark;
|
|
$msg-warn-background: $warning;
|
|
$msg-warn-background-alt: $warning-alt;
|
|
$msg-warn-border: $warning-alt;
|
|
|
|
$msg-error-color: $black;
|
|
$msg-error-background: $error;
|
|
$msg-error-background-alt: $warning;
|
|
|
|
$msg-success-color: $black;
|
|
$msg-success-background: $success;
|
|
$msg-success-background-alt: $success-alt;
|
|
|
|
$dc-update-color: $black;
|
|
$dc-update-background: $light-blue;
|
|
|
|
$ajax-loader: shade($light-blue, 10%);
|
|
|
|
// Filters
|
|
|
|
$form-control-color: $white;
|
|
|
|
$filter-border: $light-blue;
|
|
$filter-options-border: $gray-light;
|
|
$filter-focus-background: shade($gray-darker, 15%);
|
|
|
|
// Prelude
|
|
|
|
$prelude-color: $gray-very-dark;
|
|
$prelude-background: $light-blue;
|
|
$prelude-background-alt: $white;
|
|
|
|
// Help
|
|
|
|
$help-background: $gray-very-dark;
|
|
$help-border: $warning-alt;
|
|
$help-button-border: $gray-dark;
|
|
$help-button-background: $gray-very-dark;
|
|
$help-title-color: $light-blue;
|
|
|
|
// Tooltip (in footer)
|
|
|
|
$tooltip-color: $tooltip;
|
|
$tooltip-background: $gray-very-light;
|
|
|
|
// Application pages:
|
|
// - Auth (white background page)
|
|
|
|
$login-fieldset-background: $white;
|
|
$login-fieldset-border: $success-alt;
|
|
|
|
// - Index
|
|
|
|
$index-link-color: $gray-lighter;
|
|
$index-link-border: $gray-semi-dark;
|
|
$index-icon-background: $gray-darker;
|
|
$index-icon-border: $gray-lighter;
|
|
$index-icon-outline: $link-outline;
|
|
$index-icon-contrast: 130%;
|
|
|
|
$quick-background: $gray-very-dark;
|
|
$quick-border: shade($gray-very-light, 10%);
|
|
$quick-info-background: $info;
|
|
$quick-info-border: $info-alt;
|
|
$quick-info-color: $gray-very-dark;
|
|
|
|
$index-box-border: tint($gray-dark, 66%);
|
|
|
|
$drag-n-drop-off: $gray-semi-dark;
|
|
$drag-n-drop-on: $success;
|
|
|
|
// - Blog params
|
|
|
|
$blog-user-border: tint($gray-dark, 66%);
|
|
$blog-super-background: rgba($info, 0.15);
|
|
$blog-super-border: $link-outline;
|
|
|
|
// - Blog theme
|
|
|
|
$theme-box-border: shade($gray-very-light, 10%);
|
|
$theme-box-over: $gray-darker;
|
|
|
|
$theme-name-color: $gray-light;
|
|
|
|
$theme-img-background: $gray-very-light;
|
|
$theme-img-border: $white;
|
|
$theme-img-shadow: rgba($gray-very-dark, 0.1);
|
|
|
|
$theme-action-background: $gray-darker;
|
|
$theme-action-border: transparent;
|
|
|
|
$theme-current-background: $gray-darker;
|
|
$theme-current-border: $gray-lighter;
|
|
$theme-current-shadow: rgba($gray-very-dark, 0.1);
|
|
|
|
$theme-current-img-border: $white;
|
|
$theme-current-name-color: $orange;
|
|
|
|
// - Categories
|
|
|
|
$cat-placeholder-outline: $link;
|
|
|
|
$cat-line-border: tint($gray-dark, 66%);
|
|
$subcat-line-border: shade($gray-very-light, 10%);
|
|
|
|
$cat-post-counter: $gray-very-light;
|
|
|
|
// - Media
|
|
|
|
$media-folder-background: transparent;
|
|
$media-folder-border: $gray-lighter;
|
|
$media-folderup-border: transparent;
|
|
$media-folder-link: $gray-light;
|
|
$media-item-border: shade($gray-very-light, 10%);
|
|
$media-item-border-private: $red;
|
|
$media-files-border: shade($gray-very-light, 10%);
|
|
|
|
$upload-color: shade($success-alt, 45%);
|
|
$upload-filemsg-color: $white;
|
|
$upload-progress-color: $white;
|
|
$upload-progress-background: shade($success-alt, 45%);
|
|
$upload-file-border: shade($gray-very-light, 10%);
|
|
$upload-error-color: $error-alt;
|
|
|
|
// - Plugins
|
|
|
|
$modules-background: $gray-very-dark;
|
|
$modules-border: $light-blue;
|
|
|
|
// - Entry
|
|
|
|
$entry-sb-title-border: $white;
|
|
$entry-sb-background: shade($gray-darker, 15%);
|
|
$entry-sb-focus-background: $gray-darker;
|
|
|
|
// - Preferences
|
|
|
|
$fav-list-background: $gray-very-dark;
|
|
$fav-list-background-over: $gray-darker;
|
|
$fav-list-border: $gray-lighter;
|
|
$fav-list-border-alt: shade($gray-very-light, 10%);
|
|
|
|
$my-favs-border: $green;
|
|
|
|
// - Charte
|
|
|
|
$charte-title: $orange;
|
|
$charte-one-box-border: shade($gray-very-light, 10%);
|
|
|
|
// Classes
|
|
|
|
$ac-results-background: $gray-very-dark;
|
|
$ac-results-border: $warning-alt;
|
|
$ac-results-over: $white;
|
|
$ac-results-over-background: shade($link, 20%);
|
|
|
|
$nav-background: $body-background;
|
|
$nav-prevnext: $link;
|
|
$nav-prevnext-background: $gray-very-dark;
|
|
$nav-prevnext-border: shade($gray-very-light, 10%);
|
|
|
|
$onblog-link: $gray-very-dark;
|
|
$onblog-link-background: $gray-lighter;
|
|
$onblog-link-border: $gray-lighter;
|
|
$onblog-link-shadow: rgba($gray-very-dark, 0.3);
|
|
|
|
$pager-link: $link;
|
|
$pager-active: $gray-light;
|
|
$pager-background: $gray-very-light;
|
|
$pager-background-over: shade($gray-very-light, 10%);
|
|
$pager-off-background: $white;
|
|
$pager-input-background: $white;
|
|
$pager-border: shade($gray-very-light, 10%);
|
|
|
|
$index-no-link: $gray-light;
|
|
$index-active: $white;
|
|
$index-active-background: $gray-dark;
|
|
|
|
$step: $gray-dark;
|
|
$step-background: $gray-very-light;
|
|
$step-border: tint($gray-dark, 66%);
|
|
|
|
$offline: $gray-semi-dark;
|
|
$offline-background: $gray-very-dark;
|
|
|
|
$mark-attach-img: url('../images/attach.svg');
|
|
$mark-attach-filter: hue-rotate(260deg) saturate(100) saturate(.2) brightness(220%);
|
|
|
|
// Utils
|
|
|
|
$color-picker-border: $black;
|
|
$color-picker-background: $white;
|
|
|
|
$color-div-border: $gray-light;
|
|
|
|
$badge-color: $white; // #ffffff
|
|
$badge-border: $body-color;
|
|
$badge-std-background: $badge; // #d54e21
|
|
$badge-soft-background: $badge-soft;
|
|
$badge-info-background: $badge-info;
|
|
|
|
// Debug
|
|
|
|
$debug-color: $error-alt;
|
|
$debug-background: $warning-alt;
|
|
$debug-border: $warning-alt;
|