Files

57 lines
1.5 KiB
CSS

@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
body {
@apply bg-base text-ink font-sans antialiased;
background-image: radial-gradient(ellipse 70% 45% at 50% -10%, rgba(63, 211, 122, 0.07), transparent 70%);
background-attachment: fixed;
}
::selection {
@apply bg-accent/30 text-ink;
}
a:focus-visible,
button:focus-visible,
input:focus-visible {
@apply outline-none ring-2 ring-accent ring-offset-2 ring-offset-base;
}
}
@layer components {
.panel {
@apply bg-base-panel border border-base-border rounded-xl;
background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0) 40%);
box-shadow:
0 1px 0 0 rgba(255, 255, 255, 0.04) inset,
0 12px 32px -16px rgba(0, 0, 0, 0.65);
}
.stat-label {
@apply text-xs uppercase tracking-wider text-ink-muted font-mono;
}
.mono {
@apply font-mono text-sm;
}
/* Subtle lift + accent-tinted background on interactive rows, used
across search results, tables, and lists so it's consistent everywhere. */
.row-interactive {
@apply transition-all duration-150;
}
.row-interactive:hover {
background-color: rgba(63, 211, 122, 0.05);
}
/* Clearly visible separation between stacked list rows — a plain 1px
divide-y read as almost invisible once rows have very different
heights (e.g. a session with 15 map names next to one with 2). */
.row-divide > * + * {
border-top-width: 2px;
border-top-color: theme('colors.base.divider');
}
}