mirror of
https://github.com/markbeep/AudioBookRequest.git
synced 2026-01-12 08:49:34 -06:00
136 lines
3.6 KiB
CSS
136 lines
3.6 KiB
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%;
|
|
}
|