@import "tailwindcss"; @import "./theme.css" layer(theme); body { @apply text-gray-950 dark:text-gray-50; } header { @apply flex bg-gray-950 *:text-gray-50 *:flex-1 *:text-xl p-6; } footer { @apply bg-gray-950 text-gray-50 text-lg flex p-6; } h1 { @apply text-6xl pb-4; } h2 { @apply text-5xl pb-4; } h3 { @apply text-4xl pb-4; } h4 { @apply text-3xl pb-4; } h5 { @apply text-2xl pb-4; } card { @apply flex flex-col bg-gray-800 max-w-md rounded-xl shadow-lg outline; } card > top { @apply text-3xl font-bold text-center text-gray-50; } card > bottom { @apply flex text-gray-50 p-3 justify-stretch *:flex-1 gap-2; } card > middle { @apply flex flex-col text-xl bg-gray-800 p-6 gap-4; } label { @apply font-bold text-gray-100; } input { @apply shadow-sm outline rounded-sm p-1 bg-gray-200 text-gray-950 dark:text-gray-950; } input::placeholder { @apply text-gray-700 dark:text-gray-700; } button { @apply rounded-sm shadow-sm bg-gray-600 text-gray-50 dark:bg-gray-300 dark:text-gray-950 p-3; } @utility btn-hover { @apply bg-gray-900! text-gray-50!; } @utility btn-alert { @apply bg-red-800! text-gray-50!; } @utility btn-warning { @apply bg-yellow-800! text-gray-50!; } @utility btn-primary { @apply bg-teal-300! text-gray-950!; } shape { @apply bg-gray-300 flex flex-col justify-center items-center aspect-square p-1 text-gray-950; } shape.tiny { @apply min-w-15 w-15 max-w-15 p-0; } shape.xxs { @apply min-w-30 w-30 max-w-30 p-0; } shape.xs { @apply min-w-xs w-xs max-w-xs; } shape.sm { @apply min-w-sm w-sm max-w-sm; } shape.md { @apply min-w-md w-md max-w-md; } shape.lg { @apply min-w-lg w-lg max-w-lg; } shape.xl { @apply min-w-xl w-xl max-w-xl; } shape.video { @apply w-full aspect-video; } block { @apply flex flex-col pl-4 pr-4 pb-10 pt-4 gap-4; } bar { @apply flex flex-row p-4 gap-4; } stack { color: hsl(0, 0%, calc(var(--text) * var(--value-scale))); display: grid; grid-template-rows: 1fr; grid-template-columns: 1fr; grid-template-areas: "cover"; } stack > * { color: hsl(0, 0%, calc(var(--text) * var(--value-scale))); width: 100%; height: 100%; position: relative; grid-area: cover; } stack > .top { z-index: 10; } grid { @apply grid gap-2 p-4; } hr { visibility: hidden; } table { @apply bg-gray-200 dark:bg-gray-800 shadow-lg rounded-sm; } @utility table-header { @apply text-gray-50 bg-gray-950 *:border-x *:border-black; } @utility table-row { @apply *:border-2 *:border-black *:p-1 hover:bg-gray-100 hover:text-gray-950; }