iu
b968248e3d
Thin scrollbars; thumb uses --border (hover --text-subtle), transparent track. WebKit + Firefox, follows the active theme.
106 lines
2.0 KiB
CSS
106 lines
2.0 KiB
CSS
@import 'tailwindcss';
|
|
@config '../tailwind.config.ts';
|
|
|
|
/* Светлая */
|
|
:root,
|
|
[data-theme='light'] {
|
|
--bg: 0 0% 100%;
|
|
--bg-elevated: 0 0% 98%;
|
|
--bg-muted: 0 0% 95%;
|
|
--border: 0 0% 88%;
|
|
--text: 0 0% 9%;
|
|
--text-muted: 0 0% 45%;
|
|
--text-subtle: 0 0% 60%;
|
|
--primary: 221 83% 53%;
|
|
--primary-fg: 0 0% 100%;
|
|
--danger: 0 84% 60%;
|
|
--success: 142 71% 45%;
|
|
--chrome: 0 0% 98%;
|
|
--canvas: 0 0% 100%;
|
|
--shadow: 0 0% 0% / 0.08;
|
|
}
|
|
|
|
/* Тёмная (графит Lightroom) */
|
|
[data-theme='dark'] {
|
|
--bg: 0 0% 9%;
|
|
--bg-elevated: 0 0% 15%;
|
|
--bg-muted: 0 0% 18%;
|
|
--border: 0 0% 22%;
|
|
--text: 0 0% 92%;
|
|
--text-muted: 0 0% 65%;
|
|
--text-subtle: 0 0% 45%;
|
|
--primary: 217 91% 60%;
|
|
--primary-fg: 0 0% 100%;
|
|
--danger: 0 84% 65%;
|
|
--success: 142 65% 50%;
|
|
--chrome: 0 0% 13%;
|
|
--canvas: 0 0% 9%;
|
|
--shadow: 0 0% 0% / 0.4;
|
|
}
|
|
|
|
/* Нейтральная (тёплый графит) */
|
|
[data-theme='neutral'] {
|
|
--bg: 30 12% 18%;
|
|
--bg-elevated: 30 12% 23%;
|
|
--bg-muted: 30 11% 28%;
|
|
--border: 30 9% 34%;
|
|
--text: 35 18% 93%;
|
|
--text-muted: 32 10% 68%;
|
|
--text-subtle: 30 7% 50%;
|
|
--primary: 25 90% 55%;
|
|
--primary-fg: 0 0% 100%;
|
|
--danger: 0 72% 62%;
|
|
--success: 142 45% 52%;
|
|
--chrome: 30 12% 15%;
|
|
--canvas: 30 12% 18%;
|
|
--shadow: 30 30% 5% / 0.45;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
background: hsl(var(--bg));
|
|
color: hsl(var(--text));
|
|
transition:
|
|
background-color 200ms ease,
|
|
color 200ms ease;
|
|
min-height: 100%;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
html,
|
|
body {
|
|
transition: none;
|
|
}
|
|
}
|
|
|
|
/* Скроллбары в тон темы */
|
|
* {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: hsl(var(--border)) transparent;
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background-color: hsl(var(--border));
|
|
border: 2px solid transparent;
|
|
border-radius: 9999px;
|
|
background-clip: padding-box;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background-color: hsl(var(--text-subtle));
|
|
background-clip: padding-box;
|
|
}
|
|
|
|
::-webkit-scrollbar-corner {
|
|
background: transparent;
|
|
}
|