zedshaw.games/static/input_style.css

@import "tailwindcss";
@import "./theme.css" layer(theme);

body {
  @apply text-gray-950 dark:text-gray-50;
}

main {
  @apply flex flex-col justify-stretch items-center gap-4 p-0 min-h-screen bg-gray-200 text-black dark:bg-gray-900 dark:text-gray-50;
}

header {
  @apply flex flex-col justify-stretch items-center bg-gray-950;
}

footer {
  @apply bg-gray-950 text-gray-50 text-lg flex justify-center p-1;
}

@utility sticky-bottom {
  @apply w-full sticky bottom-0 left-0;
}

nav {
  @apply flex lg:w-4xl justify-center items-center *:text-gray-50 *:flex-1 *:text-xl w-full justify-evenly;
}

a {
  @apply underline;
}

nav > a {
  @apply flex justify-center items-center pt-1;
}

code {
  speak-as: literal-punctuation;
  @apply inline-block bg-gray-800 text-gray-50;
}

pre {
  @apply bg-gray-950 border-1 border-gray-600 mb-4 p-1;
}

pre > code {
  @apply !bg-gray-950 p-1;
}


h1 {
  @apply text-5xl mb-2 mt-4 sm:text-6xl;
}

h2 {
  @apply text-4xl mb-2 mt-4 sm:text-5xl;
}

h3 {
  @apply text-3xl mb-2 mt-4 sm:text-4xl;
}

h4 {
  @apply text-2xl mb-2 mt-4 sm:text-3xl;
}

h5 {
  @apply text-2xl mb-2 mt-4 sm:text-2xl;
}

details {
  @apply rounded-lg bg-gray-200 text-gray-950 p-2 text-xl;
}

aside {
  @apply flex rounded-none flex-col p-4 gap-4 bg-gray-300 text-gray-950 text-2xl dark:text-gray-50 font-semibold dark:bg-gray-800;
}

aside > mark {
  @apply p-1 rounded-sm bg-gray-300;
}

aside > mark.info {
  @apply bg-purple-300;
}

aside > mark.warning {
  @apply bg-yellow-300;
}

aside > mark.alert {
  @apply bg-red-300;
}

card {
  @apply flex flex-col bg-gray-200 dark:bg-gray-800 dark:text-gray-100 max-w-md rounded-lg shadow-lg outline;
}

card > top {
  @apply text-3xl font-bold text-center dark:text-gray-50;
}

card > top > img {
  @apply rounded-t-lg;
}

card > top > shape {
  @apply rounded-t-lg;
}

card > bottom {
  @apply flex text-gray-50 p-3 justify-stretch *:flex-1 gap-2;
}

card > middle {
  @apply flex flex-col text-xl p-4 gap-4;
}

label {
  @apply font-bold text-gray-950 dark: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;
}

blockquote {
  @apply border-l-5 border-gray-800 dark:border-black bg-gray-200 text-black dark:bg-gray-700 dark:text-white p-2;
}

@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 p-4 gap-4;
}

block.center-horizontal {
  @apply items-center;
}

block.center-vertical {
  @apply justify-center;
}

bar {
  @apply flex flex-col sm:flex-row p-4 gap-4;
}

bar.center-horizontal {
  @apply justify-center;
}

bar.center-vertical {
  @apply items-center;
}

stack {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
  grid-template-areas: "cover";
}

stack > * {
  width: 100%;
  height: 100%;
  position: relative;
  grid-area: cover;
}

stack > .top {
  z-index: 10;
}

grid {
  @apply grid gap-2 p-4;
}

hr {
  visibility: hidden;
}

select {
  @apply text-red-50 bg-gray-800 rounded-lg border-1 border-gray-600 p-1;
}

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;
}

@utility two-panel {
  @apply grid-rows-2 grid-cols-1 sm:grid-cols-2 sm:grid-rows-1;
}

@utility debug {
  @apply !border-1 !border-red-900;
}