114 lines
2.3 KiB
SCSS
114 lines
2.3 KiB
SCSS
|
|
:root, .theme-light
|
|
{
|
|
// accent colors
|
|
--color-primary: #292b2c;
|
|
--color-primary-fg: #fff;
|
|
--color-secondary: #292b2c;
|
|
--color-negative: #d82853;
|
|
|
|
// foreground/text color
|
|
--color-fg: #222;
|
|
--color-fg-mid: #6f7375;
|
|
--color-fg-light: #919294;
|
|
--color-fg-xlight: #bec0c3;
|
|
|
|
// background color shades
|
|
--color-bg: #f7f8f9;
|
|
--color-bg-mid: #f4f5f6;
|
|
--color-bg-light: #fff;
|
|
--color-bg-xlight: #f8f9fa;
|
|
--color-bg-xxlight: #fbfcfc;
|
|
|
|
// line colors
|
|
--color-line: #eaebec;
|
|
--color-line-mid: #eaebec;
|
|
--color-line-light: #f4f5f6;
|
|
|
|
// misc colors
|
|
--color-box: #fff;
|
|
--color-shadow: rgba(0,0,0,0.03);
|
|
--color-shadow-short: 0 1px 1px 0 rgba(0,0,0,0.05);
|
|
--color-highlight: rgba(0,0,0,0.05);
|
|
--color-overlay-shade: rgba(0,0,0,0.1);
|
|
|
|
// message colors
|
|
--color-accent-info: rgb(44, 162, 212);
|
|
--color-accent-info-bg: rgba(44, 162, 212, 0.1);
|
|
--color-accent-success: rgb(47, 187, 152);
|
|
--color-accent-success-bg: rgba(47, 187, 152, 0.1);
|
|
--color-accent-warn: rgb(211, 172, 35);
|
|
--color-accent-warn-bg: rgba(233, 193, 56, 0.1);
|
|
--color-accent-error: rgb(216, 40, 83);
|
|
--color-accent-error-bg: rgba(216, 40, 83, 0.1);
|
|
|
|
// sizes
|
|
|
|
--padding: 32px;
|
|
--padding-s: 24px;
|
|
--height-top: 74px;
|
|
--radius: 5px;
|
|
|
|
--font-size: 14px;
|
|
--font-size-m: 13px;
|
|
--font-size-s: 12px;
|
|
--font-size-l: 16px;
|
|
--font-size-xl: 18px;
|
|
}
|
|
|
|
.theme-dark
|
|
{
|
|
// accent colors
|
|
--color-primary: #f7f8f9;
|
|
--color-primary-fg: #222;
|
|
--color-secondary: #292b2c;
|
|
--color-negative: #d82853;
|
|
|
|
// foreground/text color
|
|
--color-fg: #fff;
|
|
--color-fg-mid: #c1c5c9;
|
|
--color-fg-light: #919294;
|
|
--color-fg-xlight: #919294;
|
|
--color-bg-xxlight: #919294;
|
|
|
|
/*--color-fg: #222;
|
|
--color-fg-mid: #6f7375;
|
|
--color-fg-light: #919294;*/
|
|
|
|
// background color shades
|
|
--color-bg: #1c1e1f;
|
|
--color-bg-mid: #292b2c;
|
|
--color-bg-light: #242526;
|
|
|
|
/*--color-bg: #fff;
|
|
--color-bg-light: #f8f9fa;
|
|
--color-bg-mid: #f4f5f6;*/
|
|
|
|
// line colors
|
|
--color-line: #2f3233;
|
|
--color-line-mid: #3b3e40;
|
|
--color-line-light: #2f3233;
|
|
|
|
// misc colors
|
|
--color-box: #242526;
|
|
--color-shadow: rgba(0,0,0,0.3);
|
|
--color-highlight: rgba(255,255,255, 0.03);
|
|
--color-overlay-shade: rgba(0,0,0,0.3);
|
|
}
|
|
|
|
|
|
:root
|
|
{
|
|
--color-accent-yellow: #ffd100;
|
|
}
|
|
|
|
.color-yellow
|
|
{
|
|
color: var(--color-accent-yellow);
|
|
}
|
|
|
|
|
|
// font sizes
|
|
|
|
$font-size: 14px;
|
|
$font-size-s: 12px; |