fastapi-svelte-template/frontend/src/app.css

/* This file imports all styles defined in other files. */
@import "./fonts.css";

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Global defaults */

@layer base {
  body {
    @apply bg-background;
    @apply text-primary;
    @apply flex flex-col gap-4 justify-between;
    @apply min-h-screen;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-bold text-primary;
  }

  h1 {
    @apply text-5xl;
  }
  h2 {
    @apply text-4xl;
  }
  h3 {
    @apply text-3xl;
  }
  h4 {
    @apply text-2xl;
  }
  h5 {
    @apply text-xl;
  }
  h6 {
    @apply text-lg;
  }

  a {
    @apply underline text-primary-300;
  }
  a:visited {
    @apply underline text-primary-400;
  }
}

@layer components {
  button {
    @apply p-2;
    @apply rounded-md;
    @apply bg-accent;
    @apply text-primary-400 font-semibold;
    @apply drop-shadow-md;
    @apply transition-all ease-in-out;
  }
  button:hover {
    @apply bg-accent-600;
    @apply drop-shadow-lg;
    @apply text-primary font-bold;
  }
  button:active {
    @apply bg-accent-700;
    @apply drop-shadow-none;
    @apply text-primary-600;
  }
  button:focus {
    @apply ring-2 ring-accent-600;
  }
  button:disabled {
    @apply opacity-25;
    @apply cursor-not-allowed;
  }
  button:disabled:hover {
    @apply bg-accent;
    @apply text-primary-400 font-semibold;
    @apply cursor-not-allowed;
  }
  button.outlineButton {
    @apply bg-secondary/20;
    @apply border-2 border-secondary;
    @apply text-secondary font-medium;
  }
  button.outlineButton:hover {
    @apply bg-secondary;
    @apply text-secondary-900 font-bold;
  }
  button.outlineButton:active {
    @apply bg-secondary-600;
    @apply text-secondary-900;
  }
  button.outlineButton:focus {
    @apply ring-secondary-400;
  }
  button.outlineButton:disabled {
    @apply opacity-25;
  }
  button.outlineButton:disabled:hover {
    @apply bg-secondary/20;
    @apply text-secondary font-medium;
    @apply cursor-not-allowed;
  }
  a.button {
    @apply p-2;
    @apply rounded-md;
    @apply bg-accent;
    @apply text-primary-400 font-semibold;
    @apply no-underline;
    @apply drop-shadow-md;
    @apply transition-all ease-in-out;
  }
  a.button:hover {
    @apply bg-accent-600;
    @apply drop-shadow-lg;
    @apply text-primary font-bold;
  }
  a.button:active {
    @apply bg-accent-700;
    @apply drop-shadow-none;
    @apply text-primary-600;
  }
  a.button:focus {
    @apply ring-2 ring-accent-600;
  }
  a.button:disabled {
    @apply opacity-25;
    @apply bg-neutral-100;
  }

  table {
    @apply border-collapse;
  }
  th:first-of-type {
    @apply rounded-tl-md;
  }
  th:last-of-type {
    @apply rounded-tr-md;
  }
  tr:last-of-type td:first-of-type {
    @apply rounded-bl-md;
  }
  tr:last-of-type td:last-of-type {
    @apply rounded-br-md;
  }
  tr:first-of-type, tr:last-of-type {
    @apply border-y-0;
  }
  tr:nth-child(odd) {
    @apply bg-secondary/5;
  }
  tr:nth-child(even) {
    @apply bg-secondary/20;
  }
  tr {
    @apply hover:bg-accent/25;
  }
  th {
    @apply bg-primary font-semibold text-secondary-100;
    @apply p-1;
  }
  td {
    @apply p-1;
  }
  caption {
    @apply p-1 text-start font-semibold text-xl;
  }

  fieldset {
    @apply border border-primary/50;
    @apply rounded-lg;
    @apply p-4;
  }
  legend {
    @apply text-primary/50 font-light;
  }
  input {
    @apply text-primary font-semibold;
    @apply border border-secondary;
    @apply bg-secondary/20;
    @apply rounded-md;
    @apply p-1;
  }
  input::placeholder {
    @apply text-secondary/50 font-light;
  }
  input:focus {
    @apply outline-none border-none ring-2 ring-secondary;
  }
  label {
    @apply text-sm text-secondary font-light;
  }
  select {
    @apply text-primary font-semibold;
    @apply border border-secondary;
    @apply bg-secondary/20;
    @apply rounded-md;
    @apply p-1;
  }

  ul {
    @apply list-inside list-disc;
  }
  ol {
    @apply list-inside list-decimal;
  }
}