AudioBookRequest/static/tw.css

@import "tailwindcss";
@plugin "daisyui";

/* Enables dark mode specific styling with "dark:" */
@custom-variant dark (&:where(.dark, .dark *));

@plugin "daisyui/theme" {
  name: "nord";
  default: true;
  prefersdark: false;
  color-scheme: "light";
  --color-base-100: oklch(95.127% 0.007 260.731);
  --color-base-200: oklch(93.299% 0.01 261.788);
  --color-base-300: oklch(89.925% 0.016 262.749);
  --color-base-content: oklch(32.437% 0.022 264.182);
  --color-primary: oklch(59.435% 0.077 254.027);
  --color-primary-content: oklch(11.887% 0.015 254.027);
  --color-secondary: oklch(69.651% 0.059 248.687);
  --color-secondary-content: oklch(13.93% 0.011 248.687);
  --color-accent: oklch(77.464% 0.062 217.469);
  --color-accent-content: oklch(15.492% 0.012 217.469);
  --color-neutral: oklch(45.229% 0.035 264.131);
  --color-neutral-content: oklch(89.925% 0.016 262.749);
  --color-info: oklch(69.207% 0.062 332.664);
  --color-info-content: oklch(13.841% 0.012 332.664);
  --color-success: oklch(76.827% 0.074 131.063);
  --color-success-content: oklch(15.365% 0.014 131.063);
  --color-warning: oklch(85.486% 0.089 84.093);
  --color-warning-content: oklch(17.097% 0.017 84.093);
  --color-error: oklch(60.61% 0.12 15.341);
  --color-error-content: oklch(12.122% 0.024 15.341);
  --radius-selector: 1rem;
  --radius-field: 0.25rem;
  --radius-box: 0.5rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1px;
  --depth: 0;
  --noise: 0;
}

@plugin "daisyui/theme" {
  name: "night";
  default: false;
  prefersdark: false;
  color-scheme: "dark";
  --color-base-100: oklch(20.768% 0.039 265.754);
  --color-base-200: oklch(19.314% 0.037 265.754);
  --color-base-300: oklch(17.86% 0.034 265.754);
  --color-base-content: oklch(84.153% 0.007 265.754);
  --color-primary: oklch(75.351% 0.138 232.661);
  --color-primary-content: oklch(15.07% 0.027 232.661);
  --color-secondary: oklch(68.011% 0.158 276.934);
  --color-secondary-content: oklch(13.602% 0.031 276.934);
  --color-accent: oklch(72.36% 0.176 350.048);
  --color-accent-content: oklch(14.472% 0.035 350.048);
  --color-neutral: oklch(27.949% 0.036 260.03);
  --color-neutral-content: oklch(85.589% 0.007 260.03);
  --color-info: oklch(68.455% 0.148 237.251);
  --color-info-content: oklch(0% 0 0);
  --color-success: oklch(78.452% 0.132 181.911);
  --color-success-content: oklch(15.69% 0.026 181.911);
  --color-warning: oklch(83.242% 0.139 82.95);
  --color-warning-content: oklch(16.648% 0.027 82.95);
  --color-error: oklch(71.785% 0.17 13.118);
  --color-error-content: oklch(14.357% 0.034 13.118);
  --radius-selector: 1rem;
  --radius-field: 0.5rem;
  --radius-box: 1rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1px;
  --depth: 0;
  --noise: 0;
}

.error-alert {
  @apply !bg-error;
}

.success-alert {
  @apply !bg-success;
}

.info-alert {
  @apply !bg-info;
}

.slider-round {
  height: 10px;
}

.slider-round .noUi-handle {
  height: 18px;
  width: 18px;
  top: -5px;
  right: -9px; /* half the width */
  border-radius: 9px;
}

.light-dark-toggle {
  position: relative;
  display: inline-grid;
  cursor: pointer;
  place-content: center;
  vertical-align: middle;
  webkit-user-select: none;
  user-select: none;
  input {
    appearance: none;
    border: none;
  }
  > * {
    grid-column-start: 1;
    grid-row-start: 1;
    transition-property: transform, rotate, opacity;
    transition-duration: 0.2s;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

.DARKCLASS .theme-light {
  rotate: 45deg;
  opacity: 0%;
}

.theme-dark {
  rotate: 45deg;
  opacity: 0%;
}

.DARKCLASS .theme-dark {
  rotate: 0deg;
  opacity: 100%;
}