108 lines
2.4 KiB
CSS
108 lines
2.4 KiB
CSS
@import "tailwindcss";
|
|
|
|
@theme {
|
|
/* Design tokens */
|
|
--color-text: #0f0f0f;
|
|
--color-background: #fbfbfb;
|
|
--color-background-ui: #da5893;
|
|
--color-logo-primary: #faa2ca;
|
|
--color-logo-stroke: #382731;
|
|
--color-text-stroke: #f6f6f6;
|
|
--color-mid-gray: #808080;
|
|
}
|
|
|
|
:root {
|
|
/* Typography */
|
|
font-size: 15px;
|
|
line-height: 24px;
|
|
font-weight: 400;
|
|
|
|
/* Colors - Light Theme */
|
|
/* --color-text: #0f0f0f;
|
|
--color-background: #fbfbfb;
|
|
--color-logo-primary: #FAA2CA;
|
|
--color-logo-stroke: #382731;
|
|
--color-text-stroke: #f6f6f6; */
|
|
|
|
/* Typography settings */
|
|
font-synthesis: none;
|
|
text-rendering: optimizeLegibility;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
-webkit-text-size-adjust: 100%;
|
|
|
|
--scrollbar-thumb: color-mix(in srgb, var(--color-text), transparent 85%);
|
|
--scrollbar-thumb-hover: color-mix(
|
|
in srgb,
|
|
var(--color-text),
|
|
transparent 70%
|
|
);
|
|
|
|
/* Apply colors */
|
|
color: var(--color-text);
|
|
background-color: var(--color-background);
|
|
}
|
|
|
|
.container {
|
|
margin: 0;
|
|
padding-top: 10vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
text-align: center;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
/* Colors - Dark Theme */
|
|
--color-text: #fbfbfb;
|
|
--color-background: #2c2b29;
|
|
--color-logo-primary: #f28cbb;
|
|
--color-logo-stroke: #fad1ed;
|
|
}
|
|
}
|
|
|
|
/* macOS - tint native overlay scrollbar thumb */
|
|
:root[data-platform="macos"] {
|
|
scrollbar-color: var(--scrollbar-thumb) transparent;
|
|
}
|
|
|
|
/* Custom Scrollbar - only on Windows/Linux; macOS uses native overlay scrollbars */
|
|
:root:not([data-platform="macos"]) ::-webkit-scrollbar {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
:root:not([data-platform="macos"]) ::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
:root:not([data-platform="macos"]) ::-webkit-scrollbar-thumb {
|
|
background-color: var(--scrollbar-thumb);
|
|
border-radius: 20px;
|
|
border: 3px solid transparent;
|
|
border-right-width: 4px;
|
|
border-left-width: 3px;
|
|
background-clip: content-box;
|
|
min-height: 32px;
|
|
}
|
|
|
|
:root:not([data-platform="macos"]) ::-webkit-scrollbar-thumb:hover {
|
|
background-color: var(--scrollbar-thumb-hover);
|
|
}
|
|
|
|
@layer utilities {
|
|
.text-stroke {
|
|
-webkit-text-stroke: 2px var(--color-text-stroke);
|
|
}
|
|
}
|
|
|
|
.logo-primary {
|
|
fill: var(--color-logo-primary);
|
|
}
|
|
|
|
.logo-stroke {
|
|
fill: var(--color-logo-stroke);
|
|
stroke: var(--color-logo-stroke);
|
|
stroke-width: 1;
|
|
}
|