248 lines
7.9 KiB
Plaintext
248 lines
7.9 KiB
Plaintext
---
|
|
|
|
---
|
|
|
|
<div>
|
|
<slot/>
|
|
</div>
|
|
|
|
<style is:global lang="stylus">
|
|
|
|
/* utils */
|
|
white(a)
|
|
rgba(255, 255, 255, a)
|
|
|
|
black(a)
|
|
rgba(0, 0, 0, a)
|
|
|
|
isOklch(c)
|
|
return substr(c, 0, 5) == 'oklch'
|
|
|
|
oklch_fallback(c)
|
|
str = '' + c // convert color value to string
|
|
if isOklch(str)
|
|
return convert(oklchToHex(str))
|
|
return c
|
|
|
|
color_set(colors)
|
|
@supports (color: oklch(0 0 0))
|
|
:root
|
|
for key, value in colors
|
|
{key}: value[0]
|
|
:root.dark
|
|
for key, value in colors
|
|
if length(value) > 1
|
|
{key}: value[1]
|
|
/* provide fallback color for oklch */
|
|
@supports not (color: oklch(0 0 0))
|
|
:root
|
|
for key, value in colors
|
|
{key}: oklch_fallback(value[0])
|
|
:root.dark
|
|
for key, value in colors
|
|
if length(value) > 1
|
|
{key}: oklch_fallback(value[1])
|
|
|
|
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
|
|
|
|
--banner-height-home 60vh
|
|
--banner-height 40vh
|
|
|
|
color_set({
|
|
--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.17 0.017 var(--hue))
|
|
--btn-plain-bg-active: oklch(0.98 0.01 var(--hue)) oklch(0.19 0.017 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.2 0.015 var(--hue)) oklch(0.17 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
|
|
})
|
|
|
|
|
|
/* some global styles */
|
|
::selection
|
|
background-color: var(--selection-bg)
|
|
|
|
.scrollbar-base.os-scrollbar
|
|
transition: width 0.15s ease-in-out, height 0.15s ease-in-out, opacity 0.15s, visibility 0.15s, top 0.15s, right 0.15s, bottom 0.15s, left 0.15s;
|
|
pointer-events: unset;
|
|
&.os-scrollbar-horizontal
|
|
padding-top: 4px;
|
|
padding-bottom: 4px;
|
|
height: 16px;
|
|
.os-scrollbar-track .os-scrollbar-handle
|
|
height: 4px;
|
|
border-radius: 4px;
|
|
&:hover
|
|
.os-scrollbar-track .os-scrollbar-handle
|
|
height: 8px;
|
|
&.px-2
|
|
padding-left: 8px;
|
|
padding-right: 8px;
|
|
&.os-scrollbar-vertical
|
|
padding-left: 4px;
|
|
padding-right: 4px;
|
|
width: 16px;
|
|
.os-scrollbar-track .os-scrollbar-handle
|
|
width: 4px;
|
|
border-radius: 4px;
|
|
&:hover
|
|
.os-scrollbar-track .os-scrollbar-handle
|
|
width: 8px;
|
|
&.py-1
|
|
padding-top: 4px;
|
|
padding-bottom: 4px;
|
|
|
|
.scrollbar-auto
|
|
&.os-scrollbar
|
|
--os-handle-bg: var(--scrollbar-bg);
|
|
--os-handle-bg-hover: var(--scrollbar-bg-hover);
|
|
--os-handle-bg-active: var(--scrollbar-bg-active);
|
|
|
|
.scrollbar-dark
|
|
&.os-scrollbar
|
|
--os-handle-bg: var(--scrollbar-bg-dark);
|
|
--os-handle-bg-hover: var(--scrollbar-bg-hover-dark);
|
|
--os-handle-bg-active: var(--scrollbar-bg-active-dark);
|
|
|
|
.scrollbar-light
|
|
&.os-scrollbar
|
|
--os-handle-bg: var(--scrollbar-bg-light);
|
|
--os-handle-bg-hover: var(--scrollbar-bg-hover-light);
|
|
--os-handle-bg-active: var(--scrollbar-bg-active-light);
|
|
|
|
|
|
</style>
|
|
<style is:global>
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer components {
|
|
.card-base {
|
|
@apply rounded-[var(--radius-large)] overflow-hidden bg-[var(--card-bg)] transition;
|
|
}
|
|
h1, h2, h3, h4, h5, h6, p, a, span, li, ul, ol, blockquote, code, pre, table, th, td, strong {
|
|
@apply transition;
|
|
}
|
|
.card-shadow {
|
|
@apply drop-shadow-[0_2px_4px_rgba(0,0,0,0.005)]
|
|
}
|
|
.link {
|
|
@apply transition hover:bg-[var(--link-hover)] active:bg-[var(--link-active)] rounded-md p-1 -m-1;
|
|
}
|
|
.link-lg {
|
|
@apply transition hover:bg-[var(--link-hover)] active:bg-[var(--link-active)] rounded-md p-1.5 -m-1.5;
|
|
}
|
|
.float-panel {
|
|
@apply top-[5.25rem] rounded-[var(--radius-large)] overflow-hidden bg-[var(--float-panel-bg)] transition shadow-xl dark:shadow-none
|
|
}
|
|
.float-panel.closed {
|
|
@apply top-[4.75rem] opacity-0 pointer-events-none
|
|
}
|
|
.search-panel mark {
|
|
@apply bg-transparent text-[var(--primary)]
|
|
}
|
|
|
|
.btn-card {
|
|
@apply transition flex items-center justify-center bg-[var(--card-bg)] hover:bg-[var(--btn-card-bg-hover)]
|
|
active:bg-[var(--btn-card-bg-active)]
|
|
}
|
|
.btn-card.disabled {
|
|
@apply pointer-events-none text-black/10 dark:text-white/10
|
|
}
|
|
.btn-plain {
|
|
@apply transition flex items-center justify-center bg-none hover:bg-[var(--btn-plain-bg-hover)] active:bg-[var(--btn-plain-bg-active)]
|
|
text-black/75 hover:text-[var(--primary)] dark:text-white/75 dark:hover:text-[var(--primary)]
|
|
}
|
|
.btn-regular {
|
|
@apply transition flex items-center justify-center bg-[var(--btn-regular-bg)] hover:bg-[var(--btn-regular-bg-hover)] active:bg-[var(--btn-regular-bg-active)]
|
|
text-[var(--btn-content)] dark:text-white/75
|
|
}
|
|
|
|
.link-underline {
|
|
@apply transition underline decoration-2 decoration-dashed decoration-[var(--link-underline)]
|
|
hover:decoration-[var(--link-hover)] active:decoration-[var(--link-active)] underline-offset-[0.25rem]
|
|
}
|
|
|
|
.text-90 {
|
|
@apply text-black/90 dark:text-white/90
|
|
}
|
|
.text-75 {
|
|
@apply text-black/75 dark:text-white/75
|
|
}
|
|
.text-50 {
|
|
@apply text-black/50 dark:text-white/50
|
|
}
|
|
.text-30 {
|
|
@apply text-black/30 dark:text-white/30
|
|
}
|
|
.text-25 {
|
|
@apply text-black/25 dark:text-white/25
|
|
}
|
|
|
|
html.is-changing .transition-fade {
|
|
@apply transition-all duration-200
|
|
}
|
|
html.is-animating .transition-fade {
|
|
@apply opacity-0 translate-y-4
|
|
}
|
|
}
|
|
|
|
</style> |