mirror of
https://github.com/s427/MARL.git
synced 2025-01-31 11:34:46 +01:00
149 lines
4.4 KiB
SCSS
149 lines
4.4 KiB
SCSS
// tint and saturation factor for the app color scheme
|
|
$hue: 30; // === 59.17 in oklch
|
|
$sat: 0.5;
|
|
|
|
/*********************************/
|
|
/* global background/text colors */
|
|
/*********************************/
|
|
|
|
$bg0: hsl(var(--hue), calc(var(--sat) * 0%), 100%);
|
|
// -> post content
|
|
$bg1: hsl(var(--hue), calc(var(--sat) * 20%), 95%);
|
|
// -> post
|
|
$bg2: hsl(var(--hue), calc(var(--sat) * 30%), 90%);
|
|
// -> post attachment/meta/raw
|
|
$bg3: hsl(var(--hue), calc(var(--sat) * 35%), 87%);
|
|
// -> posts header
|
|
$bg4: hsl(var(--hue), calc(var(--sat) * 40%), 84%);
|
|
// -> filters/tags panels
|
|
|
|
$fg0: hsl(var(--hue), calc(var(--sat) * 0%), 0%);
|
|
// -> post content
|
|
$fg1: hsl(var(--hue), calc(var(--sat) * 20%), 20%);
|
|
// -> body text; some SVG icons (panel close)
|
|
$fg2: hsl(var(--hue), calc(var(--sat) * 20%), 30%);
|
|
// -> headings (h1, h2...)
|
|
|
|
/********************************************/
|
|
/* inverted light scheme (e.g. actor panel) */
|
|
/********************************************/
|
|
|
|
$bg-inv0: hsl(var(--hue), calc(var(--sat) * 75%), 11%);
|
|
// -> bookmarks
|
|
$bg-inv1: hsl(var(--hue), calc(var(--sat) * 65%), 15%);
|
|
// -> favorites
|
|
$bg-inv2: hsl(var(--hue), calc(var(--sat) * 50%), 20%);
|
|
// -> actor raw data, mobile menu
|
|
$bg-inv3: hsl(var(--hue), calc(var(--sat) * 50%), 25%);
|
|
// -> actor panel
|
|
$bg-inv4: hsl(var(--hue), calc(var(--sat) * 45%), 40%);
|
|
// -> actor summary
|
|
|
|
$fg-inv0: hsl(var(--hue), calc(var(--sat) * 0%), 100%);
|
|
// -> misc highlighted text; mobile menu icons
|
|
$fg-inv1: hsl(var(--hue), calc(var(--sat) * 80%), 80%);
|
|
// -> actor, mobile menu
|
|
|
|
/**********/
|
|
/* accent */
|
|
/**********/
|
|
|
|
$accent: hsl(var(--hue), calc(var(--sat) * 200%), 30%);
|
|
// -> links, active elements, counters, misc background stripes (color 1)
|
|
$accent-dark: hsl(var(--hue), calc(var(--sat) * 250%), 26%);
|
|
// -> misc background stripes (color 2)
|
|
$accent-light: hsl(var(--hue), calc(var(--sat) * 150%), 38%);
|
|
// -> focusable elements outline; main header counter
|
|
$accent-light2: hsl(var(--hue), calc(var(--sat) * 150%), 50%);
|
|
// -> overlay hover/focus icons (SVG); private posts border; active filter indicator (mobile menu)
|
|
// === oklch(56.48% 0.124 59.17)
|
|
$accent-light3: hsl(var(--hue), calc(var(--sat) * 150%), 75%);
|
|
// -> hover effect on images
|
|
$accent-light-bg: hsl(var(--hue), calc(var(--sat) * 100%), 96%);
|
|
// -> private posts background
|
|
|
|
/***********/
|
|
/* overlay */
|
|
/***********/
|
|
|
|
$overlay-icon: #fff;
|
|
$overlay-icon-hover: #fff;
|
|
$overlay-backdrop: rgba(0, 0, 0, 0.75);
|
|
$menu-backdrop: rgba(0, 0, 0, 0.5);
|
|
|
|
/*****************/
|
|
/* form elements */
|
|
/*****************/
|
|
|
|
$bg-input: rgba(255, 255, 255, 0.35);
|
|
$bg-input-hover: rgba(255, 255, 255, 0.65);
|
|
$bg-input-focus: rgba(255, 255, 255, 1);
|
|
|
|
$bg-button: rgba(255, 255, 255, 1);
|
|
$bg-button-hover: hsl(var(--hue), calc(var(--sat) * 100%), 95%);
|
|
$button-svg: $fg1;
|
|
$button-svg-hover: hsl(var(--hue), calc(var(--sat) * 150%), 50%);
|
|
$button-svg-focus: hsl(var(--hue), calc(var(--sat) * 150%), 50%);
|
|
$button-svg-active: hsl(var(--hue), calc(var(--sat) * 150%), 50%);
|
|
|
|
$fg-button-focus: $accent;
|
|
$fg-button-active: $accent;
|
|
|
|
// Note: some rgba values hardcoded, used mostly for box-shadow or backdrops
|
|
|
|
html {
|
|
--hue: #{$hue};
|
|
--sat: #{$sat};
|
|
|
|
--bg0: #{$bg0};
|
|
--bg1: #{$bg1};
|
|
--bg2: #{$bg2};
|
|
--bg3: #{$bg3};
|
|
--bg4: #{$bg4};
|
|
|
|
--fg0: #{$fg0};
|
|
--fg1: #{$fg1};
|
|
--fg2: #{$fg2};
|
|
|
|
--bg-inv0: #{$bg-inv0};
|
|
--bg-inv1: #{$bg-inv1};
|
|
--bg-inv2: #{$bg-inv2};
|
|
--bg-inv3: #{$bg-inv3};
|
|
--bg-inv4: #{$bg-inv4};
|
|
|
|
--fg-inv0: #{$fg-inv0};
|
|
--fg-inv1: #{$fg-inv1};
|
|
|
|
--accent: #{$accent};
|
|
--accent-dark: #{$accent-dark};
|
|
--accent-light: #{$accent-light};
|
|
--accent-light2: #{$accent-light2};
|
|
--accent-light3: #{$accent-light3};
|
|
--accent-light-bg: #{$accent-light-bg};
|
|
|
|
--overlay-icon: #{$overlay-icon};
|
|
--overlay-icon-hover: #{$overlay-icon-hover};
|
|
--overlay-backdrop: #{$overlay-backdrop};
|
|
--menu-backdrop: #{$menu-backdrop};
|
|
|
|
--bg-input: #{$bg-input};
|
|
--bg-input-hover: #{$bg-input-hover};
|
|
--bg-input-focus: #{$bg-input-focus};
|
|
|
|
--bg-button: #{$bg-button};
|
|
--bg-button-hover: #{$bg-button-hover};
|
|
--button-svg: #{$button-svg};
|
|
--button-svg-hover: #{$button-svg-hover};
|
|
--button-svg-focus: #{$button-svg-focus};
|
|
--button-svg-active: #{$button-svg-active};
|
|
|
|
--fg-button-focus: #{$fg-button-focus};
|
|
--fg-button-active: #{$fg-button-active};
|
|
|
|
--actor-hue: 0;
|
|
// ### TODO hsl() fallback
|
|
}
|
|
|
|
$actor-accent-light-ok: oklch(80% 0.15 var(--actor-hue));
|
|
$actor-accent-dark-ok: oklch(25% 0.25 var(--actor-hue));
|