123 lines
2.5 KiB
Stylus
123 lines
2.5 KiB
Stylus
/* catppuccin colors */
|
|
latte = {
|
|
red: #d20f39,
|
|
yellow: #df8e1d,
|
|
green: #40a02b,
|
|
sapphire: #209fb5,
|
|
mauve: #8839ef,
|
|
}
|
|
|
|
mocha = {
|
|
red: #f38ba8,
|
|
yellow: #f9e2af,
|
|
green: #a6e3a1
|
|
sapphire: #74c7ec,
|
|
mauve: #cba6f7,
|
|
}
|
|
|
|
light-syntax = {
|
|
brd: rgba(255, 255, 255, 0.2),
|
|
bg: #e6e9ef,
|
|
ledg: rgba(0, 0, 0, 0.1),
|
|
sh: #6c6f85,
|
|
name: latte['green'],
|
|
mag: latte['red'],
|
|
lit: latte['mauve'],
|
|
lits: latte['yellow'],
|
|
aq: latte['sapphire'],
|
|
err: latte['red'],
|
|
}
|
|
|
|
dark-syntax = {
|
|
brd: rgba(255, 255, 255, 0.2),
|
|
bg: #181825,
|
|
ledg: #313244,
|
|
sh: #6c7086,
|
|
name: mocha['green'],
|
|
mag: mocha['red'],
|
|
lit: mocha['mauve'],
|
|
lits: mocha['yellow'],
|
|
aq: mocha['sapphire'],
|
|
err: mocha['red'],
|
|
}
|
|
|
|
theme-colors = {
|
|
icon-shadow: #fff,
|
|
link-visited-fg: #5c5f77,
|
|
link-fg: #209fb5,
|
|
}
|
|
|
|
:root
|
|
--syntax-bpx: 5px
|
|
--ff system-ui, sans-serif
|
|
--msff ldiosevka, IosevkaLyteWeb, IosevkaLyte, Iosevka, "Fira Code", monospace
|
|
--pc #df3c59
|
|
--pcd #8e293b
|
|
|
|
light-theme =
|
|
for k, v in light-syntax
|
|
--syntax-{k}: v
|
|
for k2, v2 in theme-colors
|
|
{unquote("--" + k2)}: v2
|
|
--heading-fg #4c4f69
|
|
--bg #eff1f5
|
|
--header-bg rgba(255, 255, 255, 0.1)
|
|
--header-hover-bg rgba(255, 255, 255, 0.2)
|
|
--fg #4c4f69
|
|
--inline-code-bg rgba(0,0,0,0.08)
|
|
--input-bg #dce0e8
|
|
--input-hover-bg rgba(0, 0, 0, 0.16)
|
|
--input-focus-bg var(--input-bg)
|
|
--button-bg var(--input-bg)
|
|
--button-hover-bg var(--input-hover-bg)
|
|
--button-focus-bg var(--input-bg)
|
|
|
|
dark-theme =
|
|
for k, v in dark-syntax
|
|
--syntax-{k}: v
|
|
for k2, v2 in theme-colors
|
|
{unquote("--" + k2)}: invert(v2)
|
|
--bg #1e1e2e
|
|
--header-bg rgba(255, 255, 255, 0.03)
|
|
--header-hover-bg rgba(255, 255, 255, 0.06)
|
|
--fg #cdd6f4
|
|
--heading-fg #cdd6f4
|
|
--link-visited-fg #a6adc8
|
|
--link-fg #74c7ec
|
|
--inline-code-bg rgba(255,255,255,0.05)
|
|
--input-bg #181825
|
|
--input-hover-bg #313244
|
|
--input-focus-bg #45475a
|
|
--button-bg var(--input-bg)
|
|
--button-hover-bg var(--input-hover-bg)
|
|
--button-focus-bg var(--input-bg)
|
|
|
|
:root, body.light-theme
|
|
{light-theme}
|
|
|
|
body.dark-theme
|
|
{dark-theme}
|
|
|
|
:root
|
|
@media (prefers-color-scheme dark)
|
|
{dark-theme}
|
|
|
|
:root
|
|
@media (max-width: 600px)
|
|
--syntax-bpx 2px
|
|
|
|
.hide-in-light-theme
|
|
display none
|
|
|
|
@media (prefers-color-scheme dark)
|
|
.hide-in-dark-theme
|
|
display none
|
|
.hide-in-light-theme { display: inherit }
|
|
body.light-theme .hide-in-dark-theme { display: inherit }
|
|
body.dark-theme .hide-in-light-theme { display: none }
|
|
|
|
body.dark-theme .hide-in-dark-theme { display: none }
|
|
body.dark-theme .hide-in-light-theme { display: inherit }
|
|
body.light-theme .hide-in-dark-theme { display: inherit }
|
|
body.light-theme .hide-in-light-theme { display: none }
|