zedshaw-games/static/input_style.css

@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-950 dark:text-white;
}

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

block.horizontal {
  @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;
}