104 lines
2.1 KiB
Stylus
104 lines
2.1 KiB
Stylus
light-syntax = {
|
|
brd: rgba(255, 255, 255, 0.2),
|
|
bg: rgba(0, 0, 0, 0.05),
|
|
ledg: #ccc,
|
|
sh: #775,
|
|
name: #480,
|
|
mag: #d04,
|
|
lit: #40f,
|
|
lits: #660,
|
|
aq: #04d,
|
|
err: #960050,
|
|
}
|
|
|
|
dark-syntax = {
|
|
brd: rgba(255, 255, 255, 0.2),
|
|
bg: rgba(255, 255, 255, 0.03),
|
|
ledg: #333,
|
|
sh: #75715e,
|
|
name: #a6e22e,
|
|
mag: #f92672,
|
|
lit: #ae81ff,
|
|
lits: #e6db74,
|
|
aq: #66d9ef,
|
|
err: #960050,
|
|
}
|
|
|
|
theme-colors = {
|
|
heading-fg: #333,
|
|
icon-shadow: #fff,
|
|
link-visited-fg: #666,
|
|
link-fg: #000,
|
|
}
|
|
|
|
: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
|
|
--bg #fff
|
|
--header-bg #eee
|
|
--header-hover-bg #ddd
|
|
--fg #111
|
|
--inline-code-bg #ddd
|
|
--input-bg rgba(0, 0, 0, 0.08)
|
|
--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 #111
|
|
--header-bg #191919
|
|
--header-hover-bg #333
|
|
--fg #fff
|
|
--link-visited-fg #aaa
|
|
--inline-code-bg #222
|
|
--input-bg rgba(255, 255, 255, 0.08)
|
|
--input-hover-bg rgba(255, 255, 255, 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)
|
|
|
|
: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 }
|