98 lines
4.1 KiB
SCSS
98 lines
4.1 KiB
SCSS
// Theme colours.
|
|
// Override css variables in "assets/sass/_custom.scss"
|
|
|
|
:root {
|
|
// Base colours.
|
|
--color-black: oklch(1% 0.01 0);
|
|
--color-nearblack: oklch(25% 0.01 0);
|
|
--color-grey-700: oklch(38% 0 0);
|
|
--color-grey-600: oklch(49% 0 0);
|
|
--color-grey-500: oklch(60% 0 0);
|
|
--color-grey-400: oklch(71% 0 0);
|
|
--color-grey-300: oklch(80% 0 0);
|
|
--color-grey-200: oklch(89% 0 0);
|
|
--color-grey-100: oklch(95% 0 0);
|
|
--color-nearwhite: oklch(98% 0 0);
|
|
--color-white: oklch(100% 0 0);
|
|
--color-red: oklch(65% 0.2 24);
|
|
--color-yellow: oklch(65% 0.12 80);
|
|
--color-green: oklch(65% 0.19 138);
|
|
--color-blue: oklch(65% 0.16 247);
|
|
|
|
// Transparent colours.
|
|
--color-black-60: oklch(0% 0 0 / 0.6);
|
|
--color-black-40: oklch(0% 0 0 / 0.4);
|
|
--color-black-20: oklch(0% 0 0 / 0.2);
|
|
--color-black-10: oklch(0% 0 0 / 0.1);
|
|
--color-white-20: oklch(100% 0 0 / 0.2);
|
|
--color-white-10: oklch(100% 0 0 / 0.1);
|
|
|
|
// Brand colours.
|
|
--color-brand: var(--color-nearblack);
|
|
--color-brand-alt: var(--color-grey-500);
|
|
--color-brand-light: var(--color-grey-300);
|
|
--color-brand-dark: var(--color-grey-700);
|
|
|
|
// Text colours.
|
|
--color-text: var(--color-black);
|
|
--color-text-bg: var(--color-white);
|
|
--color-text-meta: var(--color-grey-600);
|
|
--color-headings: var(--color-nearblack);
|
|
--color-code: var(--color-nearblack);
|
|
|
|
// Link colours.
|
|
--color-link: var(--color-brand);
|
|
--color-link-visited: var(--color-brand);
|
|
--color-link-hover: var(--color-brand-alt);
|
|
--color-link-active: var(--color-red);
|
|
--color-link-inverted: var(--color-white);
|
|
--color-link-visited-inverted: var(--color-white);
|
|
--color-link-hover-inverted: var(--color-white);
|
|
--color-link-active-inverted: var(--color-red);
|
|
|
|
// Border colours.
|
|
--color-border: var(--color-brand);
|
|
--color-border-light: var(--color-brand-light);
|
|
--color-border-dark: var(--color-brand-dark);
|
|
|
|
// Background colours.
|
|
--color-header-bg: var(--color-white);
|
|
--color-body-bg: var(--color-white);
|
|
--color-footer-bg: var(--color-white);
|
|
--color-backdrop: var(--color-grey-100);
|
|
|
|
// Mobil menu colours.
|
|
--color-mobile-menu: var(--color-brand);
|
|
--color-mobile-menu-cover: var(--color-black-20);
|
|
|
|
// Button colours.
|
|
--color-button: var(--color-brand);
|
|
--color-button-hover: var(--color-brand-dark);
|
|
--color-button-text: var(--color-white);
|
|
--color-button-text-hover: var(--color-white);
|
|
--color-button-disabled: var(--color-grey-400);
|
|
|
|
// Row (e.g. in table) colours.
|
|
--color-row-header: transparent;
|
|
--color-row-odd: var(--color-nearwhite);
|
|
--color-row-even: transparent;
|
|
|
|
// Status colours.
|
|
--color-info: var(--color-blue);
|
|
--color-info-bg: oklch(from var(--color-blue) 100% 0.03 h);
|
|
--color-status: var(--color-green);
|
|
--color-status-bg: oklch(from var(--color-green) 100% 0.03 h);
|
|
--color-warning: var(--color-yellow);
|
|
--color-warning-bg: oklch(from var(--color-yellow) 100% 0.03 h);
|
|
--color-error: var(--color-red);
|
|
--color-error-bg: oklch(from var(--color-red) 100% 0.03 h);
|
|
|
|
// Highlight colours.
|
|
--color-highlight: var(--color-brand-alt);
|
|
--color-mark-highlight: var(--color-red);
|
|
--color-mark-bg: var(--color-yellow);
|
|
|
|
// Misc colours.
|
|
--color-watermark: var(--color-grey-200);
|
|
--color-debug-color: var(--color-grey-200);
|
|
}
|