forked from admin/zeropost-tool
Alexey Pavlov
64 lines
2.9 KiB
CSS
64 lines
2.9 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* ── Светлая тема (по умолчанию) ──────────────────────────────────────────── */
|
|
:root {
|
|
--bg: 250 250 249; /* stone-50 — мягкий тёплый фон */
|
|
--surface: 255 255 255; /* белые карточки */
|
|
--surface2: 245 245 244; /* stone-100 — инпуты */
|
|
--border: 231 229 228; /* stone-200 */
|
|
--text: 23 23 23; /* neutral-900 */
|
|
--text-soft: 82 82 91; /* zinc-600 */
|
|
--text-mute: 161 161 170; /* zinc-400 */
|
|
--accent: 16 185 129; /* emerald-500 */
|
|
--accent2: 5 150 105; /* emerald-600 */
|
|
--accent-text: 255 255 255; /* белый текст на акценте */
|
|
}
|
|
|
|
/* ── Тёмная тема ──────────────────────────────────────────────────────────── */
|
|
:root[data-theme='dark'] {
|
|
--bg: 10 10 10;
|
|
--surface: 20 20 20;
|
|
--surface2: 28 28 28;
|
|
--border: 42 42 42;
|
|
--text: 243 244 246; /* gray-100 */
|
|
--text-soft: 209 213 219; /* gray-300 */
|
|
--text-mute: 107 114 128; /* gray-500 */
|
|
--accent: 16 185 129;
|
|
--accent2: 52 211 153;
|
|
--accent-text: 0 0 0;
|
|
}
|
|
|
|
@layer base {
|
|
html { @apply bg-bg text-text; }
|
|
body { @apply font-sans antialiased; }
|
|
::selection { background: rgb(var(--accent) / 0.3); }
|
|
}
|
|
|
|
@layer components {
|
|
.btn { @apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded-lg font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed; }
|
|
.btn-primary { @apply btn; background: rgb(var(--accent)); color: rgb(var(--accent-text)); }
|
|
.btn-primary:hover:not(:disabled) { background: rgb(var(--accent2)); }
|
|
.btn-ghost { @apply btn; color: rgb(var(--text-soft)); }
|
|
.btn-ghost:hover:not(:disabled) { background: rgb(var(--surface2)); color: rgb(var(--text)); }
|
|
.btn-danger { @apply btn; background: rgb(220 38 38 / 0.1); color: rgb(248 113 113); }
|
|
.btn-danger:hover:not(:disabled) { background: rgb(220 38 38 / 0.2); }
|
|
.card { @apply rounded-xl; background: rgb(var(--surface)); border: 1px solid rgb(var(--border)); }
|
|
.input {
|
|
@apply w-full rounded-lg px-3 py-2 focus:outline-none transition-colors;
|
|
background: rgb(var(--surface2));
|
|
border: 1px solid rgb(var(--border));
|
|
color: rgb(var(--text));
|
|
}
|
|
.input::placeholder { color: rgb(var(--text-mute)); }
|
|
.input:focus { border-color: rgb(var(--accent)); }
|
|
.label { @apply block text-sm font-medium mb-1.5; color: rgb(var(--text-soft)); }
|
|
.hint { @apply text-xs mt-1; color: rgb(var(--text-mute)); }
|
|
}
|
|
|
|
/* ── Theme switch animation ──────────────────────────────────────────────── */
|
|
* {
|
|
transition: background-color 0.15s, border-color 0.15s, color 0.15s;
|
|
}
|