daudix-UFO
f04495f6d2
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
107 lines
2.8 KiB
SCSS
107 lines
2.8 KiB
SCSS
@use "sass:color";
|
|
|
|
$accent-color: #ff7800 !default;
|
|
@import "accent-color";
|
|
|
|
$crt-bg-l: radial-gradient(
|
|
color.mix($accent-color, black, 30%),
|
|
color.mix($accent-color, black, 20%)
|
|
);
|
|
|
|
$crt-bg-d: radial-gradient(
|
|
color.mix($accent-color, black, 20%),
|
|
color.mix($accent-color, black, 10%)
|
|
);
|
|
|
|
$bg1-l: color.mix($accent-color, rgb(250, 250, 250), 10%);
|
|
$bg2-l: color.mix($accent-color, rgb(255, 255, 255), 20%);
|
|
$bg3-l: color.mix($accent-color, rgb(75, 75, 75), 30%);
|
|
|
|
$bg1-d: color.mix($accent-color, rgb(36, 36, 36), 15%);
|
|
$bg2-d: color.mix($accent-color, rgb(30, 30, 30), 10%);
|
|
$bg3-d: color.mix($accent-color, rgb(11, 11, 11), 5%);
|
|
|
|
$marked: color.scale($accent-color, $alpha: -80%);
|
|
|
|
:root {
|
|
// GENERAL SETUP
|
|
--accent-color: #{$accent-color};
|
|
--text: var(--dark4);
|
|
--background: var(--bg1);
|
|
--border: rgba(120, 120, 120, 0.4);
|
|
--border-radius: 0.75rem;
|
|
--border-radius-big: 1.2rem;
|
|
--border-radius-small: 0.5rem;
|
|
--content-width: 720px;
|
|
|
|
// CUSTOM COLOR PALETTE
|
|
--bg1: #{$bg1-l};
|
|
--bg2: #{$bg2-l};
|
|
--bg3: #{$bg3-l};
|
|
|
|
--fg01: rgba(0, 0, 0, 0.01);
|
|
--fg03: rgba(0, 0, 0, 0.03);
|
|
--fg05: rgba(0, 0, 0, 0.05);
|
|
--fg07: rgba(0, 0, 0, 0.07);
|
|
--fg09: rgba(0, 0, 0, 0.09);
|
|
--fg40: rgba(0, 0, 0, 0.4);
|
|
--fg50: rgba(0, 0, 0, 0.5);
|
|
|
|
--purple-bg: rgba(145, 65, 172, 0.1);
|
|
--purple-fg: rgb(145, 65, 172);
|
|
--red-bg: rgba(224, 27, 36, 0.1);
|
|
--red-fg: rgb(224, 27, 36);
|
|
--yellow-bg: rgba(156, 110, 3, 0.1);
|
|
--yellow-fg: rgb(156, 110, 3);
|
|
--orange-bg: rgba(255, 120, 0, 0.1);
|
|
--orange-fg: rgb(255, 120, 0);
|
|
|
|
--crt-bg: #{$crt-bg-l};
|
|
|
|
--marked: #{$marked};
|
|
|
|
// CUSTOM VARIABLES
|
|
--shadow: 0 0 0 1px rgba(0, 0, 0, 0.03), 0 1px 3px 1px rgba(0, 0, 0, 0.07),
|
|
0 2px 6px 2px rgba(0, 0, 0, 0.03);
|
|
--shadow-raised: 0 0 0 1px rgba(0, 0, 0, 0.06),
|
|
0 2px 6px 2px rgba(0, 0, 0, 0.14), 0 4px 12px 4px rgba(0, 0, 0, 0.06);
|
|
--drop-shadow: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07))
|
|
drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06));
|
|
|
|
--transition: 200ms;
|
|
--transition-longer: 400ms;
|
|
--transition-long: 800ms;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
color-scheme: dark;
|
|
|
|
--text: var(--light2);
|
|
--background: var(--bg3);
|
|
|
|
--fg01: rgba(255, 255, 255, 0.01);
|
|
--fg03: rgba(255, 255, 255, 0.03);
|
|
--fg05: rgba(255, 255, 255, 0.05);
|
|
--fg07: rgba(255, 255, 255, 0.07);
|
|
--fg09: rgba(255, 255, 255, 0.09);
|
|
--fg40: rgba(255, 255, 255, 0.4);
|
|
--fg50: rgba(255, 255, 255, 0.5);
|
|
|
|
--bg1: #{$bg1-d};
|
|
--bg2: #{$bg2-d};
|
|
--bg3: #{$bg3-d};
|
|
|
|
--purple-bg: rgba(220, 138, 221, 0.1);
|
|
--purple-fg: rgb(220, 138, 221);
|
|
--red-bg: rgba(226, 97, 81, 0.1);
|
|
--red-fg: rgb(246, 97, 81);
|
|
--yellow-bg: rgba(248, 228, 92, 0.1);
|
|
--yellow-fg: rgb(248, 228, 92);
|
|
--orange-bg: rgba(255, 190, 111, 0.1);
|
|
--orange-fg: rgb(255, 190, 111);
|
|
|
|
--crt-bg: #{$crt-bg-d};
|
|
}
|
|
}
|