73128dc119
Darken the DaisyUI theme and game board colors for a muted, low-chroma aesthetic. Pieces use dark teal vs burgundy for subtle contrast. Add MD5-based cache busting to the DaisyUI stylesheet link so CSS changes are picked up without a hard refresh.
111 lines
3.2 KiB
CSS
111 lines
3.2 KiB
CSS
@import 'tailwindcss';
|
|
|
|
@source not "./daisyui{,*}.mjs";
|
|
@plugin "./daisyui.mjs";
|
|
@plugin "./daisyui-theme.mjs" {
|
|
name: "connect4";
|
|
default: true;
|
|
color-scheme: light;
|
|
|
|
/* Muted stealth — dark, subtle chroma */
|
|
--color-base-100: oklch(78% 0.008 260);
|
|
--color-base-200: oklch(72% 0.008 260);
|
|
--color-base-300: oklch(64% 0.008 260);
|
|
--color-base-content: oklch(22% 0.01 260);
|
|
|
|
--color-primary: oklch(38% 0.02 260);
|
|
--color-primary-content: oklch(90% 0.006 260);
|
|
--color-secondary: oklch(52% 0.015 260);
|
|
--color-secondary-content: oklch(22% 0.01 260);
|
|
--color-accent: oklch(48% 0.02 280);
|
|
--color-accent-content: oklch(90% 0.006 260);
|
|
--color-neutral: oklch(35% 0.015 260);
|
|
--color-neutral-content: oklch(88% 0.006 260);
|
|
|
|
--color-success: oklch(52% 0.02 160);
|
|
--color-success-content: oklch(22% 0.01 160);
|
|
--color-warning: oklch(58% 0.02 80);
|
|
--color-warning-content: oklch(28% 0.01 80);
|
|
--color-error: oklch(45% 0.03 20);
|
|
--color-error-content: oklch(90% 0.006 20);
|
|
--color-info: oklch(48% 0.02 250);
|
|
--color-info-content: oklch(22% 0.01 250);
|
|
|
|
--radius-selector: 0.5rem;
|
|
--radius-field: 0.5rem;
|
|
--radius-box: 0.75rem;
|
|
--border: 1px;
|
|
--depth: 0;
|
|
--noise: 0;
|
|
};
|
|
|
|
/* Game-specific styles that can't be Tailwind utilities */
|
|
.board {
|
|
display: flex;
|
|
gap: 8px;
|
|
background: #334;
|
|
padding: 16px;
|
|
border-radius: 12px;
|
|
}
|
|
.column { display: flex; flex-direction: column; gap: 8px; padding: 4px; border-radius: 8px; }
|
|
.column.clickable { cursor: pointer; }
|
|
.column.clickable:hover { background: rgba(255,255,255,0.08); }
|
|
.cell { width: 48px; height: 48px; border-radius: 50%; background: #556; transition: background 0.2s; }
|
|
.cell.red { background: #4a2a3a; }
|
|
.cell.yellow { background: #2a4545; }
|
|
.cell.winning { animation: pulse 0.5s ease-in-out infinite alternate; }
|
|
@keyframes pulse {
|
|
from { transform: scale(1); box-shadow: 0 0 4px rgba(0,0,0,0.15); }
|
|
to { transform: scale(1.03); box-shadow: 0 0 8px rgba(0,0,0,0.25); }
|
|
}
|
|
.player-chip { width: 20px; height: 20px; border-radius: 50%; background: #445; }
|
|
.player-chip.red { background: #4a2a3a; }
|
|
.player-chip.yellow { background: #2a4545; }
|
|
|
|
/* Snake game */
|
|
.snake-board {
|
|
display: inline-grid;
|
|
gap: 0;
|
|
background: #556;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
border: 3px solid #445;
|
|
}
|
|
.snake-row { display: contents; }
|
|
.snake-cell {
|
|
background: #667;
|
|
border: 1px solid rgba(0,0,0,0.08);
|
|
}
|
|
.snake-cell.snake-head {
|
|
border-radius: 4px;
|
|
animation: head-pop 50ms ease-out;
|
|
}
|
|
@keyframes head-pop {
|
|
0% { transform: scale(0.85); }
|
|
100% { transform: scale(1); }
|
|
}
|
|
.snake-cell.snake-food {
|
|
background: #334;
|
|
border-radius: 50%;
|
|
box-shadow: 0 0 3px rgba(0,0,0,0.2);
|
|
animation: food-pulse 1.2s ease-in-out infinite alternate;
|
|
}
|
|
@keyframes food-pulse {
|
|
from { box-shadow: 0 0 3px rgba(0,0,0,0.1); transform: scale(0.85); }
|
|
to { box-shadow: 0 0 6px rgba(0,0,0,0.2); transform: scale(1); }
|
|
}
|
|
.snake-cell.snake-dead {
|
|
opacity: 0.35;
|
|
filter: grayscale(0.5);
|
|
transition: opacity 400ms ease-out;
|
|
}
|
|
.snake-wrapper:focus { outline: none; }
|
|
|
|
/* Desaturate inline-styled snake body/head colors */
|
|
.snake-cell[style*="background"] {
|
|
filter: saturate(0) brightness(0.85);
|
|
}
|
|
.snake-cell.snake-head[style] {
|
|
box-shadow: none !important;
|
|
}
|