pacnpal/thrillwiki_django_no_react
1
1
Fork 0
mirror of https://github.com/pacnpal/thrillwiki_django_no_react.git synced 2025-12-23 05:11:10 -05:00
Code Issues Packages Projects Releases Wiki Activity
Files
ae31e889d7f27f7131301d1074eba325ad989802
thrillwiki_django_no_react/backend/static/css/components.css

1311 lines
35 KiB
CSS
Raw Blame History

/**
* ThrillWiki Component Styles
* Enhanced CSS matching shadcn/ui design system
*
* IMPORTANT: This file depends on design-tokens.css for CSS variables.
* Load order: design-tokens.css → tailwind.css → components.css
*
* Design Tokens Used:
* - Color tokens: --color-primary, --color-secondary, --color-accent, etc.
* - Semantic tokens: --color-background, --color-foreground, --color-muted, etc.
* - Spacing: --spacing-*, --radius-*
* - Shadows: --shadow-*
* - Typography: --font-family-*, --font-size-*
*/
/* =============================================================================
Base Styles - Apply design token defaults
============================================================================= */
* {
border-color: var(--color-border);
}
body {
background-color: var(--color-background);
color: var(--color-foreground);
}
/* =============================================================================
Component Color Classes - Using Design Tokens
============================================================================= */
/* Background Colors */
.bg-background { background-color: var(--color-background); }
.bg-foreground { background-color: var(--color-foreground); }
.bg-card { background-color: var(--color-card); }
.bg-card-foreground { background-color: var(--color-card-foreground); }
.bg-popover { background-color: var(--color-popover); }
.bg-popover-foreground { background-color: var(--color-popover-foreground); }
.bg-primary { background-color: var(--color-primary); }
.bg-primary-foreground { background-color: var(--color-primary-foreground); }
.bg-secondary { background-color: var(--color-secondary); }
.bg-secondary-foreground { background-color: var(--color-secondary-foreground); }
.bg-muted { background-color: var(--color-muted); }
.bg-muted-foreground { background-color: var(--color-muted-foreground); }
.bg-accent { background-color: var(--color-accent); }
.bg-accent-foreground { background-color: var(--color-accent-foreground); }
.bg-destructive { background-color: var(--color-destructive); }
.bg-destructive-foreground { background-color: var(--color-destructive-foreground); }
/* Semantic Background Colors */
.bg-success { background-color: var(--color-success-500); }
.bg-warning { background-color: var(--color-warning-500); }
.bg-error { background-color: var(--color-error-500); }
.bg-info { background-color: var(--color-info-500); }
/* Text Colors */
.text-background { color: var(--color-background); }
.text-foreground { color: var(--color-foreground); }
.text-card { color: var(--color-card); }
.text-card-foreground { color: var(--color-card-foreground); }
.text-popover { color: var(--color-popover); }
.text-popover-foreground { color: var(--color-popover-foreground); }
.text-primary { color: var(--color-primary); }
.text-primary-foreground { color: var(--color-primary-foreground); }
.text-secondary { color: var(--color-secondary); }
.text-secondary-foreground { color: var(--color-secondary-foreground); }
.text-muted { color: var(--color-muted); }
.text-muted-foreground { color: var(--color-muted-foreground); }
.text-accent { color: var(--color-accent); }
.text-accent-foreground { color: var(--color-accent-foreground); }
.text-destructive { color: var(--color-destructive); }
.text-destructive-foreground { color: var(--color-destructive-foreground); }
/* Semantic Text Colors */
.text-success { color: var(--color-success-600); }
.text-warning { color: var(--color-warning-600); }
.text-error { color: var(--color-error-600); }
.text-info { color: var(--color-info-600); }
/* Border Colors */
.border-background { border-color: var(--color-background); }
.border-foreground { border-color: var(--color-foreground); }
.border-card { border-color: var(--color-card); }
.border-card-foreground { border-color: var(--color-card-foreground); }
.border-popover { border-color: var(--color-popover); }
.border-popover-foreground { border-color: var(--color-popover-foreground); }
.border-primary { border-color: var(--color-primary); }
.border-primary-foreground { border-color: var(--color-primary-foreground); }
.border-secondary { border-color: var(--color-secondary); }
.border-secondary-foreground { border-color: var(--color-secondary-foreground); }
.border-muted { border-color: var(--color-muted); }
.border-muted-foreground { border-color: var(--color-muted-foreground); }
.border-accent { border-color: var(--color-accent); }
.border-accent-foreground { border-color: var(--color-accent-foreground); }
.border-destructive { border-color: var(--color-destructive); }
.border-destructive-foreground { border-color: var(--color-destructive-foreground); }
.border-input { border-color: var(--color-input); }
.border-border { border-color: var(--color-border); }
/* Ring Colors */
.ring-background { --tw-ring-color: var(--color-background); }
.ring-foreground { --tw-ring-color: var(--color-foreground); }
.ring-card { --tw-ring-color: var(--color-card); }
.ring-card-foreground { --tw-ring-color: var(--color-card-foreground); }
.ring-popover { --tw-ring-color: var(--color-popover); }
.ring-popover-foreground { --tw-ring-color: var(--color-popover-foreground); }
.ring-primary { --tw-ring-color: var(--color-primary); }
.ring-primary-foreground { --tw-ring-color: var(--color-primary-foreground); }
.ring-secondary { --tw-ring-color: var(--color-secondary); }
.ring-secondary-foreground { --tw-ring-color: var(--color-secondary-foreground); }
.ring-muted { --tw-ring-color: var(--color-muted); }
.ring-muted-foreground { --tw-ring-color: var(--color-muted-foreground); }
.ring-accent { --tw-ring-color: var(--color-accent); }
.ring-accent-foreground { --tw-ring-color: var(--color-accent-foreground); }
.ring-destructive { --tw-ring-color: var(--color-destructive); }
.ring-destructive-foreground { --tw-ring-color: var(--color-destructive-foreground); }
.ring-ring { --tw-ring-color: var(--color-primary); }
.ring-offset-background { --tw-ring-offset-color: var(--color-background); }
/* =============================================================================
Enhanced Button Styles
============================================================================= */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
white-space: nowrap;
border-radius: 0.375rem;
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 500;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
--tw-ring-color: var(--color-primary);
--tw-ring-offset-color: var(--color-background);
}
.btn:focus-visible {
outline: 2px solid transparent;
outline-offset: 2px;
--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);
}
.btn:disabled {
pointer-events: none;
opacity: 0.5;
}
.btn-default {
background-color: var(--color-primary);
color: var(--color-primary-foreground);
}
.btn-default:hover {
background-color: var(--color-primary-700);
}
.btn-destructive {
background-color: var(--color-destructive);
color: var(--color-destructive-foreground);
}
.btn-destructive:hover {
background-color: var(--color-error-700);
}
.btn-outline {
border: 1px solid var(--color-border);
background-color: var(--color-background);
}
.btn-outline:hover {
background-color: var(--color-accent);
color: var(--color-accent-foreground);
}
.btn-secondary {
background-color: var(--color-secondary);
color: var(--color-secondary-foreground);
}
.btn-secondary:hover {
background-color: var(--color-secondary-300);
}
.btn-ghost:hover {
background-color: var(--color-accent);
color: var(--color-accent-foreground);
}
.btn-link {
color: var(--color-primary);
text-underline-offset: 4px;
}
.btn-link:hover {
text-decoration: underline;
}
.btn-sm {
height: 2.25rem;
border-radius: 0.375rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.btn-lg {
height: 2.75rem;
border-radius: 0.375rem;
padding-left: 2rem;
padding-right: 2rem;
}
.btn-icon {
height: 2.5rem;
width: 2.5rem;
}
/* =============================================================================
Enhanced Card Styles
============================================================================= */
.card {
border-radius: 0.5rem;
border-width: 1px;
background-color: var(--color-card);
color: var(--color-card-foreground);
border-color: var(--color-border);
box-shadow: var(--shadow-sm);
}
.card-header {
display: flex;
flex-direction: column;
gap: 0.375rem;
padding: 1.5rem;
}
.card-title {
font-size: 1.5rem;
line-height: 2rem;
font-weight: 600;
line-height: 1;
letter-spacing: -0.025em;
}
.card-description {
font-size: 0.875rem;
line-height: 1.25rem;
color: var(--color-muted-foreground);
}
.card-content {
padding: 1.5rem;
padding-top: 0;
}
.card-footer {
display: flex;
align-items: center;
padding: 1.5rem;
padding-top: 0;
}
/* =============================================================================
Enhanced Input Styles
============================================================================= */
.input {
display: flex;
height: 2.5rem;
width: 100%;
border-radius: 0.375rem;
border-width: 1px;
padding-left: 0.75rem;
padding-right: 0.75rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
font-size: 0.875rem;
line-height: 1.25rem;
border-color: var(--color-border);
background-color: var(--color-background);
--tw-ring-color: var(--color-primary);
--tw-ring-offset-color: var(--color-background);
}
.input:focus-visible {
outline: 2px solid transparent;
outline-offset: 2px;
--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);
}
.input:disabled {
cursor: not-allowed;
opacity: 0.5;
}
.input::file-selector-button {
border-width: 0;
background-color: transparent;
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 500;
}
.input::placeholder {
color: var(--color-muted-foreground);
}
/* =============================================================================
Enhanced Form Styles
============================================================================= */
.form-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.form-label {
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 500;
line-height: 1;
}
.peer:disabled ~ .form-label {
cursor: not-allowed;
opacity: 0.7;
}
.form-error {
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 500;
color: var(--color-destructive);
}
.form-description {
font-size: 0.875rem;
line-height: 1.25rem;
color: var(--color-muted-foreground);
}
/* =============================================================================
Enhanced Navigation Styles
============================================================================= */
.nav-link {
display: flex;
align-items: center;
gap: 0.5rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 500;
border-radius: 0.375rem;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.nav-link:hover {
background-color: var(--color-accent);
color: var(--color-accent-foreground);
}
.nav-link.active {
background-color: var(--color-accent);
color: var(--color-accent-foreground);
}
/* =============================================================================
Enhanced Dropdown Styles
============================================================================= */
.dropdown-content {
z-index: 50;
min-width: 8rem;
overflow: hidden;
border-radius: 0.375rem;
border-width: 1px;
padding: 0.25rem;
background-color: var(--color-popover);
color: var(--color-popover-foreground);
border-color: var(--color-border);
box-shadow: var(--shadow-md);
}
.dropdown-item {
position: relative;
display: flex;
cursor: default;
user-select: none;
align-items: center;
border-radius: 0.125rem;
padding-left: 0.5rem;
padding-right: 0.5rem;
padding-top: 0.375rem;
padding-bottom: 0.375rem;
font-size: 0.875rem;
line-height: 1.25rem;
outline: none;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.dropdown-item[data-disabled] {
pointer-events: none;
opacity: 0.5;
}
.dropdown-item:focus,
.dropdown-item:hover {
background-color: var(--color-accent);
color: var(--color-accent-foreground);
}
.dropdown-separator {
margin-left: -0.25rem;
margin-right: -0.25rem;
margin-top: 0.25rem;
margin-bottom: 0.25rem;
height: 1px;
background-color: var(--color-muted);
}
/* =============================================================================
Enhanced Modal Styles
============================================================================= */
.modal-overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 50;
backdrop-filter: blur(4px);
background-color: rgba(0, 0, 0, 0.5);
}
.modal-content {
position: fixed;
left: 50%;
top: 50%;
z-index: 50;
display: grid;
width: 100%;
max-width: 32rem;
transform: translate(-50%, -50%);
gap: 1rem;
border-width: 1px;
padding: 1.5rem;
transition-duration: 200ms;
background-color: var(--color-background);
border-color: var(--color-border);
box-shadow: var(--shadow-lg);
}
@media (min-width: 640px) {
.modal-content {
border-radius: 0.5rem;
}
}
.modal-header {
display: flex;
flex-direction: column;
gap: 0.375rem;
text-align: center;
}
@media (min-width: 640px) {
.modal-header {
text-align: left;
}
}
.modal-title {
font-size: 1.125rem;
line-height: 1.75rem;
font-weight: 600;
line-height: 1;
letter-spacing: -0.025em;
}
.modal-description {
font-size: 0.875rem;
line-height: 1.25rem;
color: var(--color-muted-foreground);
}
.modal-footer {
display: flex;
flex-direction: column-reverse;
}
@media (min-width: 640px) {
.modal-footer {
flex-direction: row;
justify-content: flex-end;
gap: 0.5rem;
}
}
/* =============================================================================
Enhanced Alert Styles (consolidated from alerts.css)
============================================================================= */
.alert {
position: relative;
width: 100%;
border-radius: 0.5rem;
border-width: 1px;
padding: 1rem;
animation: slideInRight 0.3s ease-out;
}
.alert-default {
background-color: var(--color-background);
color: var(--color-foreground);
border-color: var(--color-border);
}
.alert-destructive {
border-color: var(--color-destructive);
color: var(--color-destructive);
}
.alert-success {
background-color: var(--color-success-500);
color: white;
border-color: var(--color-success-600);
}
.alert-error {
background-color: var(--color-error-500);
color: white;
border-color: var(--color-error-600);
}
.alert-warning {
background-color: var(--color-warning-500);
color: white;
border-color: var(--color-warning-600);
}
.alert-info {
background-color: var(--color-info-500);
color: white;
border-color: var(--color-info-600);
}
/* Toast/Alert positioning (fixed position variant) */
.alert-toast {
position: fixed;
z-index: 50;
padding-left: 1rem;
padding-right: 1rem;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
border-radius: 0.5rem;
right: 1rem;
top: 1rem;
box-shadow: var(--shadow-lg);
}
.alert-title {
margin-bottom: 0.25rem;
font-weight: 500;
line-height: 1;
letter-spacing: -0.025em;
}
.alert-description {
font-size: 0.875rem;
line-height: 1.25rem;
opacity: 0.9;
}
/* =============================================================================
Enhanced Badge Styles
============================================================================= */
.badge {
display: inline-flex;
align-items: center;
border-radius: 9999px;
border-width: 1px;
padding-left: 0.625rem;
padding-right: 0.625rem;
padding-top: 0.125rem;
padding-bottom: 0.125rem;
font-size: 0.75rem;
line-height: 1rem;
font-weight: 600;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
--tw-ring-color: var(--color-primary);
}
.badge:focus {
outline: 2px solid transparent;
outline-offset: 2px;
--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);
}
.badge-default {
border-color: transparent;
background-color: var(--color-primary);
color: var(--color-primary-foreground);
}
.badge-default:hover {
background-color: var(--color-primary-700);
}
.badge-secondary {
border-color: transparent;
background-color: var(--color-secondary);
color: var(--color-secondary-foreground);
}
.badge-secondary:hover {
background-color: var(--color-secondary-300);
}
.badge-destructive {
border-color: transparent;
background-color: var(--color-destructive);
color: var(--color-destructive-foreground);
}
.badge-destructive:hover {
background-color: var(--color-error-700);
}
.badge-outline {
color: var(--color-foreground);
border-color: var(--color-border);
}
.badge-success {
border-color: transparent;
background-color: var(--color-success-500);
color: white;
}
.badge-warning {
border-color: transparent;
background-color: var(--color-warning-500);
color: white;
}
.badge-info {
border-color: transparent;
background-color: var(--color-info-500);
color: white;
}
/* =============================================================================
Enhanced Table Styles
============================================================================= */
.table {
width: 100%;
caption-side: bottom;
font-size: 0.875rem;
line-height: 1.25rem;
}
.table-header {
border-bottom: 1px solid var(--color-border);
}
.table-body {
--tw-divide-color: var(--color-border);
}
.table-body > * + * {
border-top-width: 1px;
border-color: var(--color-border);
}
.table-row {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
border-bottom: 1px solid var(--color-border);
}
.table-row:hover {
background-color: var(--color-muted);
}
.table-head {
height: 3rem;
padding-left: 1rem;
padding-right: 1rem;
text-align: left;
vertical-align: middle;
font-weight: 500;
color: var(--color-muted-foreground);
}
.table-cell {
padding: 1rem;
vertical-align: middle;
}
/* =============================================================================
Enhanced Skeleton Styles
============================================================================= */
.skeleton {
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
border-radius: 0.375rem;
background-color: var(--color-muted);
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
/* =============================================================================
Enhanced Separator Styles
============================================================================= */
.separator {
flex-shrink: 0;
background-color: var(--color-border);
}
.separator-horizontal {
height: 1px;
width: 100%;
}
.separator-vertical {
height: 100%;
width: 1px;
}
/* =============================================================================
Enhanced Avatar Styles
============================================================================= */
.avatar {
position: relative;
display: flex;
height: 2.5rem;
width: 2.5rem;
flex-shrink: 0;
overflow: hidden;
border-radius: 9999px;
}
.avatar-image {
aspect-ratio: 1 / 1;
height: 100%;
width: 100%;
object-fit: cover;
}
.avatar-fallback {
display: flex;
height: 100%;
width: 100%;
align-items: center;
justify-content: center;
border-radius: 9999px;
background-color: var(--color-muted);
}
/* =============================================================================
Enhanced Progress Styles
============================================================================= */
.progress {
position: relative;
height: 1rem;
width: 100%;
overflow: hidden;
border-radius: 9999px;
background-color: var(--color-secondary);
}
.progress-indicator {
height: 100%;
width: 100%;
flex: 1;
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
background-color: var(--color-primary);
}
/* =============================================================================
Enhanced Scroll Area Styles
============================================================================= */
.scroll-area {
position: relative;
overflow: hidden;
}
.scroll-viewport {
height: 100%;
width: 100%;
border-radius: inherit;
}
.scroll-bar {
display: flex;
touch-action: none;
user-select: none;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.scroll-thumb {
position: relative;
flex: 1;
border-radius: 9999px;
background-color: var(--color-border);
}
/* =============================================================================
Enhanced Tabs Styles
============================================================================= */
.tabs-list {
display: inline-flex;
height: 2.5rem;
align-items: center;
justify-content: center;
border-radius: 0.375rem;
padding: 0.25rem;
background-color: var(--color-muted);
color: var(--color-muted-foreground);
}
.tabs-trigger {
display: inline-flex;
align-items: center;
justify-content: center;
white-space: nowrap;
border-radius: 0.125rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
padding-top: 0.375rem;
padding-bottom: 0.375rem;
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 500;
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
--tw-ring-color: var(--color-primary);
--tw-ring-offset-color: var(--color-background);
}
.tabs-trigger:focus-visible {
outline: 2px solid transparent;
outline-offset: 2px;
--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);
}
.tabs-trigger:disabled {
pointer-events: none;
opacity: 0.5;
}
.tabs-trigger[data-state=active] {
background-color: var(--color-background);
color: var(--color-foreground);
box-shadow: var(--shadow-sm);
}
.tabs-content {
margin-top: 0.5rem;
--tw-ring-color: var(--color-primary);
--tw-ring-offset-color: var(--color-background);
}
.tabs-content:focus-visible {
outline: 2px solid transparent;
outline-offset: 2px;
--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);
}
/* =============================================================================
Enhanced Tooltip Styles
============================================================================= */
.tooltip-content {
z-index: 50;
overflow: hidden;
border-radius: 0.375rem;
border-width: 1px;
padding-left: 0.75rem;
padding-right: 0.75rem;
padding-top: 0.375rem;
padding-bottom: 0.375rem;
font-size: 0.875rem;
line-height: 1.25rem;
animation: fadeIn 0.15s ease-out, scaleIn 0.15s ease-out;
background-color: var(--color-popover);
color: var(--color-popover-foreground);
border-color: var(--color-border);
box-shadow: var(--shadow-md);
}
/* =============================================================================
Enhanced Switch Styles
============================================================================= */
.switch {
display: inline-flex;
height: 1.5rem;
width: 2.75rem;
flex-shrink: 0;
cursor: pointer;
align-items: center;
border-radius: 9999px;
border-width: 2px;
border-color: transparent;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
--tw-ring-color: var(--color-primary);
--tw-ring-offset-color: var(--color-background);
}
.switch:focus-visible {
outline: 2px solid transparent;
outline-offset: 2px;
--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);
}
.switch:disabled {
cursor: not-allowed;
opacity: 0.5;
}
.switch[data-state=checked] {
background-color: var(--color-primary);
}
.switch[data-state=unchecked] {
background-color: var(--color-input);
}
.switch-thumb {
pointer-events: none;
display: block;
height: 1.25rem;
width: 1.25rem;
border-radius: 9999px;
--tw-ring-shadow: 0 0 #0000;
transition-property: transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
background-color: var(--color-background);
box-shadow: var(--shadow-lg);
}
.switch-thumb[data-state=checked] {
transform: translateX(1.25rem);
}
.switch-thumb[data-state=unchecked] {
transform: translateX(0);
}
/* =============================================================================
Enhanced Checkbox Styles
============================================================================= */
.checkbox {
height: 1rem;
width: 1rem;
flex-shrink: 0;
border-radius: 0.125rem;
border-width: 1px;
border-color: var(--color-primary);
--tw-ring-color: var(--color-primary);
--tw-ring-offset-color: var(--color-background);
}
.checkbox:focus-visible {
outline: 2px solid transparent;
outline-offset: 2px;
--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);
}
.checkbox:disabled {
cursor: not-allowed;
opacity: 0.5;
}
.checkbox[data-state=checked] {
background-color: var(--color-primary);
color: var(--color-primary-foreground);
}
/* =============================================================================
Enhanced Radio Styles
============================================================================= */
.radio {
aspect-ratio: 1 / 1;
height: 1rem;
width: 1rem;
border-radius: 9999px;
border-width: 1px;
border-color: var(--color-primary);
color: var(--color-primary);
--tw-ring-color: var(--color-primary);
--tw-ring-offset-color: var(--color-background);
}
.radio:focus {
outline: none;
}
.radio: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);
}
.radio:disabled {
cursor: not-allowed;
opacity: 0.5;
}
/* =============================================================================
Enhanced Select Styles
============================================================================= */
.select-trigger {
display: flex;
height: 2.5rem;
width: 100%;
align-items: center;
justify-content: space-between;
border-radius: 0.375rem;
border-width: 1px;
padding-left: 0.75rem;
padding-right: 0.75rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
font-size: 0.875rem;
line-height: 1.25rem;
border-color: var(--color-border);
background-color: var(--color-background);
--tw-ring-color: var(--color-primary);
--tw-ring-offset-color: var(--color-background);
}
.select-trigger:focus {
outline: none;
--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);
}
.select-trigger:disabled {
cursor: not-allowed;
opacity: 0.5;
}
.select-trigger::placeholder {
color: var(--color-muted-foreground);
}
.select-content {
position: relative;
z-index: 50;
max-height: 24rem;
min-width: 8rem;
overflow: hidden;
border-radius: 0.375rem;
border-width: 1px;
background-color: var(--color-popover);
color: var(--color-popover-foreground);
border-color: var(--color-border);
box-shadow: var(--shadow-md);
}
.select-item {
position: relative;
display: flex;
width: 100%;
cursor: default;
user-select: none;
align-items: center;
border-radius: 0.125rem;
padding-top: 0.375rem;
padding-bottom: 0.375rem;
padding-left: 2rem;
padding-right: 0.5rem;
font-size: 0.875rem;
line-height: 1.25rem;
outline: none;
}
.select-item[data-disabled] {
pointer-events: none;
opacity: 0.5;
}
.select-item:focus,
.select-item:hover {
background-color: var(--color-accent);
color: var(--color-accent-foreground);
}
/* =============================================================================
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 slideInRight {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@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 {
width: 95vw;
max-width: none;
}
.dropdown-content {
width: 100vw;
max-width: 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;
}
}
/* =============================================================================
Loading States
============================================================================= */
.loading {
opacity: 0.6;
pointer-events: none;
}
.spinner {
display: inline-block;
width: 1rem;
height: 1rem;
border: 2px solid var(--color-secondary-200);
border-radius: 50%;
border-top-color: var(--color-primary);
animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
/* =============================================================================
Utility Gradient Classes
============================================================================= */
.text-gradient {
background: linear-gradient(135deg, var(--color-primary), var(--color-accent-500));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.bg-gradient-primary {
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-700));
}
.bg-gradient-secondary {
background: linear-gradient(135deg, var(--color-accent-500), var(--color-accent-700));
}
Reference in New Issue View Git Blame Copy Permalink