Files
dwroller/src/index.css
T
2025-08-15 10:35:27 +02:00

98 lines
1.7 KiB
CSS
Executable File

@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
body {
@apply min-h-screen text-slate-100 p-4 sm:p-6 md:p-10;
background: linear-gradient(to bottom right, rgb(12, 21, 37), rgb(19, 32, 58));
background-attachment: fixed;
}
#root {
@apply min-h-screen flex flex-col;
}
}
@layer components {
.app-container {
@apply mx-auto w-full max-w-6xl space-y-4 sm:space-y-6;
}
.header {
@apply flex items-center justify-between;
}
.title {
@apply text-3xl md:text-4xl font-extrabold tracking-tight;
}
.card {
@apply rounded-2xl bg-white/5 backdrop-blur border border-white/10 p-4 sm:p-5 shadow-xl;
}
.badge {
@apply text-xs px-2 py-1 rounded font-medium;
}
.badge-success {
@apply bg-emerald-600;
}
.badge-warning {
@apply bg-amber-500;
}
.badge-danger {
@apply bg-rose-600;
}
.input-field {
@apply w-full rounded-xl border border-white/10 bg-white/10 px-3 py-2;
}
.textarea-field {
@apply w-full rounded-xl border border-white/10 bg-white/10 px-3 py-2;
}
.select-field {
@apply input-field appearance-none pr-8;
}
.grid-layout {
@apply grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 sm:gap-6;
}
.result-group {
@apply space-y-4;
}
.section-title {
@apply text-xs uppercase tracking-wide text-slate-400;
}
.roll-stat {
@apply flex items-center gap-3;
}
.roll-card {
@apply rounded-xl border border-white/10 bg-black/20 p-3;
}
.roll-type {
@apply text-xs text-slate-400;
}
.roll-value {
@apply text-lg font-semibold;
}
.roll-info {
@apply text-xs text-slate-500 mt-1;
}
.progress-bar {
@apply h-2 w-full bg-white/10 rounded overflow-hidden;
}
}