Commit 8a81093e authored by Mahmoud Aglan's avatar Mahmoud Aglan

Tone down facility surface: much subtler green, thinner border, cells fill grid

The surface was too saturated and the boundary too dark/thick. Now barely
tinted with very faded colors that don't scream at you.
Co-Authored-By: 's avatarClaude Opus 4.6 <noreply@anthropic.com>
parent 08f1efaf
@import 'tailwindcss'; @import 'tailwindcss';
@theme { @theme {
--color-surface-field: oklch(0.95 0.025 145); --color-surface-field: oklch(0.98 0.008 145);
--color-surface-pool: oklch(0.94 0.035 220); --color-surface-pool: oklch(0.97 0.012 220);
--color-surface-court: oklch(0.94 0.02 65); --color-surface-court: oklch(0.97 0.008 65);
--color-surface-neutral: oklch(0.96 0.005 260); --color-surface-neutral: oklch(0.98 0.003 260);
--color-boundary-field: oklch(0.40 0.12 150); --color-boundary-field: oklch(0.75 0.06 150);
--color-boundary-pool: oklch(0.40 0.14 230); --color-boundary-pool: oklch(0.70 0.08 230);
--color-boundary-court: oklch(0.45 0.08 55); --color-boundary-court: oklch(0.72 0.05 55);
--color-boundary-neutral: oklch(0.50 0.02 260); --color-boundary-neutral: oklch(0.78 0.01 260);
--color-line-field: oklch(0.82 0.04 145); --color-line-field: oklch(0.90 0.015 145);
--color-line-pool: oklch(0.78 0.06 220); --color-line-pool: oklch(0.88 0.02 220);
--color-line-court: oklch(0.80 0.03 60); --color-line-court: oklch(0.88 0.015 60);
--color-line-neutral: oklch(0.85 0.008 260); --color-line-neutral: oklch(0.90 0.005 260);
} }
@layer components { @layer components {
.facility-surface { .facility-surface {
display: grid; display: grid;
gap: 0; gap: 0;
border-radius: 1rem; border-radius: 0.75rem;
overflow: hidden; overflow: hidden;
border: 3px solid var(--surface-boundary); border: 2px solid var(--surface-boundary);
box-shadow: inset 0 2px 12px oklch(0 0 0 / 0.06);
background: var(--surface-bg); background: var(--surface-bg);
--surface-line: var(--color-line-neutral); --surface-line: var(--color-line-neutral);
--surface-bg: var(--color-surface-neutral); --surface-bg: var(--color-surface-neutral);
...@@ -31,6 +30,7 @@ ...@@ -31,6 +30,7 @@
.facility-surface > * { .facility-surface > * {
border-color: var(--surface-line); border-color: var(--surface-line);
min-height: 0;
} }
.facility-surface--field, .facility-surface--field,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment