| /* src/styles/themes.css */ | |
| /* ============================================ | |
| CSS Custom Properties (Variables) | |
| ============================================ */ | |
| :root { | |
| /* ===== Primary Colors ===== */ | |
| --color-primary: #4F46E5; | |
| --color-primary-hover: #6366F1; | |
| --color-primary-active: #4338CA; | |
| --color-primary-light: #E0E7FF; | |
| --color-primary-dark: #3730A3; | |
| --color-primary-contrast: #FFFFFF; | |
| --color-primary-rgb: 79, 70, 229; | |
| --color-primary-hover-rgb: 99, 102, 241; | |
| --color-primary-active-rgb: 67, 56, 202; | |
| /* ===== Secondary Colors ===== */ | |
| --color-secondary: #10B981; | |
| --color-secondary-hover: #34D399; | |
| --color-secondary-active: #059669; | |
| --color-secondary-light: #D1FAE5; | |
| --color-secondary-dark: #047857; | |
| --color-secondary-contrast: #FFFFFF; | |
| --color-secondary-rgb: 16, 185, 129; | |
| /* ===== Background & Surface ===== */ | |
| --color-background: #FFFFFF; | |
| --color-background-alt: #F8FAFC; | |
| --color-surface: #F8FAFC; | |
| --color-surface-hover: #F1F5F9; | |
| --color-surface-active: #E2E8F0; | |
| --color-surface-elevated: #FFFFFF; | |
| /* ===== Text Colors ===== */ | |
| --color-text: #0F172A; | |
| --color-text-primary: #0F172A; | |
| --color-text-secondary: #475569; | |
| --color-text-tertiary: #64748B; | |
| --color-text-disabled: #94A3B8; | |
| --color-text-placeholder: #A1A1AA; | |
| --color-text-inverse: #FFFFFF; | |
| --color-text-link: #4F46E5; | |
| --color-text-link-hover: #6366F1; | |
| /* ===== Border Colors ===== */ | |
| --color-border: #E2E8F0; | |
| --color-border-light: #F1F5F9; | |
| --color-border-dark: #CBD5E1; | |
| --color-border-focus: #4F46E5; | |
| --color-border-error: #EF4444; | |
| --color-border-success: #10B981; | |
| /* ===== Status Colors ===== */ | |
| --color-success: #10B981; | |
| --color-success-light: #D1FAE5; | |
| --color-success-dark: #059669; | |
| --color-success-rgb: 16, 185, 129; | |
| --color-warning: #F59E0B; | |
| --color-warning-light: #FEF3C7; | |
| --color-warning-dark: #D97706; | |
| --color-warning-rgb: 245, 158, 11; | |
| --color-error: #EF4444; | |
| --color-error-light: #FEE2E2; | |
| --color-error-dark: #DC2626; | |
| --color-error-rgb: 239, 68, 68; | |
| --color-info: #3B82F6; | |
| --color-info-light: #DBEAFE; | |
| --color-info-dark: #2563EB; | |
| --color-info-rgb: 59, 130, 246; | |
| /* ===== Shadow Colors ===== */ | |
| --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); | |
| --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1); | |
| --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1); | |
| --shadow-xl: 0 20px 25px -5px 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); | |
| /* ===== Spacing ===== */ | |
| --spacing-0: 0px; | |
| --spacing-1: 4px; | |
| --spacing-2: 8px; | |
| --spacing-3: 12px; | |
| --spacing-4: 16px; | |
| --spacing-5: 20px; | |
| --spacing-6: 24px; | |
| --spacing-8: 32px; | |
| --spacing-10: 40px; | |
| --spacing-12: 48px; | |
| --spacing-16: 64px; | |
| --spacing-20: 80px; | |
| --spacing-24: 96px; | |
| /* ===== Border Radius ===== */ | |
| --radius-none: 0px; | |
| --radius-sm: 4px; | |
| --radius-md: 8px; | |
| --radius-lg: 12px; | |
| --radius-xl: 16px; | |
| --radius-2xl: 20px; | |
| --radius-3xl: 24px; | |
| --radius-full: 9999px; | |
| /* ===== Font Sizes ===== */ | |
| --font-xs: 12px; | |
| --font-sm: 14px; | |
| --font-base: 16px; | |
| --font-lg: 18px; | |
| --font-xl: 20px; | |
| --font-2xl: 24px; | |
| --font-3xl: 30px; | |
| --font-4xl: 36px; | |
| --font-5xl: 48px; | |
| /* ===== Font Weights ===== */ | |
| --font-light: 300; | |
| --font-normal: 400; | |
| --font-medium: 500; | |
| --font-semibold: 600; | |
| --font-bold: 700; | |
| --font-extrabold: 800; | |
| /* ===== Z-Index Layers ===== */ | |
| --z-dropdown: 100; | |
| --z-sticky: 200; | |
| --z-fixed: 300; | |
| --z-modal-backdrop: 400; | |
| --z-modal: 500; | |
| --z-popover: 600; | |
| --z-tooltip: 700; | |
| --z-toast: 800; | |
| /* ===== Animation Timing ===== */ | |
| --duration-fast: 150ms; | |
| --duration-normal: 200ms; | |
| --duration-slow: 300ms; | |
| --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); | |
| --ease-out: cubic-bezier(0, 0, 0.2, 1); | |
| --ease-in: cubic-bezier(0.4, 0, 1, 1); | |
| } | |
| /* ============================================ | |
| Dark Mode Overrides | |
| ============================================ */ | |
| .dark { | |
| /* Background & Surface */ | |
| --color-background: #0F172A; | |
| --color-background-alt: #020617; | |
| --color-surface: #1E293B; | |
| --color-surface-hover: #334155; | |
| --color-surface-active: #475569; | |
| --color-surface-elevated: #1E293B; | |
| /* Text Colors */ | |
| --color-text: #F1F5F9; | |
| --color-text-primary: #F1F5F9; | |
| --color-text-secondary: #94A3B8; | |
| --color-text-tertiary: #64748B; | |
| --color-text-disabled: #475569; | |
| --color-text-placeholder: #334155; | |
| --color-text-inverse: #0F172A; | |
| --color-text-link: #818CF8; | |
| --color-text-link-hover: #A5B4FC; | |
| /* Border Colors */ | |
| --color-border: #334155; | |
| --color-border-light: #1E293B; | |
| --color-border-dark: #475569; | |
| /* Shadow Colors (darker for dark mode) */ | |
| --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3); | |
| --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4); | |
| --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4); | |
| --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.4); | |
| --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.5); | |
| /* Status Colors (adjusted for dark mode) */ | |
| --color-success-light: #064E3B; | |
| --color-warning-light: #78350F; | |
| --color-error-light: #7F1D1D; | |
| --color-info-light: #1E3A8A; | |
| } | |
| /* ============================================ | |
| Accent Theme Variations | |
| ============================================ */ | |
| .theme-blue { | |
| --color-primary: #3B82F6; | |
| --color-primary-hover: #60A5FA; | |
| --color-primary-active: #2563EB; | |
| --color-primary-light: #DBEAFE; | |
| --color-primary-dark: #1D4ED8; | |
| --color-primary-contrast: #FFFFFF; | |
| --color-primary-rgb: 59, 130, 246; | |
| } | |
| .theme-green { | |
| --color-primary: #10B981; | |
| --color-primary-hover: #34D399; | |
| --color-primary-active: #059669; | |
| --color-primary-light: #D1FAE5; | |
| --color-primary-dark: #047857; | |
| --color-primary-contrast: #FFFFFF; | |
| --color-primary-rgb: 16, 185, 129; | |
| } | |
| .theme-purple { | |
| --color-primary: #8B5CF6; | |
| --color-primary-hover: #A78BFA; | |
| --color-primary-active: #7C3AED; | |
| --color-primary-light: #EDE9FE; | |
| --color-primary-dark: #6D28D9; | |
| --color-primary-contrast: #FFFFFF; | |
| --color-primary-rgb: 139, 92, 246; | |
| } | |
| .theme-orange { | |
| --color-primary: #F97316; | |
| --color-primary-hover: #FB923C; | |
| --color-primary-active: #EA580C; | |
| --color-primary-light: #FFEDD5; | |
| --color-primary-dark: #C2410C; | |
| --color-primary-contrast: #FFFFFF; | |
| --color-primary-rgb: 249, 115, 22; | |
| } | |
| .theme-rose { | |
| --color-primary: #F43F5E; | |
| --color-primary-hover: #FB7185; | |
| --color-primary-active: #E11D48; | |
| --color-primary-light: #FFF1F2; | |
| --color-primary-dark: #BE123C; | |
| --color-primary-contrast: #FFFFFF; | |
| --color-primary-rgb: 244, 63, 94; | |
| } | |
| .theme-amber { | |
| --color-primary: #F59E0B; | |
| --color-primary-hover: #FBBF24; | |
| --color-primary-active: #D97706; | |
| --color-primary-light: #FEF3C7; | |
| --color-primary-dark: #B45309; | |
| --color-primary-contrast: #FFFFFF; | |
| --color-primary-rgb: 245, 158, 11; | |
| } | |
| /* ============================================ | |
| Base Styles | |
| ============================================ */ | |
| *, | |
| *::before, | |
| *::after { | |
| box-sizing: border-box; | |
| transition: background-color var(--duration-normal) var(--ease-in-out), | |
| color var(--duration-normal) var(--ease-in-out), | |
| border-color var(--duration-normal) var(--ease-in-out), | |
| box-shadow var(--duration-normal) var(--ease-in-out); | |
| } | |
| html { | |
| font-size: 16px; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| text-rendering: optimizeLegibility; | |
| } | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| /* background-color: var(--color-background); */ | |
| color: var(--color-text); | |
| /* font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', | |
| 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', | |
| sans-serif; */ | |
| font-size: var(--font-base); | |
| line-height: 1.5; | |
| min-height: 100vh; | |
| } | |
| /* ============================================ | |
| Typography | |
| ============================================ */ | |
| h1, .h1 { | |
| font-size: var(--font-4xl); | |
| font-weight: var(--font-bold); | |
| line-height: 1.2; | |
| } | |
| h2, .h2 { | |
| font-size: var(--font-3xl); | |
| font-weight: var(--font-bold); | |
| line-height: 1.3; | |
| } | |
| h3, .h3 { | |
| font-size: var(--font-2xl); | |
| font-weight: var(--font-semibold); | |
| line-height: 1.4; | |
| } | |
| h4, .h4 { | |
| font-size: var(--font-xl); | |
| font-weight: var(--font-semibold); | |
| line-height: 1.4; | |
| } | |
| h5, .h5 { | |
| font-size: var(--font-lg); | |
| font-weight: var(--font-semibold); | |
| line-height: 1.5; | |
| } | |
| h6, .h6 { | |
| font-size: var(--font-base); | |
| font-weight: var(--font-semibold); | |
| line-height: 1.5; | |
| } | |
| a { | |
| color: var(--color-text-link); | |
| text-decoration: none; | |
| transition: color var(--duration-fast) var(--ease-out); | |
| } | |
| a:hover { | |
| color: var(--color-text-link-hover); | |
| text-decoration: underline; | |
| } | |
| /* ============================================ | |
| Scrollbar Styling | |
| ============================================ */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| height: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: var(--color-surface); | |
| border-radius: var(--radius-full); | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: var(--color-border); | |
| border-radius: var(--radius-full); | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: var(--color-text-tertiary); | |
| } | |
| ::-webkit-scrollbar-corner { | |
| background: transparent; | |
| } | |
| /* Firefox scrollbar */ | |
| * { | |
| scrollbar-width: thin; | |
| scrollbar-color: var(--color-border) var(--color-surface); | |
| } | |
| /* ============================================ | |
| Selection Styles | |
| ============================================ */ | |
| ::selection { | |
| background-color: rgba(var(--color-primary-rgb), 0.2); | |
| color: var(--color-text); | |
| } | |
| ::-moz-selection { | |
| background-color: rgba(var(--color-primary-rgb), 0.2); | |
| color: var(--color-text); | |
| } | |
| /* ============================================ | |
| Focus Styles (Accessibility) | |
| ============================================ */ | |
| :focus-visible { | |
| outline: 2px solid var(--color-primary); | |
| outline-offset: 2px; | |
| border-radius: var(--radius-sm); | |
| } | |
| button:focus-visible, | |
| a:focus-visible, | |
| input:focus-visible, | |
| textarea:focus-visible, | |
| select:focus-visible { | |
| outline: 2px solid var(--color-primary); | |
| outline-offset: 2px; | |
| } | |
| /* ============================================ | |
| Form Elements | |
| ============================================ */ | |
| input, | |
| textarea, | |
| select, | |
| button { | |
| font-family: inherit; | |
| } | |
| input:focus, | |
| textarea:focus, | |
| select:focus { | |
| outline: none; | |
| border-color: var(--color-primary); | |
| box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1); | |
| } | |
| /* ============================================ | |
| Card Styles | |
| ============================================ */ | |
| .card { | |
| background-color: var(--color-surface); | |
| border: 1px solid var(--color-border); | |
| border-radius: var(--radius-lg); | |
| padding: var(--spacing-4); | |
| transition: box-shadow var(--duration-normal) var(--ease-in-out); | |
| } | |
| .card:hover { | |
| box-shadow: var(--shadow-md); | |
| } | |
| /* ============================================ | |
| Button Styles | |
| ============================================ */ | |
| .btn { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: var(--spacing-2); | |
| padding: var(--spacing-2) var(--spacing-4); | |
| font-size: var(--font-sm); | |
| font-weight: var(--font-medium); | |
| border-radius: var(--radius-md); | |
| cursor: pointer; | |
| transition: all var(--duration-fast) var(--ease-out); | |
| border: 1px solid transparent; | |
| } | |
| .btn-primary { | |
| background-color: var(--color-primary); | |
| color: var(--color-primary-contrast); | |
| } | |
| .btn-primary:hover { | |
| background-color: var(--color-primary-hover); | |
| transform: translateY(-1px); | |
| } | |
| .btn-primary:active { | |
| background-color: var(--color-primary-active); | |
| transform: translateY(0); | |
| } | |
| .btn-secondary { | |
| background-color: var(--color-secondary); | |
| color: var(--color-secondary-contrast); | |
| } | |
| .btn-secondary:hover { | |
| background-color: var(--color-secondary-hover); | |
| transform: translateY(-1px); | |
| } | |
| .btn-outline { | |
| background-color: transparent; | |
| border-color: var(--color-border); | |
| color: var(--color-text); | |
| } | |
| .btn-outline:hover { | |
| background-color: var(--color-surface-hover); | |
| border-color: var(--color-primary); | |
| } | |
| /* ============================================ | |
| Modal Styles | |
| ============================================ */ | |
| .modal-overlay { | |
| position: fixed; | |
| inset: 0; | |
| background-color: rgba(0, 0, 0, 0.5); | |
| backdrop-filter: blur(4px); | |
| z-index: var(--z-modal-backdrop); | |
| } | |
| .modal-content { | |
| position: fixed; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| background-color: var(--color-surface); | |
| border-radius: var(--radius-xl); | |
| box-shadow: var(--shadow-xl); | |
| z-index: var(--z-modal); | |
| width: 90%; | |
| max-width: 500px; | |
| max-height: 85vh; | |
| overflow-y: auto; | |
| } | |
| /* ============================================ | |
| Toast / Notification Styles | |
| ============================================ */ | |
| .toast-success { | |
| background-color: var(--color-success); | |
| color: white; | |
| } | |
| .toast-error { | |
| background-color: var(--color-error); | |
| color: white; | |
| } | |
| .toast-warning { | |
| background-color: var(--color-warning); | |
| color: white; | |
| } | |
| .toast-info { | |
| background-color: var(--color-info); | |
| color: white; | |
| } | |
| /* ============================================ | |
| Loading States | |
| ============================================ */ | |
| @keyframes spin { | |
| to { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| .spinner { | |
| animation: spin 1s linear infinite; | |
| } | |
| .skeleton { | |
| background: linear-gradient( | |
| 90deg, | |
| var(--color-surface) 25%, | |
| var(--color-surface-hover) 50%, | |
| var(--color-surface) 75% | |
| ); | |
| background-size: 200% 100%; | |
| animation: shimmer 1.5s infinite; | |
| border-radius: var(--radius-md); | |
| } | |
| @keyframes shimmer { | |
| 0% { | |
| background-position: 200% 0; | |
| } | |
| 100% { | |
| background-position: -200% 0; | |
| } | |
| } | |
| /* ============================================ | |
| Utilities | |
| ============================================ */ | |
| .container { | |
| max-width: 1280px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| padding-left: var(--spacing-4); | |
| padding-right: var(--spacing-4); | |
| } | |
| .text-center { | |
| text-align: center; | |
| } | |
| .text-left { | |
| text-align: left; | |
| } | |
| .text-right { | |
| text-align: right; | |
| } | |
| .hidden { | |
| display: none; | |
| } | |
| .visible { | |
| display: block; | |
| } | |
| /* ============================================ | |
| Responsive Design | |
| ============================================ */ | |
| @media (max-width: 640px) { | |
| :root { | |
| --font-4xl: 30px; | |
| --font-3xl: 24px; | |
| --font-2xl: 20px; | |
| --font-xl: 18px; | |
| } | |
| .container { | |
| padding-left: var(--spacing-3); | |
| padding-right: var(--spacing-3); | |
| } | |
| .modal-content { | |
| width: 95%; | |
| margin: var(--spacing-4); | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .hide-scrollbar::-webkit-scrollbar { | |
| display: none; | |
| } | |
| .hide-scrollbar { | |
| -ms-overflow-style: none; | |
| scrollbar-width: none; | |
| } | |
| } | |
| /* ============================================ | |
| Print Styles | |
| ============================================ */ | |
| @media print { | |
| body { | |
| background-color: white; | |
| color: black; | |
| } | |
| .no-print { | |
| display: none ; | |
| } | |
| a { | |
| text-decoration: underline; | |
| } | |
| } |
Xet Storage Details
- Size:
- 14.9 kB
- Xet hash:
- f887b5f1435025f6392696f37be8358b0c8b60fd26adc14f30b4c82323d81a5a
·
Xet efficiently stores files, intelligently splitting them into unique chunks and accelerating uploads and downloads. More info.