123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459 |
- //
- // Flavor Theme Variables
- // --------------------------------------------------
- //== Colors
- //
- //## Gray and brand colors for use across Bootstrap.
- @gray-base: #000;
- @gray-darker: lighten(@gray-base, 13.5%); // #222
- @gray-dark: lighten(@gray-base, 20%); // #333
- @gray: lighten(@gray-base, 33.5%); // #555
- @gray-light: lighten(@gray-base, 46.7%); // #777
- @gray-lighter: lighten(@gray-base, 93.5%); // #eee
- @brand-primary: #651fff;
- @brand-success: #43a047;
- @brand-info: #3d5afe;
- @brand-warning: #ef6c00;
- @brand-danger: #f44336;
- //== Scaffolding
- //
- //## Settings for some of the most global styles.
- //** Global text color on `<body>`.
- @text-color: #212121;
- //** Global textual link color.
- @link-color: @brand-primary;
- //** Link hover color set via `darken()` function.
- @link-hover-color: darken(@link-color, 15%);
- //** Link hover decoration.
- @link-hover-decoration: underline;
- //** Shadows
- @shadow-key-umbra-opacity: 0.06;
- @shadow-key-penumbra-opacity: 0.04;
- @shadow-ambient-shadow-opacity: 0.12;
- //** Global color for active items (e.g., navs or dropdowns).
- @component-active-color: #fff;
- //** Global background color for active items (e.g., navs or dropdowns).
- @component-active-bg: @link-color;
- //== Buttons
- //
- //## For each of Bootstrap's buttons, define text, background and border color.
- // Default - non primary
- @btn-default-color: #757575;
- @btn-default-bg: #f3f3f3;
- @btn-default-hover-color: @text-color;
- @btn-default-hover-bg: #e0e0e0;
- @btn-default-active-color: @text-color;
- @btn-default-active-bg: #bdbdbd;
- // Submit form
- @btn-primary-color: #fff;
- @btn-primary-bg: darken(#b388ff, 5%);
- @btn-primary-hover-color: #fff;
- @btn-primary-hover-bg: #b388ff;
- @btn-primary-active-color: #fff;
- @btn-primary-active-bg: darken(#b388ff, 15%);
- // Success button
- @btn-success-color: #fff;
- @btn-success-bg: #00c853;
- @btn-success-hover-color: #fff;
- @btn-success-hover-bg: darken(#00c853, 5%);
- @btn-success-active-color: #fff;
- @btn-success-active-bg: darken(#00c853, 15%);
- // Delete something
- @btn-danger-color: #fff;
- @btn-danger-bg: #ef5350;
- @btn-danger-hover-color: #fff;
- @btn-danger-hover-bg: #ff8a80;
- @btn-danger-active-color: #fff;
- @btn-danger-active-bg: #d32f2f;
- // Default outlined
- @btn-default-outline-color: #616161;
- @btn-default-outline-border: #e0e0e0;
- @btn-default-outline-bg: #e0e0e0;
- @btn-default-outline-hover-color: #424242;
- @btn-default-outline-hover-border: #bdbdbd;
- @btn-default-outline-hover-bg: #bdbdbd;
- @btn-default-outline-active-color: #212121;
- @btn-default-outline-active-border: #eeeeee;
- @btn-default-outline-active-bg: #eeeeee;
- // Primary outlined
- @btn-primary-outline-color: #fff;
- @btn-primary-outline-border: #7c4dff;
- @btn-primary-outline-bg: #7c4dff;
- @btn-primary-outline-hover-color: #fff;
- @btn-primary-outline-hover-border: #651fff;
- @btn-primary-outline-hover-bg: #651fff;
- @btn-primary-outline-active-color: #fff;
- @btn-primary-outline-active-border: #6200ea;
- @btn-primary-outline-active-bg: #6200ea;
- //== Navbar
- //
- //##
- // Navbar links
- @navbar-inverse-link-color: #e0e0e0;
- @navbar-inverse-link-hover-color: #fff;
- @navbar-inverse-link-hover-bg: transparent;
- @navbar-inverse-link-active-color: #fff;
- @navbar-inverse-link-active-bg: darken(@navbar-default-bg, 6.5%);
- @navbar-inverse-link-disabled-color: #ccc;
- @navbar-inverse-link-disabled-bg: transparent;
- //** Compact navbar
- @navbar-compact-link-color: #e0e0e0;
- @navbar-compact-link-hover-color: #212121;
- @navbar-compact-link-hover-bg: #fafafa;
- // Navbar brand label
- @navbar-inverse-brand-color: #fff;
- @navbar-inverse-brand-hover-color: #fff;
- @navbar-inverse-brand-hover-bg: transparent;
- // Sign in button
- @btn-sign-in-color: #e0e0e0;
- @btn-sign-in-border: transparent;
- @btn-sign-in-bg: transparent;
- @btn-sign-in-hover-color: #fff;
- @btn-sign-in-hover-border: #666060;
- @btn-sign-in-hover-bg: #666060;
- @btn-sign-in-active-color: #fff;
- @btn-sign-in-active-border: #424242;
- @btn-sign-in-active-bg: #424242;
- @btn-sign-in-radius: 100px;
- // Register button
- @btn-register-color: #e0e0e0;
- @btn-register-border: #757575;
- @btn-register-bg: transparent;
- @btn-register-hover-color: #212121;
- @btn-register-hover-border: #fff;
- @btn-register-hover-bg: #fff;
- @btn-register-active-color: #212121;
- @btn-register-active-border: #bdbdbd;
- @btn-register-active-bg: #bdbdbd;
- @btn-register-radius: 100px;
- //== Page header
- //
- //##
- // Basics
- //** Background
- @page-header-bg: #512da8;
- //** Heading color
- @page-header-color: #fff;
- //** Other text color
- @page-header-text-color: #ede7f6;
- //** Link color
- @page-header-link-color: #fff;
- //** Text color
- @page-header-link-hover-color: #f5f5f5;
- //** Tabs bar background
- @page-tabs-bg: fadeOut(#fff, 40%);
- @page-tabs-link-color: @gray-light;
- @page-tabs-link-bg: transparent;
- @page-tabs-link-hover-color: @text-color;
- @page-tabs-link-hover-bg: transparent;
- @page-tabs-link-focus-color: @text-color;
- @page-tabs-link-focus-bg: transparent;
- @page-tabs-link-active-color: @link-color;
- @page-tabs-link-active-bg: transparent;
- //== Footer
- //
- //##
- @page-footer-bg: @body-bg;
- @page-footer-text-color: #bdbdbd;
- @page-footer-link-color: #757575;
- @page-footer-link-hover-color: #212121;
- @page-footer-brand-color: #b388ff;
- @page-footer-brand-hover-color: #7c4dff;
- //== Auth Message
- //
- //##
- @auth-message-bg: #651fff;
- @auth-message-text-color: #fff;
- @auth-message-btn-default-color: #fff;
- @auth-message-btn-default-border: #4527a0;
- @auth-message-btn-default-bg: #4527a0;
- @auth-message-btn-default-hover-color: #fff;
- @auth-message-btn-default-hover-border: #b388ff;
- @auth-message-btn-default-hover-bg: #b388ff;
- @auth-message-btn-default-active-color: #651fff;
- @auth-message-btn-default-active-border: #fff;
- @auth-message-btn-default-active-bg: #fff;
- //== Form states and alerts
- //
- //## Define colors for form feedback states and, by default, alerts.
- @state-success-border: #00c853;
- @state-danger-border: #f44336;
- //== Alerts
- //
- //## Define alert colors, border radius, and padding.
- @alert-success-bg: @brand-success;
- @alert-success-text: #fff;
- @alert-success-border: @brand-success;
- @alert-info-bg: #448aff;
- @alert-info-text: #fff;
- @alert-info-border: #448aff;
- @alert-warning-bg: @brand-warning;
- @alert-warning-text: #fff;
- @alert-warning-border: @brand-warning;
- @alert-danger-bg: @brand-danger;
- @alert-danger-text: #fff;
- @alert-danger-border: @brand-danger;
- //== Modals
- //
- //##
- @modal-header-color: #424242;
- @modal-header-bg: #eeeeee;
- //== Dropdowns
- //
- //## Dropdown menu container and contents.
- //** Background for the dropdown menu.
- @dropdown-bg: #fff;
- //** Divider color for between dropdown items.
- @dropdown-divider-bg: #e5e5e5;
- //** Dropdown link text color.
- @dropdown-link-color: @gray-dark;
- //** Hover color for dropdown links.
- @dropdown-link-hover-color: @component-active-color;
- //** Hover background for dropdown links.
- @dropdown-link-hover-bg: @component-active-bg;
- //** Active dropdown menu item text color.
- @dropdown-link-active-color: @component-active-color;
- //** Active dropdown menu item background color.
- @dropdown-link-active-bg: @component-active-bg;
- //** Background for the dropdown menu.
- @dropdown-inverse-bg: fadeOut(@gray, 3%);
- //** Divider color for between dropdown items.
- @dropdown-inverse-divider-bg: @gray-light;
- //** Dropdown link text color.
- @dropdown-inverse-link-color: @gray-lighter;
- //** Hover color for dropdown links.
- @dropdown-inverse-link-hover-color: @component-active-color;
- //** Hover background for dropdown links.
- @dropdown-inverse-link-hover-bg: @component-active-bg;
- //** Text color for headers within dropdown menus.
- @dropdown-inverse-header-color: #fff;
- @dropdown-inverse-subheader-color: darken(#fff, 15%);
- //** Default button in inversed dropdown
- @dropdown-btn-default-color: darken(#fff, 30%);
- @dropdown-btn-default-border: darken(#fff, 30%);
- @dropdown-btn-default-bg: transparent;
- @dropdown-btn-default-hover-color: #fff;
- @dropdown-btn-default-hover-border: darken(#fff, 10%);
- @dropdown-btn-default-hover-bg: @gray;
- @dropdown-btn-default-active-color: @gray-darker;
- @dropdown-btn-default-active-border: darken(#fff, 2%);
- @dropdown-btn-default-active-bg: darken(#fff, 2%);
- //** Default button in inversed dropdown
- @dropdown-btn-primary-color: darken(#fff, 10%);
- @dropdown-btn-primary-border: #b388ff;
- @dropdown-btn-primary-bg: transparent;
- @dropdown-btn-primary-hover-color: #fff;
- @dropdown-btn-primary-hover-border: #b388ff;
- @dropdown-btn-primary-hover-bg: #b388ff;
- @dropdown-btn-primary-active-color: #651fff;
- @dropdown-btn-primary-active-border: darken(#fff, 2%);
- @dropdown-btn-primary-active-bg: darken(#fff, 2%);
- //== Progress bars
- //
- //##
- //** Background color of the whole progress component
- @progress-bg: #eee;
- //** Variable for setting rounded corners on progress bar.
- @progress-border-radius: @border-radius-small;
- //** Default progress bar color
- @progress-bar-bg: #651fff;
- //** Success progress bar color
- @progress-bar-success-bg: #00c853;
- //** Warning progress bar color
- @progress-bar-warning-bg: #ff9100;
- //** Danger progress bar color
- @progress-bar-danger-bg: #ff1744;
- //== Panels
- //
- //##
- @panel-heading-padding: 14px 15px;
- @panel-title-color: @gray-light;
- @panel-default-heading-bg: @panel-bg;
- @panel-footer-bg: @panel-bg;
- @panel-fieldset-color: @gray;
- //== List group
- //
- //##
- //** `.list-group-item` border color
- @list-group-border: #eee;
- @list-group-link-color: @gray-light;
- @list-group-link-hover-color: @text-color;
- //** Background color of single list items on hover
- @list-group-hover-bg: @list-group-bg;
- //** Text color of active list items
- @list-group-active-color: @link-color;
- //** Background color of active list items
- @list-group-active-bg: @list-group-bg;
- //** Border color of active list elements
- @list-group-active-border: @list-group-border;
- //== Wells
- //
- //##
- @well-bg: #fff;
- //== Page messages
- //
- //##
- @error-icon-color: #ef5350;
- @message-icon-color: #9575cd;
- @message-info-icon-color: #9575cd;
- @message-success-icon-color: #81c784;
- //== Categories list
- //
- //##
- @category-read-color: @gray-lighter;
- @category-new-color: @brand-primary;
- //== Threads list
- //
- //##
- @thread-unread-badge-color: #aa00ff;
- @thread-global-badge-color: #3d5afe;
- @thread-pinned-badge-color: #8c9eff;
- @thread-unapproved-badge-color: #ef6c00;
- @thread-unapproved-posts-badge-color: #f4511e;
- // Diff message
- @threads-diff-color: #fff;
- @threads-diff-bg: #7c4dff;
- @threads-diff-hover-color: #fff;
- @threads-diff-hover-bg: #6200ea;
- @threads-diff-active-color: #fff;
- @threads-diff-active-bg: darken(#6200ea, 10%);
- //== Posts
- //
- //##
- @post-unread-label: #aa00ff;
- @post-protected-icon: #bdbdbd;
- //== User status colors
- //
- //##
- @user-status-banned: @brand-danger;
- @user-status-online: @brand-success;
- @user-status-offline: @gray-light;
|