404 lines
8.6 KiB
CSS
404 lines
8.6 KiB
CSS
|
/* Design System Variables */
|
||
|
|
/* Generated from design-system.toml */
|
||
|
|
/* Do not edit manually */
|
||
|
|
|
||
|
|
:root {
|
||
|
|
/* Breakpoints */
|
||
|
|
--breakpoint-xs: 320px;
|
||
|
|
--breakpoint-sm: 640px;
|
||
|
|
--breakpoint-md: 768px;
|
||
|
|
--breakpoint-lg: 1024px;
|
||
|
|
--breakpoint-xl: 1280px;
|
||
|
|
--breakpoint-xxl: 1536px;
|
||
|
|
|
||
|
|
/* Colors */
|
||
|
|
--color-brand-primary: #3b82f6;
|
||
|
|
--color-brand-secondary: #6366f1;
|
||
|
|
--color-brand-accent: #f59e0b;
|
||
|
|
--color-success: #10b981;
|
||
|
|
--color-warning: #f59e0b;
|
||
|
|
--color-error: #ef4444;
|
||
|
|
--color-info: #06b6d4;
|
||
|
|
--color-neutral-50: #f9fafb;
|
||
|
|
--color-neutral-100: #f3f4f6;
|
||
|
|
--color-neutral-200: #e5e7eb;
|
||
|
|
--color-neutral-300: #d1d5db;
|
||
|
|
--color-neutral-400: #9ca3af;
|
||
|
|
--color-neutral-500: #6b7280;
|
||
|
|
--color-neutral-600: #4b5563;
|
||
|
|
--color-neutral-700: #374151;
|
||
|
|
--color-neutral-800: #1f2937;
|
||
|
|
--color-neutral-900: #111827;
|
||
|
|
--color-neutral-950: #030712;
|
||
|
|
|
||
|
|
/* Typography */
|
||
|
|
--font-sans: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
||
|
|
--font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
|
||
|
|
--font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
|
||
|
|
--text-xs: 0.75rem;
|
||
|
|
--text-sm: 0.875rem;
|
||
|
|
--text-base: 1rem;
|
||
|
|
--text-lg: 1.125rem;
|
||
|
|
--text-xl: 1.25rem;
|
||
|
|
--text-2xl: 1.5rem;
|
||
|
|
--text-3xl: 1.875rem;
|
||
|
|
--text-4xl: 2.25rem;
|
||
|
|
--text-5xl: 3rem;
|
||
|
|
--text-6xl: 3.75rem;
|
||
|
|
--font-thin: 100;
|
||
|
|
--font-light: 300;
|
||
|
|
--font-normal: 400;
|
||
|
|
--font-medium: 500;
|
||
|
|
--font-semibold: 600;
|
||
|
|
--font-bold: 700;
|
||
|
|
--font-extrabold: 800;
|
||
|
|
--font-black: 900;
|
||
|
|
--leading-none: 1;
|
||
|
|
--leading-tight: 1.25;
|
||
|
|
--leading-snug: 1.375;
|
||
|
|
--leading-normal: 1.5;
|
||
|
|
--leading-relaxed: 1.625;
|
||
|
|
--leading-loose: 2;
|
||
|
|
|
||
|
|
/* Spacing */
|
||
|
|
--space-0: 0;
|
||
|
|
--space-px: 1px;
|
||
|
|
--space-0-5: 0.125rem;
|
||
|
|
--space-1: 0.25rem;
|
||
|
|
--space-1-5: 0.375rem;
|
||
|
|
--space-2: 0.5rem;
|
||
|
|
--space-2-5: 0.625rem;
|
||
|
|
--space-3: 0.75rem;
|
||
|
|
--space-3-5: 0.875rem;
|
||
|
|
--space-4: 1rem;
|
||
|
|
--space-5: 1.25rem;
|
||
|
|
--space-6: 1.5rem;
|
||
|
|
--space-7: 1.75rem;
|
||
|
|
--space-8: 2rem;
|
||
|
|
--space-9: 2.25rem;
|
||
|
|
--space-10: 2.5rem;
|
||
|
|
--space-11: 2.75rem;
|
||
|
|
--space-12: 3rem;
|
||
|
|
--space-14: 3.5rem;
|
||
|
|
--space-16: 4rem;
|
||
|
|
--space-20: 5rem;
|
||
|
|
--space-24: 6rem;
|
||
|
|
--space-28: 7rem;
|
||
|
|
--space-32: 8rem;
|
||
|
|
--space-36: 9rem;
|
||
|
|
--space-40: 10rem;
|
||
|
|
--space-44: 11rem;
|
||
|
|
--space-48: 12rem;
|
||
|
|
--space-52: 13rem;
|
||
|
|
--space-56: 14rem;
|
||
|
|
--space-60: 15rem;
|
||
|
|
--space-64: 16rem;
|
||
|
|
--space-72: 18rem;
|
||
|
|
--space-80: 20rem;
|
||
|
|
--space-96: 24rem;
|
||
|
|
|
||
|
|
/* Border Radius */
|
||
|
|
--radius-none: 0;
|
||
|
|
--radius-sm: 0.125rem;
|
||
|
|
--radius-base: 0.25rem;
|
||
|
|
--radius-md: 0.375rem;
|
||
|
|
--radius-lg: 0.5rem;
|
||
|
|
--radius-xl: 0.75rem;
|
||
|
|
--radius-2xl: 1rem;
|
||
|
|
--radius-3xl: 1.5rem;
|
||
|
|
--radius-full: 9999px;
|
||
|
|
|
||
|
|
/* Shadows */
|
||
|
|
--shadow-none: none;
|
||
|
|
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||
|
|
--shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
||
|
|
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
||
|
|
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||
|
|
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
|
||
|
|
--shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
|
||
|
|
--shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
|
||
|
|
|
||
|
|
/* Z-Index */
|
||
|
|
--z-hide: -1;
|
||
|
|
--z-auto: auto;
|
||
|
|
--z-0: 0;
|
||
|
|
--z-10: 10;
|
||
|
|
--z-20: 20;
|
||
|
|
--z-30: 30;
|
||
|
|
--z-40: 40;
|
||
|
|
--z-50: 50;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.dark {
|
||
|
|
/* Dark theme colors */
|
||
|
|
--color-brand-primary: #60a5fa;
|
||
|
|
--color-brand-secondary: #818cf8;
|
||
|
|
--color-brand-accent: #fbbf24;
|
||
|
|
--color-success: #34d399;
|
||
|
|
--color-warning: #fbbf24;
|
||
|
|
--color-error: #f87171;
|
||
|
|
--color-info: #22d3ee;
|
||
|
|
--color-neutral-50: #f9fafb;
|
||
|
|
--color-neutral-100: #f3f4f6;
|
||
|
|
--color-neutral-200: #e5e7eb;
|
||
|
|
--color-neutral-300: #d1d5db;
|
||
|
|
--color-neutral-400: #9ca3af;
|
||
|
|
--color-neutral-500: #6b7280;
|
||
|
|
--color-neutral-600: #4b5563;
|
||
|
|
--color-neutral-700: #374151;
|
||
|
|
--color-neutral-800: #1f2937;
|
||
|
|
--color-neutral-900: #111827;
|
||
|
|
--color-neutral-950: #030712;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Responsive Utilities */
|
||
|
|
|
||
|
|
@media (min-width: 320px) {
|
||
|
|
.xs\:container {
|
||
|
|
max-width: 320px;
|
||
|
|
margin-left: auto;
|
||
|
|
margin-right: auto;
|
||
|
|
padding-left: var(--space-4, 1rem);
|
||
|
|
padding-right: var(--space-4, 1rem);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (min-width: 640px) {
|
||
|
|
.sm\:container {
|
||
|
|
max-width: 640px;
|
||
|
|
margin-left: auto;
|
||
|
|
margin-right: auto;
|
||
|
|
padding-left: var(--space-4, 1rem);
|
||
|
|
padding-right: var(--space-4, 1rem);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (min-width: 768px) {
|
||
|
|
.md\:container {
|
||
|
|
max-width: 768px;
|
||
|
|
margin-left: auto;
|
||
|
|
margin-right: auto;
|
||
|
|
padding-left: var(--space-4, 1rem);
|
||
|
|
padding-right: var(--space-4, 1rem);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (min-width: 1024px) {
|
||
|
|
.lg\:container {
|
||
|
|
max-width: 1024px;
|
||
|
|
margin-left: auto;
|
||
|
|
margin-right: auto;
|
||
|
|
padding-left: var(--space-4, 1rem);
|
||
|
|
padding-right: var(--space-4, 1rem);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (min-width: 1280px) {
|
||
|
|
.xl\:container {
|
||
|
|
max-width: 1280px;
|
||
|
|
margin-left: auto;
|
||
|
|
margin-right: auto;
|
||
|
|
padding-left: var(--space-4, 1rem);
|
||
|
|
padding-right: var(--space-4, 1rem);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (min-width: 1536px) {
|
||
|
|
.xxl\:container {
|
||
|
|
max-width: 1536px;
|
||
|
|
margin-left: auto;
|
||
|
|
margin-right: auto;
|
||
|
|
padding-left: var(--space-4, 1rem);
|
||
|
|
padding-right: var(--space-4, 1rem);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Semantic Component Classes */
|
||
|
|
|
||
|
|
/* Button Base */
|
||
|
|
.btn {
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
border-radius: var(--radius-md, var(--radius-md));
|
||
|
|
font-weight: var(--font-medium, var(--font-medium));
|
||
|
|
transition: all 0.2s ease-in-out;
|
||
|
|
border: none;
|
||
|
|
cursor: pointer;
|
||
|
|
text-decoration: none;
|
||
|
|
outline: none;
|
||
|
|
focus-visible: ring-2 ring-offset-2;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-sm {
|
||
|
|
padding: var(--undefined) var(--undefined);
|
||
|
|
font-size: var(--undefined);
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-md {
|
||
|
|
padding: var(--undefined) var(--undefined);
|
||
|
|
font-size: var(--undefined);
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-lg {
|
||
|
|
padding: var(--undefined) var(--undefined);
|
||
|
|
font-size: var(--undefined);
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-primary {
|
||
|
|
background-color: var(--color-undefined);
|
||
|
|
color: var(--color-undefined);
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-secondary {
|
||
|
|
background-color: var(--color-undefined);
|
||
|
|
color: var(--color-undefined);
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-ghost {
|
||
|
|
background-color: var(--color-undefined);
|
||
|
|
color: var(--color-undefined);
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-danger {
|
||
|
|
background-color: var(--color-undefined);
|
||
|
|
color: var(--color-undefined);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Card Component */
|
||
|
|
.card {
|
||
|
|
background-color: var(--color-neutral-50);
|
||
|
|
border: 1px solid var(--color-neutral-200);
|
||
|
|
border-radius: var(--radius-lg);
|
||
|
|
box-shadow: var(--shadow-sm);
|
||
|
|
padding: var(--space-6);
|
||
|
|
}
|
||
|
|
|
||
|
|
.dark .card {
|
||
|
|
background-color: var(--color-neutral-900);
|
||
|
|
border-color: var(--color-neutral-700);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Input Component */
|
||
|
|
.input {
|
||
|
|
width: 100%;
|
||
|
|
background-color: var(--color-neutral-50);
|
||
|
|
border: 1px solid var(--color-neutral-300);
|
||
|
|
border-radius: var(--radius-md);
|
||
|
|
padding: var(--space-2) var(--space-3);
|
||
|
|
font-size: var(--text-sm);
|
||
|
|
transition: border-color 0.2s ease-in-out;
|
||
|
|
outline: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.input:focus {
|
||
|
|
border-color: var(--color-brand-primary);
|
||
|
|
box-shadow: 0 0 0 3px var(--color-brand-primary)20;
|
||
|
|
}
|
||
|
|
|
||
|
|
.dark .input {
|
||
|
|
background-color: var(--color-neutral-800);
|
||
|
|
border-color: var(--color-neutral-600);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ==============================
|
||
|
|
PAGE TRANSITIONS
|
||
|
|
============================== */
|
||
|
|
|
||
|
|
/* Fade transition for route changes */
|
||
|
|
.page-transition-wrapper {
|
||
|
|
position: relative;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.page-content {
|
||
|
|
opacity: 1;
|
||
|
|
transform: translateY(0);
|
||
|
|
transition: opacity 0.3s ease-out, transform 0.3s ease-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
.page-content.fade-out {
|
||
|
|
opacity: 0;
|
||
|
|
transform: translateY(-10px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.page-content.fade-in {
|
||
|
|
animation: fadeIn 0.3s ease-out forwards;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes fadeIn {
|
||
|
|
from {
|
||
|
|
opacity: 0;
|
||
|
|
transform: translateY(10px);
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
opacity: 1;
|
||
|
|
transform: translateY(0);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Slide transition variant */
|
||
|
|
.page-content.slide-out {
|
||
|
|
opacity: 0;
|
||
|
|
transform: translateX(-20px);
|
||
|
|
transition: opacity 0.25s ease-out, transform 0.25s ease-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
.page-content.slide-in {
|
||
|
|
animation: slideIn 0.3s ease-out forwards;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes slideIn {
|
||
|
|
from {
|
||
|
|
opacity: 0;
|
||
|
|
transform: translateX(20px);
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
opacity: 1;
|
||
|
|
transform: translateX(0);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Scale transition variant */
|
||
|
|
.page-content.scale-out {
|
||
|
|
opacity: 0;
|
||
|
|
transform: scale(0.95);
|
||
|
|
transition: opacity 0.2s ease-out, transform 0.2s ease-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
.page-content.scale-in {
|
||
|
|
animation: scaleIn 0.25s ease-out forwards;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes scaleIn {
|
||
|
|
from {
|
||
|
|
opacity: 0;
|
||
|
|
transform: scale(1.05);
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
opacity: 1;
|
||
|
|
transform: scale(1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Loading state during transition */
|
||
|
|
.page-loading {
|
||
|
|
position: absolute;
|
||
|
|
top: 50%;
|
||
|
|
left: 50%;
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
opacity: 0;
|
||
|
|
transition: opacity 0.2s ease-in;
|
||
|
|
}
|
||
|
|
|
||
|
|
.page-loading.visible {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Smooth transition for Suspense fallback */
|
||
|
|
.loading {
|
||
|
|
opacity: 0;
|
||
|
|
animation: fadeIn 0.2s ease-out 0.1s forwards;
|
||
|
|
}
|