/** * LIQUID GLASS THEME SYSTEM * Modular, reusable theme with glassmorphism effects * * Features: * - Light/Dark mode with smooth transitions * - Liquid glass aesthetic with backdrop blur * - Haptic feedback on interactions * - CSS variables for easy customization * - Semantic, reusable class names * - Optimized for performance * * Usage: * Add data-theme="dark" or data-theme="light" to or * Default: dark mode */ /* ===== THEME VARIABLES ===== */ :root { /* Transition Speed */ --theme-transition-speed: 0.3s; --theme-transition-timing: cubic-bezier(0.4, 0, 0.2, 1); /* Glass Effect Settings */ --glass-blur: 20px; --glass-border-width: 1px; --glass-border-radius: 12px; --glass-border-radius-sm: 8px; --glass-border-radius-lg: 16px; /* Spacing */ --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 12px; --spacing-lg: 16px; --spacing-xl: 24px; /* Shadows */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4); --shadow-glow: 0 0 20px; } /* ===== DARK MODE (DEFAULT) ===== */ [data-theme="dark"], :root:not([data-theme]) { /* Background Colors */ --bg-primary: #0a0a0f; --bg-secondary: #14141f; --bg-tertiary: #1a1a2e; --bg-elevated: #20202f; /* Accent Colors - Deep Reds & Purples */ --accent-primary: #e91e63; --accent-primary-hover: #f50057; --accent-secondary: #9c27b0; --accent-secondary-hover: #ab47bc; --accent-tertiary: #673ab7; /* Neon Accents for Important Elements */ --neon-red: #ff2d55; --neon-purple: #bf5af2; --neon-pink: #ff2d92; /* Glass Colors */ --glass-bg: rgba(20, 20, 31, 0.7); --glass-bg-light: rgba(30, 30, 45, 0.6); --glass-bg-elevated: rgba(40, 40, 55, 0.8); --glass-border: rgba(255, 255, 255, 0.1); --glass-border-bright: rgba(255, 255, 255, 0.2); /* Text Colors */ --text-primary: #ffffff; --text-secondary: #b8b8c8; --text-tertiary: #8888a0; --text-disabled: #5a5a70; /* Interactive States */ --interactive-hover: rgba(233, 30, 99, 0.1); --interactive-active: rgba(233, 30, 99, 0.2); --interactive-focus: rgba(191, 90, 242, 0.3); /* Category Colors */ --category-fire: #d32f2f; --category-water: #1976d2; --category-grass: #388e3c; --category-electric: #f57c00; --category-psychic: #7b1fa2; --category-fighting: #c62828; --category-dark: #424242; --category-meta: #5e35b1; } /* ===== LIGHT MODE ===== */ [data-theme="light"] { /* Background Colors */ --bg-primary: #f5f5fa; --bg-secondary: #e8e8f0; --bg-tertiary: #d8d8e8; --bg-elevated: #ffffff; /* Accent Colors - Blues & Purples */ --accent-primary: #2196f3; --accent-primary-hover: #1976d2; --accent-secondary: #673ab7; --accent-secondary-hover: #5e35b1; --accent-tertiary: #3f51b5; /* Neon Accents */ --neon-red: #e91e63; --neon-purple: #9c27b0; --neon-pink: #ec407a; /* Glass Colors */ --glass-bg: rgba(255, 255, 255, 0.7); --glass-bg-light: rgba(248, 248, 255, 0.6); --glass-bg-elevated: rgba(255, 255, 255, 0.9); --glass-border: rgba(100, 100, 130, 0.2); --glass-border-bright: rgba(100, 100, 130, 0.3); /* Text Colors */ --text-primary: #1a1a2e; --text-secondary: #4a4a5e; --text-tertiary: #7a7a8e; --text-disabled: #afafbf; /* Interactive States */ --interactive-hover: rgba(33, 150, 243, 0.1); --interactive-active: rgba(33, 150, 243, 0.2); --interactive-focus: rgba(103, 58, 183, 0.3); /* Category Colors (lighter variants) */ --category-fire: #e57373; --category-water: #64b5f6; --category-grass: #81c784; --category-electric: #ffb74d; --category-psychic: #ba68c8; --category-fighting: #ef5350; --category-dark: #757575; --category-meta: #9575cd; } /* ===== ANIMATED BACKGROUND ===== */ @keyframes subtleGradientFlow { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .animated-gradient-bg { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; opacity: 0.4; } [data-theme="dark"] .animated-gradient-bg, :root:not([data-theme]) .animated-gradient-bg { background: linear-gradient(135deg, #0a0a0f 0%, #1a0a1f 25%, #0f0a1a 50%, #1f0a14 75%, #0a0a0f 100%); background-size: 400% 400%; animation: subtleGradientFlow 60s ease infinite; } [data-theme="light"] .animated-gradient-bg { background: linear-gradient(135deg, #f0f0f8 0%, #e8e8f8 25%, #f0e8f8 50%, #e8f0f8 75%, #f0f0f8 100%); background-size: 400% 400%; animation: subtleGradientFlow 60s ease infinite; } /* ===== SMOOTH THEME TRANSITIONS ===== */ * { transition: background-color var(--theme-transition-speed) var(--theme-transition-timing), border-color var(--theme-transition-speed) var(--theme-transition-timing), color var(--theme-transition-speed) var(--theme-transition-timing), box-shadow var(--theme-transition-speed) var(--theme-transition-timing); } /* Exclude transitions for animations and transforms */ *, *::before, *::after { transition-property: background-color, border-color, color, box-shadow; } /* ===== LIQUID GLASS COMPONENTS ===== */ /* Base Glass Container */ .glass-container { background: var(--glass-bg); border: var(--glass-border-width) solid var(--glass-border); border-radius: var(--glass-border-radius); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); box-shadow: var(--shadow-md), inset 0 0 0 1px rgba(255, 255, 255, 0.05); position: relative; overflow: hidden; } .glass-container::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%); pointer-events: none; } /* Glass Glow Effect */ .glass-glow { box-shadow: var(--shadow-md), inset 0 30px 60px -20px rgba(255, 255, 255, 0.1), inset 0 18px 36px -18px rgba(255, 255, 255, 0.2); } /* Elevated Glass (for cards, modals) */ .glass-elevated { background: var(--glass-bg-elevated); box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(255, 255, 255, 0.1); } /* Light Glass (for subtle backgrounds) */ .glass-light { background: var(--glass-bg-light); border-color: var(--glass-border); } /* Glass Opacity Variants */ .glass-subtle { background: rgba(20, 20, 31, 0.3); backdrop-filter: blur(10px); } [data-theme="light"] .glass-subtle { background: rgba(255, 255, 255, 0.3); } .glass-medium { background: rgba(20, 20, 31, 0.5); backdrop-filter: blur(15px); } [data-theme="light"] .glass-medium { background: rgba(255, 255, 255, 0.5); } .glass-strong { background: rgba(20, 20, 31, 0.9); backdrop-filter: blur(25px); } [data-theme="light"] .glass-strong { background: rgba(255, 255, 255, 0.9); } /* ===== BUTTONS ===== */ .btn { padding: var(--spacing-sm) var(--spacing-lg); border-radius: var(--glass-border-radius-sm); border: 1px solid transparent; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s var(--theme-transition-timing); position: relative; overflow: hidden; user-select: none; } .btn::before { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.3); transform: translate(-50%, -50%); transition: width 0.6s, height 0.6s; } .btn:active::before { width: 300px; height: 300px; } /* Primary Button */ .btn-primary { background: var(--accent-primary); color: white; box-shadow: 0 0 20px rgba(233, 30, 99, 0.3); } .btn-primary:hover { background: var(--accent-primary-hover); box-shadow: 0 0 30px rgba(233, 30, 99, 0.5); transform: translateY(-2px); } .btn-primary:active { transform: translateY(0); } /* Secondary Button */ .btn-secondary { background: var(--glass-bg); color: var(--text-primary); border-color: var(--glass-border); backdrop-filter: blur(var(--glass-blur)); } .btn-secondary:hover { background: var(--glass-bg-elevated); border-color: var(--glass-border-bright); } /* Icon Button */ .btn-icon { padding: var(--spacing-sm); border-radius: var(--glass-border-radius-sm); background: var(--glass-bg); border: 1px solid var(--glass-border); color: var(--text-primary); cursor: pointer; transition: all 0.2s var(--theme-transition-timing); } .btn-icon:hover { background: var(--interactive-hover); border-color: var(--glass-border-bright); transform: scale(1.05); } .btn-icon:active { transform: scale(0.95); } /* ===== PANELS ===== */ .panel { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--glass-border-radius); backdrop-filter: blur(var(--glass-blur)); padding: var(--spacing-lg); } .panel-header { display: flex; align-items: center; justify-content: space-between; padding: var(--spacing-md); cursor: pointer; user-select: none; border-radius: var(--glass-border-radius-sm); transition: background-color 0.2s; } .panel-header:hover { background: var(--interactive-hover); } .panel-title { font-size: 16px; font-weight: 600; color: var(--text-primary); } .panel-content { padding: var(--spacing-md); max-height: 1000px; overflow: hidden; transition: max-height 0.3s var(--theme-transition-timing), opacity 0.3s var(--theme-transition-timing); } .panel-content.collapsed { max-height: 0; opacity: 0; padding: 0 var(--spacing-md); } /* ===== CATEGORY CONTAINERS ===== */ .category-fire { border-left: 3px solid var(--category-fire); background: linear-gradient(90deg, rgba(211, 47, 47, 0.1) 0%, transparent 20%); } .category-water { border-left: 3px solid var(--category-water); background: linear-gradient(90deg, rgba(25, 118, 210, 0.1) 0%, transparent 20%); } .category-grass { border-left: 3px solid var(--category-grass); background: linear-gradient(90deg, rgba(56, 142, 60, 0.1) 0%, transparent 20%); } .category-electric { border-left: 3px solid var(--category-electric); background: linear-gradient(90deg, rgba(245, 124, 0, 0.1) 0%, transparent 20%); } .category-psychic { border-left: 3px solid var(--category-psychic); background: linear-gradient(90deg, rgba(123, 31, 162, 0.1) 0%, transparent 20%); } .category-meta { border-left: 3px solid var(--category-meta); background: linear-gradient(90deg, rgba(94, 53, 177, 0.1) 0%, transparent 20%); } /* ===== HAMBURGER MENU ===== */ .hamburger-menu { position: fixed; bottom: var(--spacing-lg); right: var(--spacing-lg); z-index: 10000; } .hamburger-button { width: 40px; height: 40px; border-radius: 50%; background: var(--glass-bg-elevated); border: 1px solid var(--glass-border); backdrop-filter: blur(var(--glass-blur)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; transition: all 0.3s var(--theme-transition-timing); box-shadow: var(--shadow-md); opacity: 0.7; } .hamburger-button:hover { background: var(--glass-bg-elevated); box-shadow: var(--shadow-lg), 0 0 20px rgba(233, 30, 99, 0.3); transform: scale(1.1); opacity: 1; } .hamburger-line { width: 18px; height: 2px; background: var(--text-primary); border-radius: 2px; transition: all 0.3s var(--theme-transition-timing); } .hamburger-button.active { opacity: 1; } .hamburger-button.active .hamburger-line:nth-child(1) { transform: translateY(6px) rotate(45deg); } .hamburger-button.active .hamburger-line:nth-child(2) { opacity: 0; } .hamburger-button.active .hamburger-line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* Settings Drawer */ .settings-drawer { position: fixed; top: 0; left: -320px; width: 300px; height: 100vh; background: var(--glass-bg-elevated); border-right: 1px solid var(--glass-border); backdrop-filter: blur(var(--glass-blur)); box-shadow: var(--shadow-lg); transition: left 0.3s var(--theme-transition-timing); z-index: 9999; overflow-y: auto; padding: var(--spacing-xl); padding-top: 80px; } .settings-drawer.open { left: 0; } .settings-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(5px); opacity: 0; pointer-events: none; transition: opacity 0.3s var(--theme-transition-timing); z-index: 9998; } .settings-overlay.visible { opacity: 1; pointer-events: all; } /* ===== THEME TOGGLE ===== */ .theme-toggle { display: flex; align-items: center; gap: var(--spacing-md); padding: var(--spacing-md); background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--glass-border-radius); cursor: pointer; transition: all 0.2s; } .theme-toggle:hover { background: var(--interactive-hover); } .theme-toggle-switch { position: relative; width: 48px; height: 24px; background: var(--bg-tertiary); border-radius: 12px; transition: background-color 0.3s; } .theme-toggle-switch::before { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: white; border-radius: 50%; transition: transform 0.3s var(--theme-transition-timing); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } [data-theme="light"] .theme-toggle-switch { background: var(--accent-primary); } [data-theme="light"] .theme-toggle-switch::before { transform: translateX(24px); } /* ===== FORM ELEMENTS ===== */ .form-group { display: flex; flex-direction: column; gap: var(--spacing-xs); margin-bottom: var(--spacing-md); } .form-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; padding: var(--spacing-xs) var(--spacing-sm); background: var(--glass-bg-light); border-radius: var(--glass-border-radius-sm); border: 1px solid var(--glass-border); backdrop-filter: blur(5px); width: fit-content; } .form-input, .form-select { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--glass-border-radius-sm); color: var(--text-primary); padding: var(--spacing-sm) var(--spacing-md); font-size: 14px; transition: all 0.2s; backdrop-filter: blur(10px); } .form-input:focus, .form-select:focus { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 0 3px var(--interactive-focus); background: var(--glass-bg-elevated); } .form-input:hover, .form-select:hover { border-color: var(--glass-border-bright); background: var(--glass-bg-light); } .form-checkbox { width: 18px; height: 18px; border-radius: 4px; border: 2px solid var(--glass-border); background: var(--glass-bg); cursor: pointer; transition: all 0.2s; } .form-checkbox:checked { background: var(--accent-primary); border-color: var(--accent-primary); box-shadow: 0 0 10px rgba(233, 30, 99, 0.3); } .form-checkbox:hover { border-color: var(--accent-primary); } /* ===== TABS ===== */ .tabs-container { display: flex; gap: var(--spacing-sm); padding: var(--spacing-sm); background: var(--glass-bg); border-radius: var(--glass-border-radius); border: 1px solid var(--glass-border); } .tab { flex: 1; padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--glass-border-radius-sm); background: transparent; border: 1px solid transparent; color: var(--text-secondary); font-weight: 600; font-size: 14px; cursor: pointer; transition: all 0.2s; text-align: center; } .tab:hover { background: var(--interactive-hover); color: var(--text-primary); } .tab.active { background: var(--accent-primary); color: white; box-shadow: 0 0 20px rgba(233, 30, 99, 0.3); } /* ===== SCROLLBAR ===== */ .custom-scrollbar::-webkit-scrollbar { width: 8px; } .custom-scrollbar::-webkit-scrollbar-track { background: var(--bg-secondary); border-radius: 4px; } .custom-scrollbar::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 4px; transition: background-color 0.2s; } .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: var(--glass-border-bright); } /* ===== DROPDOWN MENU ===== */ #export-options a, #project-options a { transition: background-color 0.2s, transform 0.2s; } #export-options a:hover, #project-options a:hover { background: var(--interactive-hover); transform: translateX(4px); } #export-options a:active, #project-options a:active { background: var(--interactive-active); } /* ===== UTILITY CLASSES ===== */ .text-primary { color: var(--text-primary); } .text-secondary { color: var(--text-secondary); } .text-tertiary { color: var(--text-tertiary); } .bg-primary { background-color: var(--bg-primary); } .bg-secondary { background-color: var(--bg-secondary); } .bg-tertiary { background-color: var(--bg-tertiary); } .neon-glow { text-shadow: 0 0 10px currentColor, 0 0 20px currentColor, 0 0 30px currentColor; } .accent-primary { color: var(--accent-primary); } .accent-secondary { color: var(--accent-secondary); } /* ===== ANIMATIONS ===== */ @keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } .shimmer { position: relative; overflow: hidden; } .shimmer::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%); animation: shimmer 2s infinite; } /* ===== RESPONSIVE ===== */ @media (max-width: 768px) { .glass-container { border-radius: var(--glass-border-radius-sm); } .settings-drawer { width: 100%; left: -100%; } } /* ===== CARD IMAGE SIZING ===== */ /* Standard image size: 1080x680px Oversized images will display from the top portion */ #pkmn-preview-art, #def-preview-art { object-fit: cover; object-position: top center; width: 100%; height: 100%; } /* Ensure images maintain consistent display in template selector */ #template-container img { object-fit: cover; object-position: top center; aspect-ratio: 1080 / 680; /* Maintain standard aspect ratio */ } /* ===== PERFORMANCE OPTIMIZATIONS ===== */ .glass-container, .btn, .panel { will-change: transform; transform: translateZ(0); } /* Reduce motion for users who prefer it */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }