Spaces:
Running
Running
| /* ============================================ | |
| 🌿 Ivy's GPU Art Studio — Styles | |
| Dark, Modern, Sexy Theme | |
| ============================================ */ | |
| :root { | |
| /* Colors - Dark Theme */ | |
| --bg-primary: #0a0a0f; | |
| --bg-secondary: #12121a; | |
| --bg-tertiary: #1a1a25; | |
| --bg-card: #1e1e2a; | |
| --bg-hover: #252535; | |
| /* Accent Colors */ | |
| --accent-primary: #6366f1; /* Indigo */ | |
| --accent-secondary: #8b5cf6; /* Purple */ | |
| --accent-tertiary: #06b6d4; /* Cyan */ | |
| --accent-success: #10b981; /* Emerald */ | |
| --accent-warning: #f59e0b; /* Amber */ | |
| --accent-error: #ef4444; /* Red */ | |
| /* Ivy's Green 🌿 */ | |
| --ivy-green: #22c55e; | |
| --ivy-green-dark: #16a34a; | |
| --ivy-green-light: #4ade80; | |
| /* Text */ | |
| --text-primary: #f8fafc; | |
| --text-secondary: #94a3b8; | |
| --text-muted: #64748b; | |
| /* Borders */ | |
| --border-color: #2e2e3e; | |
| --border-focus: var(--accent-primary); | |
| /* Shadows */ | |
| --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); | |
| --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.5); | |
| --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5); | |
| --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.3); | |
| /* Spacing */ | |
| --spacing-xs: 0.25rem; | |
| --spacing-sm: 0.5rem; | |
| --spacing-md: 1rem; | |
| --spacing-lg: 1.5rem; | |
| --spacing-xl: 2rem; | |
| /* Border Radius */ | |
| --radius-sm: 0.375rem; | |
| --radius-md: 0.5rem; | |
| --radius-lg: 0.75rem; | |
| --radius-xl: 1rem; | |
| /* Transitions */ | |
| --transition-fast: 150ms ease; | |
| --transition-normal: 250ms ease; | |
| --transition-slow: 350ms ease; | |
| /* Fonts */ | |
| --font-sans: "Space Grotesk", system-ui, sans-serif; | |
| --font-mono: "JetBrains Mono", monospace; | |
| } | |
| /* ============================================ | |
| Reset & Base | |
| ============================================ */ | |
| *, | |
| *::before, | |
| *::after { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| html { | |
| font-size: 16px; | |
| scroll-behavior: smooth; | |
| } | |
| body { | |
| font-family: var(--font-sans); | |
| background: var(--bg-primary); | |
| color: var(--text-primary); | |
| line-height: 1.6; | |
| min-height: 100vh; | |
| overflow-x: hidden; | |
| /* Subtle animated gradient background */ | |
| background: | |
| radial-gradient(ellipse at top left, rgba(99, 102, 241, 0.1) 0%, transparent 50%), | |
| radial-gradient(ellipse at bottom right, rgba(139, 92, 246, 0.1) 0%, transparent 50%), var(--bg-primary); | |
| } | |
| /* ============================================ | |
| App Container | |
| ============================================ */ | |
| .app-container { | |
| display: flex; | |
| flex-direction: column; | |
| min-height: 100vh; | |
| max-width: 1600px; | |
| margin: 0 auto; | |
| padding: var(--spacing-md); | |
| } | |
| /* ============================================ | |
| Header | |
| ============================================ */ | |
| .header { | |
| text-align: center; | |
| padding: var(--spacing-lg) 0; | |
| margin-bottom: var(--spacing-md); | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: var(--spacing-sm); | |
| margin-bottom: var(--spacing-xs); | |
| } | |
| .logo-icon { | |
| font-size: 2.5rem; | |
| animation: gentle-float 3s ease-in-out infinite; | |
| } | |
| @keyframes gentle-float { | |
| 0%, | |
| 100% { | |
| transform: translateY(0); | |
| } | |
| 50% { | |
| transform: translateY(-5px); | |
| } | |
| } | |
| .header h1 { | |
| font-size: 2rem; | |
| font-weight: 600; | |
| background: linear-gradient(135deg, var(--ivy-green), var(--accent-tertiary)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .subtitle { | |
| color: var(--text-secondary); | |
| font-size: 0.9rem; | |
| font-family: var(--font-mono); | |
| } | |
| /* ============================================ | |
| Navigation Tabs | |
| ============================================ */ | |
| .tabs-container { | |
| display: flex; | |
| justify-content: center; | |
| gap: var(--spacing-sm); | |
| padding: var(--spacing-sm); | |
| background: var(--bg-secondary); | |
| border-radius: var(--radius-xl); | |
| margin-bottom: var(--spacing-lg); | |
| flex-wrap: wrap; | |
| } | |
| .tab { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--spacing-sm); | |
| padding: var(--spacing-sm) var(--spacing-lg); | |
| background: transparent; | |
| border: 2px solid transparent; | |
| border-radius: var(--radius-lg); | |
| color: var(--text-secondary); | |
| font-family: var(--font-sans); | |
| font-size: 0.95rem; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: all var(--transition-normal); | |
| } | |
| .tab:hover { | |
| color: var(--text-primary); | |
| background: var(--bg-tertiary); | |
| } | |
| .tab.active { | |
| color: var(--text-primary); | |
| background: var(--bg-card); | |
| border-color: var(--accent-primary); | |
| box-shadow: var(--shadow-glow); | |
| } | |
| .tab-icon { | |
| font-size: 1.2rem; | |
| } | |
| .tab-label { | |
| display: none; | |
| } | |
| @media (min-width: 640px) { | |
| .tab-label { | |
| display: inline; | |
| } | |
| } | |
| /* ============================================ | |
| Main Content | |
| ============================================ */ | |
| .main-content { | |
| display: grid; | |
| grid-template-columns: 1fr; | |
| gap: var(--spacing-lg); | |
| flex: 1; | |
| } | |
| @media (min-width: 1024px) { | |
| .main-content { | |
| grid-template-columns: 1fr 300px; | |
| } | |
| } | |
| /* ============================================ | |
| Canvas Container | |
| ============================================ */ | |
| .canvas-container { | |
| position: relative; | |
| background: var(--bg-secondary); | |
| border-radius: var(--radius-xl); | |
| overflow: hidden; | |
| aspect-ratio: 16 / 10; | |
| border: 1px solid var(--border-color); | |
| box-shadow: var(--shadow-lg); | |
| } | |
| #gpuCanvas, | |
| #threeCanvas { | |
| width: 100%; | |
| height: 100%; | |
| display: block; | |
| background: #000; | |
| } | |
| #p5Container, | |
| #p5AudioContainer { | |
| width: 100%; | |
| height: 100%; | |
| background: #0a0a0f; | |
| } | |
| #p5Container canvas, | |
| #p5AudioContainer canvas { | |
| display: block; | |
| } | |
| #gpuCanvas.hidden, | |
| #threeCanvas.hidden, | |
| #p5Container.hidden, | |
| #p5AudioContainer.hidden { | |
| display: none; | |
| } | |
| .error-message { | |
| position: absolute; | |
| inset: 0; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| background: rgba(10, 10, 15, 0.95); | |
| text-align: center; | |
| padding: var(--spacing-xl); | |
| } | |
| .error-message.hidden { | |
| display: none; | |
| } | |
| .error-icon { | |
| font-size: 3rem; | |
| margin-bottom: var(--spacing-md); | |
| } | |
| .error-message p { | |
| color: var(--text-secondary); | |
| margin-bottom: var(--spacing-sm); | |
| } | |
| .error-hint { | |
| font-size: 0.85rem; | |
| color: var(--text-muted); | |
| } | |
| .loading { | |
| position: absolute; | |
| inset: 0; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| background: rgba(10, 10, 15, 0.9); | |
| } | |
| .loading.hidden { | |
| display: none; | |
| } | |
| .loading-spinner { | |
| width: 48px; | |
| height: 48px; | |
| border: 3px solid var(--bg-tertiary); | |
| border-top-color: var(--accent-primary); | |
| border-radius: 50%; | |
| animation: spin 1s linear infinite; | |
| margin-bottom: var(--spacing-md); | |
| } | |
| @keyframes spin { | |
| to { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| /* ============================================ | |
| Controls Panel | |
| ============================================ */ | |
| .controls-panel { | |
| background: var(--bg-secondary); | |
| border-radius: var(--radius-xl); | |
| padding: var(--spacing-lg); | |
| border: 1px solid var(--border-color); | |
| height: fit-content; | |
| position: sticky; | |
| top: var(--spacing-md); | |
| } | |
| .controls-section { | |
| display: none; | |
| } | |
| .controls-section.active { | |
| display: block; | |
| } | |
| .controls-section.hidden { | |
| display: none; | |
| } | |
| .controls-section h3 { | |
| font-size: 1.1rem; | |
| font-weight: 600; | |
| margin-bottom: var(--spacing-lg); | |
| padding-bottom: var(--spacing-sm); | |
| border-bottom: 1px solid var(--border-color); | |
| } | |
| .control-group { | |
| margin-bottom: var(--spacing-md); | |
| } | |
| .control-group label { | |
| display: block; | |
| font-size: 0.85rem; | |
| color: var(--text-secondary); | |
| margin-bottom: var(--spacing-xs); | |
| } | |
| .control-group label span { | |
| color: var(--accent-tertiary); | |
| font-family: var(--font-mono); | |
| } | |
| /* Select */ | |
| select { | |
| width: 100%; | |
| padding: var(--spacing-sm) var(--spacing-md); | |
| background: var(--bg-tertiary); | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--radius-md); | |
| color: var(--text-primary); | |
| font-family: var(--font-sans); | |
| font-size: 0.9rem; | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| appearance: none; | |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E"); | |
| background-repeat: no-repeat; | |
| background-position: right 0.5rem center; | |
| background-size: 1.2rem; | |
| } | |
| select:hover { | |
| border-color: var(--accent-primary); | |
| } | |
| select:focus { | |
| outline: none; | |
| border-color: var(--accent-primary); | |
| box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2); | |
| } | |
| /* Range Slider */ | |
| input[type="range"] { | |
| width: 100%; | |
| height: 6px; | |
| background: var(--bg-tertiary); | |
| border-radius: var(--radius-sm); | |
| appearance: none; | |
| cursor: pointer; | |
| } | |
| input[type="range"]::-webkit-slider-thumb { | |
| appearance: none; | |
| width: 18px; | |
| height: 18px; | |
| background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); | |
| border-radius: 50%; | |
| cursor: pointer; | |
| transition: transform var(--transition-fast); | |
| box-shadow: var(--shadow-md); | |
| } | |
| input[type="range"]::-webkit-slider-thumb:hover { | |
| transform: scale(1.1); | |
| } | |
| input[type="range"]::-moz-range-thumb { | |
| width: 18px; | |
| height: 18px; | |
| background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); | |
| border-radius: 50%; | |
| cursor: pointer; | |
| border: none; | |
| } | |
| /* Buttons */ | |
| .btn { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: var(--spacing-sm); | |
| width: 100%; | |
| padding: var(--spacing-sm) var(--spacing-md); | |
| font-family: var(--font-sans); | |
| font-size: 0.9rem; | |
| font-weight: 500; | |
| border-radius: var(--radius-md); | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| border: none; | |
| } | |
| .btn-primary { | |
| background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); | |
| color: white; | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow-glow); | |
| } | |
| .btn-reset { | |
| background: var(--bg-tertiary); | |
| color: var(--text-secondary); | |
| border: 1px solid var(--border-color); | |
| margin-top: var(--spacing-md); | |
| } | |
| .btn-reset:hover { | |
| background: var(--bg-hover); | |
| color: var(--text-primary); | |
| border-color: var(--accent-primary); | |
| } | |
| .hint { | |
| font-size: 0.85rem; | |
| color: var(--accent-secondary); | |
| margin-top: var(--spacing-md); | |
| padding: var(--spacing-sm) var(--spacing-md); | |
| background: rgba(76, 175, 80, 0.1); | |
| border-left: 3px solid var(--accent-primary); | |
| border-radius: 0 var(--radius-sm) var(--radius-sm) 0; | |
| font-style: italic; | |
| } | |
| /* File Input */ | |
| input[type="file"] { | |
| display: none; | |
| } | |
| input[type="file"].hidden { | |
| display: none; | |
| } | |
| /* ============================================ | |
| Footer | |
| ============================================ */ | |
| .footer { | |
| text-align: center; | |
| padding: var(--spacing-xl) 0 var(--spacing-md); | |
| color: var(--text-muted); | |
| font-size: 0.85rem; | |
| } | |
| .footer-quote { | |
| font-style: italic; | |
| color: var(--ivy-green); | |
| margin-top: var(--spacing-xs); | |
| } | |
| /* ============================================ | |
| Utility Classes | |
| ============================================ */ | |
| .hidden { | |
| display: none ; | |
| } | |
| /* ============================================ | |
| Scrollbar Styling | |
| ============================================ */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| height: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: var(--bg-secondary); | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: var(--bg-tertiary); | |
| border-radius: var(--radius-sm); | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: var(--accent-primary); | |
| } | |
| /* ============================================ | |
| Responsive Adjustments | |
| ============================================ */ | |
| @media (max-width: 640px) { | |
| .header h1 { | |
| font-size: 1.5rem; | |
| } | |
| .tab { | |
| padding: var(--spacing-sm) var(--spacing-md); | |
| } | |
| .canvas-container { | |
| aspect-ratio: 4 / 3; | |
| } | |
| .controls-panel { | |
| position: relative; | |
| top: 0; | |
| } | |
| } | |
| /* ============================================ | |
| Animations | |
| ============================================ */ | |
| @keyframes pulse-glow { | |
| 0%, | |
| 100% { | |
| box-shadow: 0 0 20px rgba(99, 102, 241, 0.3); | |
| } | |
| 50% { | |
| box-shadow: 0 0 30px rgba(99, 102, 241, 0.5); | |
| } | |
| } | |
| .canvas-container:focus-within { | |
| animation: pulse-glow 2s ease-in-out infinite; | |
| } | |
| /* ============================================ | |
| Footer Links | |
| ============================================ */ | |
| .footer-link { | |
| color: var(--ivy-green); | |
| text-decoration: none; | |
| cursor: pointer; | |
| transition: color 0.2s; | |
| } | |
| .footer-link:hover { | |
| color: var(--ivy-green-light); | |
| text-decoration: underline; | |
| } | |
| .footer-links { | |
| display: flex; | |
| justify-content: center; | |
| gap: var(--spacing-lg); | |
| margin-top: var(--spacing-sm); | |
| } | |
| .footer-icon-link { | |
| color: var(--text-secondary); | |
| text-decoration: none; | |
| font-size: 1.25rem; | |
| transition: | |
| color 0.2s, | |
| transform 0.2s; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .footer-icon-link:hover { | |
| color: var(--ivy-green); | |
| transform: scale(1.1); | |
| } | |
| .footer-icon-link svg { | |
| width: 20px; | |
| height: 20px; | |
| } | |
| /* ============================================ | |
| About Modal | |
| ============================================ */ | |
| .modal { | |
| position: fixed; | |
| inset: 0; | |
| z-index: 1000; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: var(--spacing-lg); | |
| } | |
| .modal.hidden { | |
| display: none; | |
| } | |
| .modal-overlay { | |
| position: absolute; | |
| inset: 0; | |
| background: rgba(0, 0, 0, 0.8); | |
| backdrop-filter: blur(4px); | |
| } | |
| .modal-content { | |
| position: relative; | |
| background: var(--bg-secondary); | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--radius-lg); | |
| max-width: 700px; | |
| width: 100%; | |
| max-height: 85vh; | |
| overflow-y: auto; | |
| box-shadow: | |
| var(--shadow-lg), | |
| 0 0 40px rgba(34, 197, 94, 0.2); | |
| animation: modal-appear 0.3s ease-out; | |
| } | |
| @keyframes modal-appear { | |
| from { | |
| opacity: 0; | |
| transform: scale(0.95) translateY(-20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: scale(1) translateY(0); | |
| } | |
| } | |
| .modal-close { | |
| position: absolute; | |
| top: var(--spacing-md); | |
| right: var(--spacing-md); | |
| background: transparent; | |
| border: none; | |
| color: var(--text-secondary); | |
| font-size: 2rem; | |
| cursor: pointer; | |
| transition: | |
| color 0.2s, | |
| transform 0.2s; | |
| line-height: 1; | |
| padding: 0; | |
| width: 40px; | |
| height: 40px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 50%; | |
| } | |
| .modal-close:hover { | |
| color: var(--accent-error); | |
| background: rgba(239, 68, 68, 0.1); | |
| transform: rotate(90deg); | |
| } | |
| .modal-header { | |
| padding: var(--spacing-xl); | |
| padding-bottom: var(--spacing-md); | |
| border-bottom: 1px solid var(--border-color); | |
| text-align: center; | |
| } | |
| .modal-header h2 { | |
| font-family: "Space Grotesk", sans-serif; | |
| font-size: 1.75rem; | |
| color: var(--ivy-green); | |
| margin: 0; | |
| } | |
| .modal-version { | |
| color: var(--text-muted); | |
| font-size: 0.875rem; | |
| margin-top: var(--spacing-xs); | |
| } | |
| .modal-body { | |
| padding: var(--spacing-lg); | |
| } | |
| .about-section { | |
| margin-bottom: var(--spacing-xl); | |
| } | |
| .about-section:last-child { | |
| margin-bottom: 0; | |
| } | |
| .about-section h3 { | |
| font-family: "Space Grotesk", sans-serif; | |
| font-size: 1.125rem; | |
| color: var(--text-primary); | |
| margin-bottom: var(--spacing-md); | |
| display: flex; | |
| align-items: center; | |
| gap: var(--spacing-sm); | |
| } | |
| .about-section p { | |
| color: var(--text-secondary); | |
| line-height: 1.6; | |
| margin-bottom: var(--spacing-sm); | |
| } | |
| .about-section ul { | |
| color: var(--text-secondary); | |
| padding-left: var(--spacing-lg); | |
| line-height: 1.8; | |
| } | |
| .about-section ul li { | |
| margin-bottom: var(--spacing-xs); | |
| } | |
| .family-list { | |
| list-style: none; | |
| padding: 0; | |
| } | |
| .family-list li { | |
| padding: var(--spacing-xs) 0; | |
| } | |
| /* Help Grid */ | |
| .help-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); | |
| gap: var(--spacing-md); | |
| } | |
| .help-item { | |
| display: flex; | |
| gap: var(--spacing-md); | |
| padding: var(--spacing-md); | |
| background: var(--bg-tertiary); | |
| border-radius: var(--radius-md); | |
| border: 1px solid var(--border-color); | |
| transition: border-color 0.2s; | |
| } | |
| .help-item:hover { | |
| border-color: var(--ivy-green); | |
| } | |
| .help-icon { | |
| font-size: 1.5rem; | |
| flex-shrink: 0; | |
| } | |
| .help-item strong { | |
| color: var(--text-primary); | |
| display: block; | |
| margin-bottom: var(--spacing-xs); | |
| } | |
| .help-item p { | |
| font-size: 0.875rem; | |
| margin: 0; | |
| } | |
| /* About Footer */ | |
| .about-footer { | |
| text-align: center; | |
| padding-top: var(--spacing-lg); | |
| border-top: 1px solid var(--border-color); | |
| } | |
| .modal-quote { | |
| font-style: italic; | |
| color: var(--ivy-green); | |
| margin-bottom: var(--spacing-lg); | |
| } | |
| .modal-links { | |
| display: flex; | |
| justify-content: center; | |
| gap: var(--spacing-lg); | |
| flex-wrap: wrap; | |
| } | |
| .modal-link { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: var(--spacing-xs); | |
| padding: var(--spacing-sm) var(--spacing-lg); | |
| background: var(--bg-tertiary); | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--radius-md); | |
| color: var(--text-primary); | |
| text-decoration: none; | |
| font-size: 0.875rem; | |
| transition: all 0.2s; | |
| } | |
| .modal-link:hover { | |
| background: var(--ivy-green); | |
| border-color: var(--ivy-green); | |
| color: #000; | |
| transform: translateY(-2px); | |
| } | |
| /* Wallet Support Section */ | |
| .wallet-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--spacing-md); | |
| margin: var(--spacing-md) 0; | |
| } | |
| .wallet-item { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--spacing-md); | |
| padding: var(--spacing-md); | |
| background: var(--bg-tertiary); | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--radius-md); | |
| transition: border-color 0.2s; | |
| } | |
| .wallet-item:hover { | |
| border-color: var(--ivy-green); | |
| } | |
| .wallet-icon { | |
| font-size: 1.5rem; | |
| width: 40px; | |
| height: 40px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: var(--bg-secondary); | |
| border-radius: 50%; | |
| flex-shrink: 0; | |
| } | |
| .wallet-info { | |
| flex: 1; | |
| min-width: 0; | |
| } | |
| .wallet-info strong { | |
| color: var(--text-primary); | |
| display: block; | |
| margin-bottom: var(--spacing-xs); | |
| } | |
| .wallet-address { | |
| display: block; | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 0.75rem; | |
| color: var(--text-secondary); | |
| background: var(--bg-secondary); | |
| padding: var(--spacing-xs) var(--spacing-sm); | |
| border-radius: var(--radius-sm); | |
| cursor: pointer; | |
| word-break: break-all; | |
| transition: all 0.2s; | |
| border: 1px solid transparent; | |
| } | |
| .wallet-address:hover { | |
| color: var(--ivy-green); | |
| border-color: var(--ivy-green); | |
| } | |
| .wallet-address:active { | |
| background: var(--ivy-green); | |
| color: #000; | |
| } | |
| .copy-hint { | |
| display: block; | |
| font-size: 0.7rem; | |
| color: var(--text-muted); | |
| margin-top: var(--spacing-xs); | |
| } | |
| .support-thanks { | |
| text-align: center; | |
| font-size: 0.875rem; | |
| color: var(--ivy-green); | |
| margin-top: var(--spacing-md); | |
| } | |
| /* Modal Scrollbar */ | |
| .modal-content::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| .modal-content::-webkit-scrollbar-track { | |
| background: var(--bg-tertiary); | |
| } | |
| .modal-content::-webkit-scrollbar-thumb { | |
| background: var(--ivy-green-dark); | |
| border-radius: 4px; | |
| } | |
| .modal-content::-webkit-scrollbar-thumb:hover { | |
| background: var(--ivy-green); | |
| } | |