mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-20 11:51:10 -05:00
remove backend
This commit is contained in:
pacnpal
44
static/css/alerts.css
Normal file
44
static/css/alerts.css
Normal file
@@ -0,0 +1,44 @@
|
||||
/* Alert Styles */
|
||||
.alert {
|
||||
@apply fixed z-50 px-4 py-3 transition-all duration-500 transform rounded-lg shadow-lg right-4 top-4;
|
||||
animation: slideIn 0.5s ease-out forwards;
|
||||
}
|
||||
|
||||
.alert-success {
|
||||
@apply text-white bg-green-500;
|
||||
}
|
||||
|
||||
.alert-error {
|
||||
@apply text-white bg-red-500;
|
||||
}
|
||||
|
||||
.alert-info {
|
||||
@apply text-white bg-blue-500;
|
||||
}
|
||||
|
||||
.alert-warning {
|
||||
@apply text-white bg-yellow-500;
|
||||
}
|
||||
|
||||
/* Animation keyframes */
|
||||
@keyframes slideIn {
|
||||
0% {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideOut {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
574
static/css/components.css
Normal file
574
static/css/components.css
Normal file
@@ -0,0 +1,574 @@
|
||||
/**
|
||||
* ThrillWiki Component Styles
|
||||
* Enhanced CSS matching shadcn/ui design system from React frontend
|
||||
*/
|
||||
|
||||
/* CSS Variables for Design System */
|
||||
:root {
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 222.2 84% 4.9%;
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 222.2 84% 4.9%;
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 222.2 84% 4.9%;
|
||||
--primary: 262.1 83.3% 57.8%;
|
||||
--primary-foreground: 210 40% 98%;
|
||||
--secondary: 210 40% 96%;
|
||||
--secondary-foreground: 222.2 84% 4.9%;
|
||||
--muted: 210 40% 96%;
|
||||
--muted-foreground: 215.4 16.3% 46.9%;
|
||||
--accent: 210 40% 96%;
|
||||
--accent-foreground: 222.2 84% 4.9%;
|
||||
--destructive: 0 84.2% 60.2%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
--border: 214.3 31.8% 91.4%;
|
||||
--input: 214.3 31.8% 91.4%;
|
||||
--ring: 262.1 83.3% 57.8%;
|
||||
--radius: 0.5rem;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: 222.2 84% 4.9%;
|
||||
--foreground: 210 40% 98%;
|
||||
--card: 222.2 84% 4.9%;
|
||||
--card-foreground: 210 40% 98%;
|
||||
--popover: 222.2 84% 4.9%;
|
||||
--popover-foreground: 210 40% 98%;
|
||||
--primary: 262.1 83.3% 57.8%;
|
||||
--primary-foreground: 210 40% 98%;
|
||||
--secondary: 217.2 32.6% 17.5%;
|
||||
--secondary-foreground: 210 40% 98%;
|
||||
--muted: 217.2 32.6% 17.5%;
|
||||
--muted-foreground: 215 20.2% 65.1%;
|
||||
--accent: 217.2 32.6% 17.5%;
|
||||
--accent-foreground: 210 40% 98%;
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
--border: 217.2 32.6% 17.5%;
|
||||
--input: 217.2 32.6% 17.5%;
|
||||
--ring: 262.1 83.3% 57.8%;
|
||||
}
|
||||
|
||||
/* Base Styles */
|
||||
* {
|
||||
border-color: hsl(var(--border));
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: hsl(var(--background));
|
||||
color: hsl(var(--foreground));
|
||||
}
|
||||
|
||||
/* Component Classes */
|
||||
.bg-background { background-color: hsl(var(--background)); }
|
||||
.bg-foreground { background-color: hsl(var(--foreground)); }
|
||||
.bg-card { background-color: hsl(var(--card)); }
|
||||
.bg-card-foreground { background-color: hsl(var(--card-foreground)); }
|
||||
.bg-popover { background-color: hsl(var(--popover)); }
|
||||
.bg-popover-foreground { background-color: hsl(var(--popover-foreground)); }
|
||||
.bg-primary { background-color: hsl(var(--primary)); }
|
||||
.bg-primary-foreground { background-color: hsl(var(--primary-foreground)); }
|
||||
.bg-secondary { background-color: hsl(var(--secondary)); }
|
||||
.bg-secondary-foreground { background-color: hsl(var(--secondary-foreground)); }
|
||||
.bg-muted { background-color: hsl(var(--muted)); }
|
||||
.bg-muted-foreground { background-color: hsl(var(--muted-foreground)); }
|
||||
.bg-accent { background-color: hsl(var(--accent)); }
|
||||
.bg-accent-foreground { background-color: hsl(var(--accent-foreground)); }
|
||||
.bg-destructive { background-color: hsl(var(--destructive)); }
|
||||
.bg-destructive-foreground { background-color: hsl(var(--destructive-foreground)); }
|
||||
|
||||
.text-background { color: hsl(var(--background)); }
|
||||
.text-foreground { color: hsl(var(--foreground)); }
|
||||
.text-card { color: hsl(var(--card)); }
|
||||
.text-card-foreground { color: hsl(var(--card-foreground)); }
|
||||
.text-popover { color: hsl(var(--popover)); }
|
||||
.text-popover-foreground { color: hsl(var(--popover-foreground)); }
|
||||
.text-primary { color: hsl(var(--primary)); }
|
||||
.text-primary-foreground { color: hsl(var(--primary-foreground)); }
|
||||
.text-secondary { color: hsl(var(--secondary)); }
|
||||
.text-secondary-foreground { color: hsl(var(--secondary-foreground)); }
|
||||
.text-muted { color: hsl(var(--muted)); }
|
||||
.text-muted-foreground { color: hsl(var(--muted-foreground)); }
|
||||
.text-accent { color: hsl(var(--accent)); }
|
||||
.text-accent-foreground { color: hsl(var(--accent-foreground)); }
|
||||
.text-destructive { color: hsl(var(--destructive)); }
|
||||
.text-destructive-foreground { color: hsl(var(--destructive-foreground)); }
|
||||
|
||||
.border-background { border-color: hsl(var(--background)); }
|
||||
.border-foreground { border-color: hsl(var(--foreground)); }
|
||||
.border-card { border-color: hsl(var(--card)); }
|
||||
.border-card-foreground { border-color: hsl(var(--card-foreground)); }
|
||||
.border-popover { border-color: hsl(var(--popover)); }
|
||||
.border-popover-foreground { border-color: hsl(var(--popover-foreground)); }
|
||||
.border-primary { border-color: hsl(var(--primary)); }
|
||||
.border-primary-foreground { border-color: hsl(var(--primary-foreground)); }
|
||||
.border-secondary { border-color: hsl(var(--secondary)); }
|
||||
.border-secondary-foreground { border-color: hsl(var(--secondary-foreground)); }
|
||||
.border-muted { border-color: hsl(var(--muted)); }
|
||||
.border-muted-foreground { border-color: hsl(var(--muted-foreground)); }
|
||||
.border-accent { border-color: hsl(var(--accent)); }
|
||||
.border-accent-foreground { border-color: hsl(var(--accent-foreground)); }
|
||||
.border-destructive { border-color: hsl(var(--destructive)); }
|
||||
.border-destructive-foreground { border-color: hsl(var(--destructive-foreground)); }
|
||||
.border-input { border-color: hsl(var(--input)); }
|
||||
|
||||
.ring-background { --tw-ring-color: hsl(var(--background)); }
|
||||
.ring-foreground { --tw-ring-color: hsl(var(--foreground)); }
|
||||
.ring-card { --tw-ring-color: hsl(var(--card)); }
|
||||
.ring-card-foreground { --tw-ring-color: hsl(var(--card-foreground)); }
|
||||
.ring-popover { --tw-ring-color: hsl(var(--popover)); }
|
||||
.ring-popover-foreground { --tw-ring-color: hsl(var(--popover-foreground)); }
|
||||
.ring-primary { --tw-ring-color: hsl(var(--primary)); }
|
||||
.ring-primary-foreground { --tw-ring-color: hsl(var(--primary-foreground)); }
|
||||
.ring-secondary { --tw-ring-color: hsl(var(--secondary)); }
|
||||
.ring-secondary-foreground { --tw-ring-color: hsl(var(--secondary-foreground)); }
|
||||
.ring-muted { --tw-ring-color: hsl(var(--muted)); }
|
||||
.ring-muted-foreground { --tw-ring-color: hsl(var(--muted-foreground)); }
|
||||
.ring-accent { --tw-ring-color: hsl(var(--accent)); }
|
||||
.ring-accent-foreground { --tw-ring-color: hsl(var(--accent-foreground)); }
|
||||
.ring-destructive { --tw-ring-color: hsl(var(--destructive)); }
|
||||
.ring-destructive-foreground { --tw-ring-color: hsl(var(--destructive-foreground)); }
|
||||
.ring-ring { --tw-ring-color: hsl(var(--ring)); }
|
||||
|
||||
.ring-offset-background { --tw-ring-offset-color: hsl(var(--background)); }
|
||||
|
||||
/* Enhanced Button Styles */
|
||||
.btn {
|
||||
@apply inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50;
|
||||
}
|
||||
|
||||
.btn-default {
|
||||
@apply bg-primary text-primary-foreground hover:bg-primary/90;
|
||||
}
|
||||
|
||||
.btn-destructive {
|
||||
@apply bg-destructive text-destructive-foreground hover:bg-destructive/90;
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
@apply border border-input bg-background hover:bg-accent hover:text-accent-foreground;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
@apply bg-secondary text-secondary-foreground hover:bg-secondary/80;
|
||||
}
|
||||
|
||||
.btn-ghost {
|
||||
@apply hover:bg-accent hover:text-accent-foreground;
|
||||
}
|
||||
|
||||
.btn-link {
|
||||
@apply text-primary underline-offset-4 hover:underline;
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
@apply h-9 rounded-md px-3;
|
||||
}
|
||||
|
||||
.btn-lg {
|
||||
@apply h-11 rounded-md px-8;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
@apply h-10 w-10;
|
||||
}
|
||||
|
||||
/* Enhanced Card Styles */
|
||||
.card {
|
||||
@apply rounded-lg border bg-card text-card-foreground shadow-sm;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
@apply flex flex-col space-y-1.5 p-6;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
@apply text-2xl font-semibold leading-none tracking-tight;
|
||||
}
|
||||
|
||||
.card-description {
|
||||
@apply text-sm text-muted-foreground;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
@apply p-6 pt-0;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
@apply flex items-center p-6 pt-0;
|
||||
}
|
||||
|
||||
/* Enhanced Input Styles */
|
||||
.input {
|
||||
@apply flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50;
|
||||
}
|
||||
|
||||
/* Enhanced Form Styles */
|
||||
.form-group {
|
||||
@apply space-y-2;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
@apply text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70;
|
||||
}
|
||||
|
||||
.form-error {
|
||||
@apply text-sm font-medium text-destructive;
|
||||
}
|
||||
|
||||
.form-description {
|
||||
@apply text-sm text-muted-foreground;
|
||||
}
|
||||
|
||||
/* Enhanced Navigation Styles */
|
||||
.nav-link {
|
||||
@apply flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-md hover:bg-accent hover:text-accent-foreground transition-colors;
|
||||
}
|
||||
|
||||
.nav-link.active {
|
||||
@apply bg-accent text-accent-foreground;
|
||||
}
|
||||
|
||||
/* Enhanced Dropdown Styles */
|
||||
.dropdown-content {
|
||||
@apply z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
@apply relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50;
|
||||
}
|
||||
|
||||
.dropdown-separator {
|
||||
@apply -mx-1 my-1 h-px bg-muted;
|
||||
}
|
||||
|
||||
/* Enhanced Modal Styles */
|
||||
.modal-overlay {
|
||||
@apply fixed inset-0 z-50 bg-background/80 backdrop-blur-sm;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
@apply fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 sm:rounded-lg;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
@apply flex flex-col space-y-1.5 text-center sm:text-left;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
@apply text-lg font-semibold leading-none tracking-tight;
|
||||
}
|
||||
|
||||
.modal-description {
|
||||
@apply text-sm text-muted-foreground;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
@apply flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2;
|
||||
}
|
||||
|
||||
/* Enhanced Alert Styles */
|
||||
.alert {
|
||||
@apply relative w-full rounded-lg border p-4;
|
||||
}
|
||||
|
||||
.alert-default {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
|
||||
.alert-destructive {
|
||||
@apply border-destructive/50 text-destructive dark:border-destructive;
|
||||
}
|
||||
|
||||
.alert-title {
|
||||
@apply mb-1 font-medium leading-none tracking-tight;
|
||||
}
|
||||
|
||||
.alert-description {
|
||||
@apply text-sm opacity-90;
|
||||
}
|
||||
|
||||
/* Enhanced Badge Styles */
|
||||
.badge {
|
||||
@apply inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2;
|
||||
}
|
||||
|
||||
.badge-default {
|
||||
@apply border-transparent bg-primary text-primary-foreground hover:bg-primary/80;
|
||||
}
|
||||
|
||||
.badge-secondary {
|
||||
@apply border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80;
|
||||
}
|
||||
|
||||
.badge-destructive {
|
||||
@apply border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80;
|
||||
}
|
||||
|
||||
.badge-outline {
|
||||
@apply text-foreground;
|
||||
}
|
||||
|
||||
/* Enhanced Table Styles */
|
||||
.table {
|
||||
@apply w-full caption-bottom text-sm;
|
||||
}
|
||||
|
||||
.table-header {
|
||||
@apply border-b;
|
||||
}
|
||||
|
||||
.table-body {
|
||||
@apply divide-y;
|
||||
}
|
||||
|
||||
.table-row {
|
||||
@apply border-b transition-colors hover:bg-muted/50;
|
||||
}
|
||||
|
||||
.table-head {
|
||||
@apply h-12 px-4 text-left align-middle font-medium text-muted-foreground;
|
||||
}
|
||||
|
||||
.table-cell {
|
||||
@apply p-4 align-middle;
|
||||
}
|
||||
|
||||
/* Enhanced Skeleton Styles */
|
||||
.skeleton {
|
||||
@apply animate-pulse rounded-md bg-muted;
|
||||
}
|
||||
|
||||
/* Enhanced Separator Styles */
|
||||
.separator {
|
||||
@apply shrink-0 bg-border;
|
||||
}
|
||||
|
||||
.separator-horizontal {
|
||||
@apply h-[1px] w-full;
|
||||
}
|
||||
|
||||
.separator-vertical {
|
||||
@apply h-full w-[1px];
|
||||
}
|
||||
|
||||
/* Enhanced Avatar Styles */
|
||||
.avatar {
|
||||
@apply relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full;
|
||||
}
|
||||
|
||||
.avatar-image {
|
||||
@apply aspect-square h-full w-full object-cover;
|
||||
}
|
||||
|
||||
.avatar-fallback {
|
||||
@apply flex h-full w-full items-center justify-center rounded-full bg-muted;
|
||||
}
|
||||
|
||||
/* Enhanced Progress Styles */
|
||||
.progress {
|
||||
@apply relative h-4 w-full overflow-hidden rounded-full bg-secondary;
|
||||
}
|
||||
|
||||
.progress-indicator {
|
||||
@apply h-full w-full flex-1 bg-primary transition-all;
|
||||
}
|
||||
|
||||
/* Enhanced Scroll Area Styles */
|
||||
.scroll-area {
|
||||
@apply relative overflow-hidden;
|
||||
}
|
||||
|
||||
.scroll-viewport {
|
||||
@apply h-full w-full rounded-[inherit];
|
||||
}
|
||||
|
||||
.scroll-bar {
|
||||
@apply flex touch-none select-none transition-colors;
|
||||
}
|
||||
|
||||
.scroll-thumb {
|
||||
@apply relative flex-1 rounded-full bg-border;
|
||||
}
|
||||
|
||||
/* Enhanced Tabs Styles */
|
||||
.tabs-list {
|
||||
@apply inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground;
|
||||
}
|
||||
|
||||
.tabs-trigger {
|
||||
@apply inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm;
|
||||
}
|
||||
|
||||
.tabs-content {
|
||||
@apply mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
|
||||
}
|
||||
|
||||
/* Enhanced Tooltip Styles */
|
||||
.tooltip-content {
|
||||
@apply z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95;
|
||||
}
|
||||
|
||||
/* Enhanced Switch Styles */
|
||||
.switch {
|
||||
@apply peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input;
|
||||
}
|
||||
|
||||
.switch-thumb {
|
||||
@apply pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0;
|
||||
}
|
||||
|
||||
/* Enhanced Checkbox Styles */
|
||||
.checkbox {
|
||||
@apply peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground;
|
||||
}
|
||||
|
||||
/* Enhanced Radio Styles */
|
||||
.radio {
|
||||
@apply aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50;
|
||||
}
|
||||
|
||||
/* Enhanced Select Styles */
|
||||
.select-trigger {
|
||||
@apply flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50;
|
||||
}
|
||||
|
||||
.select-content {
|
||||
@apply relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md;
|
||||
}
|
||||
|
||||
.select-item {
|
||||
@apply relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50;
|
||||
}
|
||||
|
||||
/* Utility Classes */
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
/* Animation Classes */
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes fadeOut {
|
||||
from { opacity: 1; }
|
||||
to { opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from { transform: translateX(100%); }
|
||||
to { transform: translateX(0); }
|
||||
}
|
||||
|
||||
@keyframes slideOut {
|
||||
from { transform: translateX(0); }
|
||||
to { transform: translateX(100%); }
|
||||
}
|
||||
|
||||
@keyframes scaleIn {
|
||||
from { transform: scale(0.95); opacity: 0; }
|
||||
to { transform: scale(1); opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes scaleOut {
|
||||
from { transform: scale(1); opacity: 1; }
|
||||
to { transform: scale(0.95); opacity: 0; }
|
||||
}
|
||||
|
||||
.animate-fade-in {
|
||||
animation: fadeIn 0.2s ease-out;
|
||||
}
|
||||
|
||||
.animate-fade-out {
|
||||
animation: fadeOut 0.2s ease-out;
|
||||
}
|
||||
|
||||
.animate-slide-in {
|
||||
animation: slideIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
.animate-slide-out {
|
||||
animation: slideOut 0.3s ease-out;
|
||||
}
|
||||
|
||||
.animate-scale-in {
|
||||
animation: scaleIn 0.2s ease-out;
|
||||
}
|
||||
|
||||
.animate-scale-out {
|
||||
animation: scaleOut 0.2s ease-out;
|
||||
}
|
||||
|
||||
/* Responsive Design Helpers */
|
||||
@media (max-width: 640px) {
|
||||
.modal-content {
|
||||
@apply w-[95vw] max-w-none;
|
||||
}
|
||||
|
||||
.dropdown-content {
|
||||
@apply w-screen max-w-none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Dark Mode Specific Adjustments */
|
||||
.dark .shadow-sm {
|
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.dark .shadow-md {
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.dark .shadow-lg {
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* Focus Visible Improvements */
|
||||
.focus-visible\:ring-2:focus-visible {
|
||||
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
||||
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
||||
}
|
||||
|
||||
/* High Contrast Mode Support */
|
||||
@media (prefers-contrast: high) {
|
||||
.border {
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
.input {
|
||||
border-width: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Reduced Motion Support */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.transition-colors,
|
||||
.transition-all,
|
||||
.transition-transform {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.animate-fade-in,
|
||||
.animate-fade-out,
|
||||
.animate-slide-in,
|
||||
.animate-slide-out,
|
||||
.animate-scale-in,
|
||||
.animate-scale-out {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
432
static/css/src/input.css
Normal file
432
static/css/src/input.css
Normal file
@@ -0,0 +1,432 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
@theme {
|
||||
--color-primary: #4f46e5;
|
||||
--color-secondary: #e11d48;
|
||||
--color-accent: #8b5cf6;
|
||||
--font-family-sans: Poppins, sans-serif;
|
||||
}
|
||||
|
||||
/* Base Component Styles */
|
||||
.site-logo {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.site-logo:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
/* Navigation Styles */
|
||||
.nav-container {
|
||||
padding: 1rem 1.5rem;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-radius: 0.5rem;
|
||||
font-weight: 500;
|
||||
color: #6b7280;
|
||||
transition: all 0.2s ease;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
color: var(--color-primary);
|
||||
background-color: rgba(79, 70, 229, 0.1);
|
||||
}
|
||||
|
||||
.nav-link i {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.nav-link span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Form Styles */
|
||||
.form-input {
|
||||
width: 100%;
|
||||
padding: 0.75rem 1rem;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
background-color: white;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.form-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
|
||||
}
|
||||
|
||||
.form-input::placeholder {
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
/* Dark mode form styles */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.form-input {
|
||||
background-color: #374151;
|
||||
border-color: #4b5563;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.form-input:focus {
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
|
||||
}
|
||||
|
||||
.form-input::placeholder {
|
||||
color: #6b7280;
|
||||
}
|
||||
}
|
||||
|
||||
/* Button Styles */
|
||||
.btn-primary {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.75rem 1.5rem;
|
||||
border: none;
|
||||
border-radius: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
background: linear-gradient(135deg, var(--color-primary), #3730a3);
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.2s ease;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: linear-gradient(135deg, #3730a3, #312e81);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 6px 12px -2px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.btn-primary:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.75rem 1.5rem;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: #374151;
|
||||
background-color: white;
|
||||
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
transition: all 0.2s ease;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background-color: #f9fafb;
|
||||
border-color: #9ca3af;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.btn-secondary:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* Dark mode button styles */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.btn-secondary {
|
||||
border-color: #4b5563;
|
||||
color: #e5e7eb;
|
||||
background-color: #374151;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background-color: #4b5563;
|
||||
border-color: #6b7280;
|
||||
}
|
||||
}
|
||||
|
||||
/* Menu Styles */
|
||||
.menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
width: 100%;
|
||||
padding: 0.75rem 1rem;
|
||||
font-size: 0.875rem;
|
||||
color: #374151;
|
||||
background: none;
|
||||
border: none;
|
||||
text-align: left;
|
||||
text-decoration: none;
|
||||
transition: all 0.2s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.menu-item:hover {
|
||||
background-color: #f3f4f6;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.menu-item i {
|
||||
width: 1.25rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Dark mode menu styles */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.menu-item {
|
||||
color: #e5e7eb;
|
||||
}
|
||||
|
||||
.menu-item:hover {
|
||||
background-color: #4b5563;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Theme Toggle Styles */
|
||||
.theme-toggle-btn {
|
||||
position: relative;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
border-radius: 0.5rem;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.theme-toggle-btn:hover {
|
||||
background-color: rgba(79, 70, 229, 0.1);
|
||||
}
|
||||
|
||||
.theme-toggle-btn i::before {
|
||||
content: "\f185"; /* sun icon */
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.theme-toggle-btn i::before {
|
||||
content: "\f186"; /* moon icon */
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile Menu Styles */
|
||||
#mobileMenu {
|
||||
display: none;
|
||||
padding: 1rem 0;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
#mobileMenu.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
#mobileMenu {
|
||||
border-top-color: #4b5563;
|
||||
}
|
||||
}
|
||||
|
||||
/* Grid Adaptive Styles */
|
||||
.grid-adaptive-sm {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
}
|
||||
|
||||
.grid-adaptive {
|
||||
display: grid;
|
||||
gap: 1.5rem;
|
||||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.grid-adaptive {
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.grid-adaptive {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
/* Card Styles */
|
||||
.card {
|
||||
background: white;
|
||||
border-radius: 0.75rem;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.card {
|
||||
background: #1f2937;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
/* Alert Styles */
|
||||
.alert {
|
||||
position: fixed;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
z-index: 50;
|
||||
padding: 1rem 1.5rem;
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
animation: slideInRight 0.3s ease-out;
|
||||
}
|
||||
|
||||
.alert-success {
|
||||
background-color: #10b981;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.alert-error {
|
||||
background-color: #ef4444;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.alert-info {
|
||||
background-color: #3b82f6;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.alert-warning {
|
||||
background-color: #f59e0b;
|
||||
color: white;
|
||||
}
|
||||
|
||||
@keyframes slideInRight {
|
||||
from {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Loading States */
|
||||
.loading {
|
||||
opacity: 0.6;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border: 2px solid #f3f4f6;
|
||||
border-radius: 50%;
|
||||
border-top-color: var(--color-primary);
|
||||
animation: spin 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Utility Classes */
|
||||
.text-gradient {
|
||||
background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.bg-gradient-primary {
|
||||
background: linear-gradient(135deg, var(--color-primary), #3730a3);
|
||||
}
|
||||
|
||||
.bg-gradient-secondary {
|
||||
background: linear-gradient(135deg, var(--color-secondary), #be185d);
|
||||
}
|
||||
|
||||
/* Responsive Utilities */
|
||||
@media (max-width: 1023px) {
|
||||
.lg\:hidden {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.lg\:flex {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.lg\:hidden {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Focus States */
|
||||
.focus-ring {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.focus-ring:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
|
||||
}
|
||||
|
||||
/* Animation Classes */
|
||||
.fade-in {
|
||||
animation: fadeIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
.slide-up {
|
||||
animation: slideUp 0.3s ease-out;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
transform: translateY(1rem);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
4240
static/css/tailwind.css
Normal file
4240
static/css/tailwind.css
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user