dtoro
532932057f
Replace Info icon with braille mule art in the right sidebar empty state. Lighten text-muted (#a8997d → #c4b599) and text-faint (#5e5448 → #7a6e5e) for better readability across the app. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
83 lines
2.3 KiB
CSS
83 lines
2.3 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
:root {
|
|
--color-bg: #1a1424;
|
|
--color-surface: #221c2f;
|
|
--color-surface-2: #2a2339;
|
|
--color-surface-offset: #352c46;
|
|
--color-border: rgba(240, 193, 136, 0.10);
|
|
--color-text: #f0e6d2;
|
|
--color-text-muted: #c4b599;
|
|
--color-text-faint: #7a6e5e;
|
|
--color-primary: #e8965a;
|
|
--color-pick: #8aaa5a;
|
|
--color-reject: #d06464;
|
|
--color-star: #f0c188;
|
|
}
|
|
|
|
body {
|
|
@apply bg-bg text-text;
|
|
font-family: 'Geist', system-ui, sans-serif;
|
|
}
|
|
}
|
|
|
|
/* Compact themed scrollbars. Track is fully transparent so the bar
|
|
floats over the panel surface, and the thumb is a slim translucent
|
|
pill that tints toward the primary on hover. Firefox uses the
|
|
`scrollbar-*` properties below; Chromium / WebKit uses the
|
|
`::-webkit-scrollbar*` rules. */
|
|
* {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: rgba(240, 230, 210, 0.18) transparent;
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track,
|
|
::-webkit-scrollbar-corner {
|
|
background: transparent;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background-color: rgba(240, 230, 210, 0.18);
|
|
border-radius: 9999px;
|
|
/* Inset border keeps the thumb visually slimmer than the track gutter
|
|
so it reads as a pill rather than a bar. */
|
|
border: 1px solid transparent;
|
|
background-clip: padding-box;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background-color: rgba(232, 150, 90, 0.55); /* primary, soft */
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:active {
|
|
background-color: rgba(232, 150, 90, 0.85);
|
|
}
|
|
|
|
/* Mule walk cycle — 3x2 sprite sheet (6 frames). Each keyframe holds
|
|
for one step thanks to `steps(1)` so the background snaps frame-to-frame
|
|
instead of interpolating. */
|
|
@keyframes mule-walk {
|
|
0% { background-position: 0% 0%; }
|
|
16.66% { background-position: 50% 0%; }
|
|
33.33% { background-position: 100% 0%; }
|
|
50% { background-position: 0% 100%; }
|
|
66.66% { background-position: 50% 100%; }
|
|
83.33% { background-position: 100% 100%; }
|
|
100% { background-position: 0% 0%; }
|
|
}
|
|
|
|
/* Parallax desert scroll — moves the desert layer right→left by exactly
|
|
one tile width so the loop is seamless. The tile width is fixed in
|
|
CSS (see TopBar.tsx) so the keyframe end value matches. */
|
|
@keyframes desert-scroll {
|
|
from { background-position-x: 0px, 0px; }
|
|
to { background-position-x: -200px, 0px; }
|
|
} |