Nikolay Tatarinov
d27eb2651e
- Updated .dockerignore to exclude backup directory with root-only permissions from build context. - Added new CSS variables for card radius and transition duration in app.css. - Implemented consistent focus ring styles for interactive elements to improve accessibility. - Refactored card components across various pages to utilize a unified card style, enhancing visual consistency. - Improved button styles with touch manipulation support for better user interaction on mobile devices.
108 lines
3.0 KiB
CSS
108 lines
3.0 KiB
CSS
@import "tailwindcss";
|
|
@plugin "daisyui" {
|
|
themes: light --default;
|
|
}
|
|
|
|
/* Custom light theme — OKLCH matching the dark theme's violet palette */
|
|
@plugin "daisyui/theme" {
|
|
name: "light";
|
|
color-scheme: light;
|
|
--color-primary: oklch(50% 0.22 277);
|
|
--color-primary-content: oklch(100% 0 0);
|
|
--color-secondary: oklch(52% 0.22 293);
|
|
--color-secondary-content: oklch(100% 0 0);
|
|
--color-accent: oklch(55% 0.14 203);
|
|
--color-accent-content: oklch(100% 0 0);
|
|
--color-neutral: oklch(25% 0.02 249);
|
|
--color-neutral-content: oklch(98% 0.005 249);
|
|
--color-base-100: oklch(99% 0.005 250);
|
|
--color-base-200: oklch(96% 0.008 251);
|
|
--color-base-300: oklch(92% 0.01 250);
|
|
--color-base-content: oklch(22% 0.02 249);
|
|
--color-info: oklch(55% 0.15 250);
|
|
--color-success: oklch(55% 0.16 155);
|
|
--color-warning: oklch(75% 0.15 85);
|
|
--color-error: oklch(55% 0.22 25);
|
|
}
|
|
|
|
@plugin "daisyui/theme" {
|
|
name: "dark";
|
|
prefersdark: true;
|
|
color-scheme: dark;
|
|
--color-primary: oklch(54.6% 0.245 277);
|
|
--color-primary-content: oklch(100% 0 0);
|
|
--color-secondary: oklch(55.5% 0.25 293);
|
|
--color-secondary-content: oklch(100% 0 0);
|
|
--color-accent: oklch(65.5% 0.155 203);
|
|
--color-accent-content: oklch(100% 0 0);
|
|
--color-neutral: oklch(27.5% 0.014 249);
|
|
--color-neutral-content: oklch(74.7% 0.016 249);
|
|
--color-base-100: oklch(21.2% 0.014 251);
|
|
--color-base-200: oklch(18.8% 0.013 253);
|
|
--color-base-300: oklch(16.5% 0.011 250);
|
|
--color-base-content: oklch(74.7% 0.016 249);
|
|
}
|
|
|
|
@theme {
|
|
--font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
|
|
--font-mono: 'JetBrains Mono', ui-monospace, monospace;
|
|
--radius-card: 1rem;
|
|
--duration-transition: 200ms;
|
|
}
|
|
|
|
html,
|
|
body,
|
|
#__nuxt {
|
|
height: 100%;
|
|
}
|
|
|
|
/* Consistent focus ring for interactive elements */
|
|
@layer components {
|
|
.focus-ring:focus-visible {
|
|
outline: none;
|
|
box-shadow: 0 0 0 2px var(--color-base-100), 0 0 0 4px var(--color-primary);
|
|
}
|
|
button:focus-visible,
|
|
[type="button"]:focus-visible,
|
|
[type="submit"]:focus-visible,
|
|
[type="reset"]:focus-visible,
|
|
a[href]:focus-visible,
|
|
input:focus-visible,
|
|
select:focus-visible,
|
|
textarea:focus-visible,
|
|
[role="button"]:focus-visible {
|
|
outline: none;
|
|
box-shadow: 0 0 0 2px var(--color-base-100), 0 0 0 4px var(--color-primary);
|
|
}
|
|
/* Unified card style */
|
|
.card-app {
|
|
@apply rounded-xl shadow-xl border border-base-300/50 bg-base-100;
|
|
}
|
|
.card-app.card-bg-base-200 {
|
|
@apply bg-base-200;
|
|
}
|
|
/* Modal box aligned with cards */
|
|
.modal-box {
|
|
@apply rounded-xl border border-base-300/50;
|
|
}
|
|
/* Primary button: subtle transition, no per-page scale */
|
|
.btn-primary {
|
|
@apply transition-[transform,color,background-color] duration-200;
|
|
}
|
|
}
|
|
|
|
@keyframes login-card-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(1rem);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.login-card {
|
|
animation: login-card-in 0.3s ease-out;
|
|
}
|