dozzle/assets/main.css

@import "splitpanes/dist/splitpanes.css";

@define-mixin light {
  --base-lighter-color: 100% 0 0;
  --base-color: 97% 0 0;
  --base-darker-color: 90% 0 0;
  --base-content-color: 33% 0 0;
  --primary-color: 79.96% 0.143 176.65;
  --secondary-color: 82.67% 0.15380739746702807 77.82;
}

@define-mixin dark {
  --base-lighter-color: 25% 0 0;
  --base-color: 18% 0 0;
  --base-darker-color: 11% 0 0;
  --base-content-color: 89.23% 0 0;
  --primary-color: 70.96% 0.143 176.65;
  --secondary-color: 91.36% 0.11098 90.1243;
}

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

@layer base {
  :root {
    --p: var(--primary-color);
    --pc: 89.23% 0;
    --s: var(--secondary-color);
    --sc: 14.57% 0 0;
    --b1: var(--base-lighter-color);
    --b2: var(--base-color);
    --b3: var(--base-darker-color);
    --bc: var(--base-content-color);
    --in: 65% 0.171 249.5;
    --inc: 99% 0.171 249.5;
    --er: 64% 0.218 28.85;
    --erc: 99% 0.218 28.85;
    --n: var(--base-lighter-color);
  }
  html[data-theme="dark"] {
    @mixin dark;
  }
  @media (prefers-color-scheme: dark) {
    html {
      @mixin dark;
    }
  }
  html[data-theme="light"] {
    @mixin light;
  }
  @media (prefers-color-scheme: light) {
    html {
      @mixin light;
    }
  }
  @media screen and (max-device-width: 480px) {
    body {
      -webkit-text-size-adjust: 100%;
    }
  }

  h1 {
    @apply text-3xl;
  }

  h2 {
    @apply text-2xl;
  }

  h3 {
    @apply text-lg;
  }

  mark {
    @apply inline-block rounded-sm bg-secondary;
    animation: pops 200ms ease-out;
  }

  @keyframes pops {
    0% {
      transform: scale(1.5);
    }
    100% {
      transform: scale(1.05);
    }
  }
}

@layer components {
  .input {
    @apply !outline-none;
    &.input-ghost {
      @apply focus:border-transparent;
    }
  }

  .btn {
    @apply font-normal normal-case;
  }

  .btn:not(.btn-primary):not(.btn-secondary) {
    @apply hover:bg-base-lighter;
  }
}

@layer utilities {
  @media (max-width: 768px) {
    .mobile-hidden {
      display: none;
    }
  }

  .active-primary {
    --n: var(--p);
    --nc: var(--pc);
    @apply active;
  }

  .link-primary {
    @apply underline-offset-4 hover:underline;
  }
}