135 lines
2.6 KiB
SCSS
135 lines
2.6 KiB
SCSS
@import 'open-props/postcss/style';
|
|
|
|
@import 'open-props/colors-hsl';
|
|
@import 'open-props/shadows';
|
|
@import 'open-props/zindex';
|
|
|
|
html {
|
|
--brand-1: #035aa1;
|
|
--brand-2: #f50000;
|
|
--border-color: var(--gray-4);
|
|
--foreground: black;
|
|
--background: var(--gray-1);
|
|
--surface-0: var(--background);
|
|
--surface-1: white;
|
|
--surface-2: var(--gray-1);
|
|
--surface-3: var(--gray-2);
|
|
|
|
--text-mute: var(--stone-5-hsl);
|
|
|
|
--info-fg: 0 0% 100%;
|
|
--info-bg: var(--blue-6-hsl);
|
|
|
|
--negative-fg: 0 0% 100%;
|
|
--negative-bg: var(--red-9-hsl);
|
|
|
|
--gender-male: var(--blue-5-hsl);
|
|
--gender-female: var(--pink-7-hsl);
|
|
|
|
--shadow-color: 220 3% 15%;
|
|
--shadow-strength: 5%;
|
|
--inner-shadow-highlight: inset 0 -0.5px 0 0 #fff,
|
|
inset 0 0.5px 0 0 rgba(0, 0, 0, 0.067);
|
|
|
|
color: var(--foreground);
|
|
background-color: var(--background);
|
|
}
|
|
|
|
:where(.dark, .body--dark) {
|
|
--brand-1: var(--blue-5);
|
|
--brand-2: #f50000;
|
|
--border-color: var(--gray-8);
|
|
--foreground: white;
|
|
--background: var(--gray-10);
|
|
--surface-0: var(--background);
|
|
--surface-1: var(--gray-11);
|
|
--surface-2: var(--gray-10);
|
|
--surface-3: var(--gray-9);
|
|
|
|
--text-mute: var(--stone-8-hsl);
|
|
|
|
--shadow-color: 220 0% 100%;
|
|
--shadow-strength: 25%;
|
|
--inner-shadow-highlight: inset 0 -0.5px 0 0 hsla(0, 0%, 100%, 0.067),
|
|
inset 0 0.5px 0 0 rgba(0, 0, 0, 0.467);
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 0.5rem;
|
|
height: 0.5rem;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
border: 0.15rem solid rgba(0, 0, 0, 0);
|
|
background-color: hsla(0, 0%, 50%, 0.75);
|
|
background-clip: padding-box;
|
|
border-radius: 0.5rem;
|
|
}
|
|
|
|
*,
|
|
::before,
|
|
::after {
|
|
transition: 100ms background ease-in-out;
|
|
}
|
|
|
|
.bordered {
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.bordered-t {
|
|
border-top: 1px solid var(--border-color);
|
|
}
|
|
|
|
.bordered-b {
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.bordered-l {
|
|
border-left: 1px solid var(--border-color);
|
|
}
|
|
|
|
.bordered-r {
|
|
border-right: 1px solid var(--border-color);
|
|
}
|
|
|
|
.rounded {
|
|
border-radius: var(--radius-2);
|
|
}
|
|
|
|
.surface-0 {
|
|
background-color: var(--surface-0) !important;
|
|
}
|
|
|
|
.surface-1 {
|
|
background-color: var(--surface-1) !important;
|
|
}
|
|
|
|
.surface-2 {
|
|
background-color: var(--surface-2) !important;
|
|
}
|
|
|
|
.surface-3 {
|
|
background-color: var(--surface-3) !important;
|
|
}
|
|
|
|
.app-text-muted {
|
|
color: hsl(var(--text-mute));
|
|
}
|
|
|
|
.app-text-info {
|
|
color: hsl(var(--info-bg));
|
|
}
|
|
|
|
.app-bg-info {
|
|
color: hsl(var(--info-fg));
|
|
background-color: hsl(var(--info-bg));
|
|
}
|
|
|
|
.app-text-negative {
|
|
color: hsl(var(--negative-bg));
|
|
}
|
|
|
|
.app-bg-negative {
|
|
color: hsl(var(--negative-fg));
|
|
background-color: hsl(var(--negative-bg));
|
|
}
|