79 lines
No EOL
2.5 KiB
SCSS
79 lines
No EOL
2.5 KiB
SCSS
:root {
|
|
@for $i from 1 to 20 {
|
|
$counter: $i * 50;
|
|
$saturation: 20% + $i * 2.5%;
|
|
$lightness: $i * 5%;
|
|
--primary-dark-#{$counter}: hsl(320, #{$saturation}, #{$lightness});
|
|
}
|
|
|
|
@for $i from 1 to 20 {
|
|
$counter: $i * 50;
|
|
$saturation: 20% + $i * 2.5%;
|
|
$lightness: $i * 5%;
|
|
--primary-light-#{$counter}: hsl(25, #{$saturation}, #{$lightness});
|
|
}
|
|
|
|
@for $i from 1 to 20 {
|
|
$counter: $i * 50;
|
|
$saturation: 10% + $i * 2.5%;
|
|
$lightness: $i * 4%;
|
|
--text-accent-#{$counter}: hsl(320, #{$saturation}, #{$lightness});
|
|
}
|
|
|
|
--background: var(--primary-dark-150);
|
|
--border: var(--primary-dark-200);
|
|
|
|
--text: var(--primary-light-950);
|
|
--text-hover: var(--primary-light-900);
|
|
--link-underline: var(--primary-light-700);
|
|
--link-underline-hover: var(--primary-light-600);
|
|
|
|
--sidebar-background: var(--primary-dark-100);
|
|
--sidebar-border: var(--primary-dark-150);
|
|
--sidebar-accent-1: var(--primary-dark-150);
|
|
--sidebar-accent-2: var(--primary-dark-200);
|
|
--sidebar-accent-3: var(--primary-dark-350);
|
|
|
|
--vriish-rose: hsl(0, 100%, 75%);
|
|
--orange: hsl(25, 100%, 75%);
|
|
--gold: hsl(50, 100%, 75%);
|
|
--emerald: hsl(130, 100%, 75%);
|
|
--sky: hsl(215, 100%, 75%);
|
|
--purpur: hsl(320, 100%, 75%);
|
|
--white: hsl(360, 100%, 100%);
|
|
|
|
--vriish-gradient: linear-gradient(-35deg, var(--primary-light-300) -50%, var(--primary-dark-300) 150%);
|
|
--vriish-gradient-shadow: 2px 2px 10px var(--background);
|
|
--vriish-gradient-text: var(--primary-light-950);
|
|
--vriish-gradient-text-hover: var(--primary-light-900);
|
|
|
|
--vriish-waves:
|
|
radial-gradient(2.64rem at 50% calc(100% - 3.67rem),#000 99%,#0000 101%) calc(50% - 3rem) 0/6rem 100%,
|
|
radial-gradient(2.64rem at 50% calc(100% + 2.17rem),#0000 99%,#000 101%) 50% calc(100% - 1.5rem)/6rem 100% repeat-x;
|
|
}
|
|
@media (prefers-color-scheme: light) {
|
|
:root {
|
|
@for $i from 1 to 20 {
|
|
$counter: $i * 50;
|
|
$saturation: 20% + $i * 2.5%;
|
|
$lightness: $i * 5%;
|
|
--text-accent-#{$counter}: hsl(25, #{$saturation}, #{$lightness});
|
|
}
|
|
|
|
--background: var(--primary-light-850);
|
|
--border: var(--primary-dark-800);
|
|
|
|
--text: var(--primary-dark-50);
|
|
--text-hover: var(--primary-dark-100);
|
|
--link-underline: var(--primary-dark-700);
|
|
--link-underline-hover: var(--primary-dark-600);
|
|
|
|
--sidebar-background: var(--primary-light-900);
|
|
--sidebar-border: var(--primary-light-850);
|
|
--sidebar-accent-1: var(--primary-light-850);
|
|
--sidebar-accent-2: var(--primary-light-800);
|
|
--sidebar-accent-3: var(--primary-light-750);
|
|
|
|
--vriish-gradient: linear-gradient(-35deg, var(--primary-light-700) -50%, var(--primary-dark-700) 150%);
|
|
}
|
|
} |