0b8338f2c6
* Safari CSS gradient bug #14311 * Fix comments background color * Fix scss not processing rgb with css variables
234 lines
8 KiB
SCSS
234 lines
8 KiB
SCSS
:root {
|
|
--theme-secondary-color: #ebebeb;
|
|
--theme-container-background: #030303;
|
|
--theme-container-accent-background: #000f0b;
|
|
--theme-container-background-hover: #1c2c3f;
|
|
--theme-container-box-shadow: none;
|
|
--theme-container-border: 1px solid #22303f;
|
|
--theme-social-icon-invert: invert(100%);
|
|
--theme-color: #ffffff;
|
|
|
|
// Base
|
|
--base: #fff;
|
|
--base-inverted: #000;
|
|
|
|
--base-100: var(--base);
|
|
--base-90: #efefef;
|
|
--base-80: #d6d6d7;
|
|
--base-70: #bdbdbd;
|
|
--base-60: #a3a3a3;
|
|
--base-50: #8a8a8a;
|
|
--base-40: #717171;
|
|
--base-30: #575757;
|
|
--base-20: #3d3d3d;
|
|
--base-10: #242424;
|
|
--base-0: #090909;
|
|
|
|
--base-a90: #{rgba(#fff, 0.9)};
|
|
--base-a80: #{rgba(#fff, 0.8)};
|
|
--base-a70: #{rgba(#fff, 0.7)};
|
|
--base-a60: #{rgba(#fff, 0.6)};
|
|
--base-a50: #{rgba(#fff, 0.5)};
|
|
--base-a40: #{rgba(#fff, 0.4)};
|
|
--base-a30: #{rgba(#fff, 0.3)};
|
|
--base-a20: #{rgba(#fff, 0.2)};
|
|
--base-a10: #{rgba(#fff, 0.1)};
|
|
--base-a5: #{rgba(#fff, 0.05)};
|
|
|
|
--base-inverted-a90: #{rgba(#000, 0.9)};
|
|
--base-inverted-a80: #{rgba(#000, 0.8)};
|
|
--base-inverted-a70: #{rgba(#000, 0.7)};
|
|
--base-inverted-a60: #{rgba(#000, 0.6)};
|
|
--base-inverted-a50: #{rgba(#000, 0.5)};
|
|
--base-inverted-a40: #{rgba(#000, 0.4)};
|
|
--base-inverted-a30: #{rgba(#000, 0.3)};
|
|
--base-inverted-a20: #{rgba(#000, 0.2)};
|
|
--base-inverted-a10: #{rgba(#000, 0.1)};
|
|
--base-inverted-a5: #{rgba(#000, 0.05)};
|
|
|
|
// Accent colors
|
|
--accent-brand: #2eff7b;
|
|
--accent-brand-darker: #00c548;
|
|
--accent-brand-lighter: #8effb7;
|
|
--accent-brand-a10: #{rgba(#2eff7b, 0.1)};
|
|
|
|
// Success
|
|
--accent-success: var(--accent-brand);
|
|
--accent-success-darker: var(--accent-brand-darker);
|
|
--accent-success-lighter: var(--accent-brand-lighter);
|
|
--accent-success-a10: #{rgba(#2eff7b, 0.1)};
|
|
|
|
// Warning
|
|
--accent-warning: #ffcf4c;
|
|
--accent-warning-darker: #f5b400;
|
|
--accent-warning-lighter: #ffe499;
|
|
--accent-warning-a10: #{rgba(#ffcf4c, 0.1)};
|
|
|
|
// Danger
|
|
--accent-danger: #dc1818;
|
|
--accent-danger-darker: #c20a0a;
|
|
--accent-danger-lighter: #ec5050;
|
|
--accent-danger-a10: #{rgba(#dc1818, 0.1)};
|
|
|
|
// Main colors
|
|
--body-bg: var(--base-0);
|
|
--body-color: var(--accent-brand);
|
|
--body-color-inverted: var(--base-inverted);
|
|
|
|
// Main content containers
|
|
--card-bg: var(--base-inverted);
|
|
--card-color: var(--accent-brand);
|
|
--card-color-secondary: var(--accent-brand-darker);
|
|
--card-color-tertiary: var(--base-50);
|
|
--card-secondary-bg: var(--base-inverted);
|
|
--card-secondary-color: var(--base-90);
|
|
--card-headline-color: var(--accent-brand-lighter);
|
|
--card-border: rgba(255, 255, 255, 0.2);
|
|
--card-secondary-border: rgba(255, 255, 255, 0.2);
|
|
--card-hover-bg: var(--base-10);
|
|
--card-selected-bg: var(--base-20);
|
|
|
|
// Header
|
|
--header-bg: var(--base-10);
|
|
--header-bg-hover: var(--base-20);
|
|
--header-button-focus-color: var(--accent-brand);
|
|
--header-bg-current: var(--base-0);
|
|
--header-shadow: rgba(0, 0, 0, 0.1);
|
|
--header-icons-color: var(--base-70);
|
|
--header-icons-color-hover: var(--base-100);
|
|
|
|
// Logo
|
|
--logo-bg: var(--accent-brand);
|
|
--logo-color: #0a0a0a;
|
|
|
|
// Footer
|
|
--footer-bg: var(--base-10);
|
|
--footer-copy-color: var(--base-80);
|
|
--footer-copy-secondary-color: var(--base-60);
|
|
--footer-link-color: var(--accent-brand);
|
|
--footer-link-color-hover: var(--accent-brand-lighter);
|
|
|
|
// Links
|
|
--link-color: var(--accent-brand);
|
|
--link-color-hover: var(--accent-brand-darker); // #ff53d9;
|
|
--link-color-current: var(--accent-brand-lighter);
|
|
--link-color-secondary: var(--accent-brand-darker);
|
|
--link-color-secondary-hover: var(--accent-brand-darker);
|
|
--link-brand-color: #e24ec1;
|
|
--link-bg-hover: var(--base-a10);
|
|
--link-bg-hover-alt: var(--base-0);
|
|
--link-bg-current: var(--base-inverted);
|
|
|
|
// Primary buttons
|
|
--button-primary-bg: var(--accent-brand);
|
|
--button-primary-bg-hover: var(--accent-brand-darker);
|
|
--button-primary-color: var(--base-0);
|
|
--button-primary-color-hover: var(--base-0);
|
|
//-- Inverted
|
|
--button-primary-inverted-bg: var(--base-0);
|
|
--button-primary-inverted-bg-hover: var(--base-20);
|
|
--button-primary-inverted-color: var(--accent-brand);
|
|
--button-primary-inverted-color-hover: var(--accent-brand-darker);
|
|
|
|
// Secondary buttons
|
|
--button-secondary-bg: var(--base-10);
|
|
--button-secondary-bg-hover: var(--base-20);
|
|
--button-secondary-color: var(--accent-brand);
|
|
--button-secondary-color-hover: var(--accent-brand-lighter);
|
|
//-- Inverted
|
|
--button-secondary-inverted-bg: var(--base-50);
|
|
--button-secondary-inverted-bg-hover: var(--base-30);
|
|
--button-secondary-inverted-color: var(--accent-brand);
|
|
--button-secondary-inverted-color-hover: var(--accent-brand-lighter);
|
|
|
|
// Outlined buttons
|
|
--button-outlined-bg: transparent;
|
|
--button-outlined-bg-hover: rgba(0, 0, 0, 0.035);
|
|
--button-outlined-border: var(--accent-brand);
|
|
--button-outlined-border-hover: var(--accent-brand-darker);
|
|
--button-outlined-color: var(--accent-brand);
|
|
--button-outlined-color-hover: var(--accent-brand-darker);
|
|
//-- Inverted
|
|
--button-outlined-inverted-bg: transparent;
|
|
--button-outlined-inverted-bg-hover: rgba(255, 255, 255, 0.15);
|
|
--button-outlined-inverted-border: var(--accent-brand-darker);
|
|
--button-outlined-inverted-border-hover: var(--accent-brand);
|
|
--button-outlined-inverted-color: var(--accent-brand-darker);
|
|
--button-outlined-inverted-color-hover: var(--accent-brand-darker);
|
|
|
|
// Ghost buttons
|
|
--button-ghost-bg: transparent;
|
|
--button-ghost-bg-hover: rgba(0, 0, 0, 0.035);
|
|
--button-ghost-color: var(--base-80);
|
|
--button-ghost-color-hover: var(--base-100);
|
|
--button-ghost-dimmed-color: var(--base-60);
|
|
--button-ghost-dimmed-color-hover: var(--base-100);
|
|
//-- Inverted
|
|
--button-ghost-inverted-bg: transparent;
|
|
--button-ghost-inverted-bg-hover: rgba(255, 255, 255, 0.15);
|
|
--button-ghost-inverted-color: var(--base-30);
|
|
--button-ghost-inverted-color-hover: var(--base-10);
|
|
--button-ghost-inverted-color: var(--base-30);
|
|
--button-ghost-inverted-color-hover: var(--base-10);
|
|
|
|
// Forms
|
|
--form-bg: var(--base-0);
|
|
--form-bg-focus: var(--base-inverted);
|
|
--form-border: var(--base-30);
|
|
--form-border-hover: var(--base-40);
|
|
--form-border-focus: var(--accent-brand);
|
|
--form-placeholder-color: var(--base-60);
|
|
|
|
// Form labels
|
|
--label-primary: var(--accent-brand);
|
|
--label-secondary: var(--accent-brand-darker);
|
|
|
|
// Default box
|
|
--box: var(--base-90);
|
|
--box-darker: var(--base-100);
|
|
|
|
// Snackbars
|
|
--snackbar-bg: var(--base-10);
|
|
--snackbar-color: var(--accent-brand);
|
|
|
|
// Indicators
|
|
--indicator-accent-bg: var(--accent-brand);
|
|
--indicator-accent-color: var(--body-color-inverted);
|
|
--indicator-critical-bg: var(--accent-danger);
|
|
--indicator-critical-color: var(--body-color-inverted);
|
|
--indicator-default-bg: var(--button-secondary-bg);
|
|
--indicator-default-color: var(--button-secondary-color);
|
|
|
|
// Tabs
|
|
--tab-color: var(--base-80);
|
|
--tab-color-hover: var(--accent-brand);
|
|
--tab-color-current: var(--base-100);
|
|
--tab-bg-hover: var(--accent-brand-a10);
|
|
--tab-bg-current: var(--accent-brand);
|
|
--tab-muted-color: var(--base-80);
|
|
--tab-muted-color-hover: var(--base-90);
|
|
--tab-muted-color-current: var(--base-100);
|
|
--tab-muted-bg-hover: var(--base-a10);
|
|
--tab-muted-bg-current: var(--base-20);
|
|
--tab-pill-color-current: var(--base-inverted);
|
|
|
|
// Tags
|
|
--tag-color: var(--base-70);
|
|
--tag-color-hover: var(--base-100);
|
|
|
|
// Story
|
|
--story-comments-bg: 13, 13, 13;
|
|
--story-comments-bg-top: rgba(var(--story-comments-bg), 0);
|
|
--story-comments-bg-bottom: rgba(var(--story-comments-bg), 1);
|
|
|
|
// Select icon
|
|
--select-icon: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDE2TDYgMTBIMThMMTIgMTZaIiBmaWxsPSIjMkVGRjdCIi8+Cjwvc3ZnPg==);
|
|
|
|
// Reactions
|
|
--reaction-like-color: var(--accent-danger);
|
|
--reaction-like-bg: var(--accent-danger-a10);
|
|
--reaction-custom-color: var(--accent-success);
|
|
--reaction-custom-bg: var(--accent-success-a10);
|
|
--reaction-save-color: var(--accent-warning);
|
|
--reaction-save-bg: var(--accent-warning-a10);
|
|
}
|