| 218 |
218 |
|
padding: 0;
|
| 219 |
219 |
|
}
|
| 220 |
220 |
|
|
| 221 |
|
- |
/* 3. Design System Variables (Neobrute) */
|
|
221 |
+ |
/* 3. Design System Variables (Platinum-informed) */
|
| 222 |
222 |
|
:root {
|
| 223 |
223 |
|
/* Day-plan timeline slot height (1 slot = 15 min). Mobile bumps this for fat-finger touch.
|
| 224 |
224 |
|
JS reads it via getComputedStyle so the height: in .timeline-slot stays in sync with
|
| 225 |
225 |
|
positioning math in day-planning-render.js / day-planning.js. */
|
| 226 |
226 |
|
--timeline-slot-h: 12px;
|
| 227 |
227 |
|
|
| 228 |
|
- |
/* --- NEOBRUTE DESIGN SYSTEM */
|
| 229 |
|
- |
/* Clean neobrutalism: bold borders, flat by default, offset shadows on actions + floats */
|
|
228 |
+ |
/* --- PLATINUM-INFORMED DESIGN SYSTEM */
|
|
229 |
+ |
/* Mac OS 8 Platinum, informed rather than copied: two-tone bevels, square
|
|
230 |
+ |
corners, a neutral ramp, instant state changes, native window chrome.
|
|
231 |
+ |
Grew out of the neobrutalist system it replaces, which is why the token
|
|
232 |
+ |
shapes (border width, radius scale, offset shadows) carry over intact. */
|
| 230 |
233 |
|
|
| 231 |
234 |
|
/* --- INTENT LAYER (themeable)
|
| 232 |
235 |
|
Resolved intent tokens, applied at runtime by js/themes.js (setProperty
|
| 233 |
236 |
|
on :root). Defaults below are the "goingson" titular theme for first
|
| 234 |
|
- |
paint; theme-common resolves every theme, including the derived states
|
| 235 |
|
- |
(action-hover/active, selection, row-stripe, status surfaces), so this
|
|
237 |
+ |
paint; makeover resolves every theme, including the derived states
|
|
238 |
+ |
(action-hover/active, border-strong, hover-surface, overlay), so this
|
| 236 |
239 |
|
is one shared mapping across audiofiles / Balanced Breakfast / MNW. */
|
| 237 |
|
- |
--surface-page: #E0E4FA;
|
| 238 |
|
- |
--surface-raised: #FFFFFF;
|
|
240 |
+ |
--surface-page: #AEB6DC;
|
|
241 |
+ |
--surface-raised: #D9DDF4;
|
| 239 |
242 |
|
--surface-sunken: #BAC2E6;
|
| 240 |
243 |
|
--surface-overlay: #CDD3F0;
|
| 241 |
244 |
|
--content: #000000;
|
| 248 |
251 |
|
--success: #5CB85C;
|
| 249 |
252 |
|
--warning: #F7D154;
|
| 250 |
253 |
|
--info: #17A2B8;
|
| 251 |
|
- |
--border: #000000;
|
| 252 |
|
- |
--border-strong: #000000;
|
|
254 |
+ |
--border: #4A5077;
|
|
255 |
+ |
--border-strong: #3D4268;
|
| 253 |
256 |
|
--focus-ring: #6196ff;
|
| 254 |
257 |
|
--hover-surface: #bac2e6;
|
| 255 |
258 |
|
--category-one: #DC3545;
|
| 258 |
261 |
|
--category-four: #F7D154;
|
| 259 |
262 |
|
--category-five: #7B68EE;
|
| 260 |
263 |
|
--category-six: #17A2B8;
|
| 261 |
|
- |
--overlay: rgba(1, 1, 8, 0.5);
|
|
264 |
+ |
--overlay: rgba(1, 0, 16, 0.5);
|
| 262 |
265 |
|
|
| 263 |
266 |
|
/* --- APP-LOCAL (not theme intents)
|
| 264 |
267 |
|
GoingsOn's component CSS references the intent tokens above directly;
|
| 265 |
|
- |
no brand aliases. Only the neobrute border width is app-local now;
|
| 266 |
|
- |
overlay/scrim is a theme intent (theme-common 0.7.0). */
|
| 267 |
|
- |
--border-width: 2px;
|
| 268 |
|
- |
--border-width-sm: 2px;
|
|
268 |
+ |
no brand aliases. Geometry stays app-local by contract: a theme
|
|
269 |
+ |
overrides color only, so border width, bevel thickness, radius,
|
|
270 |
+ |
density and type never leave this file. */
|
|
271 |
+ |
--border-width: 1px;
|
|
272 |
+ |
--border-width-sm: 1px;
|
|
273 |
+ |
|
|
274 |
+ |
/* Bevel tones. Named for the intents makeover will emit; until the crate
|
|
275 |
+ |
ships them, color-mix derives the same two colors from whatever
|
|
276 |
+ |
surface the active theme resolved. Adopting the crate version is
|
|
277 |
+ |
deleting these two lines. */
|
|
278 |
+ |
--bevel-light: color-mix(in oklab, var(--surface-raised) 48%, #FFFFFF);
|
|
279 |
+ |
--bevel-dark: color-mix(in oklab, var(--surface-raised) 58%, #000000);
|
|
280 |
+ |
|
|
281 |
+ |
/* The two-tone bevel. Raised is lit from the top left; inset is the same
|
|
282 |
+ |
bevel inverted, which is also the pressed state for anything raised. */
|
|
283 |
+ |
--bevel-raised: inset 1px 1px 0 var(--bevel-light),
|
|
284 |
+ |
inset -1px -1px 0 var(--bevel-dark);
|
|
285 |
+ |
--bevel-inset: inset 1px 1px 0 var(--bevel-dark),
|
|
286 |
+ |
inset -1px -1px 0 var(--bevel-light);
|
| 269 |
287 |
|
|
| 270 |
288 |
|
/* Shadow offset scale (used by 3D action elements only) */
|
| 271 |
289 |
|
--shadow-offset-xs: 1px;
|
| 281 |
299 |
|
--shadow-brutal-xl: var(--shadow-offset-xl) var(--shadow-offset-xl) 0 var(--border);
|
| 282 |
300 |
|
|
| 283 |
301 |
|
/* Border radius scale */
|
| 284 |
|
- |
--radius-xs: 3px; /* Scrollbars, tiny elements */
|
| 285 |
|
- |
--radius-sm: 5px; /* Buttons, inputs, small cards */
|
| 286 |
|
- |
--radius-md: 5px; /* Cards, buttons, uniform */
|
| 287 |
|
- |
--radius-lg: 10px; /* Modals, large panels */
|
| 288 |
|
- |
--radius-xl: 20px; /* Pills, capsules */
|
| 289 |
|
- |
--radius-full: 50%; /* Circles */
|
|
302 |
+ |
--radius-xs: 0; /* Scrollbars, tiny elements */
|
|
303 |
+ |
--radius-sm: 4px; /* Buttons, inputs, small cards: the one place a corner survives */
|
|
304 |
+ |
--radius-md: 0; /* Cards, panels */
|
|
305 |
+ |
--radius-lg: 0; /* Modals, large panels */
|
|
306 |
+ |
--radius-xl: 0; /* Was pills and capsules; square under Platinum */
|
|
307 |
+ |
--radius-full: 50%; /* Circles: avatars, status dots */
|
| 290 |
308 |
|
|
| 291 |
309 |
|
/* Layout widths */
|
| 292 |
310 |
|
--width-container: 1400px;
|
| 359 |
377 |
|
.form-select--compact { width: auto; min-width: 120px; }
|
| 360 |
378 |
|
|
| 361 |
379 |
|
/* --- SETTINGS UTILITIES */
|
| 362 |
|
- |
.settings-divider { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 2px solid var(--border); }
|
|
380 |
+ |
.settings-divider { margin-top: 1.5rem; padding-top: 1.5rem; border-top: var(--border-width) solid var(--border); }
|
| 363 |
381 |
|
.settings-heading { margin-bottom: 1rem; font-family: var(--font-heading); }
|
| 364 |
382 |
|
.settings-desc { font-size: 0.875rem; color: var(--content-secondary); margin-bottom: 1rem; }
|
| 365 |
383 |
|
|
| 373 |
391 |
|
gap: 0.5rem;
|
| 374 |
392 |
|
padding: 0.5rem;
|
| 375 |
393 |
|
background: var(--surface-overlay);
|
| 376 |
|
- |
border-radius: 4px;
|
|
394 |
+ |
border-radius: var(--radius-sm);
|
| 377 |
395 |
|
margin-bottom: 0.5rem;
|
| 378 |
396 |
|
}
|
| 379 |
397 |
|
.subtask-item--linked {
|