Implement new css.Build.
This commit is contained in:
Fredrik Jonsson
parent
5ca43e14d3
commit
d984bcaf5d
1 changed files with 1681 additions and 1695 deletions
|
|
@ -2,98 +2,96 @@
|
|||
|
||||
/* Override css variables in "assets/css/_custom.css" */
|
||||
|
||||
@layer vars {
|
||||
: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);
|
||||
: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);
|
||||
/* 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);
|
||||
/* 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);
|
||||
/* 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);
|
||||
/* 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);
|
||||
|
||||
/* Button colours. */
|
||||
--color-button: var(--color-brand);
|
||||
--color-button-hover: var(--color-brand-alt);
|
||||
--color-button-text: var(--color-white);
|
||||
--color-button-text-hover: var(--color-white);
|
||||
--color-button-disabled: var(--color-grey-400);
|
||||
/* Button colours. */
|
||||
--color-button: var(--color-brand);
|
||||
--color-button-hover: var(--color-brand-alt);
|
||||
--color-button-text: var(--color-white);
|
||||
--color-button-text-hover: var(--color-white);
|
||||
--color-button-disabled: var(--color-grey-400);
|
||||
|
||||
/* Border colours. */
|
||||
--color-border: var(--color-brand);
|
||||
--color-border-light: var(--color-brand-light);
|
||||
--color-border-dark: var(--color-brand-dark);
|
||||
/* 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);
|
||||
/* 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);
|
||||
/* Mobil menu colours. */
|
||||
--color-mobile-menu: var(--color-brand);
|
||||
--color-mobile-menu-cover: var(--color-black-20);
|
||||
|
||||
/* Form colours. */
|
||||
--color-accent: var(--color-brand);
|
||||
/* Form colours. */
|
||||
--color-accent: var(--color-brand);
|
||||
|
||||
/* Row (e.g. in table) colours. */
|
||||
--color-row-header: transparent;
|
||||
--color-row-odd: var(--color-nearwhite);
|
||||
--color-row-even: transparent;
|
||||
/* 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-success: var(--color-green);
|
||||
--color-success-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);
|
||||
/* Status colours. */
|
||||
--color-info: var(--color-blue);
|
||||
--color-info-bg: oklch(from var(--color-blue) 100% 0.03 h);
|
||||
--color-success: var(--color-green);
|
||||
--color-success-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);
|
||||
}
|
||||
/* Highlight colours. */
|
||||
--color-highlight: var(--color-brand-alt);
|
||||
--color-mark-highlight: var(--color-red);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue