mirror of
https://github.com/tiennm99/loto.git
synced 2026-10-11 12:19:05 +00:00
tiennm99
b399e54a47
Use CSS grid for uniform cell sizes, gradient accents, cleaner color palette, and footer with heart emoji link.
48 lines
898 B
CSS
48 lines
898 B
CSS
@import "tailwindcss";
|
|
|
|
:root {
|
|
--background: #f8fafc;
|
|
--foreground: #1e293b;
|
|
}
|
|
|
|
@theme inline {
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
--font-sans: var(--font-geist-sans);
|
|
--font-mono: var(--font-geist-mono);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--background: #0f172a;
|
|
--foreground: #e2e8f0;
|
|
}
|
|
}
|
|
|
|
body {
|
|
background: var(--background);
|
|
color: var(--foreground);
|
|
font-family: var(--font-sans), Arial, Helvetica, sans-serif;
|
|
}
|
|
|
|
/* Equal-width grid cells */
|
|
.loto-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(9, 1fr);
|
|
gap: 0;
|
|
}
|
|
|
|
/* Crossed cell diagonal line */
|
|
.cell-crossed::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 6px;
|
|
background-image: linear-gradient(
|
|
to bottom right,
|
|
transparent calc(50% - 1.5px),
|
|
#ef4444,
|
|
transparent calc(50% + 1.5px)
|
|
);
|
|
pointer-events: none;
|
|
}
|