mirror of
https://github.com/discourse/discourse.git
synced 2024-11-28 22:16:17 +08:00
196 lines
6.0 KiB
SCSS
196 lines
6.0 KiB
SCSS
// --------------------------------------------------
|
|
// Variables used throughout the theme
|
|
// --------------------------------------------------
|
|
|
|
|
|
// Layout dimensions
|
|
// --------------------------------------------------
|
|
|
|
$small-width: 950px !default;
|
|
$medium-width: 995px !default;
|
|
$large-width: 1110px !default;
|
|
|
|
// Primary color variables
|
|
// --------------------------------------------------
|
|
|
|
$yellow: lighten(#FFFF00, 20%);
|
|
$light_yellow: lighten($yellow, 20%) !default;
|
|
$lightest_yellow: lighten($yellow, 30%) !default;
|
|
$google: #5b76f7 !default;
|
|
$facebook: #3b5998 !default;
|
|
$cas: #70BA61 !default;
|
|
$twitter: #00bced !default;
|
|
$yahoo: #810293 !default;
|
|
$github: #6d6d6d !default;
|
|
|
|
|
|
$primary: #333 !default;
|
|
$secondary: #fff !default;
|
|
$tertiary: #0088cc !default;
|
|
$highlight: lighten(#FFFF00, 12%) !default;
|
|
$highlight_danger: #e45735 !default;
|
|
$heart: #fa6c8d !default;
|
|
$success: green !default;
|
|
|
|
|
|
//--------------------------------------------------- Main Variable Controllers
|
|
|
|
|
|
$primary_medium: lighten($primary, 35%) !default; //dark grey
|
|
$primary_light: lighten($primary, 50%) !default; // grey
|
|
$primary_lighter: lighten($primary, 60%) !default; //light grey
|
|
$primary_lightest: lighten($primary, 76%) !default; //lighter grey
|
|
|
|
$tertiary_lightest: lighten($tertiary, 50%) !default; //lighte blue
|
|
$tertiary_light: lighten($tertiary, 30%) !default; // light blue
|
|
$tertiary_dark: darken($tertiary, 10%) !default; // dark blue
|
|
|
|
$highlight_danger_light: lighten($highlight_danger, 35%) !default; //lightest red
|
|
$highlight_danger_dark: darken($highlight_danger, 10%) !default; //dark red
|
|
$highlight_danger_darker: darken($highlight_danger, 60%) !default; //dark red
|
|
|
|
$heart_light: lighten($heart, 22%) !default; //light pink
|
|
$heart_dark: darken($heart, 10%) !default; // dark pink
|
|
|
|
$highlight_light: lighten($highlight, 30%) !default;
|
|
|
|
$success_light: lighten($success, 60%);
|
|
$success_dark: darken($success, 30%);
|
|
$success_darker: darken($success, 60%);
|
|
|
|
// Base
|
|
// --------------------------------------------------
|
|
|
|
$base-font-size: 14px !default;
|
|
$base-line-height: 19px !default;
|
|
$base-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
|
|
$base-background-color: $primary_lighter !default;
|
|
|
|
// Links
|
|
// --------------------------------------------------
|
|
|
|
$link-color: $tertiary !default;
|
|
$link-color-visited: $tertiary_dark !default;
|
|
$link-color-hover: $tertiary_dark !default;
|
|
$link-color-active: $tertiary_dark !default;
|
|
|
|
// Badges
|
|
// --------------------------------------------------
|
|
|
|
// Notification badge
|
|
|
|
$badge-notification-background-color: $primary_medium !default;
|
|
|
|
// Posts badge
|
|
|
|
$badge-posts-color: $primary_medium !default;
|
|
|
|
// Buttons
|
|
// --------------------------------------------------
|
|
|
|
// Default button
|
|
|
|
$btn-default-color: $primary !default;
|
|
$btn-default-background-color: $primary_light !default;
|
|
$btn-default-background-color-hover: $primary_lightest !default;
|
|
|
|
// Primary button
|
|
|
|
$btn-primary-border-color: $tertiary_dark !default;
|
|
$btn-primary-background-color: $tertiary !default;
|
|
$btn-primary-background-color-dark: $tertiary !default;
|
|
$btn-primary-background-color-light: $tertiary_light !default;
|
|
|
|
// Danger button (delete, etc)
|
|
|
|
$btn-danger-border-color: $highlight_danger_dark !default;
|
|
$btn-danger-background-color: $highlight_danger !default;
|
|
$btn-danger-background-color-dark: $highlight_danger_dark !default;
|
|
$btn-danger-background-color-light: $highlight_danger !default;
|
|
|
|
// Navigation menus
|
|
// --------------------------------------------------
|
|
|
|
// Pill nav
|
|
|
|
$nav-pills-color: $primary !default;
|
|
$nav-pills-color-hover: $highlight_danger !default;
|
|
$nav-pills-border-color-hover: $highlight_danger_light !default;
|
|
$nav-pills-background-color-hover: $highlight_danger_light !default;
|
|
$nav-pills-color-active: $highlight_danger !default;
|
|
$nav-pills-border-color-active: $highlight_danger_dark !default;
|
|
$nav-pills-background-color-active: $highlight_danger !default;
|
|
|
|
// Stacked nav
|
|
|
|
$nav-stacked-color: $primary !default;
|
|
$nav-stacked-border-color: $primary_lighter !default;
|
|
$nav-stacked-background-color: $primary_lightest !default;
|
|
$nav-stacked-divider-color: $primary_lighter !default;
|
|
$nav-stacked-chevron-color: $primary_light !default;
|
|
$nav-stacked-border-color-active: $highlight_danger !default;
|
|
$nav-stacked-background-color-active: $highlight_danger !default;
|
|
|
|
// Button nav
|
|
|
|
$nav-button-color: $primary_medium !default;
|
|
$nav-button-color-hover: $primary !default;
|
|
$nav-button-background-color-hover: $primary_lighter !default;
|
|
$nav-button-color-active: $primary !default;
|
|
$nav-button-background-color-active: $primary_lighter !default;
|
|
|
|
// Header
|
|
|
|
$modal-header-color: $highlight_danger !default;
|
|
$modal-header-border-color: $primary_light !default;
|
|
$modal-close-button-color: $primary_light;
|
|
|
|
$nav-like-button-color-hover: $heart !default;
|
|
$nav-like-button-background-color-hover: $heart_light !default;
|
|
$nav-like-button-color-active: $heart_dark !default;
|
|
$nav-like-button-background-color-active: $heart_light !default;
|
|
|
|
// Topic list
|
|
// --------------------------------------------------
|
|
|
|
$topic-list-border-color: $primary_light !default;
|
|
$topic-list-th-color: $primary !default;
|
|
$topic-list-th-border-color: $primary_light !default;
|
|
$topic-list-th-background-color: $primary_lightest !default;
|
|
$topic-list-td-color: $primary_medium !default;
|
|
$topic-list-td-border-color: $primary_lighter !default;
|
|
$topic-list-star-color: $primary_lighter !default;
|
|
$topic-list-starred-color: $highlight_danger !default;
|
|
|
|
|
|
|
|
// -- ??
|
|
|
|
$link_color: $tertiary_dark;
|
|
$muted-link-color: $primary_medium;
|
|
$muted-important-link-color: $primary_medium;
|
|
|
|
$quote-background: $primary_lightest;
|
|
|
|
// Colors based on basics
|
|
|
|
$topicMenuColor: darken($secondary, 80%);
|
|
$bookmarkColor: $tertiary;
|
|
|
|
$tag_color: $tertiary_lightest;
|
|
|
|
$composer_background: lighten($primary_lighter, 10%);
|
|
|
|
$post_footer: $primary_lightest;
|
|
$inner_border: $primary_lighter;
|
|
$inner_line: $primary_light;
|
|
|
|
$controls: $primary_medium;
|
|
$controls_hover: $tertiary;
|
|
$controls_active: $tertiary_dark;
|
|
|
|
$attention_bg: $tertiary_lightest;
|
|
$attention_fg: $tertiary;
|
|
|
|
$header-item-highlight: $tertiary_lightest;
|