99 lines
4.1 KiB
Stylus
99 lines
4.1 KiB
Stylus
/* utils */
|
|
white(a)
|
|
rgba(255, 255, 255, a)
|
|
|
|
black(a)
|
|
rgba(0, 0, 0, a)
|
|
|
|
rainbow-light = linear-gradient(to right, oklch(0.80 0.10 0), oklch(0.80 0.10 30), oklch(0.80 0.10 60), oklch(0.80 0.10 90), oklch(0.80 0.10 120), oklch(0.80 0.10 150), oklch(0.80 0.10 180), oklch(0.80 0.10 210), oklch(0.80 0.10 240), oklch(0.80 0.10 270), oklch(0.80 0.10 300), oklch(0.80 0.10 330), oklch(0.80 0.10 360))
|
|
rainbow-dark = linear-gradient(to right, oklch(0.70 0.10 0), oklch(0.70 0.10 30), oklch(0.70 0.10 60), oklch(0.70 0.10 90), oklch(0.70 0.10 120), oklch(0.70 0.10 150), oklch(0.70 0.10 180), oklch(0.70 0.10 210), oklch(0.70 0.10 240), oklch(0.70 0.10 270), oklch(0.70 0.10 300), oklch(0.70 0.10 330), oklch(0.70 0.10 360))
|
|
|
|
:root
|
|
--radius-large 1rem
|
|
--content-delay 150ms
|
|
|
|
/* An util to define variables that vary with light and dark mode */
|
|
define(vars)
|
|
:root
|
|
for key, value in vars
|
|
{key}: value[0]
|
|
:root.dark
|
|
for key, value in vars
|
|
if length(value) > 1
|
|
{key}: value[1]
|
|
|
|
define({
|
|
--primary: oklch(0.70 0.14 var(--hue)) oklch(0.75 0.14 var(--hue))
|
|
--page-bg: oklch(0.95 0.01 var(--hue)) oklch(0.16 0.014 var(--hue))
|
|
--card-bg: white oklch(0.23 0.015 var(--hue))
|
|
|
|
--btn-content: oklch(0.55 0.12 var(--hue)) oklch(0.75 0.1 var(--hue))
|
|
|
|
--btn-regular-bg: oklch(0.95 0.025 var(--hue)) oklch(0.33 0.035 var(--hue))
|
|
--btn-regular-bg-hover: oklch(0.9 0.05 var(--hue)) oklch(0.38 0.04 var(--hue))
|
|
--btn-regular-bg-active: oklch(0.85 0.08 var(--hue)) oklch(0.43 0.045 var(--hue))
|
|
|
|
--btn-plain-bg-hover: oklch(0.95 0.025 var(--hue)) oklch(0.30 0.035 var(--hue))
|
|
--btn-plain-bg-active: oklch(0.98 0.01 var(--hue)) oklch(0.27 0.025 var(--hue))
|
|
|
|
--btn-card-bg-hover: oklch(0.98 0.005 var(--hue)) oklch(0.3 0.03 var(--hue))
|
|
--btn-card-bg-active: oklch(0.9 0.03 var(--hue)) oklch(0.35 0.035 var(--hue))
|
|
|
|
--enter-btn-bg: var(--btn-regular-bg)
|
|
--enter-btn-bg-hover: var(--btn-regular-bg-hover)
|
|
--enter-btn-bg-active: var(--btn-regular-bg-active)
|
|
|
|
--deep-text: oklch(0.25 0.02 var(--hue))
|
|
|
|
--title-active: oklch(0.6 0.1 var(--hue))
|
|
|
|
--line-divider: black(0.08) white(0.08)
|
|
|
|
--line-color: black(0.1) white(0.1)
|
|
--meta-divider: black(0.2) white(0.2)
|
|
|
|
--inline-code-bg: var(--btn-regular-bg)
|
|
--inline-code-color: var(--btn-content)
|
|
--selection-bg: oklch(0.90 0.05 var(--hue)) oklch(0.40 0.08 var(--hue))
|
|
--codeblock-selection: oklch(0.40 0.08 var(--hue))
|
|
--codeblock-bg: oklch(0.17 0.015 var(--hue)) oklch(0.17 0.015 var(--hue))
|
|
--codeblock-topbar-bg: oklch(0.3 0.02 var(--hue)) oklch(0.12 0.015 var(--hue))
|
|
|
|
--license-block-bg: black(0.03) var(--codeblock-bg)
|
|
|
|
--link-underline: oklch(0.93 0.04 var(--hue)) oklch(0.40 0.08 var(--hue))
|
|
--link-hover: oklch(0.95 0.025 var(--hue)) oklch(0.40 0.08 var(--hue))
|
|
--link-active: oklch(0.90 0.05 var(--hue)) oklch(0.35 0.07 var(--hue))
|
|
|
|
--float-panel-bg: white oklch(0.19 0.015 var(--hue))
|
|
|
|
--scrollbar-bg-light: black(0.4)
|
|
--scrollbar-bg-hover-light: black(0.5)
|
|
--scrollbar-bg-active-light: black(0.6)
|
|
|
|
--scrollbar-bg-dark: white(0.4)
|
|
--scrollbar-bg-hover-dark: white(0.5)
|
|
--scrollbar-bg-active-dark: white(0.6)
|
|
|
|
--scrollbar-bg: var(--scrollbar-bg-light) var(--scrollbar-bg-dark)
|
|
--scrollbar-bg-hover: var(--scrollbar-bg-hover-light) var(--scrollbar-bg-hover-dark)
|
|
--scrollbar-bg-active: var(--scrollbar-bg-active-light) var(--scrollbar-bg-active-dark)
|
|
|
|
--color-selection-bar: rainbow-light rainbow-dark
|
|
|
|
--display-light-icon: 1 0
|
|
--display-dark-icon: 0 1
|
|
|
|
--admonitions-color-tip: oklch(0.7 0.14 180) oklch(0.75 0.14 180)
|
|
--admonitions-color-note: oklch(0.7 0.14 250) oklch(0.75 0.14 250)
|
|
--admonitions-color-important: oklch(0.7 0.14 310) oklch(0.75 0.14 310)
|
|
--admonitions-color-warning: oklch(0.7 0.14 60) oklch(0.75 0.14 60)
|
|
--admonitions-color-caution: oklch(0.6 0.2 25) oklch(0.65 0.2 25)
|
|
|
|
--toc-badge-bg: oklch(0.9 0.045 var(--hue)) var(--btn-regular-bg)
|
|
--toc-btn-hover: oklch(0.92 0.015 var(--hue)) oklch(0.22 0.02 var(--hue))
|
|
--toc-btn-active: oklch(0.90 0.015 var(--hue)) oklch(0.25 0.02 var(--hue))
|
|
--toc-width: calc((100vw - var(--page-width)) / 2 - 1rem)
|
|
--toc-item-active: oklch(0.70 0.13 var(--hue)) oklch(0.35 0.07 var(--hue))
|
|
})
|