/* ===================================================== theme.css — ComicCore Global Theme Definitions Put this file in your project folder. Every HTML page links to this in its . ===================================================== */ /* DEFAULT: Dark theme */ :root { --bg: #121212; --card: #1e1e1e; --text: #ffffff; --accent: #FF7A00; --border: #2f3336; --input: #2a2a2a; --secondary: #71767b; --danger: #ff4444; --success: #00C851; --teal: #00d2ff; --notify-msg: #FFD700; --notify-req: #DAA520; /* Aliases used across pages */ --error: #ff4444; --notif: #FFD700; --subtext: #71767b; --text-dim: #71767b; --text-main: #ffffff; --success-green: #00C851; --error-red: #ff4444; --vibrant-orange: #FF7A00; --bg-dark: #121212; } /* Light theme — activated when */ [data-theme="light"] { --bg: #f5f5f5; --card: #ffffff; --text: #000000; --accent: #FF7A00; --border: #dddddd; --input: #f0f0f0; --secondary: #555555; --danger: #cc0000; --success: #007a33; --teal: #0077aa; --notify-msg: #b38600; --notify-req: #8a6500; --error: #cc0000; --notif: #b38600; --subtext: #555555; --text-dim: #555555; --text-main: #000000; --success-green: #007a33; --error-red: #cc0000; --vibrant-orange: #FF7A00; --bg-dark: #f5f5f5; } /* Classic theme — activated when */ [data-theme="classic"] { --bg: #2c3e50; --card: #ecf0f1; --text: #2c3e50; --accent: #e67e22; --border: #bdc3c7; --input: #ffffff; --secondary: #7f8c8d; --danger: #e74c3c; --success: #27ae60; --teal: #16a085; --notify-msg: #f39c12; --notify-req: #d68910; --error: #e74c3c; --notif: #f39c12; --subtext: #7f8c8d; --text-dim: #7f8c8d; --text-main: #2c3e50; --success-green: #27ae60; --error-red: #e74c3c; --vibrant-orange: #e67e22; --bg-dark: #2c3e50; } /* Smooth transition when theme changes */ body { transition: background-color 0.3s, color 0.3s; } /* ── Story Editor: always white page with dark text regardless of theme ── */ .story-page { background: #ffffff !important; color: #111111 !important; caret-color: #FF7A00 !important; } .story-page *:not(.page-label):not(.page-delete-btn) { color: #111111 !important; -webkit-text-fill-color: #111111 !important; } /* ── Loading States & Micro Animations ── */ @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } @keyframes shimmer { 0% { background-position: -200px 0; } 100% { background-position: calc(200px + 100%) 0; } } @keyframes slideInUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes slideInRight { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes bounceIn { 0% { transform: scale(0.3); opacity: 0; } 50% { transform: scale(1.05); } 70% { transform: scale(0.9); } 100% { transform: scale(1); opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .loading-skeleton { background: linear-gradient(90deg, var(--card) 25%, rgba(255,255,255,0.1) 50%, var(--card) 75%); background-size: 200px 100%; animation: shimmer 1.5s infinite; border-radius: 8px; } .loading-pulse { animation: pulse 1.5s infinite; } .animate-slide-in-up { animation: slideInUp 0.3s ease-out; } .animate-slide-in-right { animation: slideInRight 0.3s ease-out; } .animate-bounce-in { animation: bounceIn 0.4s ease-out; } .animate-fade-in { animation: fadeIn 0.3s ease-out; } /* Hover effects */ .hover-lift { transition: transform 0.2s ease, box-shadow 0.2s ease; } .hover-lift:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); } .hover-scale { transition: transform 0.15s ease; } .hover-scale:hover { transform: scale(1.02); } .hover-glow { transition: box-shadow 0.2s ease; } .hover-glow:hover { box-shadow: 0 0 0 2px var(--accent); } /* Button press animations */ .btn-press { transition: transform 0.1s ease; } .btn-press:active { transform: scale(0.95); } /* Card hover effects */ .card-hover { transition: all 0.2s ease; } .card-hover:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,0,0,0.15); border-color: var(--accent); } /* Typography improvements */ .text-gradient { background: linear-gradient(135deg, var(--accent), var(--teal)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .text-shadow { text-shadow: 0 1px 2px rgba(0,0,0,0.1); } /* Improved focus states */ .focus-ring:focus { outline: none; box-shadow: 0 0 0 2px var(--accent); } /* Loading spinner */ .spinner { width: 20px; height: 20px; border: 2px solid var(--border); border-top: 2px solid var(--accent); border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* ── Upload Progress ── */ .upload-progress { position: fixed; top: 20px; right: 20px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; z-index: 1000; min-width: 250px; box-shadow: 0 8px 32px rgba(0,0,0,0.3); } .progress-bar { width: 100%; height: 6px; background: var(--input); border-radius: 3px; overflow: hidden; margin-bottom: 8px; } .progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--teal)); width: 0%; transition: width 0.3s ease; border-radius: 3px; } .progress-text { font-size: 12px; font-weight: 600; color: var(--text-muted); text-align: center; } /* ── Enhanced Toast System ── */ .toast-container { position: fixed; top: 20px; right: 20px; z-index: 10000; display: flex; flex-direction: column; gap: 8px; max-width: 400px; } .toast { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; display: flex; align-items: center; gap: 12px; box-shadow: 0 4px 16px rgba(0,0,0,0.2); min-width: 300px; opacity: 1; transform: translateX(0); transition: all 0.3s ease; } .toast.fade-out { opacity: 0; transform: translateX(100%); } .toast-success { border-color: var(--success); background: rgba(0, 200, 81, 0.1); } .toast-error { border-color: var(--danger); background: rgba(255, 68, 68, 0.1); } .toast-warning { border-color: #ffd700; background: rgba(255, 215, 0, 0.1); } .toast-info { border-color: var(--teal); background: rgba(0, 210, 255, 0.1); } .toast-icon { font-size: 18px; font-weight: bold; flex-shrink: 0; } .toast-success .toast-icon { color: var(--success); } .toast-error .toast-icon { color: var(--danger); } .toast-warning .toast-icon { color: #ffd700; } .toast-info .toast-icon { color: var(--teal); } .toast-message { flex: 1; font-size: 14px; font-weight: 500; color: var(--text); } .toast-close { background: none; border: none; color: var(--text-muted); font-size: 18px; cursor: pointer; padding: 0; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background 0.2s; } .toast-close:hover { background: var(--input); }