git.iko.soy/crush
on 8ebab21 help sign in
crush/internal/cmd/stats/index.css
270 lines 4.3 kB history raw
1:root {
2 /* Dark mode colors - charmtone dark palette */
3 --bg: #201f26;
4 --bg-secondary: #2d2c35;
5 --text: #fffaf1;
6 --text-muted: #858392;
8 /* Charmtone colors (global - same in both light and dark modes) */
9 --charple: #6b50ff;
10 --cherry: #ff388b;
11 --julep: #00ffb2;
12 --urchin: #c337e0;
13 --butter: #fffaf1;
14 --squid: #858392;
15 --pepper: #201f26;
16 --iron: #4d4c57;
17 --tuna: #ff6daa;
18 --uni: #ff937d;
19 --coral: #ff577d;
20 --violet: #c259ff;
21 --malibu: #00a4ff;
22 --hazy: #8b75ff;
25/* Light mode colors - charmtone light palette */
26@media (prefers-color-scheme: light) {
27 :root {
28 --bg: #f0f0f0;
29 --bg-secondary: #fbfbfb;
30 --text: #201f26;
31 --text-muted: #4d4c57;
32 }
35* {
36 margin: 0;
37 padding: 0;
38 box-sizing: border-box;
41body {
42 font-family:
43 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
44 sans-serif;
45 background: var(--bg);
46 color: var(--text);
47 line-height: 1.6;
48 padding: 2rem 1rem;
51.container {
52 max-width: 1200px;
53 margin: 0 auto;
56.header-wrapper {
57 max-width: 1200px;
58 margin: 0 auto 2rem;
61.header-wrapper a {
62 display: block;
63 text-decoration: none;
66.header-content {
67 display: flex;
68 align-items: center;
69 width: 100%;
72.header-svg {
73 flex-grow: 1;
74 flex-shrink: 1;
75 min-width: 0;
76 overflow: hidden;
77 height: 70px;
78 display: flex;
79 align-items: center;
82.header-svg svg {
83 height: 70px;
84 width: auto;
85 min-width: 1300px;
86 display: block;
87 pointer-events: none;
90.heartbit-svg {
91 flex-shrink: 0;
92 width: 70px;
93 flex-basis: 70px;
94 margin-left: 1rem;
97.heartbit-svg svg {
98 width: 100%;
99 height: auto;
100 display: block;
103.header-info {
104 margin-bottom: 2rem;
105 font-size: 0.875rem;
106 color: var(--hazy);
107 font-family: "JetBrains Mono", "SF Mono", Consolas, monospace;
110.stats-grid {
111 display: flex;
112 flex-wrap: wrap;
113 gap: 1rem;
114 margin-bottom: 2rem;
115 width: 100%;
118.stat-card {
119 background: var(--bg-secondary);
120 border-radius: 12px;
121 padding: 1.5rem;
122 flex: 1 1 150px;
123 max-width: calc((100% - 5rem) / 6);
126@media (prefers-color-scheme: light) {
127 .stat-card {
128 background: var(--butter);
129 }
132@media (max-width: 1024px) {
133 .stat-card {
134 max-width: calc((100% - 2rem) / 3);
135 }
138@media (max-width: 600px) {
139 .stat-card {
140 max-width: calc((100% - 1rem) / 2);
141 }
144.stat-card h3 {
145 font-size: 0.75rem;
146 color: var(--text-muted);
147 text-transform: uppercase;
148 letter-spacing: 0.05em;
149 margin-bottom: 0.5rem;
152.stat-card .value {
153 font-size: 2rem;
154 font-weight: 700;
155 color: var(--butter);
156 white-space: nowrap;
159@media (prefers-color-scheme: light) {
160 .stat-card .value {
161 color: var(--pepper);
162 }
165.charts-grid {
166 display: flex;
167 flex-direction: column;
168 gap: 1.5rem;
169 margin-bottom: 2rem;
170 width: 100%;
173.chart-card {
174 background: var(--bg-secondary);
175 border-radius: 12px;
176 padding: 1.5rem;
177 width: 100%;
178 box-sizing: border-box;
181@media (prefers-color-scheme: light) {
182 .chart-card {
183 background: var(--butter);
184 }
187.chart-card.full-width {
188 width: 100%;
191.chart-row {
192 display: flex;
193 flex-wrap: wrap;
194 gap: 1.5rem;
195 width: 100%;
198.chart-row .chart-card {
199 flex: 1 1 300px;
200 max-width: calc((100% - 1.5rem) / 2);
203.chart-card h2 {
204 font-size: 1.25rem;
205 margin-bottom: 1rem;
206 color: var(--text);
209.chart-container {
210 position: relative;
211 height: 300px;
214.chart-container.tall {
215 height: 400px;
218table {
219 width: 100%;
220 border-collapse: collapse;
221 margin-top: 1rem;
224th,
225td {
226 text-align: left;
227 padding: 0.75rem;
228 border-bottom: 1px solid var(--border);
231th {
232 color: var(--text-muted);
233 font-weight: 500;
234 font-size: 0.875rem;
237td {
238 font-family: "JetBrains Mono", "SF Mono", Consolas, monospace;
241.model-tag {
242 background: var(--bg);
243 padding: 0.25rem 0.5rem;
244 border-radius: 4px;
245 font-size: 0.875rem;
248.footer-container {
249 max-width: 1200px;
250 margin: 2rem auto 0;
253.footer-container svg {
254 width: 100%;
255 height: auto;
256 display: block;
259/* Override charm brand colors in footer */
260.footer-container .st2 {
261 fill: #fffaf1 !important;
264@media (prefers-color-scheme: light) {
266 /* Override charm brand colors in footer */
267 .footer-container .st2 {
268 fill: #644ced !important;
269 }