/*
* Style Lock - 防止樣式跑掉的保護機制
* 在進行 CSS 重構時，此檔案應保持最高優先級載入
*/
/* 關鍵布局鎖定 */
.style-lock-container {
position: relative;
box-sizing: border-box;
}
/* 防止管理端樣式影響會員端 */
.admin-isolation {
isolation: isolate;
contain: layout style;
}
.user-isolation {
isolation: isolate;
contain: layout style;
}
/* 防止第三方框架衝突 */
.framework-isolation {
all: unset;
}
/* Modal 層級鎖定 */
.modal-z-lock {
z-index: var(--z-modal);
position: fixed;
}
/* 重要組件布局保護 */
.layout-protection {
min-height: 100vh;
overflow-x: hidden;
}
/* 響應式斷點保護 */
@media (max-width: 768px) {
.mobile-layout-lock {
width: 100%;
margin: 0;
padding: 0 15px;
}
}
/* 關鍵 UI 元件保護 */
.critical-ui-lock {
pointer-events: auto;
visibility: visible;
opacity: 1;
}
/**
* ========================================
* Naily Design System - Consolidated Variables
* ========================================
*
* This file consolidates all CSS custom properties across the Naily e-commerce platform
* into a unified, conflict-free system. It replaces multiple variable files and
* provides a consistent foundation for the entire application.
*
* Structure:
* 0. Design Tokens (inlined from tokens.css)
* 1. Brand & Primary Colors
* 2. Semantic Color System
* 3. Neutral/Gray Scale
* 4. Typography System
* 5. Spacing & Layout
* 6. Border & Border Radius
* 7. Shadow System
* 8. Z-Index Hierarchy
* 9. Animation & Transitions
* 10. Responsive Breakpoints
* 11. Component-Specific Variables
* 12. Luxury Design System Variables
* 13. Accessibility & Theme Support
* 14. Legacy Variable Mappings
*/
:root {
/* ========================================
🎨 DESIGN TOKENS (inlined from tokens.css)
======================================== */
/* Primary Brand Colors - Naily/Prada 深紅色系統 */
--color-primary-50: #fef2f2;
--color-primary-100: #fee2e2;
--color-primary-200: #fecaca;
--color-primary-300: #fca5a5;
--color-primary-400: #f87171;
--color-primary-500: #BE1F48; /* 主色 - Naily 品牌紅 */
--color-primary-600: #9A1A3A; /* 深色變體 */
--color-primary-700: #8B1538; /* 更深 */
--color-primary-800: #6B0D28; /* 極深 */
--color-primary-900: #4A091C; /* 最深 */
/* Secondary Colors - 配色系統 */
--color-secondary-50: #fffbeb;
--color-secondary-100: #fef3c7;
--color-secondary-200: #fde68a;
--color-secondary-300: #fcd34d;
--color-secondary-400: #fbbf24;
--color-secondary-500: #f59e0b; /* 次要色 - 金黃 */
--color-secondary-600: #d97706;
--color-secondary-700: #b45309;
--color-secondary-800: #92400e;
--color-secondary-900: #78350f;
/* Accent Colors - 相關色系 */
--color-accent-pink: #f43f5e;
--color-accent-coral: #D8626E; /* Naily 次要色 */
--color-accent-mint: #059669;
--color-accent-cream: #f7f3f0;
/* Semantic Colors */
--color-success: #10b981;
--color-warning: #f59e0b;
--color-error: #ef4444;
--color-info: #3b82f6;
/* Neutral Colors */
--color-white: #ffffff;
--color-gray-50: #f9fafb;
--color-gray-100: #f3f4f6;
--color-gray-200: #e5e7eb;
--color-gray-300: #d1d5db;
--color-gray-400: #9ca3af;
--color-gray-500: #6b7280;
--color-gray-600: #4b5563;
--color-gray-700: #374151;
--color-gray-800: #1f2937;
--color-gray-900: #111827;
--color-black: #000000;
/* Font Families (tokens.css) */
--font-primary: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', -apple-system, BlinkMacSystemFont, sans-serif;
--font-heading: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', system-ui, sans-serif;
--font-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
/* ========================================
🎨 BRAND & PRIMARY COLORS
======================================== */
/* Primary Brand Colors - Deep Red System */
--naily-primary: #BE1F48;
--naily-primary-50: #fef2f2;
--naily-primary-100: #fee2e2;
--naily-primary-200: #fecaca;
--naily-primary-300: #fca5a5;
--naily-primary-400: #f87171;
--naily-primary-500: #BE1F48; /* Main brand color */
--naily-primary-600: #9A1A3A;
--naily-primary-700: #8B1538;
--naily-primary-800: #6B0D28;
--naily-primary-900: #4A091C;
/* Secondary/Accent Colors */
--naily-accent: #D8626E; /* Naily 次要色 */
--naily-accent-light: #FF6B8A;
--naily-accent-coral: #D8626E;
--naily-accent-pink: #f43f5e;
--naily-accent-mint: #059669;
--naily-accent-cream: #f7f3f0;
/* Complementary Colors */
--naily-secondary: #667eea;
--naily-secondary-light: #764ba2;
--naily-gold: #f59e0b;
--naily-gold-light: #fbbf24;
/* ========================================
🎯 SEMANTIC COLOR SYSTEM
======================================== */
/* Status Colors */
--naily-success: #10b981;
--naily-success-light: #14a085;
--naily-success-dark: #0d7377;
--naily-warning: #f59e0b;
--naily-warning-light: #fbbf24;
--naily-warning-dark: #d97706;
--naily-error: #ef4444;
--naily-error-light: #f87171;
--naily-error-dark: #dc2626;
--naily-info: #3b82f6;
--naily-info-light: #60a5fa;
--naily-info-dark: #1d4ed8;
/* ========================================
🔘 NEUTRAL/GRAY SCALE
======================================== */
--naily-white: #ffffff;
--naily-black: #000000;
--naily-gray-50: #f9fafb;
--naily-gray-100: #f3f4f6;
--naily-gray-200: #e5e7eb;
--naily-gray-300: #d1d5db;
--naily-gray-400: #9ca3af;
--naily-gray-500: #6b7280;
--naily-gray-600: #4b5563;
--naily-gray-700: #374151;
--naily-gray-800: #1f2937;
--naily-gray-900: #111827;
/* Text Colors */
--naily-text-primary: #111827;
--naily-text-secondary: #4b5563;
--naily-text-tertiary: #6b7280;
--naily-text-muted: #9ca3af;
--naily-text-disabled: #d1d5db;
--naily-text-inverse: #ffffff;
/* Background Colors */
--naily-bg-primary: #ffffff;
--naily-bg-secondary: #f9fafb;
--naily-bg-tertiary: #f3f4f6;
--naily-bg-hover: #f3f4f6;
--naily-bg-active: #e5e7eb;
--naily-bg-disabled: #f9fafb;
--naily-bg-overlay: rgba(0, 0, 0, 0.5);
--naily-bg-glass: rgba(255, 255, 255, 0.9);
/* ========================================
📝 TYPOGRAPHY SYSTEM
======================================== */
/* Font Families */
--naily-font-primary: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', -apple-system, BlinkMacSystemFont, sans-serif;
--naily-font-heading: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', system-ui, sans-serif;
--naily-font-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
/* Font Sizes - T-Shirt Sizing + Pixel Values */
--naily-text-xs: 0.75rem; /* 12px */
--naily-text-sm: 0.875rem; /* 14px */
--naily-text-base: 1rem; /* 16px */
--naily-text-lg: 1.125rem; /* 18px */
--naily-text-xl: 1.25rem; /* 20px */
--naily-text-2xl: 1.5rem; /* 24px */
--naily-text-3xl: 1.875rem; /* 30px */
--naily-text-4xl: 2.25rem; /* 36px */
--naily-text-5xl: 3rem; /* 48px */
--naily-text-6xl: 3.75rem; /* 60px */
--naily-text-7xl: 4.5rem; /* 72px */
/* Font Weights */
--naily-font-thin: 100;
--naily-font-light: 300;
--naily-font-normal: 400;
--naily-font-medium: 500;
--naily-font-semibold: 600;
--naily-font-bold: 700;
--naily-font-extrabold: 800;
--naily-font-black: 900;
/* Line Heights */
--naily-leading-none: 1;
--naily-leading-tight: 1.25;
--naily-leading-snug: 1.375;
--naily-leading-normal: 1.5;
--naily-leading-relaxed: 1.625;
--naily-leading-loose: 2;
/* ========================================
📏 SPACING & LAYOUT SYSTEM
======================================== */
/* Spacing Scale - Based on 4px base unit */
--naily-space-0: 0;
--naily-space-px: 1px;
--naily-space-0_5: 0.125rem; /* 2px */
--naily-space-1: 0.25rem; /* 4px */
--naily-space-1_5: 0.375rem; /* 6px */
--naily-space-2: 0.5rem; /* 8px */
--naily-space-2_5: 0.625rem; /* 10px */
--naily-space-3: 0.75rem; /* 12px */
--naily-space-3_5: 0.875rem; /* 14px */
--naily-space-4: 1rem; /* 16px */
--naily-space-5: 1.25rem; /* 20px */
--naily-space-6: 1.5rem; /* 24px */
--naily-space-7: 1.75rem; /* 28px */
--naily-space-8: 2rem; /* 32px */
--naily-space-9: 2.25rem; /* 36px */
--naily-space-10: 2.5rem; /* 40px */
--naily-space-11: 2.75rem; /* 44px */
--naily-space-12: 3rem; /* 48px */
--naily-space-14: 3.5rem; /* 56px */
--naily-space-16: 4rem; /* 64px */
--naily-space-20: 5rem; /* 80px */
--naily-space-24: 6rem; /* 96px */
--naily-space-28: 7rem; /* 112px */
--naily-space-32: 8rem; /* 128px */
--naily-space-36: 9rem; /* 144px */
--naily-space-40: 10rem; /* 160px */
--naily-space-44: 11rem; /* 176px */
--naily-space-48: 12rem; /* 192px */
--naily-space-52: 13rem; /* 208px */
--naily-space-56: 14rem; /* 224px */
--naily-space-60: 15rem; /* 240px */
--naily-space-64: 16rem; /* 256px */
--naily-space-72: 18rem; /* 288px */
--naily-space-80: 20rem; /* 320px */
--naily-space-96: 24rem; /* 384px */
/* Container Max Widths */
--naily-container-xs: 20rem; /* 320px */
--naily-container-sm: 36rem; /* 576px */
--naily-container-md: 48rem; /* 768px */
--naily-container-lg: 64rem; /* 1024px */
--naily-container-xl: 80rem; /* 1280px */
--naily-container-2xl: 87.5rem; /* 1400px */
/* ========================================
🔲 BORDER & BORDER RADIUS SYSTEM
======================================== */
/* Border Widths */
--naily-border-0: 0;
--naily-border: 1px;
--naily-border-2: 2px;
--naily-border-4: 4px;
--naily-border-8: 8px;
/* Border Radius */
--naily-radius-none: 0;
--naily-radius-sm: 0.125rem; /* 2px */
--naily-radius: 0.25rem; /* 4px */
--naily-radius-md: 0.375rem; /* 6px */
--naily-radius-lg: 0.5rem; /* 8px */
--naily-radius-xl: 0.75rem; /* 12px */
--naily-radius-2xl: 1rem; /* 16px */
--naily-radius-3xl: 1.5rem; /* 24px */
--naily-radius-full: 9999px;
/* Border Colors */
--naily-border-primary: var(--naily-gray-200);
--naily-border-secondary: var(--naily-gray-300);
--naily-border-accent: var(--naily-primary-300);
--naily-border-success: var(--naily-success);
--naily-border-warning: var(--naily-warning);
--naily-border-error: var(--naily-error);
/* ========================================
🌫️ SHADOW SYSTEM
======================================== */
--naily-shadow-none: none;
--naily-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--naily-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
--naily-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
--naily-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--naily-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
--naily-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
--naily-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
--naily-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
/* Colored Shadows */
--naily-shadow-primary: 0 4px 12px rgba(190, 31, 72, 0.3);
--naily-shadow-accent: 0 4px 12px rgba(216, 98, 110, 0.3);
--naily-shadow-accent-md: 0 4px 15px rgba(255, 107, 138, 0.4); /* 按鈕正常陰影 */
--naily-shadow-accent-lg: 0 8px 25px rgba(255, 107, 138, 0.5); /* 按鈕 hover 陰影 */
--naily-accent-light-rgb: 255, 107, 138; /* 供 rgba() 使用 */
--naily-shadow-success: 0 4px 12px rgba(16, 185, 129, 0.3);
--naily-shadow-warning: 0 4px 12px rgba(245, 158, 11, 0.3);
--naily-shadow-error: 0 4px 12px rgba(239, 68, 68, 0.3);
/* ========================================
📚 Z-INDEX HIERARCHY
======================================== */
--naily-z-auto: auto;
--naily-z-0: 0;
--naily-z-10: 10;
--naily-z-20: 20;
--naily-z-30: 30;
--naily-z-40: 40;
--naily-z-50: 50;
/* Component Z-Index Levels */
--naily-z-dropdown: 1000;
--naily-z-sticky: 1020;
--naily-z-fixed: 1030;
--naily-z-modal-backdrop: 1040;
--naily-z-modal: 1050;
--naily-z-modal-nested: 1060;
--naily-z-popover: 1070;
--naily-z-tooltip: 1080;
--naily-z-toast: 1090;
--naily-z-overlay: 1100;
/* Maximum Z-Index */
--naily-z-max: 2147483647;
/* ========================================
⚡ ANIMATION & TRANSITIONS
======================================== */
/* Duration */
--naily-duration-75: 75ms;
--naily-duration-100: 100ms;
--naily-duration-150: 150ms;
--naily-duration-200: 200ms;
--naily-duration-300: 300ms;
--naily-duration-500: 500ms;
--naily-duration-700: 700ms;
--naily-duration-1000: 1000ms;
/* Easing Functions */
--naily-ease-linear: linear;
--naily-ease-in: cubic-bezier(0.4, 0, 1, 1);
--naily-ease-out: cubic-bezier(0, 0, 0.2, 1);
--naily-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--naily-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
--naily-ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
/* Common Transitions */
--naily-transition-none: none;
--naily-transition-fast: all 150ms var(--naily-ease-out);
--naily-transition: all 300ms var(--naily-ease-out);
--naily-transition-slow: all 500ms var(--naily-ease-out);
--naily-transition-colors: color 150ms var(--naily-ease-out), background-color 150ms var(--naily-ease-out), border-color 150ms var(--naily-ease-out);
--naily-transition-shadow: box-shadow 150ms var(--naily-ease-out);
--naily-transition-transform: transform 150ms var(--naily-ease-out);
/* ========================================
📱 RESPONSIVE BREAKPOINTS
======================================== */
--naily-screen-xs: 360px;
--naily-screen-sm: 640px;
--naily-screen-md: 768px;
--naily-screen-lg: 1024px;
--naily-screen-xl: 1280px;
--naily-screen-2xl: 1536px;
/* ========================================
🎛️ COMPONENT-SPECIFIC VARIABLES
======================================== */
/* Blog Component Variables */
--naily-blog-hero-bg: linear-gradient(135deg, var(--naily-primary-500) 0%, var(--naily-primary-700) 100%);
--naily-blog-card-bg: var(--naily-white);
--naily-blog-shadow: var(--naily-shadow-md);
/* Button Variables */
--naily-btn-padding-x: var(--naily-space-4);
--naily-btn-padding-y: var(--naily-space-2);
--naily-btn-border-radius: var(--naily-radius-md);
--naily-btn-font-weight: var(--naily-font-medium);
/* Form Variables */
--naily-form-border-color: var(--naily-border-primary);
--naily-form-border-radius: var(--naily-radius);
--naily-form-padding-x: var(--naily-space-3);
--naily-form-padding-y: var(--naily-space-2);
--naily-form-focus-ring: 0 0 0 3px rgba(190, 31, 72, 0.1);
/* Card Variables */
--naily-card-bg: var(--naily-white);
--naily-card-border: var(--naily-border) solid var(--naily-border-primary);
--naily-card-border-radius: var(--naily-radius-lg);
--naily-card-shadow: var(--naily-shadow);
--naily-card-padding: var(--naily-space-6);
/* Navigation Variables */
--naily-nav-height: 4rem; /* 64px */
--naily-nav-bg: var(--naily-white);
--naily-nav-border: var(--naily-border) solid var(--naily-border-primary);
--naily-nav-shadow: var(--naily-shadow-sm);
/* Modal Variables */
--naily-modal-backdrop: rgba(0, 0, 0, 0.5);
--naily-modal-border-radius: var(--naily-radius-lg);
--naily-modal-shadow: var(--naily-shadow-2xl);
--naily-modal-max-width: 32rem; /* 512px */
/* ========================================
🎨 GRADIENTS
======================================== */
--naily-gradient-primary: linear-gradient(135deg, var(--naily-primary-500) 0%, var(--naily-accent) 100%);
--naily-gradient-hero: linear-gradient(135deg, var(--naily-primary-500) 0%, var(--naily-accent) 50%, var(--naily-primary-500) 100%);
--naily-gradient-card: linear-gradient(145deg, var(--naily-white) 0%, var(--naily-gray-50) 100%);
--naily-gradient-hover: linear-gradient(145deg, var(--naily-gray-50) 0%, var(--naily-white) 100%);
--naily-gradient-warm: linear-gradient(135deg, var(--naily-accent-coral) 0%, var(--naily-accent-pink) 100%);
--naily-gradient-cool: linear-gradient(135deg, var(--naily-primary-400) 0%, var(--naily-accent-mint) 100%);
--naily-gradient-elegant: linear-gradient(135deg, var(--naily-primary-600) 0%, var(--naily-gold) 100%);
/* Tier Gradients */
--naily-gradient-bronze: linear-gradient(135deg, #cd7f32 0%, #e9967a 100%);
--naily-gradient-silver: linear-gradient(135deg, #c0c0c0 0%, #e8e8e8 100%);
--naily-gradient-gold: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
--naily-gradient-diamond: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--naily-gradient-premium: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
/* ========================================
🪙 ADDITIONAL TEXT COLORS
======================================== */
/* Extended text color tokens (from variables.css) */
--text-dark: #333333; /* 深色文字 */
--text-light: #666666; /* 淺色文字（但仍可讀） */
/* ========================================
✨ LUXURY MINIMALIST DESIGN SYSTEM
======================================== */
/* 輕奢極簡設計系統 - Chanel/Dior 風格 */
/* Luxury Background Colors */
--luxury-bg-primary: #FAFAF8; /* 象牙白 - 取代 #FFF0F3 */
--luxury-bg-secondary: #F5F5F3; /* 溫暖灰白 */
--luxury-bg-card: #FFFFFF;
--luxury-bg-accent: #FAF8F6; /* 微暖調 */
/* Luxury Neutral Palette */
--luxury-black: #1A1A1A;
--luxury-charcoal: #2D2D2D;
--luxury-graphite: #4A4A4A;
--luxury-stone: #8B8B8B;
--luxury-silver: #C4C4C4;
--luxury-pearl: #E8E8E8;
/* Luxury Border Colors */
--luxury-border-light: #E8E8E8;
--luxury-border-medium: #D4D4D4;
--luxury-border-dark: #C4C4C4;
/* Luxury Border Radius (smaller, refined) */
--luxury-radius-xs: 2px;
--luxury-radius-sm: 4px;
--luxury-radius-md: 6px;
--luxury-radius-lg: 8px;
--luxury-radius-xl: 12px;
/* Luxury Shadows (subtle, refined) */
--luxury-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
--luxury-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06);
--luxury-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.08);
--luxury-shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.10);
/* Luxury Transitions (elegant, not bouncy) */
--luxury-transition-fast: 200ms ease-out;
--luxury-transition-base: 300ms ease-out;
--luxury-transition-slow: 500ms ease-out;
--luxury-ease-elegant: cubic-bezier(0.25, 0.1, 0.25, 1);
/* Luxury Typography */
--luxury-letter-spacing-wide: 0.05em;
--luxury-letter-spacing-wider: 0.1em;
--luxury-letter-spacing-widest: 0.15em;
}
/* ========================================
🌙 ACCESSIBILITY & THEME SUPPORT
======================================== */
/* High Contrast Mode Support */
@media (prefers-contrast: high) {
:root {
/* Token overrides */
--color-primary-500: #990000;
--color-secondary-500: #cc8800;
--color-success: #006600;
--color-warning: #cc6600;
--color-error: #cc0000;
/* Naily system overrides */
--naily-primary: #990000;
--naily-primary-500: #990000;
--naily-gold: #cc8800;
--naily-success: #006600;
--naily-warning: #cc6600;
--naily-error: #cc0000;
/* Enhanced shadows for better visibility */
--naily-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
--naily-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
--naily-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
--naily-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
--naily-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.6);
--naily-shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.7);
}
}
/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
:root {
--naily-transition-fast: none;
--naily-transition: none;
--naily-transition-slow: none;
--naily-transition-colors: none;
--naily-transition-shadow: none;
--naily-transition-transform: none;
--naily-duration-75: 0ms;
--naily-duration-100: 0ms;
--naily-duration-150: 0ms;
--naily-duration-200: 0ms;
--naily-duration-300: 0ms;
--naily-duration-500: 0ms;
--naily-duration-700: 0ms;
--naily-duration-1000: 0ms;
}
* {
animation-duration: 0.01ms;
animation-iteration-count: 1;
transition-duration: 0.01ms;
}
}
/* Print Styles */
@media print {
:root {
--naily-shadow-xs: none;
--naily-shadow-sm: none;
--naily-shadow: none;
--naily-shadow-md: none;
--naily-shadow-lg: none;
--naily-shadow-xl: none;
--naily-shadow-2xl: none;
--naily-shadow-inner: none;
--naily-gradient-primary: none;
--naily-gradient-hero: none;
--naily-gradient-card: none;
--naily-gradient-hover: none;
}
* {
background: transparent;
color: black;
box-shadow: none;
text-shadow: none;
}
.no-print {
display: none;
}
}
/* ========================================
🛠️ UTILITY CLASSES (from tokens.css)
======================================== */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.focus-visible {
outline: 2px solid #BE1F48;
outline: 2px solid var(--color-primary-500);
outline-offset: 2px;
}
/* ========================================
🎞️ KEYFRAME ANIMATIONS (from tokens.css)
======================================== */
@keyframes naily-fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes naily-fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes naily-slideInRight {
from {
opacity: 0;
transform: translateX(20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes naily-pulse {
0%, 100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.8;
transform: scale(1.05);
}
}
@keyframes naily-bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-5px);
}
}
/* ========================================
🔄 LEGACY VARIABLE MAPPINGS
======================================== */
/* Map legacy variables to new unified system for backwards compatibility */
:root {
/* Legacy primary colors */
--primary-color: var(--naily-primary-500);
--primary-light: var(--naily-primary-200);
--primary-dark: var(--naily-primary-600);
--accent-color: var(--naily-accent);
/* Legacy neutral colors */
--neutral-50: var(--naily-gray-50);
--neutral-100: var(--naily-gray-100);
--neutral-200: var(--naily-gray-200);
--neutral-300: var(--naily-gray-300);
--neutral-400: var(--naily-gray-400);
--neutral-500: var(--naily-gray-500);
--neutral-600: var(--naily-gray-600);
--neutral-700: var(--naily-gray-700);
--neutral-800: var(--naily-gray-800);
--neutral-900: var(--naily-gray-900);
/* Legacy semantic colors */
--success-color: var(--naily-success);
--success-light: var(--naily-success);
--error-color: var(--naily-error);
--info-color: var(--naily-info);
--white: var(--naily-white);
--black: var(--naily-black);
/* Legacy spacing */
--space-1: var(--naily-space-1);
--space-2: var(--naily-space-2);
--space-3: var(--naily-space-3);
--space-4: var(--naily-space-4);
--space-5: var(--naily-space-5);
--space-6: var(--naily-space-6);
--space-8: var(--naily-space-8);
--space-10: var(--naily-space-10);
--space-12: var(--naily-space-12);
--space-16: var(--naily-space-16);
--space-20: var(--naily-space-20);
--space-24: var(--naily-space-24);
--space-32: var(--naily-space-32);
/* Legacy shadows */
--shadow-xs: var(--naily-shadow-xs);
--shadow-sm: var(--naily-shadow-sm);
--shadow-md: var(--naily-shadow-md);
--shadow-lg: var(--naily-shadow-lg);
--shadow-xl: var(--naily-shadow-xl);
--shadow-2xl: var(--naily-shadow-2xl);
--shadow-inner: var(--naily-shadow-inner);
/* Legacy font sizes */
--font-size-xs: var(--naily-text-xs);
--font-size-sm: var(--naily-text-sm);
--font-size-base: var(--naily-text-base);
--font-size-lg: var(--naily-text-lg);
--font-size-xl: var(--naily-text-xl);
--font-size-2xl: var(--naily-text-2xl);
--font-size-3xl: var(--naily-text-3xl);
--font-size-4xl: var(--naily-text-4xl);
--font-size-5xl: var(--naily-text-5xl);
--font-size-6xl: var(--naily-text-6xl);
--font-size-7xl: var(--naily-text-7xl);
/* Legacy border radius */
--border-radius-xs: var(--naily-radius-sm);
--border-radius-sm: var(--naily-radius-md);
--border-radius: var(--naily-radius);
--border-radius-lg: var(--naily-radius-lg);
--border-radius-xl: var(--naily-radius-xl);
--border-radius-2xl: var(--naily-radius-2xl);
--border-radius-full: var(--naily-radius-full);
/* Legacy z-index */
--z-0: var(--naily-z-0);
--z-10: var(--naily-z-10);
--z-20: var(--naily-z-20);
--z-30: var(--naily-z-30);
--z-40: var(--naily-z-40);
--z-50: var(--naily-z-50);
--z-dropdown: var(--naily-z-dropdown);
--z-sticky: var(--naily-z-sticky);
--z-fixed: var(--naily-z-fixed);
--z-modal-backdrop: var(--naily-z-modal-backdrop);
--z-modal: var(--naily-z-modal);
--z-popover: var(--naily-z-popover);
--z-tooltip: var(--naily-z-tooltip);
--z-toast: var(--naily-z-toast);
/* Legacy transitions */
--transition-fast: var(--naily-transition-fast);
--transition: var(--naily-transition);
--transition-slow: var(--naily-transition-slow);
/* Legacy gradients */
--gradient-primary: var(--naily-gradient-primary);
--gradient-hero: var(--naily-gradient-hero);
--gradient-card: var(--naily-gradient-card);
--gradient-hover: var(--naily-gradient-hover);
/* Blog-specific legacy mappings */
--blog-primary: var(--naily-primary-500);
--blog-primary-dark: var(--naily-primary-700);
--blog-primary-light: var(--naily-accent-light);
--blog-accent: var(--naily-secondary);
--blog-accent-light: var(--naily-secondary-light);
/* Bootstrap variable overrides */
--bs-primary: var(--naily-primary-500);
--bs-primary-rgb: 190, 31, 72;
--bs-secondary: var(--naily-gray-600);
--bs-success: var(--naily-success);
--bs-warning: var(--naily-warning);
--bs-danger: var(--naily-error);
--bs-info: var(--naily-info);
--bs-light: var(--naily-gray-100);
--bs-dark: var(--naily-gray-900);
/* Bootstrap button variables */
--bs-btn-bg: var(--naily-primary-500);
--bs-btn-border-color: var(--naily-primary-500);
--bs-btn-hover-bg: var(--naily-primary-600);
--bs-btn-hover-border-color: var(--naily-primary-600);
--bs-btn-active-bg: var(--naily-primary-700);
--bs-btn-active-border-color: var(--naily-primary-700);
}
/* ========================================
🔚 END OF CONSOLIDATED VARIABLES
======================================== */
/**
* Usage Guidelines:
*
* 1. Always prefer --naily-* variables for new code
* 2. Legacy variables are provided for backwards compatibility only
* 3. Use semantic color names (success, warning, error) over specific colors
* 4. Follow the T-shirt sizing convention (xs, sm, md, lg, xl, 2xl)
* 5. Use spacing scale consistently across components
* 6. Respect the z-index hierarchy for layering components
* 7. Use transition variables for consistent animations
* 8. Test in high contrast and reduced motion modes
*
* Migration Path:
* 1. Import this file instead of individual variable files
* 2. Gradually replace legacy variable usage with --naily-* versions
* 3. Remove old variable files once migration is complete
* 4. Update component documentation to reference new variables
*/
/**
* ========================================
* 统一骨架动画配置文件
* Unified Skeleton Animation Configuration
* ========================================
*
* 此文件定义了整个项目的骨架屏（Skeleton）动画的统一配色和样式
* 所有骨架组件必须使用此文件中定义的 CSS 变量
*
* 颜色来源：src/assets/css/consolidated-variables.css
* - --naily-primary-50: #fef2f2 (淡粉50)
* - --naily-primary-100: #fee2e2 (淡粉100)
*/
:root {
/* ========================================
骨架动画颜色配置
======================================== */
/* 主背景色 - 使用 Naily 淡粉50 */
--skeleton-bg-primary: var(--naily-primary-50, #fef2f2);
/* 高亮色 - 使用 Naily 淡粉100 */
--skeleton-bg-highlight: var(--naily-primary-100, #fee2e2);
/* 半透明高亮色 - 用于波浪动画（白色，避免看起來像深紅色） */
--skeleton-shimmer-color: rgba(255, 255, 255, 0.7);
/* ========================================
骨架动画参数配置
======================================== */
/* 动画持续时间 */
--skeleton-animation-duration: 2s;
--skeleton-animation-duration-fast: 1.5s;
--skeleton-animation-duration-slow: 2.5s;
/* 边框圆角 */
--skeleton-border-radius: 4px;
--skeleton-border-radius-sm: 2px;
--skeleton-border-radius-lg: 8px;
--skeleton-border-radius-xl: 12px;
--skeleton-border-radius-full: 50%;
/* ========================================
骨架渐变配置
======================================== */
/* 线性渐变 - 用于 pulse 动画 */
--skeleton-gradient-linear: linear-gradient(
90deg,
var(--skeleton-bg-primary) 25%,
var(--skeleton-bg-highlight) 50%,
var(--skeleton-bg-primary) 75%
);
/* 波浪渐变 - 用于 shimmer 动画 */
/* 注意：使用 rgba(254,242,242,0) 而非 transparent，因 transparent=rgba(0,0,0,0)
在漸層插值時會產生暗色帶。使用與底色 --skeleton-bg-primary(#fef2f2) 同色相的零透明度。 */
--skeleton-gradient-shimmer: linear-gradient(
90deg,
rgba(254, 242, 242, 0),
var(--skeleton-shimmer-color),
rgba(254, 242, 242, 0)
);
}
/* ========================================
高对比度模式支持
======================================== */
@media (prefers-contrast: high) {
:root {
/* 高对比度模式使用黑白渐变 */
--skeleton-bg-primary: #f0f0f0;
--skeleton-bg-highlight: #d0d0d0;
--skeleton-shimmer-color: rgba(0, 0, 0, 0.1);
}
}
/* ========================================
减少动画模式支持
======================================== */
@media (prefers-reduced-motion: reduce) {
:root {
/* 禁用动画 */
--skeleton-animation-duration: 0ms;
--skeleton-animation-duration-fast: 0ms;
--skeleton-animation-duration-slow: 0ms;
}
}
/* ========================================
基础骨架样式类
======================================== */
/* 基础骨架容器 */
.skeleton-unified {
background: #fef2f2;
background: var(--skeleton-bg-primary);
background-image: linear-gradient(
90deg,
#fef2f2 25%,
#fee2e2 50%,
#fef2f2 75%
);
background-image: var(--skeleton-gradient-linear);
background-size: 200% 100%;
border-radius: 4px;
border-radius: var(--skeleton-border-radius);
animation: skeleton-shimmer 2s infinite linear;
animation: skeleton-shimmer var(--skeleton-animation-duration) infinite linear;
overflow: hidden;
position: relative;
isolation: isolate;
}
/* Shimmer 动画 */
@keyframes skeleton-shimmer {
0% {
background-position: -200% 0;
}
100% {
background-position: 200% 0;
}
}
/* Pulse 动画 */
@keyframes skeleton-pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.6;
}
}
/* ========================================
工具类
======================================== */
/* 圆形骨架 */
.skeleton-unified-circular {
border-radius: 50%;
border-radius: var(--skeleton-border-radius-full);
}
/* 文本骨架 */
.skeleton-unified-text {
height: 1em;
margin-bottom: 0.5em;
}
.skeleton-unified-text:last-child {
margin-bottom: 0;
}
/* 波浪覆盖层 */
.skeleton-unified-wave {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
rgba(254, 242, 242, 0),
rgba(255, 255, 255, 0.7),
rgba(254, 242, 242, 0)
);
background: var(--skeleton-gradient-shimmer);
animation: skeleton-wave 1.5s infinite;
animation: skeleton-wave var(--skeleton-animation-duration-fast) infinite;
pointer-events: none;
}
@keyframes skeleton-wave {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
/* ========================================
打印样式
======================================== */
@media print {
.skeleton-unified,
.skeleton-unified-wave {
display: none;
}
}
/* ========================================
性能优化
======================================== */
.skeleton-unified {
will-change: background-position;
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
/* ========================================
使用说明
======================================== */
/**
* CSS 使用方法：
*
* 1. 基础使用：
* .my-skeleton {
* background: var(--skeleton-bg-primary);
* }
*
* 2. 渐变背景：
* .my-skeleton {
* background: var(--skeleton-gradient-linear);
* }
*
* 3. 完整骨架：
*
*/
/**
* JavaScript 使用方法：
*
* 1. 在 JS/JSX 中使用 CSS 变量：
*
* const skeletonStyle = {
* backgroundColor: 'var(--skeleton-bg-primary)',
* borderRadius: 'var(--skeleton-border-radius)'
* };
*
* 2. 渐变背景：
*
* const skeletonStyle = {
* background: 'var(--skeleton-gradient-linear)',
* backgroundSize: '200% 100%',
* animation: 'skeleton-shimmer var(--skeleton-animation-duration) infinite linear'
* };
*/
/* Noto Sans TC Font Family - 僅載入常用字重 */
/* 僅載入常用的字重以減少載入時間 */
@font-face {
font-family: 'Noto Sans TC';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/static/media/NotoSansTC-Regular.f7b43932f72c2d9ea9d4.ttf) format('truetype');
}
@font-face {
font-family: 'Noto Sans TC';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/static/media/NotoSansTC-Medium.8490b839e19a8053ea2d.ttf) format('truetype');
}
@font-face {
font-family: 'Noto Sans TC';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/static/media/NotoSansTC-SemiBold.b729c79da675c9b64dd0.ttf) format('truetype');
}
@font-face {
font-family: 'Noto Sans TC';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/static/media/NotoSansTC-Bold.2fc68d8f5735f9e8f041.ttf) format('truetype');
}
@font-face {
font-family: 'Noto Sans TC';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url(/static/media/NotoSansTC-ExtraBold.385d8100461e388a3f3b.ttf) format('truetype');
}
@font-face {
font-family: 'Noto Sans TC';
font-style: normal;
font-weight: 900;
font-display: swap;
src: url(/static/media/NotoSansTC-Black.e1bc32a904e0bd44da34.ttf) format('truetype');
}
/* ========================================
Naily 專案主要樣式入口
======================================== */
/* 導入模組化CSS系統 */
/* @import './assets/css/modules/index.css'; */
/* 導入表單工具樣式 */
/* @import './assets/css/utils/FormUtils.css'; */
/* 導入表單響應式模組 */
/* @import './assets/css/modules/form-responsive.css'; */
/* 導入 Modal 動畫修復 - 解決動畫慢一拍問題 */
/* @import './assets/css/modal-animation-fix.css'; - 已刪除管理端相關 CSS */
/* Modal 動畫隔離現已整合至 UnifiedAdminModal 內建系統 */
/* 不再需要額外導入 modal-isolation-base.css */
/* CSS 隔離機制 */
.css-isolation-container {
isolation: isolate;
}
/* 確保特定頁面的樣式不會影響其他頁面 */
.page-specific-styles {
contain: style;
}
/* Ant Design - TO BE REMOVED */
/* 修復 Ant Design Tooltip 定位問題 */
/*
.ant-tooltip {
z-index: var(--z-emergency);
}
*/
/* 向後兼容的舊版樣式類別 */
.cursor-pointer {
cursor: pointer;
}
/* 僅對需要的元素應用過渡效果，避免全域影響 */
/* Ant Design - TO BE REMOVED */
/* .transition-all:not([class*="ant-"]) {
transition: all var(--transition-base) var(--transition-ease);
} */
/* 確保卡片懸停效果 - 僅針對特定類別 */
.card.hover-effect:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
/* 自定義間距 */
.gap-2 {
gap: 0.5rem;
}
.gap-3 {
gap: 1rem;
}
.gap-4 {
gap: 1.5rem;
}
/**
* 统一的 Z-Index 层级管理系统
* 解决 Modal backdrop 显示问题和全项目 z-index 混乱问题
*
* 设计原则:
* 1. 使用语义化命名，易于理解和维护
* 2. 层级间隔合理，便于插入新层级
* 3. 避免过度使用 !important
* 4. 提供 CSS 变量支持，便于统一管理
*/
:root {
/* ================================
基础层级 (0-99)
================================ */
--z-base: 0;
--z-behind: -1;
--z-low: 1;
--z-normal: 10;
--z-raised: 20;
--z-elevated: 30;
/* ================================
内容层级 (100-999)
================================ */
--z-content: 100;
--z-content-overlay: 200;
--z-content-popup: 300;
--z-content-dropdown: 400;
--z-content-tooltip: 500;
/* ================================
界面层级 (1000-1999)
================================ */
--z-ui-navbar: 1000;
--z-ui-sidebar: 1010;
--z-ui-floating-button: 1020;
--z-ui-sticky: 1030;
--z-ui-fixed: 1040;
/* ================================
覆盖层级 (2000-2999)
================================ */
--z-overlay: 2000;
--z-overlay-backdrop: 2010;
--z-overlay-content: 2020;
--z-overlay-loading: 2030;
/* ================================
Modal 系统层级 (3000-3999)
================================ */
--z-modal-backdrop: 3000;
--z-modal: 3010;
--z-modal-dialog: 3020;
--z-modal-content: 3030;
--z-modal-header: 3040;
--z-modal-close-btn: 3050;
/* 特殊 Modal 层级 - 用于特殊用途的 Modal */
--z-modal-critical: 3100; /* 系统级 Modal (如维护通知、紧急公告) */
--z-modal-fullscreen: 3200; /* 全屏 Modal (如图片查看器、视频播放器) */
--z-modal-nested: 3300; /* 嵌套 Modal (Modal 内部再弹出的 Modal) */
/* ================================
弹出层级 (4000-4999)
================================ */
--z-popover: 4000;
--z-dropdown: 4010;
--z-select-options: 4020;
--z-date-picker: 4030;
--z-autocomplete: 4040;
--z-tooltip: 4050;
/* ================================
通知层级 (5000-5999)
================================ */
--z-notification: 5000;
--z-toast: 5010;
--z-alert: 5020;
--z-banner: 5030;
/* ================================
系统层级 (6000-9999)
================================ */
--z-system-loading: 6000;
--z-system-error: 6010;
--z-system-maintenance: 6020;
--z-debug: 9000;
--z-dev-tools: 9010;
/* ================================
最高层级 (10000+) - 谨慎使用
================================ */
--z-emergency: 10000;
--z-critical: 10010;
/* ================================
特殊層級補充 - 用於特定組件
================================ */
--z-image-zoom: 1001; /* 圖片放大效果 */
--z-image-zoom-overlay: 1002; /* 圖片放大遮罩 */
--z-modal-stacked: 1055; /* 堆疊 Modal 中間層 */
--z-modal-stacked-2: 1061; /* 堆疊 Modal 第二層對話框 */
--z-modal-stacked-3: 1062; /* 堆疊 Modal 第三層內容 */
--z-voting-special: 1070; /* 投票特殊層級 */
--z-product-filter: 1080; /* 產品篩選器 */
--z-navbar-mega-menu: 1300; /* Navbar 大型選單 */
--z-legacy-999: 999; /* 舊版 999 層級，逐步淘汰 */
--z-legacy-1031: 1031; /* 舊版 1031 層級，逐步淘汰 */
--z-legacy-1051: 1051; /* 舊版 1051 層級，逐步淘汰 */
--z-legacy-1052: 1052; /* 舊版 1052 層級，逐步淘汰 */
--z-legacy-1059: 1059; /* 舊版 1059 層級，逐步淘汰 */
--z-legacy-9998: 9998; /* 舊版 9998 層級，逐步淘汰 */
--z-legacy-10001: 10001; /* 舊版 10001 層級，逐步淘汰 */
--z-legacy-10002: 10002; /* 舊版 10002 層級，逐步淘汰 */
}
/* ================================
通用层级类 - 基于语义化命名
================================ */
/* 基础层级 */
.z-base { z-index: 0; z-index: var(--z-base); }
.z-behind { z-index: -1; z-index: var(--z-behind); }
.z-low { z-index: 1; z-index: var(--z-low); }
.z-normal { z-index: 10; z-index: var(--z-normal); }
.z-raised { z-index: 20; z-index: var(--z-raised); }
.z-elevated { z-index: 30; z-index: var(--z-elevated); }
/* 内容层级 */
.z-content { z-index: 100; z-index: var(--z-content); }
.z-content-overlay { z-index: 200; z-index: var(--z-content-overlay); }
.z-content-popup { z-index: 300; z-index: var(--z-content-popup); }
.z-content-dropdown { z-index: 400; z-index: var(--z-content-dropdown); }
.z-content-tooltip { z-index: 500; z-index: var(--z-content-tooltip); }
/* 界面层级 */
.z-ui-navbar { z-index: 1000; z-index: var(--z-ui-navbar); }
.z-ui-sidebar { z-index: 1010; z-index: var(--z-ui-sidebar); }
.z-ui-floating-button { z-index: 1020; z-index: var(--z-ui-floating-button); }
.z-ui-sticky { z-index: 1030; z-index: var(--z-ui-sticky); }
.z-ui-fixed { z-index: 1040; z-index: var(--z-ui-fixed); }
/* 覆盖层级 */
.z-overlay { z-index: 2000; z-index: var(--z-overlay); }
.z-overlay-backdrop { z-index: 2010; z-index: var(--z-overlay-backdrop); }
.z-overlay-content { z-index: 2020; z-index: var(--z-overlay-content); }
.z-overlay-loading { z-index: 2030; z-index: var(--z-overlay-loading); }
/* Modal 系统 */
.z-modal-backdrop { z-index: 3000; z-index: var(--z-modal-backdrop); }
.z-modal { z-index: 3010; z-index: var(--z-modal); }
.z-modal-dialog { z-index: 3020; z-index: var(--z-modal-dialog); }
.z-modal-content { z-index: 3030; z-index: var(--z-modal-content); }
.z-modal-header { z-index: 3040; z-index: var(--z-modal-header); }
.z-modal-close-btn { z-index: 3050; z-index: var(--z-modal-close-btn); }
/* 特殊 Modal 工具类 */
.modal-critical,
.z-modal-critical {
z-index: 3100;
z-index: var(--z-modal-critical);
position: relative;
}
.modal-fullscreen,
.z-modal-fullscreen {
z-index: 3200;
z-index: var(--z-modal-fullscreen);
position: relative;
}
.modal-nested,
.z-modal-nested {
z-index: 3300;
z-index: var(--z-modal-nested);
position: relative;
}
/* 弹出层级 */
.z-popover { z-index: 4000; z-index: var(--z-popover); }
.z-dropdown { z-index: 4010; z-index: var(--z-dropdown); }
.z-select-options { z-index: 4020; z-index: var(--z-select-options); }
.z-date-picker { z-index: 4030; z-index: var(--z-date-picker); }
.z-autocomplete { z-index: 4040; z-index: var(--z-autocomplete); }
.z-tooltip { z-index: 4050; z-index: var(--z-tooltip); }
/* 通知层级 */
.z-notification { z-index: 5000; z-index: var(--z-notification); }
.z-toast { z-index: 5010; z-index: var(--z-toast); }
.z-alert { z-index: 5020; z-index: var(--z-alert); }
.z-banner { z-index: 5030; z-index: var(--z-banner); }
/* 系统层级 */
.z-system-loading { z-index: 6000; z-index: var(--z-system-loading); }
.z-system-error { z-index: 6010; z-index: var(--z-system-error); }
.z-system-maintenance { z-index: 6020; z-index: var(--z-system-maintenance); }
.z-debug { z-index: 9000; z-index: var(--z-debug); }
.z-dev-tools { z-index: 9010; z-index: var(--z-dev-tools); }
/* 紧急层级 */
.z-emergency { z-index: 10000; z-index: var(--z-emergency); }
.z-critical { z-index: 10010; z-index: var(--z-critical); }
/* ================================
修复当前 Modal 系统的样式
================================ */
/* Bootstrap Modal 修復 - 使用統一 z-index 但移除 !important */
/* 讓 Bootstrap 原生樣式優先工作，只在需要時才覆蓋 */
.modal-backdrop,
.modal-backdrop.fade,
.modal-backdrop.show,
body .modal-backdrop {
position: fixed;
z-index: 3000;
z-index: var(--z-modal-backdrop);
}
.modal,
.modal.fade,
.modal.show,
body .modal {
z-index: 3010;
z-index: var(--z-modal);
position: fixed;
}
/* fade 動畫期間的層級 - 移除 !important */
.modal.fade:not(.show) {
z-index: 2900;
}
.modal-backdrop.fade:not(.show) {
z-index: 2800;
}
/* fade 動畫期間確保內容不會被遮擋 - 移除此規則，使用全局 modal z-index 變數 */
/* 問題：z-index 2950 比 backdrop 的 3000 還低，導致 modal 內容被 backdrop 遮擋 */
/* .modal.fade .modal-dialog,
.modal.fade .modal-content {
z-index: 2950;
position: relative;
} */
.modal .modal-dialog,
body .modal .modal-dialog {
z-index: 3020;
z-index: var(--z-modal-dialog);
position: relative;
}
.modal .modal-content,
body .modal .modal-content {
z-index: 3030;
z-index: var(--z-modal-content);
position: relative;
}
.modal .modal-header,
body .modal .modal-header {
z-index: 3040;
z-index: var(--z-modal-header);
position: relative;
}
.modal .btn-close,
.modal .close,
body .modal .btn-close,
body .modal .close {
z-index: 3050;
z-index: var(--z-modal-close-btn);
position: relative;
}
/* ================================
Navbar 系统修复 - 降低过高的 z-index
================================ */
/* Navbar 主体使用合理的层级 */
.navbar,
.navbar-nav,
.navbar-brand {
z-index: 1000;
z-index: var(--z-ui-navbar);
}
/* Navbar 下拉選單 - 使用弹出层级 */
.navbar .dropdown-menu,
.navbar .nav-item .dropdown-menu,
.naily-navbar-container .dropdown-menu,
.enhanced-dropdown-menu {
z-index: 4010;
z-index: var(--z-dropdown);
position: absolute;
}
/* Enhanced Dropdown 特殊處理 */
.enhanced-dropdown-menu.show,
.dropdown-menu.show {
z-index: 4010;
z-index: var(--z-dropdown);
}
/* 強制確保導航下拉選單在所有頁面都能正常顯示 */
.naily-navbar-container .enhanced-dropdown-menu,
.navbar .enhanced-dropdown-menu,
.enhanced-nav-dropdown .position-absolute {
z-index: 4010;
z-index: var(--z-dropdown);
position: absolute;
}
/* 特別處理聯絡我們頁面可能的衝突 */
.contact-main-wrapper .enhanced-dropdown-menu,
.contact-container .enhanced-dropdown-menu,
[class*="contact"] .enhanced-dropdown-menu {
z-index: 4010;
z-index: var(--z-dropdown);
position: absolute;
}
/* 修復聯絡我們頁面的 sticky-top 元素造成的 stacking context 問題 */
/* 降低 sticky-top 的 z-index，確保不會遮擋 navbar 下拉選單 */
.bg-light .sticky-top {
z-index: 100;
z-index: var(--z-content); /* 使用內容層級，低於 dropdown (4010) */
}
/* 確保聯絡我們頁面的背景不會造成 stacking context 問題 */
.contact-form-wrapper {
z-index: 0;
z-index: var(--z-base); /* 使用基礎 z-index */
position: relative;
}
/* 確保 navbar dropdown 能夠覆蓋 sticky 元素 */
.navbar .enhanced-dropdown-menu,
.naily-navbar-container .enhanced-dropdown-menu {
z-index: 4010;
z-index: var(--z-dropdown);
position: absolute;
}
/* 在聯絡我們頁面特別強化 dropdown 的優先級 */
.contact-form-wrapper .navbar .enhanced-dropdown-menu,
.bg-light .navbar .enhanced-dropdown-menu,
body .contact-form-wrapper .enhanced-dropdown-menu {
z-index: 4010;
z-index: var(--z-dropdown);
position: absolute;
}
/* ================================
全域修復：確保所有 Navbar 下拉選單使用統一 z-index
================================ */
/* 所有 Navbar 相關下拉選單使用統一的 dropdown 層級 */
.naily-navbar-container .enhanced-dropdown-menu,
.naily-navbar-container .dropdown-menu,
.navbar .enhanced-dropdown-menu,
.navbar .dropdown-menu {
z-index: 4010;
z-index: var(--z-dropdown);
position: absolute;
}
/* 購物車下拉選單使用統一層級 */
.enhanced-cart-dropdown,
.enhanced-cart-dropdown .MuiPaper-root,
.enhanced-cart-dropdown .MuiPopover-paper {
z-index: 4010;
z-index: var(--z-dropdown);
}
/* 會員選單(FloatingIslandMenu)使用統一層級 */
.navbar .position-absolute,
.navbar .user-menu-dropdown {
z-index: 4010;
z-index: var(--z-dropdown);
position: absolute;
}
/* 確保 navbar 本身的 stacking context 正確 */
.contact-form-wrapper .navbar,
.bg-light .navbar {
z-index: 1000;
z-index: var(--z-ui-navbar);
position: relative;
}
/* Sidebar 按钮修复 - 降低过高的 z-index 确保不覆盖 Modal */
.sidebar-buttons,
.css-isolation-container .sidebar-buttons,
.naily-navbar-container .sidebar-buttons,
[class*="sidebarButtons"] {
z-index: 1020;
z-index: var(--z-ui-floating-button); /* 1020 - 低于 Modal backdrop */
position: fixed;
}
/* 强制覆盖任何可能存在的过高 z-index 值 */
body .sidebar-buttons,
html .sidebar-buttons,
.app-container .sidebar-buttons {
z-index: 1020;
z-index: var(--z-ui-floating-button); /* 确保不超过 1020 */
}
.sidebar-buttons button,
.css-isolation-container .sidebar-buttons button,
.naily-navbar-container .sidebar-buttons button,
.sidebar-pink-button,
.sidebar-brand-button,
[class*="sidebar-pink-button"],
[class*="sidebar-brand-button"] {
z-index: 1020;
z-index: var(--z-ui-floating-button);
position: relative;
}
/* 強制覆蓋 SidebarButtons.module.css 中的 99999 值 */
:global(.sidebar-pink-button.sidebar-pink-button.sidebar-pink-button.btn),
:global(.sidebar-brand-button.sidebar-brand-button.sidebar-brand-button.btn) {
z-index: 1020;
z-index: var(--z-ui-floating-button);
}
/* ================================
通知和 Toast 系统
注意：react-hot-toast 使用 containerStyle inline style 設定 z-index，
[data-rht-toaster] 僅作備援（inline style 優先級較高）
================================ */
.notification-toast,
.toast-container,
[data-rht-toaster] {
z-index: 5010;
z-index: var(--z-toast);
}
/* ================================
加载动画和系统覆盖层
================================ */
.loading-spinner,
.loading-overlay {
z-index: 6000;
z-index: var(--z-system-loading);
}
.error-boundary,
.error-overlay {
z-index: 6010;
z-index: var(--z-system-error);
}
/* ================================
调试模式 - 可视化层级系统
================================ */
.z-index-debug * {
outline: 2px solid red;
position: relative;
}
.z-index-debug *:before {
content: "z:" attr(data-z-index);
position: absolute;
top: 0;
left: 0;
background: red;
color: white;
font-size: 10px;
padding: 2px;
z-index: 9000;
z-index: var(--z-debug);
}
/* ================================
媒体查询适配
================================ */
@media (max-width: 768px) {
/* 移动设备上可能需要调整某些层级 */
:root {
/* 在移动设备上，某些元素可能需要不同的层级 */
--z-ui-floating-button: 1050; /* 提高移动设备浮动按钮层级 */
}
}
/* ================================
实用工具类 - 快速修复问题元素
================================ */
/* 强制置于最顶层 - 谨慎使用 */
.z-force-top {
z-index: 10010;
z-index: var(--z-critical);
position: relative;
}
/* 强制置于最底层 */
.z-force-bottom {
z-index: -1;
z-index: var(--z-behind);
position: relative;
}
/* 重置 z-index */
.z-reset {
z-index: auto;
}
/* 隐藏元素 */
.z-hide {
z-index: -1;
z-index: var(--z-behind);
opacity: 0;
pointer-events: none;
}
/* ================================
兼容性支持 - 逐步迁移使用
================================ */
/* 支持旧的 z-index 值，逐步迁移 */
.legacy-z-1050 { z-index: 3010; z-index: var(--z-modal); }
.legacy-z-1040 { z-index: 3000; z-index: var(--z-modal-backdrop); }
.legacy-z-9999 { z-index: 1020; z-index: var(--z-ui-floating-button); }
.legacy-z-99999 { z-index: 10000; z-index: var(--z-emergency); }
/* ================================
性能优化 - contain 属性
================================ */
/* 为高层级元素添加 contain 属性，提高性能 */
.z-modal,
.z-overlay,
.z-toast {
contain: layout style paint;
}
.z-modal-backdrop,
.z-overlay-backdrop {
contain: layout style;
}
/**
* Modal Design Tokens System
* 設計 Token 系統 - 所有 Modal 樣式的單一真相來源
*
* 使用方式：
* 1. 所有 Modal 相關樣式應引用這些 CSS 變數
* 2. 不要在其他檔案中硬編碼這些值
* 3. 如需修改全站 Modal 樣式，只需修改此檔案
*/
:root {
/* ========================================
尺寸系統 (Size System)
基於常見 Modal 使用情境定義
======================================== */
--modal-size-xs: 300px;
--modal-size-sm: 400px;
--modal-size-md: 600px;
--modal-size-lg: 800px;
--modal-size-xl: 1140px;
--modal-size-full: 100%;
/* ========================================
圓角系統 (Border Radius)
統一為 3 種尺寸，避免過多變體
======================================== */
--modal-radius-sm: 12px;
--modal-radius-md: 16px;
--modal-radius-lg: 20px;
/* ========================================
間距系統 (Spacing)
基於 8px 網格系統
======================================== */
--modal-spacing-xs: 0.5rem; /* 8px */
--modal-spacing-sm: 1rem; /* 16px */
--modal-spacing-md: 1.5rem; /* 24px */
--modal-spacing-lg: 2rem; /* 32px */
--modal-spacing-xl: 2.5rem; /* 40px */
--modal-spacing-2xl: 3rem; /* 48px */
/* ========================================
陰影系統 (Shadow System)
3 種層級，適用不同重要性的 Modal
======================================== */
--modal-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.08);
--modal-shadow-md: 0 10px 40px rgba(0, 0, 0, 0.15);
--modal-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.2);
--modal-shadow-xl: 0 30px 80px rgba(0, 0, 0, 0.25);
/* ========================================
背景遮罩 (Backdrop)
統一遮罩效果
======================================== */
--modal-backdrop-color: rgba(0, 0, 0, 0.5);
--modal-backdrop-color-light: rgba(0, 0, 0, 0.3);
--modal-backdrop-color-dark: rgba(0, 0, 0, 0.7);
--modal-backdrop-blur: blur(4px);
--modal-backdrop-blur-strong: blur(8px);
/* ========================================
動畫系統 (Animation)
統一動畫時長和緩動函數
======================================== */
--modal-duration-fast: 150ms;
--modal-duration-normal: 250ms;
--modal-duration-slow: 350ms;
--modal-easing: cubic-bezier(0.4, 0, 0.2, 1);
--modal-easing-enter: cubic-bezier(0, 0, 0.2, 1);
--modal-easing-exit: cubic-bezier(0.4, 0, 1, 1);
/* ========================================
Z-Index 系統 (引用統一系統)
所有層級值來自 unified-z-index-system.css
======================================== */
--modal-z-backdrop: var(--z-modal-backdrop, 3000);
--modal-z-base: var(--z-modal, 3010);
--modal-z-dialog: var(--z-modal-dialog, 3020);
--modal-z-content: var(--z-modal-content, 3030);
--modal-z-header: var(--z-modal-header, 3040);
--modal-z-close: var(--z-modal-close-btn, 3050);
/* 特殊層級（在 unified-z-index-system.css 中定義） */
--modal-z-critical: var(--z-modal-critical, 3100);
--modal-z-fullscreen: var(--z-modal-fullscreen, 3200);
--modal-z-nested: var(--z-modal-nested, 3300);
/* ========================================
顏色系統 (Color System)
主題相關的顏色定義
======================================== */
/* 預設主題 */
--modal-bg-default: #ffffff;
--modal-text-default: #333333;
--modal-border-default: #e0e0e0;
/* 會員主題（粉紅色系） */
--modal-bg-member: linear-gradient(135deg, #ffeef8 0%, #fff5f9 100%);
--modal-accent-member: #ff69b4;
--modal-accent-member-hover: #ff1493;
/* 活動主題（漸層） */
--modal-bg-event: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--modal-text-event: #ffffff;
/* 危險主題（紅色警告） */
--modal-bg-danger: #fff5f5;
--modal-accent-danger: #dc3545;
--modal-border-danger: #f8d7da;
/* 毛玻璃主題 */
--modal-bg-glass: rgba(255, 255, 255, 0.9);
--modal-backdrop-glass: rgba(255, 255, 255, 0.1);
/* ========================================
關閉按鈕 (Close Button)
統一關閉按鈕樣式
======================================== */
--modal-close-size: 32px;
--modal-close-color: #666666;
--modal-close-hover-color: #333333;
--modal-close-hover-bg: rgba(0, 0, 0, 0.05);
/* ========================================
響應式斷點 (Responsive Breakpoints)
與 Bootstrap 5 保持一致
======================================== */
--modal-breakpoint-xs: 0px;
--modal-breakpoint-sm: 576px;
--modal-breakpoint-md: 768px;
--modal-breakpoint-lg: 992px;
--modal-breakpoint-xl: 1200px;
/* ========================================
無障礙 (Accessibility)
焦點管理和鍵盤操作
======================================== */
--modal-focus-outline: 2px solid #007bff;
--modal-focus-outline-offset: 2px;
}
/* ========================================
減少動畫偏好支援
尊重使用者的系統設定
======================================== */
@media (prefers-reduced-motion: reduce) {
:root {
--modal-duration-fast: 0ms;
--modal-duration-normal: 0ms;
--modal-duration-slow: 0ms;
}
}
/* ========================================
深色模式支援（預留）
未來可擴展深色主題
======================================== */
@media (prefers-color-scheme: dark) {
:root {
--modal-bg-default: #1e1e1e;
--modal-text-default: #e0e0e0;
--modal-border-default: #3a3a3a;
--modal-backdrop-color: rgba(0, 0, 0, 0.7);
}
}
/**
* Modal Design Tokens System
* 設計 Token 系統 - 所有 Modal 樣式的單一真相來源
*
* 使用方式：
* 1. 所有 Modal 相關樣式應引用這些 CSS 變數
* 2. 不要在其他檔案中硬編碼這些值
* 3. 如需修改全站 Modal 樣式，只需修改此檔案
*/
:root {
/* ========================================
尺寸系統 (Size System)
基於常見 Modal 使用情境定義
======================================== */
--modal-size-xs: 300px;
--modal-size-sm: 400px;
--modal-size-md: 600px;
--modal-size-lg: 800px;
--modal-size-xl: 1140px;
--modal-size-full: 100%;
/* ========================================
圓角系統 (Border Radius)
統一為 3 種尺寸，避免過多變體
======================================== */
--modal-radius-sm: 12px;
--modal-radius-md: 16px;
--modal-radius-lg: 20px;
/* ========================================
間距系統 (Spacing)
基於 8px 網格系統
======================================== */
--modal-spacing-xs: 0.5rem; /* 8px */
--modal-spacing-sm: 1rem; /* 16px */
--modal-spacing-md: 1.5rem; /* 24px */
--modal-spacing-lg: 2rem; /* 32px */
--modal-spacing-xl: 2.5rem; /* 40px */
--modal-spacing-2xl: 3rem; /* 48px */
/* ========================================
陰影系統 (Shadow System)
3 種層級，適用不同重要性的 Modal
======================================== */
--modal-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.08);
--modal-shadow-md: 0 10px 40px rgba(0, 0, 0, 0.15);
--modal-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.2);
--modal-shadow-xl: 0 30px 80px rgba(0, 0, 0, 0.25);
/* ========================================
背景遮罩 (Backdrop)
統一遮罩效果
======================================== */
--modal-backdrop-color: rgba(0, 0, 0, 0.5);
--modal-backdrop-color-light: rgba(0, 0, 0, 0.3);
--modal-backdrop-color-dark: rgba(0, 0, 0, 0.7);
--modal-backdrop-blur: blur(4px);
--modal-backdrop-blur-strong: blur(8px);
/* ========================================
動畫系統 (Animation)
統一動畫時長和緩動函數
======================================== */
--modal-duration-fast: 150ms;
--modal-duration-normal: 250ms;
--modal-duration-slow: 350ms;
--modal-easing: cubic-bezier(0.4, 0, 0.2, 1);
--modal-easing-enter: cubic-bezier(0, 0, 0.2, 1);
--modal-easing-exit: cubic-bezier(0.4, 0, 1, 1);
/* ========================================
Z-Index 系統 (引用統一系統)
所有層級值來自 unified-z-index-system.css
======================================== */
--modal-z-backdrop: var(--z-modal-backdrop, 3000);
--modal-z-base: var(--z-modal, 3010);
--modal-z-dialog: var(--z-modal-dialog, 3020);
--modal-z-content: var(--z-modal-content, 3030);
--modal-z-header: var(--z-modal-header, 3040);
--modal-z-close: var(--z-modal-close-btn, 3050);
/* 特殊層級（在 unified-z-index-system.css 中定義） */
--modal-z-critical: var(--z-modal-critical, 3100);
--modal-z-fullscreen: var(--z-modal-fullscreen, 3200);
--modal-z-nested: var(--z-modal-nested, 3300);
/* ========================================
顏色系統 (Color System)
主題相關的顏色定義
======================================== */
/* 預設主題 */
--modal-bg-default: #ffffff;
--modal-text-default: #333333;
--modal-border-default: #e0e0e0;
/* 會員主題（粉紅色系） */
--modal-bg-member: linear-gradient(135deg, #ffeef8 0%, #fff5f9 100%);
--modal-accent-member: #ff69b4;
--modal-accent-member-hover: #ff1493;
/* 活動主題（漸層） */
--modal-bg-event: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--modal-text-event: #ffffff;
/* 危險主題（紅色警告） */
--modal-bg-danger: #fff5f5;
--modal-accent-danger: #dc3545;
--modal-border-danger: #f8d7da;
/* 毛玻璃主題 */
--modal-bg-glass: rgba(255, 255, 255, 0.9);
--modal-backdrop-glass: rgba(255, 255, 255, 0.1);
/* ========================================
關閉按鈕 (Close Button)
統一關閉按鈕樣式
======================================== */
--modal-close-size: 32px;
--modal-close-color: #666666;
--modal-close-hover-color: #333333;
--modal-close-hover-bg: rgba(0, 0, 0, 0.05);
/* ========================================
響應式斷點 (Responsive Breakpoints)
與 Bootstrap 5 保持一致
======================================== */
--modal-breakpoint-xs: 0px;
--modal-breakpoint-sm: 576px;
--modal-breakpoint-md: 768px;
--modal-breakpoint-lg: 992px;
--modal-breakpoint-xl: 1200px;
/* ========================================
無障礙 (Accessibility)
焦點管理和鍵盤操作
======================================== */
--modal-focus-outline: 2px solid #007bff;
--modal-focus-outline-offset: 2px;
}
/* ========================================
減少動畫偏好支援
尊重使用者的系統設定
======================================== */
@media (prefers-reduced-motion: reduce) {
:root {
--modal-duration-fast: 0ms;
--modal-duration-normal: 0ms;
--modal-duration-slow: 0ms;
}
}
/* ========================================
深色模式支援（預留）
未來可擴展深色主題
======================================== */
@media (prefers-color-scheme: dark) {
:root {
--modal-bg-default: #1e1e1e;
--modal-text-default: #e0e0e0;
--modal-border-default: #3a3a3a;
--modal-backdrop-color: rgba(0, 0, 0, 0.7);
}
}
/**
* Modal Base Styles
* 基礎 Modal 樣式系統
*
* 整合來源：
* - BootstrapModal.css
* - CheckoutLoginModal.css
* - LoginModal.css (基礎部分)
* - logout-modal.css (基礎部分)
* - 其他重複的基礎定義
*
* 設計原則：
* 1. 所有樣式引用 modal-design-tokens.css 中的 CSS 變數
* 2. 遵循 unified-z-index-system.css 的 z-index 層級
* 3. 移動優先的響應式設計
* 4. 無障礙友善
*/
/* ========================================
導入設計 Token
======================================== */
/* ========================================
Bootstrap Modal 覆蓋與增強
確保與 unified-z-index-system 一致
======================================== */
/* Modal Backdrop - 遮罩層 */
.modal-backdrop,
.modal-backdrop.fade,
.modal-backdrop.show {
position: fixed;
top: 0;
left: 0;
z-index: var(--modal-z-backdrop);
width: 100vw;
height: 100vh;
background-color: var(--modal-backdrop-color);
backdrop-filter: var(--modal-backdrop-blur);
-webkit-backdrop-filter: var(--modal-backdrop-blur);
}
/* Modal 淡入動畫 */
.modal-backdrop.fade {
opacity: 0;
transition: opacity var(--modal-duration-normal) var(--modal-easing);
}
.modal-backdrop.show {
opacity: 1;
}
/* Modal 容器 */
.modal {
position: fixed;
top: 0;
left: 0;
z-index: var(--modal-z-base);
display: none;
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
outline: 0;
}
.modal.fade {
opacity: 0;
transition: opacity var(--modal-duration-normal) var(--modal-easing);
}
.modal.show {
display: block;
opacity: 1;
}
/* Modal Dialog - 對話框容器 */
.modal-dialog {
position: relative;
z-index: var(--modal-z-dialog);
width: auto;
margin: 0.5rem;
pointer-events: none;
transition: transform var(--modal-duration-normal) var(--modal-easing);
}
.modal.fade .modal-dialog {
transform: translate(0, -50px);
}
.modal.show .modal-dialog {
transform: none;
}
/* Modal Content - 內容容器 */
.modal-content {
position: relative;
z-index: var(--modal-z-content);
display: flex;
flex-direction: column;
width: 100%;
pointer-events: auto;
background-color: var(--modal-bg-default);
background-clip: padding-box;
border: 1px solid var(--modal-border-default);
border-radius: var(--modal-radius-md);
box-shadow: var(--modal-shadow-md);
outline: 0;
}
/* ========================================
Modal Header
======================================== */
.modal-header {
position: relative;
z-index: var(--modal-z-header);
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: space-between;
padding: var(--modal-spacing-lg);
border-bottom: 1px solid var(--modal-border-default);
border-top-left-radius: var(--modal-radius-md);
border-top-right-radius: var(--modal-radius-md);
}
.modal-title {
margin: 0;
font-size: 1.25rem;
font-weight: 600;
line-height: 1.5;
color: var(--modal-text-default);
}
/* ========================================
Modal Body
======================================== */
.modal-body {
position: relative;
flex: 1 1 auto;
padding: var(--modal-spacing-lg);
overflow-y: auto;
}
/* ========================================
Modal Footer
======================================== */
.modal-footer {
display: flex;
flex-wrap: wrap;
flex-shrink: 0;
align-items: center;
justify-content: flex-end;
padding: var(--modal-spacing-md);
border-top: 1px solid var(--modal-border-default);
border-bottom-right-radius: var(--modal-radius-md);
border-bottom-left-radius: var(--modal-radius-md);
gap: var(--modal-spacing-sm);
}
.modal-footer > * {
margin: 0;
}
/* ========================================
關閉按鈕
======================================== */
.modal .btn-close,
.modal .close {
position: relative;
z-index: var(--modal-z-close);
width: var(--modal-close-size);
height: var(--modal-close-size);
padding: 0;
background: transparent;
border: none;
border-radius: 50%;
opacity: 1;
color: var(--modal-close-color);
font-size: 1.25rem;
line-height: 1;
cursor: pointer;
transition: all var(--modal-duration-fast) var(--modal-easing);
display: flex;
align-items: center;
justify-content: center;
}
.modal .btn-close:hover,
.modal .close:hover {
background: var(--modal-close-hover-bg);
color: var(--modal-close-hover-color);
opacity: 1;
transform: scale(1.1);
}
.modal .btn-close:focus,
.modal .close:focus {
outline: var(--modal-focus-outline);
outline-offset: var(--modal-focus-outline-offset);
box-shadow: none;
}
/* ========================================
Modal 尺寸變體
======================================== */
.modal-sm .modal-dialog {
max-width: var(--modal-size-sm);
}
.modal-md .modal-dialog,
.modal-dialog {
max-width: var(--modal-size-md);
}
.modal-lg .modal-dialog {
max-width: var(--modal-size-lg);
}
.modal-xl .modal-dialog {
max-width: var(--modal-size-xl);
}
.modal-fullscreen .modal-dialog {
max-width: none;
width: 100vw;
height: 100vh;
margin: 0;
}
.modal-fullscreen .modal-content {
height: 100vh;
border: 0;
border-radius: 0;
}
/* ========================================
Modal 置中對齊
======================================== */
.modal-dialog-centered {
display: flex;
align-items: center;
min-height: calc(100% - 1rem);
}
.modal-dialog-centered::before {
display: block;
height: calc(100vh - 1rem);
content: "";
}
/* ========================================
可滾動的 Modal
======================================== */
.modal-dialog-scrollable {
height: calc(100% - 1rem);
}
.modal-dialog-scrollable .modal-content {
max-height: 100%;
overflow: hidden;
}
.modal-dialog-scrollable .modal-body {
overflow-y: auto;
}
/* ========================================
響應式斷點
======================================== */
/* 小螢幕 (≥576px) */
@media (min-width: 576px) {
.modal-dialog {
max-width: var(--modal-size-md);
margin: 1.75rem auto;
}
.modal-dialog-centered {
min-height: calc(100% - 3.5rem);
}
.modal-dialog-centered::before {
height: calc(100vh - 3.5rem);
}
.modal-sm .modal-dialog {
max-width: var(--modal-size-sm);
}
}
/* 中等螢幕 (≥768px) */
@media (min-width: 768px) {
.modal-dialog {
margin: 2rem auto;
}
.modal-lg .modal-dialog {
max-width: var(--modal-size-lg);
}
.modal-dialog-centered {
min-height: calc(100% - 4rem);
}
.modal-dialog-centered::before {
height: calc(100vh - 4rem);
}
}
/* 大螢幕 (≥992px) */
@media (min-width: 992px) {
.modal-lg .modal-dialog,
.modal-xl .modal-dialog {
max-width: var(--modal-size-xl);
}
}
/* 超大螢幕 (≥1200px) */
@media (min-width: 1200px) {
.modal-xl .modal-dialog {
max-width: var(--modal-size-xl);
}
}
/* ========================================
無障礙功能
======================================== */
/* 焦點樣式 */
.modal-content:focus {
outline: var(--modal-focus-outline);
outline-offset: var(--modal-focus-outline-offset);
}
/* 確保鍵盤焦點可見 */
.modal *:focus-visible {
outline: var(--modal-focus-outline);
outline-offset: var(--modal-focus-outline-offset);
}
/* 螢幕閱讀器專用文字 */
.modal .sr-only,
.modal .visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ========================================
動畫效果
======================================== */
/* 淡入效果 */
@keyframes modalFadeIn {
from {
opacity: 0;
transform: scale(0.95) translateY(-20px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
/* 淡出效果 */
@keyframes modalFadeOut {
from {
opacity: 1;
transform: scale(1) translateY(0);
}
to {
opacity: 0;
transform: scale(0.95) translateY(-20px);
}
}
/* 應用動畫 */
.modal.show .modal-dialog {
animation: modalFadeIn var(--modal-duration-normal) var(--modal-easing);
}
.modal.fade:not(.show) .modal-dialog {
animation: modalFadeOut var(--modal-duration-normal) var(--modal-easing);
}
/* ========================================
減少動畫偏好支援
======================================== */
@media (prefers-reduced-motion: reduce) {
.modal-backdrop.fade,
.modal.fade,
.modal.fade .modal-dialog {
transition: none;
animation: none;
}
.modal .btn-close,
.modal .close {
transition: none;
}
}
/* ========================================
效能優化
======================================== */
/* 使用 GPU 加速 */
.modal-dialog {
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.modal-content {
transform: translateZ(0);
will-change: transform, opacity;
}
/* 優化滾動效能 */
.modal-body {
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
}
/* 限制重繪範圍 */
.modal-backdrop,
.modal-dialog {
contain: layout style paint;
}
/* ========================================
印刷樣式
======================================== */
@media print {
.modal {
position: static;
}
.modal-backdrop {
display: none;
}
.modal-dialog {
margin: 0;
max-width: 100%;
}
.modal-content {
border: 1px solid #000;
box-shadow: none;
}
.modal .btn-close,
.modal .close {
display: none;
}
}
/* ========================================
工具類別
======================================== */
/* 無邊框 Modal */
.modal-borderless .modal-content {
border: none;
}
/* 無陰影 Modal */
.modal-no-shadow .modal-content {
box-shadow: none;
}
/* 圓角變體 */
.modal-rounded-sm .modal-content {
border-radius: var(--modal-radius-sm);
}
.modal-rounded-lg .modal-content {
border-radius: var(--modal-radius-lg);
}
/* 緊湊間距 */
.modal-compact .modal-header,
.modal-compact .modal-body,
.modal-compact .modal-footer {
padding: var(--modal-spacing-sm);
}
/* 寬鬆間距 */
.modal-spacious .modal-header,
.modal-spacious .modal-body,
.modal-spacious .modal-footer {
padding: var(--modal-spacing-xl);
}
/* 無 Header 邊框 */
.modal-no-header-border .modal-header {
border-bottom: none;
}
/* 無 Footer 邊框 */
.modal-no-footer-border .modal-footer {
border-top: none;
}
/**
* Modal Design Tokens System
* 設計 Token 系統 - 所有 Modal 樣式的單一真相來源
*
* 使用方式：
* 1. 所有 Modal 相關樣式應引用這些 CSS 變數
* 2. 不要在其他檔案中硬編碼這些值
* 3. 如需修改全站 Modal 樣式，只需修改此檔案
*/
:root {
/* ========================================
尺寸系統 (Size System)
基於常見 Modal 使用情境定義
======================================== */
--modal-size-xs: 300px;
--modal-size-sm: 400px;
--modal-size-md: 600px;
--modal-size-lg: 800px;
--modal-size-xl: 1140px;
--modal-size-full: 100%;
/* ========================================
圓角系統 (Border Radius)
統一為 3 種尺寸，避免過多變體
======================================== */
--modal-radius-sm: 12px;
--modal-radius-md: 16px;
--modal-radius-lg: 20px;
/* ========================================
間距系統 (Spacing)
基於 8px 網格系統
======================================== */
--modal-spacing-xs: 0.5rem; /* 8px */
--modal-spacing-sm: 1rem; /* 16px */
--modal-spacing-md: 1.5rem; /* 24px */
--modal-spacing-lg: 2rem; /* 32px */
--modal-spacing-xl: 2.5rem; /* 40px */
--modal-spacing-2xl: 3rem; /* 48px */
/* ========================================
陰影系統 (Shadow System)
3 種層級，適用不同重要性的 Modal
======================================== */
--modal-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.08);
--modal-shadow-md: 0 10px 40px rgba(0, 0, 0, 0.15);
--modal-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.2);
--modal-shadow-xl: 0 30px 80px rgba(0, 0, 0, 0.25);
/* ========================================
背景遮罩 (Backdrop)
統一遮罩效果
======================================== */
--modal-backdrop-color: rgba(0, 0, 0, 0.5);
--modal-backdrop-color-light: rgba(0, 0, 0, 0.3);
--modal-backdrop-color-dark: rgba(0, 0, 0, 0.7);
--modal-backdrop-blur: blur(4px);
--modal-backdrop-blur-strong: blur(8px);
/* ========================================
動畫系統 (Animation)
統一動畫時長和緩動函數
======================================== */
--modal-duration-fast: 150ms;
--modal-duration-normal: 250ms;
--modal-duration-slow: 350ms;
--modal-easing: cubic-bezier(0.4, 0, 0.2, 1);
--modal-easing-enter: cubic-bezier(0, 0, 0.2, 1);
--modal-easing-exit: cubic-bezier(0.4, 0, 1, 1);
/* ========================================
Z-Index 系統 (引用統一系統)
所有層級值來自 unified-z-index-system.css
======================================== */
--modal-z-backdrop: var(--z-modal-backdrop, 3000);
--modal-z-base: var(--z-modal, 3010);
--modal-z-dialog: var(--z-modal-dialog, 3020);
--modal-z-content: var(--z-modal-content, 3030);
--modal-z-header: var(--z-modal-header, 3040);
--modal-z-close: var(--z-modal-close-btn, 3050);
/* 特殊層級（在 unified-z-index-system.css 中定義） */
--modal-z-critical: var(--z-modal-critical, 3100);
--modal-z-fullscreen: var(--z-modal-fullscreen, 3200);
--modal-z-nested: var(--z-modal-nested, 3300);
/* ========================================
顏色系統 (Color System)
主題相關的顏色定義
======================================== */
/* 預設主題 */
--modal-bg-default: #ffffff;
--modal-text-default: #333333;
--modal-border-default: #e0e0e0;
/* 會員主題（粉紅色系） */
--modal-bg-member: linear-gradient(135deg, #ffeef8 0%, #fff5f9 100%);
--modal-accent-member: #ff69b4;
--modal-accent-member-hover: #ff1493;
/* 活動主題（漸層） */
--modal-bg-event: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--modal-text-event: #ffffff;
/* 危險主題（紅色警告） */
--modal-bg-danger: #fff5f5;
--modal-accent-danger: #dc3545;
--modal-border-danger: #f8d7da;
/* 毛玻璃主題 */
--modal-bg-glass: rgba(255, 255, 255, 0.9);
--modal-backdrop-glass: rgba(255, 255, 255, 0.1);
/* ========================================
關閉按鈕 (Close Button)
統一關閉按鈕樣式
======================================== */
--modal-close-size: 32px;
--modal-close-color: #666666;
--modal-close-hover-color: #333333;
--modal-close-hover-bg: rgba(0, 0, 0, 0.05);
/* ========================================
響應式斷點 (Responsive Breakpoints)
與 Bootstrap 5 保持一致
======================================== */
--modal-breakpoint-xs: 0px;
--modal-breakpoint-sm: 576px;
--modal-breakpoint-md: 768px;
--modal-breakpoint-lg: 992px;
--modal-breakpoint-xl: 1200px;
/* ========================================
無障礙 (Accessibility)
焦點管理和鍵盤操作
======================================== */
--modal-focus-outline: 2px solid #007bff;
--modal-focus-outline-offset: 2px;
}
/* ========================================
減少動畫偏好支援
尊重使用者的系統設定
======================================== */
@media (prefers-reduced-motion: reduce) {
:root {
--modal-duration-fast: 0ms;
--modal-duration-normal: 0ms;
--modal-duration-slow: 0ms;
}
}
/* ========================================
深色模式支援（預留）
未來可擴展深色主題
======================================== */
@media (prefers-color-scheme: dark) {
:root {
--modal-bg-default: #1e1e1e;
--modal-text-default: #e0e0e0;
--modal-border-default: #3a3a3a;
--modal-backdrop-color: rgba(0, 0, 0, 0.7);
}
}
/**
* Modal Themes System
* Modal 主題變體系統
*
* 整合來源：
* - LoginModal.css (會員主題)
* - AppLaunchModal.css (毛玻璃主題)
* - PreRegModal.css (活動主題)
* - DeleteAccountModal.css (危險主題)
* - AdModal.css (廣告主題)
* - 其他主題變體
*
* 使用方式：
* ...
*/
/* ========================================
導入設計 Token
======================================== */
/* ========================================
主題 1: 預設主題 (Default Theme)
標準的白底黑字，適用於大多數情境
======================================== */
.modal-theme-default .modal-content {
background: var(--modal-bg-default);
color: var(--modal-text-default);
border: 1px solid var(--modal-border-default);
}
.modal-theme-default .modal-header {
background: var(--modal-bg-default);
border-bottom: 1px solid var(--modal-border-default);
}
.modal-theme-default .modal-footer {
background: var(--modal-bg-default);
border-top: 1px solid var(--modal-border-default);
}
/* ========================================
主題 2: 會員主題 (Member Theme)
粉紅色系，用於會員相關功能
來源：LoginModal.css
======================================== */
.modal-theme-member .modal-content {
background: var(--modal-bg-member);
color: var(--modal-text-default);
border: 1px solid rgba(255, 182, 193, 0.3);
box-shadow: 0 10px 40px rgba(255, 105, 180, 0.15);
}
.modal-theme-member .modal-header {
background: linear-gradient(135deg, #fff0f5 0%, #ffe4e9 100%);
border-bottom: 1px solid rgba(255, 182, 193, 0.3);
}
.modal-theme-member .modal-header .modal-title {
color: var(--modal-accent-member);
font-weight: 700;
}
.modal-theme-member .modal-footer {
background: linear-gradient(135deg, #fffafa 0%, #fff5f7 100%);
border-top: 1px solid rgba(255, 182, 193, 0.3);
}
/* 會員主題的按鈕樣式 */
.modal-theme-member .btn-primary {
background: linear-gradient(135deg, var(--modal-accent-member) 0%, var(--modal-accent-member-hover) 100%);
border: none;
color: white;
font-weight: 600;
transition: all var(--modal-duration-normal) var(--modal-easing);
}
.modal-theme-member .btn-primary:hover {
background: linear-gradient(135deg, var(--modal-accent-member-hover) 0%, #c71585 100%);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(255, 105, 180, 0.3);
}
/* 會員主題的標籤頁 */
.modal-theme-member .nav-tabs {
border: none;
}
.modal-theme-member .nav-tabs .nav-link {
border: none;
border-bottom: 2px solid transparent;
background: transparent;
color: #666;
transition: all var(--modal-duration-normal) var(--modal-easing);
}
.modal-theme-member .nav-tabs .nav-link.active {
color: var(--modal-accent-member);
border-bottom-color: var(--modal-accent-member);
background: transparent;
}
.modal-theme-member .nav-tabs .nav-link:hover {
color: var(--modal-accent-member);
background: transparent;
}
/* 會員主題的分隔線 */
.modal-theme-member .divider {
display: flex;
align-items: center;
margin: var(--modal-spacing-md) 0;
}
.modal-theme-member .divider hr {
flex: 1 1;
border: none;
border-top: 1px solid rgba(255, 182, 193, 0.3);
margin: 0;
}
.modal-theme-member .divider span {
padding: 0 var(--modal-spacing-md);
font-size: 0.75rem;
color: #999;
}
/* ========================================
主題 3: 活動主題 (Event Theme)
漸層背景，用於促銷活動和特殊事件
來源：PreRegModal.css, AdModal.css
======================================== */
.modal-theme-event .modal-content {
background: var(--modal-bg-event);
color: var(--modal-text-event);
border: none;
box-shadow: 0 20px 60px rgba(102, 126, 234, 0.3);
overflow: hidden;
position: relative;
}
/* 活動主題的裝飾背景 */
.modal-theme-event .modal-content::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
animation: eventBackgroundFloat 20s linear infinite;
pointer-events: none;
}
@keyframes eventBackgroundFloat {
0% {
transform: translate(0, 0) rotate(0deg);
}
100% {
transform: translate(-100px, -100px) rotate(360deg);
}
}
.modal-theme-event .modal-header {
background: transparent;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
position: relative;
z-index: var(--z-low);
}
.modal-theme-event .modal-header .modal-title {
color: white;
font-weight: 700;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.modal-theme-event .modal-body {
position: relative;
z-index: var(--z-low);
}
.modal-theme-event .modal-footer {
background: transparent;
border-top: 1px solid rgba(255, 255, 255, 0.2);
position: relative;
z-index: var(--z-low);
}
/* 活動主題的按鈕 */
.modal-theme-event .btn-primary {
background: white;
color: #667eea;
border: none;
font-weight: 600;
transition: all var(--modal-duration-normal) var(--modal-easing);
}
.modal-theme-event .btn-primary:hover {
background: rgba(255, 255, 255, 0.9);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(255, 255, 255, 0.3);
}
.modal-theme-event .btn-outline-light {
border: 2px solid rgba(255, 255, 255, 0.5);
color: white;
background: transparent;
}
.modal-theme-event .btn-outline-light:hover {
background: rgba(255, 255, 255, 0.2);
border-color: white;
}
/* ========================================
主題 4: 危險主題 (Danger Theme)
紅色警告，用於刪除、註銷等危險操作
來源：DeleteAccountModal.css
======================================== */
.modal-theme-danger .modal-content {
background: var(--modal-bg-danger);
color: var(--modal-text-default);
border: 2px solid var(--modal-border-danger);
box-shadow: 0 10px 40px rgba(220, 53, 69, 0.15);
}
.modal-theme-danger .modal-header {
background: linear-gradient(135deg, #fff5f5 0%, #ffe0e0 100%);
border-bottom: 2px solid var(--modal-border-danger);
}
.modal-theme-danger .modal-header .modal-title {
color: var(--modal-accent-danger);
font-weight: 700;
display: flex;
align-items: center;
gap: var(--modal-spacing-sm);
}
.modal-theme-danger .modal-header .modal-title::before {
content: '⚠';
font-size: 1.5rem;
animation: dangerPulse 2s ease-in-out infinite;
}
@keyframes dangerPulse {
0%, 100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.1);
opacity: 0.8;
}
}
.modal-theme-danger .modal-body {
background: white;
}
.modal-theme-danger .modal-footer {
background: linear-gradient(135deg, #fffafa 0%, #fff5f5 100%);
border-top: 2px solid var(--modal-border-danger);
}
/* 危險主題的按鈕 */
.modal-theme-danger .btn-danger {
background: linear-gradient(135deg, var(--modal-accent-danger) 0%, #c82333 100%);
border: none;
color: white;
font-weight: 600;
transition: all var(--modal-duration-normal) var(--modal-easing);
}
.modal-theme-danger .btn-danger:hover {
background: linear-gradient(135deg, #c82333 0%, #bd2130 100%);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(220, 53, 69, 0.3);
}
.modal-theme-danger .btn-outline-danger {
border: 2px solid var(--modal-accent-danger);
color: var(--modal-accent-danger);
background: transparent;
}
.modal-theme-danger .btn-outline-danger:hover {
background: var(--modal-accent-danger);
color: white;
border-color: var(--modal-accent-danger);
}
/* 危險主題的警告框 */
.modal-theme-danger .alert {
background: linear-gradient(135deg, #fff5f5 0%, #ffe0e0 100%);
border: 1px solid var(--modal-border-danger);
color: var(--modal-accent-danger);
border-radius: var(--modal-radius-sm);
}
/* ========================================
主題 5: 毛玻璃主題 (Glass Theme)
半透明毛玻璃效果，現代感設計
來源：AppLaunchModal.css
======================================== */
.modal-theme-glass .modal-backdrop {
backdrop-filter: var(--modal-backdrop-blur-strong);
-webkit-backdrop-filter: var(--modal-backdrop-blur-strong);
background-color: var(--modal-backdrop-color-light);
}
.modal-theme-glass .modal-content {
background: var(--modal-bg-glass);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow:
0 24px 48px rgba(0, 0, 0, 0.12),
0 8px 16px rgba(0, 0, 0, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
border-radius: var(--modal-radius-lg);
}
.modal-theme-glass .modal-header {
background: transparent;
border: none;
}
.modal-theme-glass .modal-body {
background: transparent;
}
.modal-theme-glass .modal-footer {
background: rgba(248, 249, 250, 0.5);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-top: 1px solid rgba(0, 0, 0, 0.06);
}
/* 毛玻璃主題的關閉按鈕 */
.modal-theme-glass .btn-close {
background: rgba(0, 0, 0, 0.04);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 50%;
width: 36px;
height: 36px;
opacity: 1;
}
.modal-theme-glass .btn-close:hover {
background: rgba(0, 0, 0, 0.08);
transform: scale(1.1) rotate(90deg);
}
/* 毛玻璃主題的按鈕 */
.modal-theme-glass .btn {
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: var(--modal-radius-md);
font-weight: 600;
transition: all var(--modal-duration-normal) var(--modal-easing);
position: relative;
overflow: hidden;
}
.modal-theme-glass .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;
}
.modal-theme-glass .btn:hover::before {
width: 300px;
height: 300px;
}
.modal-theme-glass .btn-primary {
background: linear-gradient(135deg, #1a1a1a 0%, #333333 100%);
color: white;
border: none;
}
.modal-theme-glass .btn-primary:hover {
background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
.modal-theme-glass .btn-secondary {
background: rgba(255, 255, 255, 0.8);
color: #1a1a1a;
border: 1px solid rgba(0, 0, 0, 0.15);
}
.modal-theme-glass .btn-secondary:hover {
background: rgba(255, 255, 255, 0.95);
border-color: rgba(0, 0, 0, 0.25);
transform: translateY(-2px);
}
/* 毛玻璃主題的特殊區塊 */
.modal-theme-glass .feature-box {
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(10px) saturate(150%);
-webkit-backdrop-filter: blur(10px) saturate(150%);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: var(--modal-radius-md);
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.04),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
padding: var(--modal-spacing-md);
transition: all var(--modal-duration-normal) var(--modal-easing);
}
.modal-theme-glass .feature-box:hover {
transform: translateY(-2px);
background: rgba(255, 255, 255, 0.7);
box-shadow:
0 8px 20px rgba(0, 0, 0, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
/* ========================================
響應式設計
======================================== */
@media (max-width: 576px) {
/* 會員主題 */
.modal-theme-member .nav-tabs .nav-link {
font-size: 0.875rem;
padding: 0.5rem 1rem;
}
/* 活動主題 */
.modal-theme-event .modal-content {
border-radius: var(--modal-radius-md);
}
/* 危險主題 */
.modal-theme-danger .modal-header .modal-title::before {
font-size: 1.25rem;
}
/* 毛玻璃主題 */
.modal-theme-glass .modal-content {
border-radius: var(--modal-radius-md);
}
.modal-theme-glass .btn-close {
width: 32px;
height: 32px;
}
}
/* ========================================
深色模式支援（預留）
======================================== */
@media (prefers-color-scheme: dark) {
/* 預設主題深色版 */
.modal-theme-default .modal-content {
background: #1e1e1e;
color: #e0e0e0;
border-color: #3a3a3a;
}
.modal-theme-default .modal-header,
.modal-theme-default .modal-footer {
background: #252525;
border-color: #3a3a3a;
}
/* 其他主題保持原樣，因為它們有自己的配色方案 */
}
/* ========================================
組合主題
支援多個主題類名同時使用
======================================== */
/* 會員主題 + 毛玻璃效果 */
.modal-theme-member.modal-theme-glass .modal-content {
background: linear-gradient(135deg, rgba(255, 238, 248, 0.9) 0%, rgba(255, 245, 249, 0.9) 100%);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
}
/* 危險主題 + 毛玻璃效果 */
.modal-theme-danger.modal-theme-glass .modal-content {
background: linear-gradient(135deg, rgba(255, 245, 245, 0.9) 0%, rgba(255, 224, 224, 0.9) 100%);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
}
/**
* Modal Design Tokens System
* 設計 Token 系統 - 所有 Modal 樣式的單一真相來源
*
* 使用方式：
* 1. 所有 Modal 相關樣式應引用這些 CSS 變數
* 2. 不要在其他檔案中硬編碼這些值
* 3. 如需修改全站 Modal 樣式，只需修改此檔案
*/
:root {
/* ========================================
尺寸系統 (Size System)
基於常見 Modal 使用情境定義
======================================== */
--modal-size-xs: 300px;
--modal-size-sm: 400px;
--modal-size-md: 600px;
--modal-size-lg: 800px;
--modal-size-xl: 1140px;
--modal-size-full: 100%;
/* ========================================
圓角系統 (Border Radius)
統一為 3 種尺寸，避免過多變體
======================================== */
--modal-radius-sm: 12px;
--modal-radius-md: 16px;
--modal-radius-lg: 20px;
/* ========================================
間距系統 (Spacing)
基於 8px 網格系統
======================================== */
--modal-spacing-xs: 0.5rem; /* 8px */
--modal-spacing-sm: 1rem; /* 16px */
--modal-spacing-md: 1.5rem; /* 24px */
--modal-spacing-lg: 2rem; /* 32px */
--modal-spacing-xl: 2.5rem; /* 40px */
--modal-spacing-2xl: 3rem; /* 48px */
/* ========================================
陰影系統 (Shadow System)
3 種層級，適用不同重要性的 Modal
======================================== */
--modal-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.08);
--modal-shadow-md: 0 10px 40px rgba(0, 0, 0, 0.15);
--modal-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.2);
--modal-shadow-xl: 0 30px 80px rgba(0, 0, 0, 0.25);
/* ========================================
背景遮罩 (Backdrop)
統一遮罩效果
======================================== */
--modal-backdrop-color: rgba(0, 0, 0, 0.5);
--modal-backdrop-color-light: rgba(0, 0, 0, 0.3);
--modal-backdrop-color-dark: rgba(0, 0, 0, 0.7);
--modal-backdrop-blur: blur(4px);
--modal-backdrop-blur-strong: blur(8px);
/* ========================================
動畫系統 (Animation)
統一動畫時長和緩動函數
======================================== */
--modal-duration-fast: 150ms;
--modal-duration-normal: 250ms;
--modal-duration-slow: 350ms;
--modal-easing: cubic-bezier(0.4, 0, 0.2, 1);
--modal-easing-enter: cubic-bezier(0, 0, 0.2, 1);
--modal-easing-exit: cubic-bezier(0.4, 0, 1, 1);
/* ========================================
Z-Index 系統 (引用統一系統)
所有層級值來自 unified-z-index-system.css
======================================== */
--modal-z-backdrop: var(--z-modal-backdrop, 3000);
--modal-z-base: var(--z-modal, 3010);
--modal-z-dialog: var(--z-modal-dialog, 3020);
--modal-z-content: var(--z-modal-content, 3030);
--modal-z-header: var(--z-modal-header, 3040);
--modal-z-close: var(--z-modal-close-btn, 3050);
/* 特殊層級（在 unified-z-index-system.css 中定義） */
--modal-z-critical: var(--z-modal-critical, 3100);
--modal-z-fullscreen: var(--z-modal-fullscreen, 3200);
--modal-z-nested: var(--z-modal-nested, 3300);
/* ========================================
顏色系統 (Color System)
主題相關的顏色定義
======================================== */
/* 預設主題 */
--modal-bg-default: #ffffff;
--modal-text-default: #333333;
--modal-border-default: #e0e0e0;
/* 會員主題（粉紅色系） */
--modal-bg-member: linear-gradient(135deg, #ffeef8 0%, #fff5f9 100%);
--modal-accent-member: #ff69b4;
--modal-accent-member-hover: #ff1493;
/* 活動主題（漸層） */
--modal-bg-event: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--modal-text-event: #ffffff;
/* 危險主題（紅色警告） */
--modal-bg-danger: #fff5f5;
--modal-accent-danger: #dc3545;
--modal-border-danger: #f8d7da;
/* 毛玻璃主題 */
--modal-bg-glass: rgba(255, 255, 255, 0.9);
--modal-backdrop-glass: rgba(255, 255, 255, 0.1);
/* ========================================
關閉按鈕 (Close Button)
統一關閉按鈕樣式
======================================== */
--modal-close-size: 32px;
--modal-close-color: #666666;
--modal-close-hover-color: #333333;
--modal-close-hover-bg: rgba(0, 0, 0, 0.05);
/* ========================================
響應式斷點 (Responsive Breakpoints)
與 Bootstrap 5 保持一致
======================================== */
--modal-breakpoint-xs: 0px;
--modal-breakpoint-sm: 576px;
--modal-breakpoint-md: 768px;
--modal-breakpoint-lg: 992px;
--modal-breakpoint-xl: 1200px;
/* ========================================
無障礙 (Accessibility)
焦點管理和鍵盤操作
======================================== */
--modal-focus-outline: 2px solid #007bff;
--modal-focus-outline-offset: 2px;
}
/* ========================================
減少動畫偏好支援
尊重使用者的系統設定
======================================== */
@media (prefers-reduced-motion: reduce) {
:root {
--modal-duration-fast: 0ms;
--modal-duration-normal: 0ms;
--modal-duration-slow: 0ms;
}
}
/* ========================================
深色模式支援（預留）
未來可擴展深色主題
======================================== */
@media (prefers-color-scheme: dark) {
:root {
--modal-bg-default: #1e1e1e;
--modal-text-default: #e0e0e0;
--modal-border-default: #3a3a3a;
--modal-backdrop-color: rgba(0, 0, 0, 0.7);
}
}
/**
* Modal Special Styles
* 特殊用途 Modal 樣式
*
* 整合來源：
* - show-product-img-modal.module.css (全螢幕圖片查看)
* - UnifiedLogisticsModal.css (物流資訊)
* - VotingDetailModal.module.css (投票詳情)
* - CouponSelectionModal.css (優惠券選擇)
* - 其他特殊用途的 Modal
*
* 設計原則：
* 1. 專門處理特殊用途、複雜互動的 Modal
* 2. 不影響基礎 Modal 和主題樣式
* 3. 可與主題系統組合使用
*/
/* ========================================
導入設計 Token
======================================== */
/* ========================================
全螢幕圖片查看器 Modal
用於產品圖片放大檢視
來源：show-product-img-modal.module.css
======================================== */
.modal-fullscreen-image {
z-index: var(--modal-z-fullscreen);
}
.modal-fullscreen-image .modal-backdrop {
background-color: rgba(0, 0, 0, 0.95);
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.modal-fullscreen-image .modal-dialog {
max-width: 100%;
width: 100vw;
height: 100vh;
margin: 0;
}
.modal-fullscreen-image .modal-content {
background: rgba(0, 0, 0, 0.95);
border: none;
border-radius: 0;
box-shadow: none;
height: 100vh;
max-height: none;
}
.modal-fullscreen-image .modal-body {
padding: 0;
position: relative;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.modal-fullscreen-image .fullscreen-image {
max-width: 90%;
max-height: 90%;
object-fit: contain;
border-radius: var(--modal-radius-sm);
box-shadow: var(--modal-shadow-xl);
-webkit-user-select: none;
user-select: none;
}
/* 全螢幕圖片關閉按鈕 */
.modal-fullscreen-image .btn-close {
position: absolute;
top: var(--modal-spacing-lg);
right: var(--modal-spacing-lg);
z-index: calc(var(--modal-z-fullscreen) + 10);
width: 48px;
height: 48px;
background: rgba(255, 255, 255, 0.2);
color: white;
border-radius: 50%;
opacity: 1;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: all var(--modal-duration-normal) var(--modal-easing);
}
.modal-fullscreen-image .btn-close:hover {
background: rgba(255, 255, 255, 0.3);
transform: scale(1.1);
}
/* 圖片導航指示器 */
.modal-fullscreen-image .image-navigation {
position: absolute;
bottom: var(--modal-spacing-xl);
left: 50%;
transform: translateX(-50%);
display: flex;
gap: var(--modal-spacing-sm);
background: rgba(0, 0, 0, 0.7);
padding: var(--modal-spacing-md);
border-radius: var(--modal-radius-lg);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
z-index: calc(var(--modal-z-fullscreen) + 5);
}
.modal-fullscreen-image .nav-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
border: none;
cursor: pointer;
transition: all var(--modal-duration-normal) var(--modal-easing);
padding: 0;
}
.modal-fullscreen-image .nav-dot:hover,
.modal-fullscreen-image .nav-dot.active {
background: white;
transform: scale(1.2);
}
/* 圖片縮放控制 */
.modal-fullscreen-image .zoom-controls {
position: absolute;
top: var(--modal-spacing-lg);
left: var(--modal-spacing-lg);
z-index: calc(var(--modal-z-fullscreen) + 10);
display: flex;
gap: var(--modal-spacing-sm);
}
.modal-fullscreen-image .zoom-btn {
width: 44px;
height: 44px;
background: rgba(255, 255, 255, 0.2);
color: white;
border: none;
border-radius: 50%;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
cursor: pointer;
transition: all var(--modal-duration-normal) var(--modal-easing);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
}
.modal-fullscreen-image .zoom-btn:hover {
background: rgba(255, 255, 255, 0.3);
transform: scale(1.1);
}
/* ========================================
多步驟 Modal
用於物流資訊、結帳流程等
來源：UnifiedLogisticsModal.css
======================================== */
.modal-multi-step .modal-content {
overflow: hidden;
}
.modal-multi-step .step-indicator {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--modal-spacing-md) var(--modal-spacing-lg);
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
border-bottom: 1px solid var(--modal-border-default);
}
.modal-multi-step .step-item {
flex: 1 1;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--modal-spacing-xs);
position: relative;
}
.modal-multi-step .step-item:not(:last-child)::after {
content: '';
position: absolute;
top: 16px;
left: calc(50% + 24px);
width: calc(100% - 48px);
height: 2px;
background: #e0e0e0;
z-index: var(--z-base);
}
.modal-multi-step .step-item.completed:not(:last-child)::after {
background: #10b981;
}
.modal-multi-step .step-number {
width: 32px;
height: 32px;
border-radius: 50%;
background: #e0e0e0;
color: #666;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 0.875rem;
position: relative;
z-index: var(--z-low);
transition: all var(--modal-duration-normal) var(--modal-easing);
}
.modal-multi-step .step-item.active .step-number {
background: #667eea;
color: white;
transform: scale(1.2);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}
.modal-multi-step .step-item.completed .step-number {
background: #10b981;
color: white;
}
.modal-multi-step .step-label {
font-size: 0.75rem;
color: #666;
text-align: center;
}
.modal-multi-step .step-item.active .step-label {
color: #667eea;
font-weight: 600;
}
.modal-multi-step .step-item.completed .step-label {
color: #10b981;
}
/* 步驟內容區 */
.modal-multi-step .step-content {
padding: var(--modal-spacing-lg);
min-height: 300px;
}
.modal-multi-step .step-panel {
display: none;
}
.modal-multi-step .step-panel.active {
display: block;
animation: stepSlideIn var(--modal-duration-normal) var(--modal-easing);
}
@keyframes stepSlideIn {
from {
opacity: 0;
transform: translateX(20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* 步驟導航按鈕 */
.modal-multi-step .step-navigation {
display: flex;
justify-content: space-between;
padding: var(--modal-spacing-md) var(--modal-spacing-lg);
background: #f8f9fa;
border-top: 1px solid var(--modal-border-default);
}
/* ========================================
優惠券選擇 Modal
來源：CouponSelectionModal.css
======================================== */
.modal-coupon-selection .modal-dialog {
max-width: 680px;
}
.modal-coupon-selection .coupon-list {
display: flex;
flex-direction: column;
gap: var(--modal-spacing-md);
max-height: 500px;
overflow-y: auto;
padding: var(--modal-spacing-md);
}
.modal-coupon-selection .coupon-card {
display: flex;
border: 2px solid var(--modal-border-default);
border-radius: var(--modal-radius-md);
padding: var(--modal-spacing-md);
background: white;
cursor: pointer;
transition: all var(--modal-duration-normal) var(--modal-easing);
position: relative;
overflow: hidden;
}
.modal-coupon-selection .coupon-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
opacity: 0;
transition: opacity var(--modal-duration-normal) var(--modal-easing);
}
.modal-coupon-selection .coupon-card:hover {
transform: translateY(-2px);
box-shadow: var(--modal-shadow-md);
border-color: #667eea;
}
.modal-coupon-selection .coupon-card:hover::before {
opacity: 1;
}
.modal-coupon-selection .coupon-card.selected {
border-color: #667eea;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
box-shadow: var(--modal-shadow-md);
}
.modal-coupon-selection .coupon-card.selected::before {
opacity: 1;
}
.modal-coupon-selection .coupon-icon {
flex-shrink: 0;
width: 64px;
height: 64px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border-radius: var(--modal-radius-sm);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.75rem;
margin-right: var(--modal-spacing-md);
}
.modal-coupon-selection .coupon-info {
flex: 1 1;
}
.modal-coupon-selection .coupon-title {
font-weight: 700;
font-size: 1.125rem;
margin-bottom: var(--modal-spacing-xs);
color: var(--modal-text-default);
}
.modal-coupon-selection .coupon-description {
font-size: 0.875rem;
color: #666;
margin-bottom: var(--modal-spacing-xs);
}
.modal-coupon-selection .coupon-validity {
font-size: 0.75rem;
color: #999;
}
.modal-coupon-selection .coupon-discount {
flex-shrink: 0;
text-align: right;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-end;
}
.modal-coupon-selection .discount-amount {
font-size: 1.5rem;
font-weight: 700;
color: #667eea;
line-height: 1;
}
.modal-coupon-selection .discount-label {
font-size: 0.75rem;
color: #999;
margin-top: var(--modal-spacing-xs);
}
/* 無可用優惠券 */
.modal-coupon-selection .empty-state {
text-align: center;
padding: var(--modal-spacing-2xl);
}
.modal-coupon-selection .empty-state-icon {
font-size: 4rem;
color: #d1d5db;
margin-bottom: var(--modal-spacing-md);
}
.modal-coupon-selection .empty-state-text {
font-size: 1rem;
color: #666;
}
/* ========================================
確認對話框 Modal
用於刪除確認、訂單確認等
======================================== */
.modal-confirmation .modal-dialog {
max-width: var(--modal-size-sm);
}
.modal-confirmation .modal-content {
text-align: center;
}
.modal-confirmation .confirmation-icon {
width: 80px;
height: 80px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: var(--modal-spacing-lg) auto var(--modal-spacing-md);
font-size: 2.5rem;
}
.modal-confirmation.warning .confirmation-icon {
background: linear-gradient(135deg, #fff5f5 0%, #ffe0e0 100%);
color: #dc3545;
border: 3px solid #f8d7da;
}
.modal-confirmation.success .confirmation-icon {
background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
color: #10b981;
border: 3px solid #bbf7d0;
}
.modal-confirmation.info .confirmation-icon {
background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
color: #3b82f6;
border: 3px solid #bfdbfe;
}
.modal-confirmation .confirmation-title {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: var(--modal-spacing-sm);
}
.modal-confirmation .confirmation-message {
font-size: 1rem;
color: #666;
line-height: 1.6;
margin-bottom: var(--modal-spacing-lg);
}
.modal-confirmation .confirmation-actions {
display: flex;
gap: var(--modal-spacing-md);
justify-content: center;
padding: 0 var(--modal-spacing-lg) var(--modal-spacing-lg);
}
/* ========================================
載入中 Modal
顯示處理進度
======================================== */
.modal-loading .modal-dialog {
max-width: var(--modal-size-sm);
}
.modal-loading .modal-content {
text-align: center;
padding: var(--modal-spacing-xl);
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.modal-loading .loading-spinner {
width: 64px;
height: 64px;
border: 4px solid rgba(102, 126, 234, 0.2);
border-top-color: #667eea;
border-radius: 50%;
animation: naily-spin 1s linear infinite;
margin: var(--modal-spacing-lg) auto;
}
@keyframes naily-spin {
to {
transform: rotate(360deg);
}
}
.modal-loading .loading-text {
font-size: 1.125rem;
font-weight: 600;
color: var(--modal-text-default);
margin-bottom: var(--modal-spacing-sm);
}
.modal-loading .loading-subtext {
font-size: 0.875rem;
color: #666;
}
.modal-loading .loading-progress {
width: 100%;
height: 6px;
background: rgba(102, 126, 234, 0.1);
border-radius: 3px;
margin-top: var(--modal-spacing-md);
overflow: hidden;
}
.modal-loading .loading-progress-bar {
height: 100%;
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
border-radius: 3px;
transition: width var(--modal-duration-normal) var(--modal-easing);
}
/* ========================================
響應式設計
======================================== */
@media (max-width: 768px) {
/* 全螢幕圖片 */
.modal-fullscreen-image .btn-close,
.modal-fullscreen-image .zoom-btn {
width: 40px;
height: 40px;
}
.modal-fullscreen-image .zoom-controls,
.modal-fullscreen-image .btn-close {
top: var(--modal-spacing-md);
}
.modal-fullscreen-image .zoom-controls {
left: var(--modal-spacing-md);
}
.modal-fullscreen-image .btn-close {
right: var(--modal-spacing-md);
}
.modal-fullscreen-image .image-navigation {
bottom: var(--modal-spacing-md);
}
/* 多步驟 Modal */
.modal-multi-step .step-label {
display: none;
}
.modal-multi-step .step-indicator {
padding: var(--modal-spacing-sm);
}
/* 優惠券選擇 */
.modal-coupon-selection .coupon-card {
flex-direction: column;
text-align: center;
}
.modal-coupon-selection .coupon-icon {
margin: 0 auto var(--modal-spacing-sm);
}
.modal-coupon-selection .coupon-discount {
align-items: center;
margin-top: var(--modal-spacing-sm);
}
/* 確認對話框 */
.modal-confirmation .confirmation-actions {
flex-direction: column;
padding: 0 var(--modal-spacing-md) var(--modal-spacing-md);
}
.modal-confirmation .confirmation-actions .btn {
width: 100%;
}
}
@media (max-width: 576px) {
/* 多步驟 Modal - 更緊湊 */
.modal-multi-step .step-number {
width: 28px;
height: 28px;
font-size: 0.75rem;
}
.modal-multi-step .step-content {
padding: var(--modal-spacing-md);
min-height: 250px;
}
/* 優惠券選擇 */
.modal-coupon-selection .coupon-list {
padding: var(--modal-spacing-sm);
gap: var(--modal-spacing-sm);
}
.modal-coupon-selection .coupon-icon {
width: 56px;
height: 56px;
font-size: 1.5rem;
}
.modal-coupon-selection .coupon-title {
font-size: 1rem;
}
.modal-coupon-selection .discount-amount {
font-size: 1.25rem;
}
}
/**
* Modal Design Tokens System
* 設計 Token 系統 - 所有 Modal 樣式的單一真相來源
*
* 使用方式：
* 1. 所有 Modal 相關樣式應引用這些 CSS 變數
* 2. 不要在其他檔案中硬編碼這些值
* 3. 如需修改全站 Modal 樣式，只需修改此檔案
*/
:root {
/* ========================================
尺寸系統 (Size System)
基於常見 Modal 使用情境定義
======================================== */
--modal-size-xs: 300px;
--modal-size-sm: 400px;
--modal-size-md: 600px;
--modal-size-lg: 800px;
--modal-size-xl: 1140px;
--modal-size-full: 100%;
/* ========================================
圓角系統 (Border Radius)
統一為 3 種尺寸，避免過多變體
======================================== */
--modal-radius-sm: 12px;
--modal-radius-md: 16px;
--modal-radius-lg: 20px;
/* ========================================
間距系統 (Spacing)
基於 8px 網格系統
======================================== */
--modal-spacing-xs: 0.5rem; /* 8px */
--modal-spacing-sm: 1rem; /* 16px */
--modal-spacing-md: 1.5rem; /* 24px */
--modal-spacing-lg: 2rem; /* 32px */
--modal-spacing-xl: 2.5rem; /* 40px */
--modal-spacing-2xl: 3rem; /* 48px */
/* ========================================
陰影系統 (Shadow System)
3 種層級，適用不同重要性的 Modal
======================================== */
--modal-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.08);
--modal-shadow-md: 0 10px 40px rgba(0, 0, 0, 0.15);
--modal-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.2);
--modal-shadow-xl: 0 30px 80px rgba(0, 0, 0, 0.25);
/* ========================================
背景遮罩 (Backdrop)
統一遮罩效果
======================================== */
--modal-backdrop-color: rgba(0, 0, 0, 0.5);
--modal-backdrop-color-light: rgba(0, 0, 0, 0.3);
--modal-backdrop-color-dark: rgba(0, 0, 0, 0.7);
--modal-backdrop-blur: blur(4px);
--modal-backdrop-blur-strong: blur(8px);
/* ========================================
動畫系統 (Animation)
統一動畫時長和緩動函數
======================================== */
--modal-duration-fast: 150ms;
--modal-duration-normal: 250ms;
--modal-duration-slow: 350ms;
--modal-easing: cubic-bezier(0.4, 0, 0.2, 1);
--modal-easing-enter: cubic-bezier(0, 0, 0.2, 1);
--modal-easing-exit: cubic-bezier(0.4, 0, 1, 1);
/* ========================================
Z-Index 系統 (引用統一系統)
所有層級值來自 unified-z-index-system.css
======================================== */
--modal-z-backdrop: var(--z-modal-backdrop, 3000);
--modal-z-base: var(--z-modal, 3010);
--modal-z-dialog: var(--z-modal-dialog, 3020);
--modal-z-content: var(--z-modal-content, 3030);
--modal-z-header: var(--z-modal-header, 3040);
--modal-z-close: var(--z-modal-close-btn, 3050);
/* 特殊層級（在 unified-z-index-system.css 中定義） */
--modal-z-critical: var(--z-modal-critical, 3100);
--modal-z-fullscreen: var(--z-modal-fullscreen, 3200);
--modal-z-nested: var(--z-modal-nested, 3300);
/* ========================================
顏色系統 (Color System)
主題相關的顏色定義
======================================== */
/* 預設主題 */
--modal-bg-default: #ffffff;
--modal-text-default: #333333;
--modal-border-default: #e0e0e0;
/* 會員主題（粉紅色系） */
--modal-bg-member: linear-gradient(135deg, #ffeef8 0%, #fff5f9 100%);
--modal-accent-member: #ff69b4;
--modal-accent-member-hover: #ff1493;
/* 活動主題（漸層） */
--modal-bg-event: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--modal-text-event: #ffffff;
/* 危險主題（紅色警告） */
--modal-bg-danger: #fff5f5;
--modal-accent-danger: #dc3545;
--modal-border-danger: #f8d7da;
/* 毛玻璃主題 */
--modal-bg-glass: rgba(255, 255, 255, 0.9);
--modal-backdrop-glass: rgba(255, 255, 255, 0.1);
/* ========================================
關閉按鈕 (Close Button)
統一關閉按鈕樣式
======================================== */
--modal-close-size: 32px;
--modal-close-color: #666666;
--modal-close-hover-color: #333333;
--modal-close-hover-bg: rgba(0, 0, 0, 0.05);
/* ========================================
響應式斷點 (Responsive Breakpoints)
與 Bootstrap 5 保持一致
======================================== */
--modal-breakpoint-xs: 0px;
--modal-breakpoint-sm: 576px;
--modal-breakpoint-md: 768px;
--modal-breakpoint-lg: 992px;
--modal-breakpoint-xl: 1200px;
/* ========================================
無障礙 (Accessibility)
焦點管理和鍵盤操作
======================================== */
--modal-focus-outline: 2px solid #007bff;
--modal-focus-outline-offset: 2px;
}
/* ========================================
減少動畫偏好支援
尊重使用者的系統設定
======================================== */
@media (prefers-reduced-motion: reduce) {
:root {
--modal-duration-fast: 0ms;
--modal-duration-normal: 0ms;
--modal-duration-slow: 0ms;
}
}
/* ========================================
深色模式支援（預留）
未來可擴展深色主題
======================================== */
@media (prefers-color-scheme: dark) {
:root {
--modal-bg-default: #1e1e1e;
--modal-text-default: #e0e0e0;
--modal-border-default: #3a3a3a;
--modal-backdrop-color: rgba(0, 0, 0, 0.7);
}
}
/**
* Modal Animations System
* Modal 動畫系統
*
* 整合來源：
* - 所有包含 @keyframes 的 Modal 檔案
* - 標準化的入場、出場動畫
* - 互動動畫效果
*
* 設計原則：
* 1. 使用 transform 和 opacity 確保流暢效能
* 2. 支援 prefers-reduced-motion
* 3. 統一動畫時長和緩動函數
* 4. 可重複使用的動畫工具類
*/
/* ========================================
導入設計 Token
======================================== */
/* ========================================
基礎動畫 - 淡入淡出
======================================== */
/* 淡入 */
@keyframes naily-fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* 淡出 */
@keyframes naily-fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
/* 淡入 + 縮放 */
@keyframes naily-fadeInScale {
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}
/* 淡出 + 縮放 */
@keyframes naily-fadeOutScale {
from {
opacity: 1;
transform: scale(1);
}
to {
opacity: 0;
transform: scale(0.95);
}
}
/* ========================================
滑動動畫
======================================== */
/* 從上滑入 */
@keyframes naily-slideInDown {
from {
opacity: 0;
transform: translateY(-50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* 向上滑出 */
@keyframes naily-slideOutUp {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(-50px);
}
}
/* 從下滑入 */
@keyframes naily-slideInUp {
from {
opacity: 0;
transform: translateY(50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* 向下滑出 */
@keyframes naily-slideOutDown {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(50px);
}
}
/* 從左滑入 */
@keyframes naily-slideInLeft {
from {
opacity: 0;
transform: translateX(-50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* 從右滑入 */
@keyframes naily-slideInRight {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* ========================================
縮放動畫
======================================== */
/* 放大進入 */
@keyframes naily-zoomIn {
from {
opacity: 0;
transform: scale(0.3);
}
to {
opacity: 1;
transform: scale(1);
}
}
/* 縮小退出 */
@keyframes naily-zoomOut {
from {
opacity: 1;
transform: scale(1);
}
to {
opacity: 0;
transform: scale(0.3);
}
}
/* 彈跳進入 */
@keyframes naily-bounceIn {
0% {
opacity: 0;
transform: scale(0.3);
}
50% {
opacity: 1;
transform: scale(1.05);
}
70% {
transform: scale(0.9);
}
100% {
transform: scale(1);
}
}
/* 彈跳退出 */
@keyframes naily-bounceOut {
0% {
transform: scale(1);
}
25% {
transform: scale(0.95);
}
50% {
opacity: 1;
transform: scale(1.1);
}
100% {
opacity: 0;
transform: scale(0.3);
}
}
/* ========================================
旋轉動畫
======================================== */
/* 旋轉進入 */
@keyframes naily-rotateIn {
from {
opacity: 0;
transform: rotate(-200deg);
}
to {
opacity: 1;
transform: rotate(0);
}
}
/* 旋轉退出 */
@keyframes naily-rotateOut {
from {
opacity: 1;
transform: rotate(0);
}
to {
opacity: 0;
transform: rotate(200deg);
}
}
/* 翻轉進入 */
@keyframes naily-flipIn {
from {
opacity: 0;
transform: perspective(400px) rotateX(-90deg);
}
to {
opacity: 1;
transform: perspective(400px) rotateX(0);
}
}
/* ========================================
背景模糊動畫
======================================== */
@keyframes naily-backdropBlurIn {
from {
backdrop-filter: blur(0px);
-webkit-backdrop-filter: blur(0px);
}
to {
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
}
@keyframes naily-backdropBlurOut {
from {
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
to {
backdrop-filter: blur(0px);
-webkit-backdrop-filter: blur(0px);
}
}
/* ========================================
特殊效果動畫
======================================== */
/* 脈衝效果 */
@keyframes naily-pulse {
0%, 100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.05);
opacity: 0.9;
}
}
/* 搖晃效果 */
@keyframes naily-shake {
0%, 100% {
transform: translateX(0);
}
10%, 30%, 50%, 70%, 90% {
transform: translateX(-10px);
}
20%, 40%, 60%, 80% {
transform: translateX(10px);
}
}
/* 彈簧效果 */
@keyframes naily-elastic {
0% {
transform: scale(0);
}
55% {
transform: scale(1);
}
70% {
transform: scale(0.9);
}
100% {
transform: scale(1);
}
}
/* 閃爍效果 */
@keyframes naily-blink {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
/* 漸變背景動畫 */
@keyframes naily-gradientShift {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/* 浮動效果 */
@keyframes naily-float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
/* 波紋擴散效果 */
@keyframes naily-ripple {
0% {
transform: scale(0);
opacity: 1;
}
100% {
transform: scale(4);
opacity: 0;
}
}
/* 進度條動畫 */
@keyframes naily-progressStripes {
0% {
background-position: 0 0;
}
100% {
background-position: 40px 0;
}
}
/* 旋轉載入 */
@keyframes naily-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* 點點載入 */
@keyframes naily-dotPulse {
0%, 80%, 100% {
transform: scale(0.6);
opacity: 0.5;
}
40% {
transform: scale(1);
opacity: 1;
}
}
/* ========================================
動畫工具類別
可直接套用到元素上
======================================== */
/* 淡入類別 */
.animate-fadeIn {
animation: naily-fadeIn var(--modal-duration-normal) var(--modal-easing);
}
.animate-fadeOut {
animation: naily-fadeOut var(--modal-duration-normal) var(--modal-easing);
}
.animate-fadeInScale {
animation: naily-fadeInScale var(--modal-duration-normal) var(--modal-easing);
}
/* 滑動類別 */
.animate-slideInDown {
animation: naily-slideInDown var(--modal-duration-normal) var(--modal-easing);
}
.animate-slideInUp {
animation: naily-slideInUp var(--modal-duration-normal) var(--modal-easing);
}
.animate-slideInLeft {
animation: naily-slideInLeft var(--modal-duration-normal) var(--modal-easing);
}
.animate-slideInRight {
animation: naily-slideInRight var(--modal-duration-normal) var(--modal-easing);
}
/* 縮放類別 */
.animate-zoomIn {
animation: naily-zoomIn var(--modal-duration-normal) var(--modal-easing);
}
.animate-bounceIn {
animation: naily-bounceIn var(--modal-duration-slow) var(--modal-easing);
}
/* 特效類別 */
.animate-pulse {
animation: naily-pulse 2s ease-in-out infinite;
}
.animate-shake {
animation: naily-shake 0.5s ease-in-out;
}
.animate-elastic {
animation: naily-elastic var(--modal-duration-slow) var(--modal-easing);
}
.animate-spin {
animation: naily-spin 1s linear infinite;
}
/* ========================================
速度變體
======================================== */
.animate-fast {
animation-duration: var(--modal-duration-fast) !important;
}
.animate-normal {
animation-duration: var(--modal-duration-normal) !important;
}
.animate-slow {
animation-duration: var(--modal-duration-slow) !important;
}
/* ========================================
延遲類別
======================================== */
.animate-delay-100 {
animation-delay: 100ms;
}
.animate-delay-200 {
animation-delay: 200ms;
}
.animate-delay-300 {
animation-delay: 300ms;
}
.animate-delay-500 {
animation-delay: 500ms;
}
/* ========================================
Modal 專用動畫組合
======================================== */
/* 標準 Modal 入場 */
.modal-enter {
animation:
fadeIn var(--modal-duration-normal) var(--modal-easing),
slideInDown var(--modal-duration-normal) var(--modal-easing);
}
/* 標準 Modal 出場 */
.modal-exit {
animation:
fadeOut var(--modal-duration-normal) var(--modal-easing),
slideOutUp var(--modal-duration-normal) var(--modal-easing);
}
/* Backdrop 入場 */
.modal-backdrop-enter {
animation:
fadeIn var(--modal-duration-normal) var(--modal-easing),
backdropBlurIn var(--modal-duration-normal) var(--modal-easing);
}
/* Backdrop 出場 */
.modal-backdrop-exit {
animation:
fadeOut var(--modal-duration-normal) var(--modal-easing),
backdropBlurOut var(--modal-duration-normal) var(--modal-easing);
}
/* 彈出式 Modal (從中心放大) */
.modal-popup-enter {
animation: naily-bounceIn var(--modal-duration-slow) var(--modal-easing);
}
/* 側邊滑入 Modal */
.modal-slide-enter-left {
animation: naily-slideInLeft var(--modal-duration-normal) var(--modal-easing);
}
.modal-slide-enter-right {
animation: naily-slideInRight var(--modal-duration-normal) var(--modal-easing);
}
/* 全螢幕 Modal */
.modal-fullscreen-enter {
animation:
fadeIn var(--modal-duration-fast) var(--modal-easing),
zoomIn var(--modal-duration-fast) var(--modal-easing);
}
/* ========================================
互動動畫
用於按鈕、卡片等元素的懸停效果
======================================== */
/* 懸停提升 */
.hover-lift {
transition: transform var(--modal-duration-fast) var(--modal-easing);
}
.hover-lift:hover {
transform: translateY(-4px);
}
/* 懸停縮放 */
.hover-scale {
transition: transform var(--modal-duration-fast) var(--modal-easing);
}
.hover-scale:hover {
transform: scale(1.05);
}
/* 懸停發光 */
.hover-glow {
transition: box-shadow var(--modal-duration-fast) var(--modal-easing);
}
.hover-glow:hover {
box-shadow: 0 0 20px rgba(102, 126, 234, 0.5);
}
/* 懸停旋轉 */
.hover-rotate {
transition: transform var(--modal-duration-normal) var(--modal-easing);
}
.hover-rotate:hover {
transform: rotate(5deg);
}
/* ========================================
載入動畫
======================================== */
/* 旋轉載入器 */
.loading-spinner {
width: 40px;
height: 40px;
border: 4px solid rgba(0, 0, 0, 0.1);
border-left-color: #667eea;
border-left-color: var(--modal-accent-member, #667eea);
border-radius: 50%;
animation: naily-spin 1s linear infinite;
}
/* 點點載入器 */
.loading-dots {
display: flex;
gap: 8px;
}
.loading-dots span {
width: 12px;
height: 12px;
border-radius: 50%;
background: #667eea;
background: var(--modal-accent-member, #667eea);
animation: naily-dotPulse 1.4s ease-in-out infinite;
}
.loading-dots span:nth-child(2) {
animation-delay: 0.2s;
}
.loading-dots span:nth-child(3) {
animation-delay: 0.4s;
}
/* 進度條動畫 */
.progress-bar-animated {
background-size: 40px 40px;
background-image: linear-gradient(
45deg,
rgba(255, 255, 255, 0.15) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.15) 50%,
rgba(255, 255, 255, 0.15) 75%,
transparent 75%,
transparent
);
animation: naily-progressStripes 1s linear infinite;
}
/* ========================================
過渡效果
======================================== */
/* 平滑過渡 */
.transition-smooth {
transition: all var(--modal-duration-normal) var(--modal-easing);
}
.transition-fast {
transition: all var(--modal-duration-fast) var(--modal-easing);
}
.transition-slow {
transition: all var(--modal-duration-slow) var(--modal-easing);
}
/* 僅過渡特定屬性 */
.transition-opacity {
transition: opacity var(--modal-duration-normal) var(--modal-easing);
}
.transition-transform {
transition: transform var(--modal-duration-normal) var(--modal-easing);
}
.transition-colors {
transition:
background-color var(--modal-duration-normal) var(--modal-easing),
border-color var(--modal-duration-normal) var(--modal-easing),
color var(--modal-duration-normal) var(--modal-easing);
}
/* ========================================
減少動畫偏好支援
======================================== */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.animate-pulse,
.animate-spin,
.progress-bar-animated {
animation: none !important;
}
.loading-spinner {
border-left-color: transparent;
animation: none;
}
.loading-dots span {
animation: none;
opacity: 1;
transform: scale(1);
}
}
/* ========================================
效能優化
======================================== */
/* 啟用硬體加速 */
.gpu-accelerated {
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
perspective: 1000px;
will-change: transform, opacity;
}
/* 限制重繪範圍 */
.contain-paint {
contain: layout style paint;
}
/* ========================================
入場順序動畫
用於列表項目依序顯示
======================================== */
.stagger-item {
opacity: 0;
animation: naily-fadeInUp var(--modal-duration-normal) var(--modal-easing) forwards;
}
.stagger-item:nth-child(1) { animation-delay: 0.05s; }
.stagger-item:nth-child(2) { animation-delay: 0.1s; }
.stagger-item:nth-child(3) { animation-delay: 0.15s; }
.stagger-item:nth-child(4) { animation-delay: 0.2s; }
.stagger-item:nth-child(5) { animation-delay: 0.25s; }
.stagger-item:nth-child(6) { animation-delay: 0.3s; }
@keyframes naily-fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/**
* Modal System - 統一入口檔案
*
* 使用方式：
* 在 App.js 或 index.js 中導入此檔案即可使用完整的 Modal 系統
*
* import 'assets/css/modal/modal-system.css';
*
* 或者根據需求選擇性導入：
* import 'assets/css/modal/modal-design-tokens.css';
* import 'assets/css/modal/modal-base.css';
* import 'assets/css/modal/modal-themes.css';
*/
/* 1. 設計 Token - 必須最先導入 */
/* 2. 基礎樣式 - 所有 Modal 的基礎 */
/* 3. 主題系統 - 5 種主題變體 */
/* 4. 特殊用途 Modal - 全螢幕、多步驟等 */
/* 5. 動畫系統 - 統一動畫效果 */
/**
* Modal 系統已就緒！
*
* 可用的主題類名：
* - .modal-theme-default (預設主題)
* - .modal-theme-member (會員主題 - 粉紅色系)
* - .modal-theme-event (活動主題 - 漸層背景)
* - .modal-theme-danger (危險主題 - 紅色警告)
* - .modal-theme-glass (毛玻璃主題 - 半透明效果)
*
* 可用的特殊 Modal 類名：
* - .modal-fullscreen-image (全螢幕圖片查看)
* - .modal-multi-step (多步驟流程)
* - .modal-coupon-selection (優惠券選擇)
* - .modal-confirmation (確認對話框)
* - .modal-loading (載入中)
*
* 可用的動畫類名：
* - .animate-fadeIn / .animate-fadeOut
* - .animate-slideInDown / .animate-slideInUp
* - .animate-zoomIn / .animate-bounceIn
* - .animate-pulse / .animate-shake
* - .hover-lift / .hover-scale / .hover-glow
*
* 範例：
*
* ...
*
*/
/**
* Prada Design Tokens System
* 高端電商 Modal 設計系統 - 設計 Token
*
* 設計理念：奢華、極簡、優雅、專業
* 品牌精神：義大利精品、高端時尚、工藝細節
*
* @version 1.0.0
* @author Naily E-Commerce Team
*/
:root {
/* ========================================
色彩系統 - 使用 Naily 設計系統現有色彩
======================================== */
/* 主色 - 引用 Naily 品牌色 */
--prada-primary: var(--naily-primary); /* #BE1F48 深紅色 */
--prada-primary-light: var(--naily-primary-300); /* #fca5a5 淺紅色 */
--prada-primary-dark: var(--naily-primary-700); /* #8B1538 深紅色 */
/* 輔助色 */
--prada-accent: var(--naily-accent); /* #D8626E 粉紅色 */
--prada-accent-light: var(--naily-accent-light); /* #FF6B8A 亮粉紅 */
--prada-gold: var(--naily-gold); /* #f59e0b 金色 */
--prada-gold-light: var(--naily-gold-light); /* #fbbf24 淺金色 */
/* 黑白色 */
--prada-white: var(--naily-white); /* #ffffff */
--prada-black: var(--naily-black); /* #000000 */
/* 灰階系統 - 引用 Naily 灰階 */
--prada-gray-50: var(--naily-gray-50);
--prada-gray-100: var(--naily-gray-100);
--prada-gray-200: var(--naily-gray-200);
--prada-gray-300: var(--naily-gray-300);
--prada-gray-400: var(--naily-gray-400);
--prada-gray-500: var(--naily-gray-500);
--prada-gray-600: var(--naily-gray-600);
--prada-gray-700: var(--naily-gray-700);
--prada-gray-800: var(--naily-gray-800);
--prada-gray-900: var(--naily-gray-900);
/* 功能色 - 引用 Naily 語義色 */
--prada-success: var(--naily-success); /* #10b981 */
--prada-success-light: var(--naily-success-light);
--prada-warning: var(--naily-warning); /* #f59e0b */
--prada-warning-light: var(--naily-warning-light);
--prada-error: var(--naily-error); /* #ef4444 */
--prada-error-light: var(--naily-error-light);
--prada-info: var(--naily-info); /* #3b82f6 */
--prada-info-light: var(--naily-info-light);
/* ========================================
字體系統 - 引用 Naily 設計系統
======================================== */
/* 字體家族 */
--prada-font-primary: var(--naily-font-primary);
--prada-font-heading: var(--naily-font-heading);
--prada-font-mono: var(--naily-font-mono);
/* 字體大小 - 引用 Naily 系統 */
--prada-text-xs: var(--naily-text-xs); /* 12px */
--prada-text-sm: var(--naily-text-sm); /* 14px */
--prada-text-base: var(--naily-text-base); /* 16px */
--prada-text-lg: var(--naily-text-lg); /* 18px */
--prada-text-xl: var(--naily-text-xl); /* 20px */
--prada-text-2xl: var(--naily-text-2xl); /* 24px */
--prada-text-3xl: var(--naily-text-3xl); /* 30px */
--prada-text-4xl: var(--naily-text-4xl); /* 36px */
/* 字重 */
--prada-font-light: var(--naily-font-light);
--prada-font-normal: var(--naily-font-normal);
--prada-font-medium: var(--naily-font-medium);
--prada-font-semibold: var(--naily-font-semibold);
--prada-font-bold: var(--naily-font-bold);
/* 行高 */
--prada-leading-none: var(--naily-leading-none);
--prada-leading-tight: var(--naily-leading-tight);
--prada-leading-snug: var(--naily-leading-snug);
--prada-leading-normal: var(--naily-leading-normal);
--prada-leading-relaxed: var(--naily-leading-relaxed);
--prada-leading-loose: var(--naily-leading-loose);
/* ========================================
間距系統 - 引用 Naily 設計系統（4px 基準）
======================================== */
--prada-space-0: var(--naily-space-0);
--prada-space-px: var(--naily-space-px);
--prada-space-1: var(--naily-space-1); /* 4px */
--prada-space-2: var(--naily-space-2); /* 8px */
--prada-space-3: var(--naily-space-3); /* 12px */
--prada-space-4: var(--naily-space-4); /* 16px */
--prada-space-5: var(--naily-space-5); /* 20px */
--prada-space-6: var(--naily-space-6); /* 24px */
--prada-space-8: var(--naily-space-8); /* 32px */
--prada-space-10: var(--naily-space-10); /* 40px */
--prada-space-12: var(--naily-space-12); /* 48px */
--prada-space-16: var(--naily-space-16); /* 64px */
--prada-space-20: var(--naily-space-20); /* 80px */
--prada-space-24: var(--naily-space-24); /* 96px */
/* ========================================
圓角系統 - 引用 Naily 設計系統
======================================== */
--prada-radius-none: var(--naily-radius-none);
--prada-radius-sm: var(--naily-radius-sm); /* 2px */
--prada-radius-md: var(--naily-radius-md); /* 6px */
--prada-radius-lg: var(--naily-radius-lg); /* 8px */
--prada-radius-xl: var(--naily-radius-xl); /* 12px */
--prada-radius-2xl: var(--naily-radius-2xl); /* 16px */
--prada-radius-full: var(--naily-radius-full);
/* ========================================
陰影系統 - 引用 Naily 設計系統
======================================== */
/* 標準陰影 */
--prada-shadow-xs: var(--naily-shadow-xs);
--prada-shadow-sm: var(--naily-shadow-sm);
--prada-shadow-md: var(--naily-shadow-md);
--prada-shadow-lg: var(--naily-shadow-lg);
--prada-shadow-xl: var(--naily-shadow-xl);
--prada-shadow-2xl: var(--naily-shadow-2xl);
/* 特殊陰影 - 使用 Naily 的著色陰影 */
--prada-shadow-primary: var(--naily-shadow-primary); /* 主色陰影 */
--prada-shadow-accent: var(--naily-shadow-accent); /* 輔助色陰影 */
--prada-shadow-gold: var(--naily-shadow-warning); /* 金色陰影 (使用 warning) */
--prada-shadow-inner: var(--naily-shadow-inner);
/* ========================================
邊框系統 - 引用 Naily 設計系統
======================================== */
--prada-border-width-thin: var(--naily-border);
--prada-border-width-medium: var(--naily-border-2);
--prada-border-width-thick: var(--naily-border-4);
--prada-border-light: var(--naily-border) solid var(--naily-border-primary);
--prada-border-normal: var(--naily-border) solid var(--naily-border-secondary);
--prada-border-accent: var(--naily-border) solid var(--naily-border-accent);
--prada-border-gold: var(--naily-border) solid var(--prada-gold);
/* ========================================
動畫系統 - 引用 Naily 設計系統
======================================== */
/* 時長 */
--prada-duration-instant: var(--naily-duration-100);
--prada-duration-fast: var(--naily-duration-150);
--prada-duration-normal: var(--naily-duration-300);
--prada-duration-slow: var(--naily-duration-500);
--prada-duration-slower: var(--naily-duration-700);
/* 緩動函數 */
--prada-ease-linear: var(--naily-ease-linear);
--prada-ease-in: var(--naily-ease-in);
--prada-ease-out: var(--naily-ease-out);
--prada-ease-in-out: var(--naily-ease-in-out);
--prada-ease-luxury: var(--naily-ease-spring);
/* ========================================
Modal 專用 Token
======================================== */
/* 尺寸 */
--prada-modal-xs: 360px;
--prada-modal-sm: 440px;
--prada-modal-md: 520px;
--prada-modal-lg: 680px;
--prada-modal-xl: 920px;
--prada-modal-2xl: 1200px;
/* 間距 */
--prada-modal-padding-sm: var(--prada-space-6); /* 24px */
--prada-modal-padding-md: var(--prada-space-8); /* 32px */
--prada-modal-padding-lg: var(--prada-space-12); /* 48px */
--prada-modal-padding-xl: var(--prada-space-16); /* 64px */
/* Z-Index - 引用統一 Z-Index 系統 */
--prada-modal-z-backdrop: var(--z-modal-backdrop);
--prada-modal-z-base: var(--z-modal);
--prada-modal-z-dialog: var(--z-modal-dialog);
--prada-modal-z-content: var(--z-modal-content);
--prada-modal-z-header: var(--z-modal-header);
--prada-modal-z-close: var(--z-modal-close-btn);
/* ========================================
響應式斷點 - 引用 Naily 設計系統
======================================== */
--prada-breakpoint-xs: var(--naily-screen-xs);
--prada-breakpoint-sm: var(--naily-screen-sm);
--prada-breakpoint-md: var(--naily-screen-md);
--prada-breakpoint-lg: var(--naily-screen-lg);
--prada-breakpoint-xl: var(--naily-screen-xl);
--prada-breakpoint-2xl: var(--naily-screen-2xl);
/* ========================================
不透明度
======================================== */
--prada-opacity-0: 0;
--prada-opacity-5: 0.05;
--prada-opacity-10: 0.1;
--prada-opacity-20: 0.2;
--prada-opacity-30: 0.3;
--prada-opacity-40: 0.4;
--prada-opacity-50: 0.5;
--prada-opacity-60: 0.6;
--prada-opacity-70: 0.7;
--prada-opacity-80: 0.8;
--prada-opacity-90: 0.9;
--prada-opacity-100: 1;
/* ========================================
模糊效果
======================================== */
--prada-blur-sm: 4px;
--prada-blur-md: 8px;
--prada-blur-lg: 16px;
--prada-blur-xl: 24px;
}
/* ========================================
深色模式支援
注意：深色模式由 Naily 設計系統統一管理
======================================== */
/* ========================================
減少動畫偏好支援
注意：動畫偏好由 Naily 設計系統統一管理
======================================== */
/**
* Prada Modal Base Styles
* 基礎 Modal 樣式系統
*
* 設計原則：
* - 使用 Naily 品牌色系（深紅色主題）
* - 極簡優雅的設計語言
* - 完美的響應式體驗
* - 無障礙支援
*
* @version 1.0.0
*/
/* ========================================
Modal Backdrop - 背景遮罩
======================================== */
.prada-modal-backdrop {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
z-index: var(--prada-modal-z-backdrop);
opacity: 0;
pointer-events: none; /* 關鍵修復：opacity 為 0 時不阻擋點擊 */
transition: opacity var(--prada-duration-normal) var(--prada-ease-out);
}
.prada-modal-backdrop.show {
opacity: 1;
pointer-events: auto; /* show 時才可以點擊 */
}
/* ========================================
Modal Container - Modal 容器
======================================== */
.prada-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: var(--prada-modal-z-base);
overflow: hidden;
outline: 0;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity var(--prada-duration-normal) var(--prada-ease-out);
}
.prada-modal.show {
opacity: 1;
pointer-events: auto;
}
/* ========================================
Modal Dialog - 對話框
======================================== */
.prada-modal-dialog {
position: relative;
width: auto;
max-width: var(--prada-modal-md);
min-width: 400px; /* 預設最小寬度 */
margin: var(--prada-space-4);
z-index: var(--prada-modal-z-dialog);
transform: scale(0.9) translateY(-20px);
transition: transform var(--prada-duration-normal) var(--prada-ease-out);
}
.prada-modal.show .prada-modal-dialog {
transform: scale(1) translateY(0);
}
/* 尺寸變體 */
.prada-modal-dialog-xs {
max-width: var(--prada-modal-xs);
min-width: 280px; /* 超小型 modal 最小寬度 */
}
.prada-modal-dialog-sm {
max-width: var(--prada-modal-sm);
min-width: 360px; /* 小型 modal 最小寬度 */
}
.prada-modal-dialog-md {
max-width: var(--prada-modal-md);
min-width: 400px; /* 中型 modal 最小寬度 */
}
.prada-modal-dialog-lg {
max-width: var(--prada-modal-lg);
min-width: 500px; /* 大型 modal 最小寬度 */
}
.prada-modal-dialog-xl {
max-width: var(--prada-modal-xl);
min-width: 700px; /* 特大型 modal 最小寬度 */
}
.prada-modal-dialog-2xl {
max-width: var(--prada-modal-2xl);
min-width: 900px; /* 超大型 modal 最小寬度 */
}
/* 置中對齊 */
.prada-modal-dialog-centered {
display: flex;
align-items: center;
min-height: calc(100% - (var(--prada-space-4) * 2));
}
/* ========================================
Modal Content - 內容區域
======================================== */
.prada-modal-content {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
background-color: var(--prada-white);
background-clip: padding-box;
border: none;
border-radius: var(--prada-radius-lg);
box-shadow: var(--prada-shadow-2xl);
outline: 0;
z-index: var(--prada-modal-z-content);
overflow: hidden;
}
/* ========================================
Modal Header - 標題列
======================================== */
.prada-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--prada-modal-padding-md);
border-bottom: var(--prada-border-light);
z-index: var(--prada-modal-z-header);
position: relative;
}
/* 無邊框變體 */
.prada-modal-header-borderless {
border-bottom: none;
}
/* ========================================
Modal Title - 標題
======================================== */
.prada-modal-title {
margin: 0;
font-size: var(--prada-text-xl);
font-weight: var(--prada-font-semibold);
line-height: var(--prada-leading-tight);
color: var(--naily-text-primary);
font-family: var(--prada-font-heading);
}
/* ========================================
Modal Close Button - 關閉按鈕
======================================== */
.prada-modal-close {
position: absolute !important;
top: var(--prada-space-4) !important;
right: var(--prada-space-4) !important;
left: auto !important;
left: initial !important; /* 明確取消 left 定位，防止 CSS 污染 */
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
margin: 0;
background: transparent;
border: none;
border-radius: var(--prada-radius-md);
cursor: pointer;
transition: all var(--prada-duration-fast) var(--prada-ease-out);
z-index: var(--prada-modal-z-close);
color: var(--naily-text-secondary);
}
.prada-modal-close:hover {
background-color: var(--naily-gray-100);
color: var(--naily-text-primary);
}
.prada-modal-close:active {
background-color: var(--naily-gray-200);
}
.prada-modal-close:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(190, 31, 72, 0.1);
}
/* 關閉按鈕圖示 */
.prada-modal-close::before,
.prada-modal-close::after {
content: '';
position: absolute;
width: 16px;
height: 2px;
background-color: currentColor;
border-radius: 1px;
}
.prada-modal-close::before {
transform: rotate(45deg);
}
.prada-modal-close::after {
transform: rotate(-45deg);
}
/* ========================================
Modal Body - 內容主體
======================================== */
.prada-modal-body {
position: relative;
flex: 1 1 auto;
padding: var(--prada-modal-padding-md);
overflow-y: auto;
max-height: calc(100vh - 200px);
}
/* 滾動優化 */
.prada-modal-body::-webkit-scrollbar {
width: 8px;
}
.prada-modal-body::-webkit-scrollbar-track {
background: var(--naily-gray-100);
border-radius: var(--prada-radius-sm);
}
.prada-modal-body::-webkit-scrollbar-thumb {
background: var(--naily-gray-400);
border-radius: var(--prada-radius-sm);
}
.prada-modal-body::-webkit-scrollbar-thumb:hover {
background: var(--naily-gray-500);
}
/* ========================================
Modal Footer - 底部操作區
======================================== */
.prada-modal-footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--prada-space-3);
padding: var(--prada-modal-padding-md);
border-top: var(--prada-border-light);
}
/* 無邊框變體 */
.prada-modal-footer-borderless {
border-top: none;
}
/* 置中對齊 */
.prada-modal-footer-centered {
justify-content: center;
}
/* 間距平均分配 */
.prada-modal-footer-between {
justify-content: space-between;
}
/* ========================================
Modal Buttons - 按鈕樣式
======================================== */
.prada-modal-btn {
padding: var(--prada-space-2) var(--prada-space-6);
font-size: var(--prada-text-base);
font-weight: var(--prada-font-medium);
line-height: var(--prada-leading-normal);
border: none;
border-radius: var(--prada-radius-md);
cursor: pointer;
transition: all var(--prada-duration-fast) var(--prada-ease-out);
outline: none;
}
/* 主要按鈕 */
.prada-modal-btn-primary {
background-color: var(--prada-primary);
color: var(--prada-white);
}
.prada-modal-btn-primary:hover {
background-color: var(--prada-primary-dark);
box-shadow: var(--prada-shadow-primary);
}
.prada-modal-btn-primary:active {
background-color: var(--naily-primary-800);
}
/* 次要按鈕 */
.prada-modal-btn-secondary {
background-color: var(--naily-gray-100);
color: var(--naily-text-primary);
}
.prada-modal-btn-secondary:hover {
background-color: var(--naily-gray-200);
}
.prada-modal-btn-secondary:active {
background-color: var(--naily-gray-300);
}
/* 金色強調按鈕 */
.prada-modal-btn-gold {
background-color: var(--prada-gold);
color: var(--prada-white);
}
.prada-modal-btn-gold:hover {
background-color: var(--naily-warning-dark);
box-shadow: var(--prada-shadow-gold);
}
/* 危險操作按鈕 */
.prada-modal-btn-danger {
background-color: var(--prada-error);
color: var(--prada-white);
}
.prada-modal-btn-danger:hover {
background-color: var(--prada-error-light);
box-shadow: var(--naily-shadow-error);
}
/* 按鈕焦點狀態 */
.prada-modal-btn:focus {
box-shadow: 0 0 0 3px rgba(190, 31, 72, 0.1);
}
/* ========================================
響應式設計
======================================== */
/* 平板 */
@media (max-width: 768px) {
.prada-modal-dialog {
margin: var(--prada-space-3);
max-width: calc(100% - var(--prada-space-6));
min-width: 320px; /* 平板最小寬度 */
}
/* 尺寸變體在平板上的最小寬度調整 */
.prada-modal-dialog-xs {
min-width: 280px;
}
.prada-modal-dialog-sm {
min-width: 320px;
}
.prada-modal-dialog-md {
min-width: 360px;
}
.prada-modal-dialog-lg {
min-width: 400px;
}
.prada-modal-dialog-xl {
min-width: 450px;
}
.prada-modal-dialog-2xl {
min-width: 500px;
}
.prada-modal-header,
.prada-modal-body,
.prada-modal-footer {
padding: var(--prada-modal-padding-sm);
}
.prada-modal-title {
font-size: var(--prada-text-lg);
}
.prada-modal-body {
max-height: calc(100vh - 160px);
}
}
/* 手機 */
@media (max-width: 480px) {
.prada-modal-dialog {
margin: var(--prada-space-2);
max-width: calc(100% - var(--prada-space-4));
min-width: 280px; /* 手機最小寬度 */
}
/* 所有尺寸變體在手機上統一最小寬度 */
.prada-modal-dialog-xs,
.prada-modal-dialog-sm,
.prada-modal-dialog-md,
.prada-modal-dialog-lg,
.prada-modal-dialog-xl,
.prada-modal-dialog-2xl {
min-width: 280px;
}
.prada-modal-footer {
flex-direction: column-reverse;
align-items: stretch;
}
.prada-modal-btn {
width: 100%;
}
.prada-modal-body {
max-height: calc(100vh - 140px);
}
}
/* ========================================
無障礙支援
======================================== */
/* 鍵盤導航焦點指示 */
.prada-modal *:focus-visible {
outline: 2px solid var(--prada-primary);
outline-offset: 2px;
}
/* 減少動畫偏好支援 - 由 Naily 系統統一處理 */
@media (prefers-reduced-motion: reduce) {
.prada-modal,
.prada-modal-backdrop,
.prada-modal-dialog,
.prada-modal-btn {
transition: none;
}
}
/* 高對比度模式支援 */
@media (prefers-contrast: high) {
.prada-modal-content {
border: 2px solid var(--naily-gray-900);
}
.prada-modal-header,
.prada-modal-footer {
border-width: 2px;
}
}
/* ========================================
滾動鎖定輔助類
======================================== */
/* 當 Modal 開啟時，body 會被加上此類 */
body.prada-modal-open {
overflow: hidden;
position: fixed;
width: 100%;
}
/* ========================================
動畫效果
======================================== */
/* ========================================
載入狀態（通用）
======================================== */
.prada-modal .loading-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.9);
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
border-radius: inherit;
}
.prada-modal .loading-spinner {
width: 40px;
height: 40px;
border: 3px solid #e5e7eb;
border: 3px solid var(--naily-gray-200, #e5e7eb);
border-top-color: #BE1F48;
border-top-color: var(--prada-primary, #BE1F48);
border-radius: 50%;
animation: prada-spin 0.8s linear infinite;
}
@keyframes prada-spin {
to { transform: rotate(360deg); }
}
@keyframes prada-modal-fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes prada-modal-slide-up {
from {
transform: scale(0.9) translateY(20px);
opacity: 0;
}
to {
transform: scale(1) translateY(0);
opacity: 1;
}
}
/* 進場動畫 */
.prada-modal-animate-in .prada-modal-backdrop {
animation: prada-modal-fade-in var(--prada-duration-normal) var(--prada-ease-out);
}
.prada-modal-animate-in .prada-modal-dialog {
animation: prada-modal-slide-up var(--prada-duration-normal) var(--prada-ease-out);
}
/**
* Prada Modal - Address Manager (地址管理器)
* 用於管理收件地址（新增、編輯、選擇）
*
* 設計特點：
* - 卡片式地址列表
* - 預設地址標記
* - 快速編輯功能
* - 地址驗證
*
* @version 1.0.0
*/
/* ========================================
地址管理器 Modal - 尺寸與佈局
======================================== */
.prada-modal-address .prada-modal-dialog {
max-width: var(--prada-modal-lg); /* 680px */
}
/* ========================================
Header 設計
======================================== */
.prada-modal-address .prada-modal-header {
padding: var(--prada-space-6) var(--prada-modal-padding-md);
border-bottom: var(--prada-border-light);
display: flex;
align-items: center;
justify-content: space-between;
}
.prada-modal-address .prada-modal-title {
font-size: var(--prada-text-xl);
font-weight: var(--prada-font-bold);
color: var(--naily-text-primary);
}
.prada-modal-address .btn-add-address {
padding: var(--prada-space-2) var(--prada-space-4);
font-size: var(--prada-text-sm);
font-weight: var(--prada-font-medium);
color: var(--prada-white);
background-color: var(--prada-primary);
border: none;
border-radius: var(--prada-radius-md);
cursor: pointer;
transition: all var(--prada-duration-fast) var(--prada-ease-out);
display: flex;
align-items: center;
gap: var(--prada-space-2);
}
.prada-modal-address .btn-add-address:hover {
background-color: var(--prada-primary-dark);
box-shadow: var(--prada-shadow-primary);
}
/* ========================================
Body - 地址列表或表單
======================================== */
.prada-modal-address .prada-modal-body {
padding: var(--prada-space-5) var(--prada-modal-padding-md);
max-height: 500px;
overflow-y: auto;
}
/* 地址列表視圖 */
.prada-modal-address .address-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: var(--prada-space-4);
gap: var(--prada-space-4);
}
/* 地址卡片 */
.prada-modal-address .address-card {
position: relative;
padding: var(--prada-space-5);
background-color: var(--prada-white);
border: var(--prada-border-normal);
border-radius: var(--prada-radius-lg);
cursor: pointer;
transition: all var(--prada-duration-fast) var(--prada-ease-out);
}
.prada-modal-address .address-card:hover {
border-color: var(--prada-primary);
box-shadow: var(--prada-shadow-sm);
}
.prada-modal-address .address-card.selected {
border-color: var(--prada-primary);
background-color: rgba(190, 31, 72, 0.02);
box-shadow: 0 0 0 3px rgba(190, 31, 72, 0.1);
}
/* 預設標籤 */
.prada-modal-address .address-default-badge {
position: absolute;
top: var(--prada-space-3);
right: var(--prada-space-3);
padding: var(--prada-space-1) var(--prada-space-2);
font-size: var(--prada-text-xs);
font-weight: var(--prada-font-semibold);
color: var(--prada-white);
background-color: var(--prada-gold);
border-radius: var(--prada-radius-sm);
}
/* 地址資訊 */
.prada-modal-address .address-header {
display: flex;
align-items: center;
gap: var(--prada-space-2);
margin-bottom: var(--prada-space-3);
}
.prada-modal-address .address-type-icon {
width: 20px;
height: 20px;
color: var(--prada-primary);
}
.prada-modal-address .address-name {
font-size: var(--prada-text-base);
font-weight: var(--prada-font-semibold);
color: var(--naily-text-primary);
}
.prada-modal-address .address-phone {
font-size: var(--prada-text-sm);
color: var(--naily-text-secondary);
margin-bottom: var(--prada-space-2);
}
.prada-modal-address .address-details {
font-size: var(--prada-text-sm);
color: var(--naily-text-secondary);
line-height: var(--prada-leading-relaxed);
margin-bottom: var(--prada-space-4);
}
/* 地址操作按鈕 */
.prada-modal-address .address-actions {
display: flex;
gap: var(--prada-space-2);
}
.prada-modal-address .address-action-btn {
flex: 1 1;
padding: var(--prada-space-2) var(--prada-space-3);
font-size: var(--prada-text-xs);
font-weight: var(--prada-font-medium);
background-color: var(--naily-bg-secondary);
color: var(--naily-text-primary);
border: none;
border-radius: var(--prada-radius-sm);
cursor: pointer;
transition: all var(--prada-duration-fast) var(--prada-ease-out);
}
.prada-modal-address .address-action-btn:hover {
background-color: var(--naily-bg-active);
}
.prada-modal-address .address-action-btn.danger {
color: var(--prada-error);
}
.prada-modal-address .address-action-btn.danger:hover {
background-color: rgba(239, 68, 68, 0.1);
}
/* 空狀態 */
.prada-modal-address .address-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--prada-space-16);
text-align: center;
}
.prada-modal-address .empty-icon {
width: 80px;
height: 80px;
color: var(--naily-gray-300);
margin-bottom: var(--prada-space-4);
}
.prada-modal-address .empty-text {
font-size: var(--prada-text-sm);
color: var(--naily-text-secondary);
margin-bottom: var(--prada-space-4);
}
/* 地址表單視圖 */
.prada-modal-address .address-form {
display: none;
}
.prada-modal-address .address-form.active {
display: block;
}
.prada-modal-address .form-row {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: var(--prada-space-3);
gap: var(--prada-space-3);
margin-bottom: var(--prada-space-4);
}
.prada-modal-address .form-group {
margin-bottom: var(--prada-space-4);
}
.prada-modal-address .form-group.full-width {
grid-column: 1 / -1;
}
.prada-modal-address .form-label {
display: block;
font-size: var(--prada-text-sm);
font-weight: var(--prada-font-medium);
color: var(--naily-text-primary);
margin-bottom: var(--prada-space-2);
}
.prada-modal-address .form-label.required::after {
content: '*';
color: var(--prada-error);
margin-left: var(--prada-space-1);
}
.prada-modal-address .form-input,
.prada-modal-address .form-select,
.prada-modal-address .form-textarea {
width: 100%;
padding: var(--prada-space-3) var(--prada-space-4);
font-size: var(--prada-text-sm);
color: var(--naily-text-primary);
background-color: var(--prada-white);
border: var(--prada-border-normal);
border-radius: var(--prada-radius-md);
outline: none;
transition: all var(--prada-duration-fast) var(--prada-ease-out);
}
.prada-modal-address .form-input:focus,
.prada-modal-address .form-select:focus,
.prada-modal-address .form-textarea:focus {
border-color: var(--prada-primary);
box-shadow: 0 0 0 3px rgba(190, 31, 72, 0.1);
}
.prada-modal-address .form-input.is-invalid,
.prada-modal-address .form-select.is-invalid {
border-color: var(--prada-error);
}
.prada-modal-address .form-error {
font-size: var(--prada-text-xs);
color: var(--prada-error);
margin-top: var(--prada-space-1);
}
.prada-modal-address .form-hint {
font-size: var(--prada-text-xs);
color: var(--naily-text-tertiary);
margin-top: var(--prada-space-1);
}
/* 地址類型選擇 */
.prada-modal-address .address-type-group {
display: flex;
gap: var(--prada-space-3);
margin-bottom: var(--prada-space-4);
}
.prada-modal-address .address-type-option {
flex: 1 1;
padding: var(--prada-space-3);
display: flex;
align-items: center;
justify-content: center;
gap: var(--prada-space-2);
background-color: var(--prada-white);
border: var(--prada-border-normal);
border-radius: var(--prada-radius-md);
cursor: pointer;
transition: all var(--prada-duration-fast) var(--prada-ease-out);
}
.prada-modal-address .address-type-option:hover {
border-color: var(--prada-primary);
background-color: rgba(190, 31, 72, 0.02);
}
.prada-modal-address .address-type-option.selected {
border-color: var(--prada-primary);
background-color: rgba(190, 31, 72, 0.05);
}
.prada-modal-address .address-type-icon {
width: 20px;
height: 20px;
}
.prada-modal-address .address-type-label {
font-size: var(--prada-text-sm);
font-weight: var(--prada-font-medium);
color: var(--naily-text-primary);
}
/* 設為預設 Checkbox */
.prada-modal-address .set-default-checkbox {
display: flex;
align-items: center;
gap: var(--prada-space-2);
margin-top: var(--prada-space-4);
padding: var(--prada-space-3);
background-color: var(--naily-bg-secondary);
border-radius: var(--prada-radius-md);
}
.prada-modal-address .set-default-checkbox input[type="checkbox"] {
width: 18px;
height: 18px;
cursor: pointer;
accent-color: var(--prada-primary);
}
.prada-modal-address .set-default-checkbox label {
font-size: var(--prada-text-sm);
color: var(--naily-text-primary);
cursor: pointer;
}
/* ========================================
Footer - 操作按鈕
======================================== */
.prada-modal-address .prada-modal-footer {
padding: var(--prada-space-5) var(--prada-modal-padding-md) var(--prada-space-6);
border-top: var(--prada-border-light);
display: flex;
justify-content: space-between;
}
/* 列表視圖 Footer */
.prada-modal-address .footer-list-view {
width: 100%;
display: flex;
justify-content: flex-end;
}
.prada-modal-address .btn-confirm-address {
padding: var(--prada-space-3) var(--prada-space-8);
font-size: var(--prada-text-base);
font-weight: var(--prada-font-semibold);
color: var(--prada-white);
background-color: var(--prada-primary);
border: none;
border-radius: var(--prada-radius-md);
cursor: pointer;
transition: all var(--prada-duration-fast) var(--prada-ease-out);
}
.prada-modal-address .btn-confirm-address:hover {
background-color: var(--prada-primary-dark);
box-shadow: var(--prada-shadow-primary);
}
.prada-modal-address .btn-confirm-address:disabled {
background-color: var(--naily-gray-300);
cursor: not-allowed;
box-shadow: none;
}
/* 表單視圖 Footer */
.prada-modal-address .footer-form-view {
width: 100%;
display: flex;
gap: var(--prada-space-3);
}
.prada-modal-address .btn-cancel-form {
padding: var(--prada-space-3) var(--prada-space-5);
font-size: var(--prada-text-sm);
font-weight: var(--prada-font-medium);
color: var(--naily-text-secondary);
background-color: var(--prada-white);
border: var(--prada-border-normal);
border-radius: var(--prada-radius-md);
cursor: pointer;
transition: all var(--prada-duration-fast) var(--prada-ease-out);
}
.prada-modal-address .btn-cancel-form:hover {
background-color: var(--naily-bg-hover);
}
.prada-modal-address .btn-save-address {
flex: 1 1;
padding: var(--prada-space-3) var(--prada-space-6);
font-size: var(--prada-text-base);
font-weight: var(--prada-font-semibold);
color: var(--prada-white);
background-color: var(--prada-primary);
border: none;
border-radius: var(--prada-radius-md);
cursor: pointer;
transition: all var(--prada-duration-fast) var(--prada-ease-out);
}
.prada-modal-address .btn-save-address:hover {
background-color: var(--prada-primary-dark);
box-shadow: var(--prada-shadow-primary);
}
.prada-modal-address .btn-save-address:disabled {
background-color: var(--naily-gray-300);
cursor: not-allowed;
box-shadow: none;
}
/* ========================================
響應式設計
======================================== */
@media (max-width: 768px) {
.prada-modal-address .address-list {
grid-template-columns: 1fr;
}
.prada-modal-address .form-row {
grid-template-columns: 1fr;
}
.prada-modal-address .address-type-group {
flex-direction: column;
}
}
@media (max-width: 480px) {
.prada-modal-address .prada-modal-header,
.prada-modal-address .prada-modal-body,
.prada-modal-address .prada-modal-footer {
padding-left: var(--prada-space-4);
padding-right: var(--prada-space-4);
}
.prada-modal-address .btn-add-address {
padding: var(--prada-space-2) var(--prada-space-3);
font-size: var(--prada-text-xs);
}
.prada-modal-address .footer-list-view,
.prada-modal-address .footer-form-view {
flex-direction: column;
}
.prada-modal-address .btn-confirm-address,
.prada-modal-address .btn-save-address,
.prada-modal-address .btn-cancel-form {
width: 100%;
}
}
/**
* Prada Modal - Authentication (會員認證)
* 用於登入、註冊、忘記密碼等會員認證場景
*
* 設計特點：
* - 簡潔優雅的表單設計
* - 社交登入按鈕組
* - 品牌色強調（Naily 深紅色）
* - 完整的表單驗證視覺回饋
*
* @version 1.0.0
*/
/* ========================================
會員認證 Modal - 尺寸與佈局
======================================== */
.prada-modal-auth .prada-modal-dialog {
width: 100%;
max-width: var(--prada-modal-sm); /* 440px - 預設值 */
}
/* 桌面版：高度由內容決定，JS 控制伸縮動畫期間的 overflow */
.prada-modal-auth .prada-modal-content {
overflow: hidden;
}
/* 桌面版 - 使用百分比寬度 */
@media (min-width: 769px) {
.prada-modal-auth .prada-modal-dialog {
width: 40%;
max-width: 560px; /* 限制最大寬度 */
min-width: 440px; /* 確保最小可用寬度 */
}
}
/* 大螢幕桌面 (>1200px) - 稍微放大 */
@media (min-width: 1200px) {
.prada-modal-auth .prada-modal-dialog {
width: 38%;
max-width: 600px;
}
}
/* 超大螢幕 (>1600px) - 維持固定最大寬度 */
@media (min-width: 1600px) {
.prada-modal-auth .prada-modal-dialog {
width: 35%;
max-width: 640px;
}
}
/* ========================================
Header 設計
======================================== */
.prada-modal-auth .prada-modal-header {
text-align: center;
padding: var(--prada-space-6) var(--prada-modal-padding-md) var(--prada-space-4);
border-bottom: none;
}
/* Tab 切換按鈕 */
.prada-modal-auth .auth-tabs {
display: flex;
justify-content: center;
gap: var(--prada-space-2);
margin: 0 auto;
}
.prada-modal-auth .auth-tab {
padding: var(--prada-space-3) var(--prada-space-6);
font-size: var(--prada-text-base);
font-weight: var(--prada-font-medium);
color: var(--naily-text-secondary);
background: transparent;
border: none;
border-bottom: 2px solid transparent;
cursor: pointer;
transition: all var(--prada-duration-fast) var(--prada-ease-out);
outline: none;
}
.prada-modal-auth .auth-tab:hover {
color: var(--prada-primary);
}
.prada-modal-auth .auth-tab.active {
color: var(--prada-primary);
font-weight: var(--prada-font-semibold);
border-bottom-color: var(--prada-primary);
}
.prada-modal-auth .prada-modal-title {
font-size: var(--prada-text-2xl);
font-weight: var(--prada-font-bold);
color: var(--prada-primary);
margin-bottom: var(--prada-space-2);
}
.prada-modal-auth .prada-modal-subtitle {
font-size: var(--prada-text-sm);
color: var(--naily-text-secondary);
font-weight: var(--prada-font-normal);
}
/* ========================================
Body - 表單區域
======================================== */
.prada-modal-auth .prada-modal-body {
padding: var(--prada-space-6) var(--prada-modal-padding-md);
}
/* 表單群組 */
.prada-modal-auth .form-group {
margin-bottom: var(--prada-space-5);
}
.prada-modal-auth .form-label {
display: block;
font-size: var(--prada-text-sm);
font-weight: var(--prada-font-medium);
color: var(--naily-text-primary);
margin-bottom: var(--prada-space-2);
}
/* 表單輸入框 */
.prada-modal-auth .form-input {
width: 100%;
padding: var(--prada-space-3) var(--prada-space-4);
font-size: var(--prada-text-base);
line-height: var(--prada-leading-normal);
color: var(--naily-text-primary);
background-color: var(--prada-white);
border: var(--prada-border-light);
border-radius: var(--prada-radius-md);
transition: all var(--prada-duration-fast) var(--prada-ease-out);
outline: none;
}
.prada-modal-auth .form-input::placeholder {
color: var(--naily-text-muted);
}
.prada-modal-auth .form-input:focus {
border-color: var(--prada-primary);
box-shadow: 0 0 0 3px rgba(190, 31, 72, 0.1);
}
.prada-modal-auth .form-input:disabled {
background-color: var(--naily-bg-disabled);
cursor: not-allowed;
}
/* 表單驗證狀態 */
.prada-modal-auth .form-input.is-invalid {
border-color: var(--prada-error);
}
.prada-modal-auth .form-input.is-invalid:focus {
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}
.prada-modal-auth .form-input.is-valid {
border-color: var(--prada-success);
}
.prada-modal-auth .invalid-feedback,
.prada-modal-auth .valid-feedback {
display: block;
font-size: var(--prada-text-xs);
margin-top: var(--prada-space-1);
}
.prada-modal-auth .invalid-feedback {
color: var(--prada-error);
}
.prada-modal-auth .valid-feedback {
color: var(--prada-success);
}
/* 密碼輸入框（帶顯示/隱藏按鈕）*/
.prada-modal-auth .password-wrapper {
position: relative;
}
.prada-modal-auth .password-toggle {
position: absolute;
right: var(--prada-space-3);
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: var(--naily-text-secondary);
cursor: pointer;
padding: var(--prada-space-2);
transition: color var(--prada-duration-fast) var(--prada-ease-out);
}
.prada-modal-auth .password-toggle:hover {
color: var(--naily-text-primary);
}
/* 記住我 & 忘記密碼 */
.prada-modal-auth .form-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--prada-space-5);
}
.prada-modal-auth .form-checkbox {
display: flex;
align-items: center;
gap: var(--prada-space-2);
}
.prada-modal-auth .form-checkbox input[type="checkbox"] {
width: 16px;
height: 16px;
cursor: pointer;
accent-color: var(--prada-primary);
}
.prada-modal-auth .form-checkbox label {
font-size: var(--prada-text-sm);
color: var(--naily-text-secondary);
cursor: pointer;
margin: 0;
}
.prada-modal-auth .form-link {
font-size: var(--prada-text-sm);
color: var(--prada-primary);
text-decoration: none;
font-weight: var(--prada-font-medium);
transition: color var(--prada-duration-fast) var(--prada-ease-out);
}
.prada-modal-auth .form-link:hover {
color: var(--prada-primary-dark);
text-decoration: underline;
}
/* 提交按鈕 */
.prada-modal-auth .btn-submit {
width: 100%;
padding: var(--prada-space-3) var(--prada-space-6);
font-size: var(--prada-text-base);
font-weight: var(--prada-font-semibold);
color: var(--prada-white);
background-color: var(--prada-primary);
border: none;
border-radius: var(--prada-radius-md);
cursor: pointer;
transition: all var(--prada-duration-fast) var(--prada-ease-out);
margin-bottom: var(--prada-space-5);
}
.prada-modal-auth .btn-submit:hover {
background-color: var(--prada-primary-dark);
box-shadow: var(--prada-shadow-primary);
}
.prada-modal-auth .btn-submit:active {
background-color: var(--naily-primary-800);
}
.prada-modal-auth .btn-submit:disabled {
background-color: var(--naily-gray-300);
cursor: not-allowed;
box-shadow: none;
}
/* ========================================
分隔線（「或」）
======================================== */
.prada-modal-auth .divider {
display: flex;
align-items: center;
text-align: center;
margin: var(--prada-space-6) 0;
}
.prada-modal-auth .divider::before,
.prada-modal-auth .divider::after {
content: '';
flex: 1 1;
border-bottom: 1px solid var(--naily-gray-200);
}
.prada-modal-auth .divider-text {
padding: 0 var(--prada-space-4);
font-size: var(--prada-text-sm);
color: var(--naily-text-tertiary);
font-weight: var(--prada-font-normal);
}
/* ========================================
社交登入按鈕
======================================== */
.prada-modal-auth .social-login {
display: flex;
flex-direction: column;
gap: var(--prada-space-3);
}
.prada-modal-auth .btn-social {
display: flex;
align-items: center;
justify-content: center;
gap: var(--prada-space-3);
width: 100%;
padding: var(--prada-space-3) var(--prada-space-4);
font-size: var(--prada-text-sm);
font-weight: var(--prada-font-medium);
background-color: var(--prada-white);
border: var(--prada-border-normal);
border-radius: var(--prada-radius-md);
cursor: pointer;
transition: all var(--prada-duration-fast) var(--prada-ease-out);
}
.prada-modal-auth .btn-social:hover {
background-color: var(--naily-bg-hover);
border-color: var(--naily-gray-400);
}
.prada-modal-auth .btn-social-icon {
width: 20px;
height: 20px;
}
/* Google 品牌色 */
.prada-modal-auth .btn-social-google:hover {
background-color: rgba(66, 133, 244, 0.05);
border-color: #4285F4;
}
/* Facebook 品牌色 */
.prada-modal-auth .btn-social-facebook:hover {
background-color: rgba(24, 119, 242, 0.05);
border-color: #1877F2;
}
/* LINE 品牌色 */
.prada-modal-auth .btn-social-line:hover {
background-color: rgba(0, 185, 0, 0.05);
border-color: #00B900;
}
/* Apple 品牌色 */
.prada-modal-auth .btn-social-apple:hover {
background-color: rgba(0, 0, 0, 0.05);
border-color: var(--prada-black);
}
/* ========================================
Footer - 註冊提示
======================================== */
.prada-modal-auth .prada-modal-footer {
justify-content: center;
padding: var(--prada-space-5) var(--prada-modal-padding-md) var(--prada-space-6);
border-top: none;
}
.prada-modal-auth .footer-text {
font-size: var(--prada-text-sm);
color: var(--naily-text-secondary);
}
.prada-modal-auth .footer-link {
color: var(--prada-primary);
font-weight: var(--prada-font-semibold);
text-decoration: none;
margin-left: var(--prada-space-1);
transition: color var(--prada-duration-fast) var(--prada-ease-out);
}
.prada-modal-auth .footer-link:hover {
color: var(--prada-primary-dark);
text-decoration: underline;
}
/* ========================================
載入狀態
======================================== */
.prada-modal-auth .loading-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.9);
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
}
.prada-modal-auth .loading-spinner {
width: 40px;
height: 40px;
border: 3px solid var(--naily-gray-200);
border-top-color: var(--prada-primary);
border-radius: 50%;
animation: prada-spin 0.8s linear infinite;
}
/* ========================================
Login 專屬樣式
======================================== */
/* 登入選項列（記住我 + 忘記密碼）*/
.prada-modal-auth .prada-login-options-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--prada-space-5);
}
.prada-modal-auth .prada-remember-section {
display: flex;
align-items: center;
}
.prada-modal-auth .prada-forgot-password-link {
font-size: var(--prada-text-sm);
color: var(--prada-primary);
text-decoration: none;
font-weight: var(--prada-font-medium);
cursor: pointer;
transition: color var(--prada-duration-fast) var(--prada-ease-out);
}
.prada-modal-auth .prada-forgot-password-link:hover {
color: var(--prada-primary-dark);
text-decoration: underline;
}
/* 社交登入區塊 */
.prada-modal-auth .prada-social-login-section {
margin-bottom: var(--prada-space-5);
}
/* 分隔線（已有基礎樣式，這裡是兼容舊類名）*/
.prada-modal-auth .prada-divider {
display: flex;
align-items: center;
text-align: center;
margin: var(--prada-space-6) 0;
}
.prada-modal-auth .prada-divider hr {
flex: 1 1;
border: none;
border-top: 1px solid var(--naily-gray-200);
margin: 0;
}
.prada-modal-auth .prada-divider span {
padding: 0 var(--prada-space-4);
font-size: var(--prada-text-sm);
color: var(--naily-text-tertiary);
font-weight: var(--prada-font-normal);
}
/* 錯誤訊息區塊 */
.prada-modal-auth .prada-error-zone {
margin-bottom: var(--prada-space-4);
}
.prada-modal-auth .prada-error-zone .alert {
padding: var(--prada-space-3) var(--prada-space-4);
border-radius: var(--prada-radius-md);
border: 1px solid transparent;
font-size: var(--prada-text-sm);
}
.prada-modal-auth .prada-error-zone .alert-danger {
background-color: rgba(239, 68, 68, 0.1);
border-color: var(--prada-error);
color: var(--prada-error);
}
.prada-modal-auth .prada-error-zone .alert-warning {
background-color: rgba(245, 158, 11, 0.1);
border-color: var(--prada-warning);
color: var(--prada-warning);
}
/* 條款聲明文字 */
.prada-modal-auth .prada-terms-text {
text-align: center;
font-size: var(--prada-text-xs);
color: var(--naily-text-secondary);
line-height: 1.6;
margin-top: var(--prada-space-4);
padding-top: var(--prada-space-3);
border-top: 1px solid var(--naily-gray-100);
}
.prada-modal-auth .prada-terms-text a {
color: var(--prada-primary);
text-decoration: none;
font-weight: var(--prada-font-medium);
}
.prada-modal-auth .prada-terms-text a:hover {
text-decoration: underline;
}
/* Bootstrap Form.Check 兼容 */
.prada-modal-auth .form-check {
display: flex;
align-items: center;
gap: var(--prada-space-2);
}
.prada-modal-auth .form-check-input {
width: 16px;
height: 16px;
cursor: pointer;
accent-color: var(--prada-primary);
margin: 0;
}
.prada-modal-auth .form-check-label {
font-size: var(--prada-text-sm);
color: var(--naily-text-secondary);
cursor: pointer;
margin: 0;
}
/* ========================================
響應式設計
======================================== */
/* 平板 (≤768px) - 占用大部分螢幕 */
@media (max-width: 768px) {
.prada-modal-auth .prada-modal-dialog {
width: 90%;
max-width: 90%;
height: 95%;
max-height: 95vh;
margin: var(--prada-space-4);
overflow-y: auto;
}
}
/* 手機 (≤480px) - 接近滿版 */
@media (max-width: 480px) {
.prada-modal-auth .prada-modal-dialog {
width: calc(100% - 32px); /* 左右各留16px margin */
max-width: calc(100% - 32px);
height: 95%;
max-height: 95vh;
margin: var(--prada-space-4);
overflow-y: auto;
}
.prada-modal-auth .prada-modal-header {
padding: var(--prada-space-6) var(--prada-space-5) var(--prada-space-4);
}
.prada-modal-auth .prada-modal-body {
padding: var(--prada-space-4) var(--prada-space-5);
}
.prada-modal-auth .prada-modal-footer {
padding: var(--prada-space-4) var(--prada-space-5) var(--prada-space-6);
}
.prada-modal-auth .form-row {
flex-direction: column;
align-items: flex-start;
gap: var(--prada-space-3);
}
.prada-modal-auth .prada-login-options-row {
flex-direction: column;
align-items: flex-start;
gap: var(--prada-space-3);
}
/* Tab 按鈕在手機上稍微小一點 */
.prada-modal-auth .auth-tab {
padding: var(--prada-space-2) var(--prada-space-5);
font-size: var(--prada-text-sm);
}
}
/**
* Prada Modal - Cart Summary (購物車總覽)
* 用於快速查看購物車內容和結帳
*
* 設計特點：
* - 卡片式商品列表
* - 即時價格計算
* - 優惠券輸入
* - 快速結帳按鈕
*
* @version 1.0.0
*/
/* ========================================
購物車總覽 Modal - 尺寸與佈局
======================================== */
.prada-modal-cart .prada-modal-dialog {
max-width: var(--prada-modal-sm); /* 440px */
}
/* ========================================
Header 設計
======================================== */
.prada-modal-cart .prada-modal-header {
padding: var(--prada-space-6) var(--prada-modal-padding-md);
border-bottom: var(--prada-border-light);
}
.prada-modal-cart .prada-modal-title {
display: flex;
align-items: center;
justify-content: space-between;
font-size: var(--prada-text-xl);
font-weight: var(--prada-font-bold);
color: var(--naily-text-primary);
}
.prada-modal-cart .cart-count {
font-size: var(--prada-text-sm);
font-weight: var(--prada-font-normal);
color: var(--naily-text-secondary);
}
/* ========================================
Body - 商品列表
======================================== */
.prada-modal-cart .prada-modal-body {
padding: var(--prada-space-4) var(--prada-modal-padding-md);
max-height: 500px;
overflow-y: auto;
}
/* 空購物車狀態 */
.prada-modal-cart .cart-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--prada-space-12) var(--prada-space-4);
text-align: center;
}
.prada-modal-cart .cart-empty-icon {
width: 80px;
height: 80px;
margin-bottom: var(--prada-space-4);
color: var(--naily-gray-300);
}
.prada-modal-cart .cart-empty-text {
font-size: var(--prada-text-base);
color: var(--naily-text-secondary);
margin-bottom: var(--prada-space-4);
}
.prada-modal-cart .btn-continue-shopping {
padding: var(--prada-space-2) var(--prada-space-6);
font-size: var(--prada-text-sm);
font-weight: var(--prada-font-medium);
color: var(--prada-primary);
background-color: rgba(190, 31, 72, 0.1);
border: none;
border-radius: var(--prada-radius-md);
cursor: pointer;
transition: all var(--prada-duration-fast) var(--prada-ease-out);
}
.prada-modal-cart .btn-continue-shopping:hover {
background-color: rgba(190, 31, 72, 0.15);
}
/* 商品項目 */
.prada-modal-cart .cart-items {
display: flex;
flex-direction: column;
gap: var(--prada-space-4);
}
.prada-modal-cart .cart-item {
display: flex;
gap: var(--prada-space-3);
padding: var(--prada-space-4);
background-color: var(--prada-white);
border: var(--prada-border-light);
border-radius: var(--prada-radius-md);
transition: box-shadow var(--prada-duration-fast) var(--prada-ease-out);
}
.prada-modal-cart .cart-item:hover {
box-shadow: var(--prada-shadow-sm);
}
/* 商品圖片 */
.prada-modal-cart .item-image {
flex: 0 0 80px;
height: 80px;
border-radius: var(--prada-radius-sm);
overflow: hidden;
background-color: var(--naily-gray-50);
}
.prada-modal-cart .item-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* 商品資訊 */
.prada-modal-cart .item-details {
flex: 1 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.prada-modal-cart .item-name {
font-size: var(--prada-text-sm);
font-weight: var(--prada-font-medium);
color: var(--naily-text-primary);
line-height: var(--prada-leading-tight);
margin-bottom: var(--prada-space-1);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.prada-modal-cart .item-specs {
font-size: var(--prada-text-xs);
color: var(--naily-text-tertiary);
margin-bottom: var(--prada-space-2);
}
.prada-modal-cart .item-actions {
display: flex;
align-items: center;
justify-content: space-between;
}
/* 數量調整 */
.prada-modal-cart .item-quantity {
display: flex;
align-items: center;
gap: var(--prada-space-2);
}
.prada-modal-cart .qty-btn {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--naily-gray-100);
border: none;
border-radius: var(--prada-radius-sm);
cursor: pointer;
color: var(--naily-text-primary);
font-size: var(--prada-text-xs);
transition: background-color var(--prada-duration-fast) var(--prada-ease-out);
}
.prada-modal-cart .qty-btn:hover {
background-color: var(--naily-gray-200);
}
.prada-modal-cart .qty-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.prada-modal-cart .qty-value {
min-width: 24px;
text-align: center;
font-size: var(--prada-text-sm);
font-weight: var(--prada-font-medium);
color: var(--naily-text-primary);
}
/* 價格與刪除 */
.prada-modal-cart .item-price {
font-size: var(--prada-text-base);
font-weight: var(--prada-font-semibold);
color: var(--prada-primary);
}
.prada-modal-cart .btn-remove {
padding: var(--prada-space-1) var(--prada-space-2);
font-size: var(--prada-text-xs);
color: var(--naily-text-tertiary);
background: none;
border: none;
cursor: pointer;
transition: color var(--prada-duration-fast) var(--prada-ease-out);
}
.prada-modal-cart .btn-remove:hover {
color: var(--prada-error);
}
/* ========================================
優惠券輸入
======================================== */
.prada-modal-cart .coupon-section {
margin-top: var(--prada-space-5);
padding-top: var(--prada-space-5);
border-top: var(--prada-border-light);
}
.prada-modal-cart .coupon-input-group {
display: flex;
gap: var(--prada-space-2);
}
.prada-modal-cart .coupon-input {
flex: 1 1;
padding: var(--prada-space-2) var(--prada-space-3);
font-size: var(--prada-text-sm);
border: var(--prada-border-normal);
border-radius: var(--prada-radius-md);
outline: none;
transition: border-color var(--prada-duration-fast) var(--prada-ease-out);
}
.prada-modal-cart .coupon-input:focus {
border-color: var(--prada-primary);
box-shadow: 0 0 0 3px rgba(190, 31, 72, 0.1);
}
.prada-modal-cart .btn-apply-coupon {
padding: var(--prada-space-2) var(--prada-space-4);
font-size: var(--prada-text-sm);
font-weight: var(--prada-font-medium);
color: var(--prada-primary);
background-color: rgba(190, 31, 72, 0.1);
border: none;
border-radius: var(--prada-radius-md);
cursor: pointer;
white-space: nowrap;
transition: all var(--prada-duration-fast) var(--prada-ease-out);
}
.prada-modal-cart .btn-apply-coupon:hover {
background-color: rgba(190, 31, 72, 0.15);
}
.prada-modal-cart .coupon-applied {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: var(--prada-space-3);
padding: var(--prada-space-2) var(--prada-space-3);
background-color: rgba(16, 185, 129, 0.1);
border: 1px solid var(--prada-success);
border-radius: var(--prada-radius-sm);
font-size: var(--prada-text-xs);
color: var(--prada-success);
}
.prada-modal-cart .btn-remove-coupon {
background: none;
border: none;
color: var(--prada-success);
cursor: pointer;
padding: 0;
margin-left: var(--prada-space-2);
}
/* ========================================
Footer - 價格總計與結帳
======================================== */
.prada-modal-cart .prada-modal-footer {
flex-direction: column;
padding: var(--prada-space-5) var(--prada-modal-padding-md);
border-top: var(--prada-border-light);
gap: var(--prada-space-4);
}
/* 價格明細 */
.prada-modal-cart .price-summary {
display: flex;
flex-direction: column;
gap: var(--prada-space-2);
}
.prada-modal-cart .price-row {
display: flex;
justify-content: space-between;
font-size: var(--prada-text-sm);
color: var(--naily-text-secondary);
}
.prada-modal-cart .price-row.discount {
color: var(--prada-success);
}
.prada-modal-cart .price-row.total {
padding-top: var(--prada-space-3);
border-top: var(--prada-border-light);
font-size: var(--prada-text-lg);
font-weight: var(--prada-font-bold);
color: var(--naily-text-primary);
}
.prada-modal-cart .price-row.total .price-value {
color: var(--prada-primary);
}
/* 結帳按鈕 */
.prada-modal-cart .btn-checkout {
width: 100%;
padding: var(--prada-space-3) var(--prada-space-6);
font-size: var(--prada-text-base);
font-weight: var(--prada-font-semibold);
color: var(--prada-white);
background-color: var(--prada-primary);
border: none;
border-radius: var(--prada-radius-md);
cursor: pointer;
transition: all var(--prada-duration-fast) var(--prada-ease-out);
}
.prada-modal-cart .btn-checkout:hover {
background-color: var(--prada-primary-dark);
box-shadow: var(--prada-shadow-primary);
}
.prada-modal-cart .btn-checkout:disabled {
background-color: var(--naily-gray-300);
cursor: not-allowed;
box-shadow: none;
}
/* 繼續購物連結 */
.prada-modal-cart .continue-shopping-link {
text-align: center;
font-size: var(--prada-text-sm);
color: var(--naily-text-secondary);
}
.prada-modal-cart .continue-shopping-link a {
color: var(--prada-primary);
text-decoration: none;
font-weight: var(--prada-font-medium);
}
.prada-modal-cart .continue-shopping-link a:hover {
text-decoration: underline;
}
/* ========================================
響應式設計
======================================== */
@media (max-width: 480px) {
.prada-modal-cart .prada-modal-header,
.prada-modal-cart .prada-modal-body,
.prada-modal-cart .prada-modal-footer {
padding-left: var(--prada-space-4);
padding-right: var(--prada-space-4);
}
.prada-modal-cart .cart-item {
padding: var(--prada-space-3);
}
.prada-modal-cart .item-image {
flex: 0 0 60px;
height: 60px;
}
}
/**
* Prada Modal - Live Chat (即時客服)
* 用於即時客服對話
*
* 設計特點：
* - 固定右下角位置
* - 聊天氣泡設計
* - 訊息輸入框
* - 客服狀態指示
*
* @version 1.0.0
*/
/* ========================================
即時客服 Modal - 固定位置佈局
======================================== */
.prada-modal-chat .prada-modal {
align-items: flex-end;
justify-content: flex-end;
padding: var(--prada-space-5);
}
.prada-modal-chat .prada-modal-dialog {
max-width: 400px;
width: 100%;
height: 600px;
margin: 0;
transform: translateY(100%);
transition: transform var(--prada-duration-normal) var(--prada-ease-out);
}
.prada-modal-chat .prada-modal.show .prada-modal-dialog {
transform: translateY(0);
}
.prada-modal-chat .prada-modal-content {
height: 100%;
border-radius: var(--prada-radius-2xl);
display: flex;
flex-direction: column;
box-shadow: var(--prada-shadow-2xl);
}
/* ========================================
Header - 客服資訊
======================================== */
.prada-modal-chat .prada-modal-header {
padding: var(--prada-space-5) var(--prada-modal-padding-md);
border-bottom: var(--prada-border-light);
background: linear-gradient(135deg,
rgba(190, 31, 72, 0.05) 0%,
rgba(255, 255, 255, 1) 100%
);
border-radius: var(--prada-radius-2xl) var(--prada-radius-2xl) 0 0;
flex-shrink: 0;
}
.prada-modal-chat .chat-header-content {
display: flex;
align-items: center;
gap: var(--prada-space-3);
}
/* 客服頭像 */
.prada-modal-chat .agent-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
position: relative;
flex-shrink: 0;
}
.prada-modal-chat .agent-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.prada-modal-chat .agent-status {
position: absolute;
bottom: 0;
right: 0;
width: 12px;
height: 12px;
border-radius: 50%;
background-color: var(--prada-success);
border: 2px solid var(--prada-white);
}
.prada-modal-chat .agent-status.away {
background-color: var(--prada-warning);
}
.prada-modal-chat .agent-status.offline {
background-color: var(--naily-gray-400);
}
/* 客服資訊 */
.prada-modal-chat .agent-info {
flex: 1 1;
min-width: 0;
}
.prada-modal-chat .agent-name {
font-size: var(--prada-text-base);
font-weight: var(--prada-font-semibold);
color: var(--naily-text-primary);
margin-bottom: var(--prada-space-1);
}
.prada-modal-chat .agent-status-text {
font-size: var(--prada-text-xs);
color: var(--naily-text-tertiary);
}
.prada-modal-chat .agent-status-text.online {
color: var(--prada-success);
}
/* ========================================
Body - 聊天訊息區
======================================== */
.prada-modal-chat .prada-modal-body {
flex: 1 1;
padding: var(--prada-space-5) var(--prada-modal-padding-md);
overflow-y: auto;
background-color: var(--naily-bg-secondary);
display: flex;
flex-direction: column;
gap: var(--prada-space-4);
}
/* 日期分隔線 */
.prada-modal-chat .message-date-divider {
display: flex;
align-items: center;
gap: var(--prada-space-3);
margin: var(--prada-space-3) 0;
}
.prada-modal-chat .message-date-divider::before,
.prada-modal-chat .message-date-divider::after {
content: '';
flex: 1 1;
height: 1px;
background-color: var(--naily-gray-200);
}
.prada-modal-chat .message-date-text {
font-size: var(--prada-text-xs);
color: var(--naily-text-tertiary);
white-space: nowrap;
}
/* 訊息群組 */
.prada-modal-chat .message-group {
display: flex;
flex-direction: column;
gap: var(--prada-space-2);
}
.prada-modal-chat .message-group.user {
align-items: flex-end;
}
.prada-modal-chat .message-group.agent {
align-items: flex-start;
}
/* 訊息氣泡 */
.prada-modal-chat .message-bubble {
max-width: 75%;
padding: var(--prada-space-3) var(--prada-space-4);
font-size: var(--prada-text-sm);
line-height: var(--prada-leading-relaxed);
border-radius: var(--prada-radius-lg);
word-wrap: break-word;
animation: message-fade-in var(--prada-duration-fast) var(--prada-ease-out);
}
/* 使用者訊息 */
.prada-modal-chat .message-group.user .message-bubble {
background-color: var(--prada-primary);
color: var(--prada-white);
border-bottom-right-radius: var(--prada-radius-sm);
}
/* 客服訊息 */
.prada-modal-chat .message-group.agent .message-bubble {
background-color: var(--prada-white);
color: var(--naily-text-primary);
border: var(--prada-border-light);
border-bottom-left-radius: var(--prada-radius-sm);
}
/* 訊息時間戳 */
.prada-modal-chat .message-time {
font-size: var(--prada-text-xs);
color: var(--naily-text-tertiary);
padding: 0 var(--prada-space-1);
}
/* 訊息狀態（已讀/未讀）*/
.prada-modal-chat .message-status {
font-size: var(--prada-text-xs);
color: var(--naily-text-tertiary);
display: flex;
align-items: center;
gap: var(--prada-space-1);
}
.prada-modal-chat .message-status.read {
color: var(--prada-primary);
}
/* 系統訊息 */
.prada-modal-chat .system-message {
align-self: center;
padding: var(--prada-space-2) var(--prada-space-3);
font-size: var(--prada-text-xs);
color: var(--naily-text-tertiary);
background-color: rgba(0, 0, 0, 0.05);
border-radius: var(--prada-radius-full);
text-align: center;
}
/* 正在輸入指示器 */
.prada-modal-chat .typing-indicator {
display: flex;
align-items: center;
gap: var(--prada-space-2);
padding: var(--prada-space-3) var(--prada-space-4);
background-color: var(--prada-white);
border: var(--prada-border-light);
border-radius: var(--prada-radius-lg);
max-width: 75px;
}
.prada-modal-chat .typing-dot {
width: 6px;
height: 6px;
background-color: var(--naily-gray-400);
border-radius: 50%;
animation: typing-bounce 1.4s infinite;
}
.prada-modal-chat .typing-dot:nth-child(2) {
animation-delay: 0.2s;
}
.prada-modal-chat .typing-dot:nth-child(3) {
animation-delay: 0.4s;
}
/* 快速回覆按鈕 */
.prada-modal-chat .quick-replies {
display: flex;
flex-wrap: wrap;
gap: var(--prada-space-2);
margin-top: var(--prada-space-3);
}
.prada-modal-chat .quick-reply-btn {
padding: var(--prada-space-2) var(--prada-space-3);
font-size: var(--prada-text-xs);
color: var(--prada-primary);
background-color: var(--prada-white);
border: var(--prada-border-light);
border-radius: var(--prada-radius-full);
cursor: pointer;
transition: all var(--prada-duration-fast) var(--prada-ease-out);
}
.prada-modal-chat .quick-reply-btn:hover {
background-color: rgba(190, 31, 72, 0.05);
border-color: var(--prada-primary);
}
/* ========================================
Footer - 訊息輸入區
======================================== */
.prada-modal-chat .prada-modal-footer {
padding: var(--prada-space-4) var(--prada-modal-padding-md);
border-top: var(--prada-border-light);
flex-shrink: 0;
}
/* 輸入框區域 */
.prada-modal-chat .chat-input-area {
display: flex;
gap: var(--prada-space-2);
align-items: flex-end;
}
/* 附件按鈕 */
.prada-modal-chat .btn-attachment {
flex-shrink: 0;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--naily-bg-secondary);
border: none;
border-radius: var(--prada-radius-md);
color: var(--naily-text-secondary);
cursor: pointer;
transition: all var(--prada-duration-fast) var(--prada-ease-out);
}
.prada-modal-chat .btn-attachment:hover {
background-color: var(--naily-bg-active);
color: var(--naily-text-primary);
}
/* 訊息輸入框 */
.prada-modal-chat .chat-input-wrapper {
flex: 1 1;
position: relative;
}
.prada-modal-chat .chat-input {
width: 100%;
min-height: 36px;
max-height: 100px;
padding: var(--prada-space-2) var(--prada-space-3);
font-size: var(--prada-text-sm);
line-height: var(--prada-leading-normal);
color: var(--naily-text-primary);
background-color: var(--naily-bg-secondary);
border: var(--prada-border-light);
border-radius: var(--prada-radius-md);
outline: none;
resize: none;
transition: all var(--prada-duration-fast) var(--prada-ease-out);
}
.prada-modal-chat .chat-input:focus {
background-color: var(--prada-white);
border-color: var(--prada-primary);
box-shadow: 0 0 0 3px rgba(190, 31, 72, 0.1);
}
.prada-modal-chat .chat-input::placeholder {
color: var(--naily-text-muted);
}
/* 發送按鈕 */
.prada-modal-chat .btn-send {
flex-shrink: 0;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--prada-primary);
border: none;
border-radius: var(--prada-radius-md);
color: var(--prada-white);
cursor: pointer;
transition: all var(--prada-duration-fast) var(--prada-ease-out);
}
.prada-modal-chat .btn-send:hover {
background-color: var(--prada-primary-dark);
box-shadow: var(--prada-shadow-primary);
}
.prada-modal-chat .btn-send:disabled {
background-color: var(--naily-gray-300);
cursor: not-allowed;
box-shadow: none;
}
.prada-modal-chat .btn-send-icon {
width: 16px;
height: 16px;
}
/* 字數統計 */
.prada-modal-chat .char-count {
position: absolute;
bottom: -20px;
right: 0;
font-size: var(--prada-text-xs);
color: var(--naily-text-tertiary);
}
.prada-modal-chat .char-count.limit-reached {
color: var(--prada-error);
}
/* ========================================
動畫
======================================== */
@keyframes message-fade-in {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes typing-bounce {
0%, 60%, 100% {
transform: translateY(0);
}
30% {
transform: translateY(-8px);
}
}
/* ========================================
響應式設計
======================================== */
@media (max-width: 768px) {
.prada-modal-chat .prada-modal {
padding: 0;
}
.prada-modal-chat .prada-modal-dialog {
max-width: 100%;
width: 100%;
height: 100%;
border-radius: 0;
}
.prada-modal-chat .prada-modal-content {
border-radius: 0;
}
.prada-modal-chat .prada-modal-header {
border-radius: 0;
}
}
@media (max-width: 480px) {
.prada-modal-chat .prada-modal-header,
.prada-modal-chat .prada-modal-body,
.prada-modal-chat .prada-modal-footer {
padding-left: var(--prada-space-4);
padding-right: var(--prada-space-4);
}
.prada-modal-chat .message-bubble {
max-width: 85%;
}
}
/* ========================================
滾動優化
======================================== */
.prada-modal-chat .prada-modal-body::-webkit-scrollbar {
width: 6px;
}
.prada-modal-chat .prada-modal-body::-webkit-scrollbar-track {
background: transparent;
}
.prada-modal-chat .prada-modal-body::-webkit-scrollbar-thumb {
background: var(--naily-gray-300);
border-radius: var(--prada-radius-full);
}
.prada-modal-chat .prada-modal-body::-webkit-scrollbar-thumb:hover {
background: var(--naily-gray-400);
}
/**
* Prada Modal - Checkout Confirmation (結帳確認)
* 用於最終確認訂單資訊
*
* 設計特點：
* - 清晰的資訊層級
* - 完整的訂單摘要
* - 重要資訊強調
* - 明確的確認/取消動作
*
* @version 1.0.0
*/
/* ========================================
結帳確認 Modal - 尺寸與佈局
======================================== */
.prada-modal-checkout .prada-modal-dialog {
max-width: var(--prada-modal-md); /* 520px */
}
/* ========================================
Header 設計
======================================== */
.prada-modal-checkout .prada-modal-header {
padding: var(--prada-space-6) var(--prada-modal-padding-md);
border-bottom: var(--prada-border-light);
background: linear-gradient(135deg,
rgba(190, 31, 72, 0.03) 0%,
rgba(255, 255, 255, 1) 100%
);
}
.prada-modal-checkout .prada-modal-title {
font-size: var(--prada-text-xl);
font-weight: var(--prada-font-bold);
color: var(--prada-primary);
}
.prada-modal-checkout .checkout-subtitle {
font-size: var(--prada-text-sm);
color: var(--naily-text-secondary);
margin-top: var(--prada-space-1);
}
/* ========================================
Body - 訂單資訊區域
======================================== */
.prada-modal-checkout .prada-modal-body {
padding: var(--prada-space-6) var(--prada-modal-padding-md);
max-height: 500px;
overflow-y: auto;
}
/* 資訊區塊 */
.prada-modal-checkout .info-section {
margin-bottom: var(--prada-space-6);
}
.prada-modal-checkout .section-title {
font-size: var(--prada-text-sm);
font-weight: var(--prada-font-semibold);
color: var(--naily-text-primary);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: var(--prada-space-3);
display: flex;
align-items: center;
gap: var(--prada-space-2);
}
.prada-modal-checkout .section-icon {
width: 16px;
height: 16px;
color: var(--prada-primary);
}
.prada-modal-checkout .info-card {
padding: var(--prada-space-4);
background-color: var(--naily-bg-secondary);
border: var(--prada-border-light);
border-radius: var(--prada-radius-md);
}
/* 收件資訊 */
.prada-modal-checkout .recipient-info {
display: flex;
flex-direction: column;
gap: var(--prada-space-2);
}
.prada-modal-checkout .info-row {
display: flex;
gap: var(--prada-space-2);
font-size: var(--prada-text-sm);
}
.prada-modal-checkout .info-label {
flex: 0 0 60px;
color: var(--naily-text-tertiary);
}
.prada-modal-checkout .info-value {
flex: 1 1;
color: var(--naily-text-primary);
font-weight: var(--prada-font-medium);
}
/* 商品列表 */
.prada-modal-checkout .order-items {
display: flex;
flex-direction: column;
gap: var(--prada-space-3);
}
.prada-modal-checkout .order-item {
display: flex;
align-items: center;
gap: var(--prada-space-3);
padding: var(--prada-space-3);
background-color: var(--prada-white);
border: var(--prada-border-light);
border-radius: var(--prada-radius-sm);
}
.prada-modal-checkout .item-thumbnail {
flex: 0 0 50px;
height: 50px;
border-radius: var(--prada-radius-sm);
overflow: hidden;
background-color: var(--naily-gray-50);
}
.prada-modal-checkout .item-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
}
.prada-modal-checkout .item-info {
flex: 1 1;
min-width: 0;
}
.prada-modal-checkout .item-name {
font-size: var(--prada-text-sm);
font-weight: var(--prada-font-medium);
color: var(--naily-text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 2px;
}
.prada-modal-checkout .item-specs {
font-size: var(--prada-text-xs);
color: var(--naily-text-tertiary);
}
.prada-modal-checkout .item-quantity {
font-size: var(--prada-text-sm);
color: var(--naily-text-secondary);
white-space: nowrap;
}
.prada-modal-checkout .item-price {
font-size: var(--prada-text-sm);
font-weight: var(--prada-font-semibold);
color: var(--prada-primary);
white-space: nowrap;
}
/* 付款方式 */
.prada-modal-checkout .payment-method {
display: flex;
align-items: center;
gap: var(--prada-space-3);
padding: var(--prada-space-4);
}
.prada-modal-checkout .payment-icon {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--prada-white);
border: var(--prada-border-light);
border-radius: var(--prada-radius-sm);
}
.prada-modal-checkout .payment-details {
flex: 1 1;
}
.prada-modal-checkout .payment-name {
font-size: var(--prada-text-sm);
font-weight: var(--prada-font-medium);
color: var(--naily-text-primary);
margin-bottom: 2px;
}
.prada-modal-checkout .payment-info {
font-size: var(--prada-text-xs);
color: var(--naily-text-tertiary);
}
/* 價格摘要 */
.prada-modal-checkout .price-breakdown {
display: flex;
flex-direction: column;
gap: var(--prada-space-2);
}
.prada-modal-checkout .price-row {
display: flex;
justify-content: space-between;
font-size: var(--prada-text-sm);
color: var(--naily-text-secondary);
}
.prada-modal-checkout .price-row.discount {
color: var(--prada-success);
}
.prada-modal-checkout .price-row.total {
padding-top: var(--prada-space-3);
margin-top: var(--prada-space-2);
border-top: 2px solid var(--naily-gray-200);
font-size: var(--prada-text-lg);
font-weight: var(--prada-font-bold);
color: var(--naily-text-primary);
}
.prada-modal-checkout .price-row.total .price-value {
color: var(--prada-primary);
font-size: var(--prada-text-2xl);
}
/* ========================================
重要提示區
======================================== */
.prada-modal-checkout .notice-box {
margin-top: var(--prada-space-6);
padding: var(--prada-space-4);
background-color: rgba(245, 158, 11, 0.1);
border-left: 4px solid var(--prada-warning);
border-radius: var(--prada-radius-sm);
}
.prada-modal-checkout .notice-title {
font-size: var(--prada-text-sm);
font-weight: var(--prada-font-semibold);
color: var(--prada-warning);
margin-bottom: var(--prada-space-2);
}
.prada-modal-checkout .notice-text {
font-size: var(--prada-text-xs);
color: var(--naily-text-secondary);
line-height: var(--prada-leading-relaxed);
}
/* ========================================
條款同意
======================================== */
.prada-modal-checkout .terms-agreement {
margin-top: var(--prada-space-5);
display: flex;
align-items: flex-start;
gap: var(--prada-space-2);
}
.prada-modal-checkout .terms-agreement input[type="checkbox"] {
margin-top: 3px;
width: 16px;
height: 16px;
cursor: pointer;
accent-color: var(--prada-primary);
}
.prada-modal-checkout .terms-text {
font-size: var(--prada-text-xs);
color: var(--naily-text-secondary);
line-height: var(--prada-leading-relaxed);
}
.prada-modal-checkout .terms-link {
color: var(--prada-primary);
text-decoration: none;
font-weight: var(--prada-font-medium);
}
.prada-modal-checkout .terms-link:hover {
text-decoration: underline;
}
/* ========================================
Footer - 操作按鈕
======================================== */
.prada-modal-checkout .prada-modal-footer {
padding: var(--prada-space-5) var(--prada-modal-padding-md) var(--prada-space-6);
border-top: var(--prada-border-light);
display: flex;
gap: var(--prada-space-3);
background: linear-gradient(0deg,
rgba(190, 31, 72, 0.02) 0%,
rgba(255, 255, 255, 1) 100%
);
}
.prada-modal-checkout .btn-cancel {
flex: 0 0 auto;
padding: var(--prada-space-3) var(--prada-space-5);
font-size: var(--prada-text-sm);
font-weight: var(--prada-font-medium);
color: var(--naily-text-secondary);
background-color: var(--prada-white);
border: var(--prada-border-normal);
border-radius: var(--prada-radius-md);
cursor: pointer;
transition: all var(--prada-duration-fast) var(--prada-ease-out);
}
.prada-modal-checkout .btn-cancel:hover {
background-color: var(--naily-bg-hover);
border-color: var(--naily-gray-400);
}
.prada-modal-checkout .btn-confirm {
flex: 1 1;
padding: var(--prada-space-3) var(--prada-space-6);
font-size: var(--prada-text-base);
font-weight: var(--prada-font-semibold);
color: var(--prada-white);
background-color: var(--prada-primary);
border: none;
border-radius: var(--prada-radius-md);
cursor: pointer;
transition: all var(--prada-duration-fast) var(--prada-ease-out);
display: flex;
align-items: center;
justify-content: center;
gap: var(--prada-space-2);
}
.prada-modal-checkout .btn-confirm:hover {
background-color: var(--prada-primary-dark);
box-shadow: var(--prada-shadow-primary);
}
.prada-modal-checkout .btn-confirm:disabled {
background-color: var(--naily-gray-300);
cursor: not-allowed;
box-shadow: none;
}
.prada-modal-checkout .btn-confirm-icon {
width: 20px;
height: 20px;
}
/* 處理中狀態 */
.prada-modal-checkout .btn-confirm.processing {
pointer-events: none;
}
.prada-modal-checkout .btn-confirm.processing::after {
content: '';
width: 16px;
height: 16px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-top-color: var(--prada-white);
border-radius: 50%;
animation: prada-spin 0.6s linear infinite;
}
/* ========================================
響應式設計
======================================== */
@media (max-width: 480px) {
.prada-modal-checkout .prada-modal-header,
.prada-modal-checkout .prada-modal-body,
.prada-modal-checkout .prada-modal-footer {
padding-left: var(--prada-space-4);
padding-right: var(--prada-space-4);
}
.prada-modal-checkout .order-item {
flex-wrap: wrap;
}
.prada-modal-checkout .item-quantity,
.prada-modal-checkout .item-price {
flex: 0 0 100%;
margin-top: var(--prada-space-2);
}
.prada-modal-checkout .prada-modal-footer {
flex-direction: column-reverse;
}
.prada-modal-checkout .btn-cancel,
.prada-modal-checkout .btn-confirm {
width: 100%;
}
}
/**
* Prada Modal - Confirmation Dialog (確認對話框)
* 用於重要操作的二次確認
*
* 設計特點：
* - 清晰的視覺層級
* - 危險操作警告色
* - 明確的確認/取消按鈕
* - 支援多種警告級別
*
* @version 1.0.0
*/
/* ========================================
確認對話框 Modal - 尺寸與佈局
======================================== */
.prada-modal-confirm .prada-modal-dialog {
max-width: var(--prada-modal-xs); /* 360px */
}
/* ========================================
Header 設計 - 根據類型顯示不同顏色
======================================== */
.prada-modal-confirm .prada-modal-header {
padding: var(--prada-space-6) var(--prada-modal-padding-md) var(--prada-space-4);
border-bottom: none;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
/* 圖示容器 */
.prada-modal-confirm .confirm-icon-wrapper {
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
margin-bottom: var(--prada-space-4);
}
.prada-modal-confirm .confirm-icon {
width: 30px;
height: 30px;
}
/* 標題 */
.prada-modal-confirm .prada-modal-title {
font-size: var(--prada-text-lg);
font-weight: var(--prada-font-bold);
color: var(--naily-text-primary);
margin-bottom: 0;
}
/* ========================================
警告級別變體 - 預設（資訊）
======================================== */
.prada-modal-confirm.level-info .confirm-icon-wrapper {
background-color: rgba(59, 130, 246, 0.1);
color: var(--prada-info);
}
.prada-modal-confirm.level-info .prada-modal-title {
color: var(--prada-info);
}
/* 警告級別變體 - 警告 */
.prada-modal-confirm.level-warning .confirm-icon-wrapper {
background-color: rgba(245, 158, 11, 0.1);
color: var(--prada-warning);
}
.prada-modal-confirm.level-warning .prada-modal-title {
color: var(--prada-warning);
}
/* 警告級別變體 - 危險 */
.prada-modal-confirm.level-danger .confirm-icon-wrapper {
background-color: rgba(239, 68, 68, 0.1);
color: var(--prada-error);
}
.prada-modal-confirm.level-danger .prada-modal-title {
color: var(--prada-error);
}
/* 警告級別變體 - 成功 */
.prada-modal-confirm.level-success .confirm-icon-wrapper {
background-color: rgba(16, 185, 129, 0.1);
color: var(--prada-success);
}
.prada-modal-confirm.level-success .prada-modal-title {
color: var(--prada-success);
}
/* ========================================
Body - 訊息內容
======================================== */
.prada-modal-confirm .prada-modal-body {
padding: var(--prada-space-4) var(--prada-modal-padding-md) var(--prada-space-6);
text-align: center;
}
.prada-modal-confirm .confirm-message {
font-size: var(--prada-text-sm);
color: var(--naily-text-secondary);
line-height: var(--prada-leading-relaxed);
margin-bottom: var(--prada-space-4);
}
/* 重點強調文字 */
.prada-modal-confirm .confirm-highlight {
display: block;
font-weight: var(--prada-font-semibold);
color: var(--naily-text-primary);
margin-top: var(--prada-space-2);
}
/* 警告提示框 */
.prada-modal-confirm .confirm-warning-box {
padding: var(--prada-space-3);
background-color: rgba(245, 158, 11, 0.1);
border-left: 3px solid var(--prada-warning);
border-radius: var(--prada-radius-sm);
text-align: left;
margin-top: var(--prada-space-4);
}
.prada-modal-confirm .warning-box-title {
font-size: var(--prada-text-xs);
font-weight: var(--prada-font-semibold);
color: var(--prada-warning);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: var(--prada-space-2);
}
.prada-modal-confirm .warning-box-text {
font-size: var(--prada-text-xs);
color: var(--naily-text-secondary);
line-height: var(--prada-leading-relaxed);
}
/* 確認輸入框（用於刪除操作等） */
.prada-modal-confirm .confirm-input-group {
margin-top: var(--prada-space-5);
text-align: left;
}
.prada-modal-confirm .confirm-input-label {
display: block;
font-size: var(--prada-text-xs);
color: var(--naily-text-secondary);
margin-bottom: var(--prada-space-2);
}
.prada-modal-confirm .confirm-input {
width: 100%;
padding: var(--prada-space-2) var(--prada-space-3);
font-size: var(--prada-text-sm);
font-family: var(--prada-font-mono);
border: var(--prada-border-normal);
border-radius: var(--prada-radius-md);
outline: none;
transition: border-color var(--prada-duration-fast) var(--prada-ease-out);
}
.prada-modal-confirm .confirm-input:focus {
border-color: var(--prada-primary);
box-shadow: 0 0 0 3px rgba(190, 31, 72, 0.1);
}
.prada-modal-confirm .confirm-input.is-invalid {
border-color: var(--prada-error);
}
.prada-modal-confirm .confirm-input-hint {
font-size: var(--prada-text-xs);
color: var(--naily-text-tertiary);
margin-top: var(--prada-space-1);
}
/* ========================================
Footer - 操作按鈕
======================================== */
.prada-modal-confirm .prada-modal-footer {
padding: var(--prada-space-4) var(--prada-modal-padding-md) var(--prada-space-6);
border-top: none;
display: flex;
gap: var(--prada-space-3);
}
/* 取消按鈕 */
.prada-modal-confirm .btn-cancel {
flex: 1 1;
padding: var(--prada-space-2) var(--prada-space-4);
font-size: var(--prada-text-sm);
font-weight: var(--prada-font-medium);
color: var(--naily-text-secondary);
background-color: var(--prada-white);
border: var(--prada-border-normal);
border-radius: var(--prada-radius-md);
cursor: pointer;
transition: all var(--prada-duration-fast) var(--prada-ease-out);
}
.prada-modal-confirm .btn-cancel:hover {
background-color: var(--naily-bg-hover);
border-color: var(--naily-gray-400);
}
/* 確認按鈕 - 預設樣式 */
.prada-modal-confirm .btn-confirm {
flex: 1 1;
padding: var(--prada-space-2) var(--prada-space-4);
font-size: var(--prada-text-sm);
font-weight: var(--prada-font-semibold);
color: var(--prada-white);
background-color: var(--prada-primary);
border: none;
border-radius: var(--prada-radius-md);
cursor: pointer;
transition: all var(--prada-duration-fast) var(--prada-ease-out);
}
.prada-modal-confirm .btn-confirm:hover {
background-color: var(--prada-primary-dark);
box-shadow: var(--prada-shadow-primary);
}
.prada-modal-confirm .btn-confirm:disabled {
background-color: var(--naily-gray-300);
cursor: not-allowed;
box-shadow: none;
}
/* 確認按鈕 - 資訊級別 */
.prada-modal-confirm.level-info .btn-confirm {
background-color: var(--prada-info);
}
.prada-modal-confirm.level-info .btn-confirm:hover {
background-color: var(--prada-info-light);
box-shadow: var(--naily-shadow-info);
}
/* 確認按鈕 - 警告級別 */
.prada-modal-confirm.level-warning .btn-confirm {
background-color: var(--prada-warning);
}
.prada-modal-confirm.level-warning .btn-confirm:hover {
background-color: var(--prada-warning-light);
box-shadow: var(--prada-shadow-gold);
}
/* 確認按鈕 - 危險級別 */
.prada-modal-confirm.level-danger .btn-confirm {
background-color: var(--prada-error);
}
.prada-modal-confirm.level-danger .btn-confirm:hover {
background-color: var(--prada-error-light);
box-shadow: var(--naily-shadow-error);
}
/* 確認按鈕 - 成功級別 */
.prada-modal-confirm.level-success .btn-confirm {
background-color: var(--prada-success);
}
.prada-modal-confirm.level-success .btn-confirm:hover {
background-color: var(--prada-success-light);
box-shadow: var(--naily-shadow-success);
}
/* ========================================
載入狀態
======================================== */
.prada-modal-confirm .btn-confirm.loading {
pointer-events: none;
position: relative;
}
.prada-modal-confirm .btn-confirm.loading::after {
content: '';
position: absolute;
width: 14px;
height: 14px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-top-color: var(--prada-white);
border-radius: 50%;
animation: prada-spin 0.6s linear infinite;
top: 50%;
left: 50%;
margin-top: -7px;
margin-left: -7px;
}
.prada-modal-confirm .btn-confirm.loading span {
opacity: 0;
}
/* ========================================
倒數計時功能（可選）
======================================== */
.prada-modal-confirm .countdown-timer {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 var(--prada-space-1);
margin-left: var(--prada-space-2);
font-size: var(--prada-text-xs);
font-weight: var(--prada-font-bold);
background-color: rgba(255, 255, 255, 0.2);
border-radius: var(--prada-radius-full);
}
/* ========================================
響應式設計
======================================== */
@media (max-width: 480px) {
.prada-modal-confirm .prada-modal-header {
padding: var(--prada-space-5) var(--prada-space-4) var(--prada-space-3);
}
.prada-modal-confirm .prada-modal-body {
padding: var(--prada-space-3) var(--prada-space-4) var(--prada-space-5);
}
.prada-modal-confirm .prada-modal-footer {
padding: var(--prada-space-3) var(--prada-space-4) var(--prada-space-5);
flex-direction: column-reverse;
}
.prada-modal-confirm .btn-cancel,
.prada-modal-confirm .btn-confirm {
width: 100%;
}
.prada-modal-confirm .confirm-icon-wrapper {
width: 50px;
height: 50px;
}
.prada-modal-confirm .confirm-icon {
width: 25px;
height: 25px;
}
}
/**
* Prada Modal - Coupon Selector (優惠券選擇器)
* 用於選擇可用優惠券
*
* 設計特點：
* - 卡片式優惠券設計
* - 虛線邊框（票券感）
* - 可用/不可用狀態
* - 優惠金額強調
*
* @version 1.0.0
*/
/* ========================================
優惠券選擇器 Modal - 尺寸與佈局
======================================== */
.prada-modal-coupon .prada-modal-dialog {
max-width: var(--prada-modal-md); /* 520px */
}
/* ========================================
Header 設計
======================================== */
.prada-modal-coupon .prada-modal-header {
padding: var(--prada-space-6) var(--prada-modal-padding-md);
border-bottom: var(--prada-border-light);
}
.prada-modal-coupon .prada-modal-title {
font-size: var(--prada-text-xl);
font-weight: var(--prada-font-bold);
color: var(--naily-text-primary);
}
.prada-modal-coupon .coupon-summary {
font-size: var(--prada-text-sm);
color: var(--naily-text-secondary);
margin-top: var(--prada-space-2);
}
/* ========================================
Body - 優惠券列表
======================================== */
.prada-modal-coupon .prada-modal-body {
padding: var(--prada-space-5) var(--prada-modal-padding-md);
max-height: 500px;
overflow-y: auto;
}
/* 分類標籤 */
.prada-modal-coupon .coupon-tabs {
display: flex;
gap: var(--prada-space-2);
margin-bottom: var(--prada-space-5);
border-bottom: var(--prada-border-light);
}
.prada-modal-coupon .coupon-tab {
padding: var(--prada-space-2) var(--prada-space-4);
font-size: var(--prada-text-sm);
font-weight: var(--prada-font-medium);
color: var(--naily-text-secondary);
background: none;
border: none;
border-bottom: 2px solid transparent;
cursor: pointer;
transition: all var(--prada-duration-fast) var(--prada-ease-out);
}
.prada-modal-coupon .coupon-tab:hover {
color: var(--prada-primary);
}
.prada-modal-coupon .coupon-tab.active {
color: var(--prada-primary);
border-bottom-color: var(--prada-primary);
}
.prada-modal-coupon .coupon-tab-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 var(--prada-space-1);
margin-left: var(--prada-space-1);
font-size: var(--prada-text-xs);
font-weight: var(--prada-font-bold);
background-color: var(--prada-primary);
color: var(--prada-white);
border-radius: var(--prada-radius-full);
}
/* 優惠券列表 */
.prada-modal-coupon .coupon-list {
display: flex;
flex-direction: column;
gap: var(--prada-space-4);
}
/* 優惠券卡片 */
.prada-modal-coupon .coupon-card {
position: relative;
display: flex;
background-color: var(--prada-white);
border: 2px dashed var(--naily-gray-300);
border-radius: var(--prada-radius-lg);
overflow: hidden;
cursor: pointer;
transition: all var(--prada-duration-fast) var(--prada-ease-out);
}
.prada-modal-coupon .coupon-card:hover {
border-color: var(--prada-primary);
box-shadow: var(--prada-shadow-sm);
transform: translateY(-2px);
}
.prada-modal-coupon .coupon-card.selected {
border-color: var(--prada-primary);
border-style: solid;
background-color: rgba(190, 31, 72, 0.02);
box-shadow: 0 0 0 3px rgba(190, 31, 72, 0.1);
}
.prada-modal-coupon .coupon-card.disabled {
opacity: 0.5;
cursor: not-allowed;
border-style: solid;
}
.prada-modal-coupon .coupon-card.disabled:hover {
border-color: var(--naily-gray-300);
box-shadow: none;
transform: none;
}
/* 左側：優惠金額 */
.prada-modal-coupon .coupon-amount {
flex: 0 0 120px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: linear-gradient(135deg,
rgba(190, 31, 72, 0.1) 0%,
rgba(190, 31, 72, 0.05) 100%
);
padding: var(--prada-space-4);
position: relative;
}
.prada-modal-coupon .coupon-amount::after {
content: '';
position: absolute;
right: -10px;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
background-color: var(--prada-white);
border-radius: 50%;
box-shadow: inset 0 0 0 2px var(--naily-gray-300);
}
.prada-modal-coupon .amount-symbol {
font-size: var(--prada-text-lg);
color: var(--prada-primary);
font-weight: var(--prada-font-semibold);
}
.prada-modal-coupon .amount-value {
font-size: var(--prada-text-3xl);
color: var(--prada-primary);
font-weight: var(--prada-font-bold);
line-height: 1;
margin-top: var(--prada-space-1);
}
.prada-modal-coupon .amount-type {
font-size: var(--prada-text-xs);
color: var(--naily-text-tertiary);
margin-top: var(--prada-space-2);
}
/* 右側：優惠券資訊 */
.prada-modal-coupon .coupon-info {
flex: 1 1;
padding: var(--prada-space-4);
display: flex;
flex-direction: column;
gap: var(--prada-space-2);
}
.prada-modal-coupon .coupon-title {
font-size: var(--prada-text-base);
font-weight: var(--prada-font-semibold);
color: var(--naily-text-primary);
line-height: var(--prada-leading-tight);
}
.prada-modal-coupon .coupon-code {
font-size: var(--prada-text-xs);
color: var(--naily-text-tertiary);
font-family: var(--prada-font-mono);
background-color: var(--naily-bg-secondary);
padding: var(--prada-space-1) var(--prada-space-2);
border-radius: var(--prada-radius-sm);
display: inline-block;
align-self: flex-start;
}
.prada-modal-coupon .coupon-description {
font-size: var(--prada-text-sm);
color: var(--naily-text-secondary);
line-height: var(--prada-leading-relaxed);
}
.prada-modal-coupon .coupon-conditions {
display: flex;
flex-wrap: wrap;
gap: var(--prada-space-2);
margin-top: var(--prada-space-2);
}
.prada-modal-coupon .coupon-condition {
font-size: var(--prada-text-xs);
color: var(--naily-text-tertiary);
background-color: var(--naily-bg-secondary);
padding: var(--prada-space-1) var(--prada-space-2);
border-radius: var(--prada-radius-sm);
}
.prada-modal-coupon .coupon-expiry {
font-size: var(--prada-text-xs);
color: var(--prada-warning);
margin-top: var(--prada-space-2);
display: flex;
align-items: center;
gap: var(--prada-space-1);
}
.prada-modal-coupon .coupon-expiry.urgent {
color: var(--prada-error);
font-weight: var(--prada-font-semibold);
}
/* 選擇指示器 */
.prada-modal-coupon .coupon-selected-badge {
position: absolute;
top: var(--prada-space-2);
right: var(--prada-space-2);
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--prada-primary);
color: var(--prada-white);
border-radius: 50%;
font-size: var(--prada-text-xs);
opacity: 0;
transform: scale(0);
transition: all var(--prada-duration-fast) var(--prada-ease-out);
}
.prada-modal-coupon .coupon-card.selected .coupon-selected-badge {
opacity: 1;
transform: scale(1);
}
/* 不可用原因標籤 */
.prada-modal-coupon .coupon-unavailable {
position: absolute;
top: var(--prada-space-2);
right: var(--prada-space-2);
padding: var(--prada-space-1) var(--prada-space-2);
font-size: var(--prada-text-xs);
color: var(--naily-text-tertiary);
background-color: var(--naily-gray-100);
border-radius: var(--prada-radius-sm);
}
/* 空狀態 */
.prada-modal-coupon .coupon-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--prada-space-12);
text-align: center;
}
.prada-modal-coupon .empty-icon {
width: 60px;
height: 60px;
color: var(--naily-gray-300);
margin-bottom: var(--prada-space-4);
}
.prada-modal-coupon .empty-text {
font-size: var(--prada-text-sm);
color: var(--naily-text-secondary);
}
/* ========================================
Footer - 確認選擇
======================================== */
.prada-modal-coupon .prada-modal-footer {
padding: var(--prada-space-5) var(--prada-modal-padding-md) var(--prada-space-6);
border-top: var(--prada-border-light);
display: flex;
flex-direction: column;
gap: var(--prada-space-3);
}
/* 節省金額提示 */
.prada-modal-coupon .savings-info {
text-align: center;
padding: var(--prada-space-3);
background-color: rgba(16, 185, 129, 0.1);
border-radius: var(--prada-radius-md);
}
.prada-modal-coupon .savings-label {
font-size: var(--prada-text-xs);
color: var(--naily-text-secondary);
margin-bottom: var(--prada-space-1);
}
.prada-modal-coupon .savings-amount {
font-size: var(--prada-text-xl);
font-weight: var(--prada-font-bold);
color: var(--prada-success);
}
/* 操作按鈕 */
.prada-modal-coupon .footer-buttons {
display: flex;
gap: var(--prada-space-3);
}
.prada-modal-coupon .btn-cancel {
flex: 0 0 auto;
padding: var(--prada-space-3) var(--prada-space-5);
font-size: var(--prada-text-sm);
font-weight: var(--prada-font-medium);
color: var(--naily-text-secondary);
background-color: var(--prada-white);
border: var(--prada-border-normal);
border-radius: var(--prada-radius-md);
cursor: pointer;
transition: all var(--prada-duration-fast) var(--prada-ease-out);
}
.prada-modal-coupon .btn-cancel:hover {
background-color: var(--naily-bg-hover);
}
.prada-modal-coupon .btn-apply {
flex: 1 1;
padding: var(--prada-space-3) var(--prada-space-6);
font-size: var(--prada-text-base);
font-weight: var(--prada-font-semibold);
color: var(--prada-white);
background-color: var(--prada-primary);
border: none;
border-radius: var(--prada-radius-md);
cursor: pointer;
transition: all var(--prada-duration-fast) var(--prada-ease-out);
}
.prada-modal-coupon .btn-apply:hover {
background-color: var(--prada-primary-dark);
box-shadow: var(--prada-shadow-primary);
}
.prada-modal-coupon .btn-apply:disabled {
background-color: var(--naily-gray-300);
cursor: not-allowed;
box-shadow: none;
}
/* ========================================
響應式設計
======================================== */
@media (max-width: 480px) {
.prada-modal-coupon .prada-modal-header,
.prada-modal-coupon .prada-modal-body,
.prada-modal-coupon .prada-modal-footer {
padding-left: var(--prada-space-4);
padding-right: var(--prada-space-4);
}
.prada-modal-coupon .coupon-card {
flex-direction: column;
}
.prada-modal-coupon .coupon-amount {
flex: 1 1;
flex-direction: row;
justify-content: flex-start;
gap: var(--prada-space-3);
}
.prada-modal-coupon .coupon-amount::after {
display: none;
}
.prada-modal-coupon .amount-value {
font-size: var(--prada-text-2xl);
}
.prada-modal-coupon .footer-buttons {
flex-direction: column-reverse;
}
.prada-modal-coupon .btn-cancel,
.prada-modal-coupon .btn-apply {
width: 100%;
}
}
/**
* Prada Modal - Filter Panel (篩選面板)
* 用於商品篩選、搜尋條件設定
*
* 設計特點：
* - 側邊滑入動畫
* - 分類折疊面板
* - 即時篩選結果數量
* - 快速清除功能
*
* @version 1.0.0
*/
/* ========================================
篩選面板 Modal - 側邊滑入佈局
======================================== */
.prada-modal-filter .prada-modal {
align-items: flex-end;
justify-content: flex-end;
}
.prada-modal-filter .prada-modal-dialog {
max-width: 380px;
width: 100%;
height: 100%;
margin: 0;
transform: translateX(100%);
transition: transform var(--prada-duration-normal) var(--prada-ease-out);
}
.prada-modal-filter .prada-modal.show .prada-modal-dialog {
transform: translateX(0);
}
.prada-modal-filter .prada-modal-content {
height: 100%;
border-radius: 0;
display: flex;
flex-direction: column;
}
/* ========================================
Header - 篩選標題與清除
======================================== */
.prada-modal-filter .prada-modal-header {
padding: var(--prada-space-6) var(--prada-modal-padding-md);
border-bottom: var(--prada-border-light);
display: flex;
align-items: center;
justify-content: space-between;
flex-shrink: 0;
}
.prada-modal-filter .prada-modal-title {
font-size: var(--prada-text-lg);
font-weight: var(--prada-font-bold);
color: var(--naily-text-primary);
}
.prada-modal-filter .btn-clear-all {
font-size: var(--prada-text-sm);
color: var(--prada-primary);
background: none;
border: none;
cursor: pointer;
font-weight: var(--prada-font-medium);
padding: var(--prada-space-1) var(--prada-space-2);
transition: color var(--prada-duration-fast) var(--prada-ease-out);
}
.prada-modal-filter .btn-clear-all:hover {
color: var(--prada-primary-dark);
text-decoration: underline;
}
.prada-modal-filter .btn-clear-all:disabled {
opacity: 0.4;
cursor: not-allowed;
text-decoration: none;
}
/* ========================================
Body - 篩選項目
======================================== */
.prada-modal-filter .prada-modal-body {
flex: 1 1;
padding: 0;
overflow-y: auto;
}
/* 篩選群組 */
.prada-modal-filter .filter-group {
border-bottom: var(--prada-border-light);
}
.prada-modal-filter .filter-group:last-child {
border-bottom: none;
}
/* 群組標題（可折疊）*/
.prada-modal-filter .filter-group-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--prada-space-4) var(--prada-modal-padding-md);
cursor: pointer;
background-color: var(--prada-white);
transition: background-color var(--prada-duration-fast) var(--prada-ease-out);
}
.prada-modal-filter .filter-group-header:hover {
background-color: var(--naily-bg-hover);
}
.prada-modal-filter .filter-group-title {
font-size: var(--prada-text-sm);
font-weight: var(--prada-font-semibold);
color: var(--naily-text-primary);
}
.prada-modal-filter .filter-group-count {
font-size: var(--prada-text-xs);
color: var(--naily-text-tertiary);
margin-left: var(--prada-space-2);
}
.prada-modal-filter .filter-group-icon {
width: 16px;
height: 16px;
color: var(--naily-text-tertiary);
transition: transform var(--prada-duration-fast) var(--prada-ease-out);
}
.prada-modal-filter .filter-group.collapsed .filter-group-icon {
transform: rotate(-90deg);
}
/* 群組內容 */
.prada-modal-filter .filter-group-content {
padding: var(--prada-space-3) var(--prada-modal-padding-md) var(--prada-space-4);
background-color: var(--naily-bg-secondary);
max-height: 400px;
overflow: hidden;
transition: max-height var(--prada-duration-normal) var(--prada-ease-out);
}
.prada-modal-filter .filter-group.collapsed .filter-group-content {
max-height: 0;
padding-top: 0;
padding-bottom: 0;
}
/* 篩選選項 */
.prada-modal-filter .filter-options {
display: flex;
flex-direction: column;
gap: var(--prada-space-3);
}
/* Checkbox 選項 */
.prada-modal-filter .filter-option {
display: flex;
align-items: center;
gap: var(--prada-space-2);
cursor: pointer;
padding: var(--prada-space-2);
border-radius: var(--prada-radius-sm);
transition: background-color var(--prada-duration-fast) var(--prada-ease-out);
}
.prada-modal-filter .filter-option:hover {
background-color: rgba(190, 31, 72, 0.05);
}
.prada-modal-filter .filter-checkbox {
width: 18px;
height: 18px;
cursor: pointer;
accent-color: var(--prada-primary);
}
.prada-modal-filter .filter-label {
flex: 1 1;
font-size: var(--prada-text-sm);
color: var(--naily-text-primary);
cursor: pointer;
}
.prada-modal-filter .filter-count {
font-size: var(--prada-text-xs);
color: var(--naily-text-tertiary);
font-family: var(--prada-font-mono);
}
/* 顏色選擇器 */
.prada-modal-filter .color-options {
display: flex;
flex-wrap: wrap;
gap: var(--prada-space-2);
}
.prada-modal-filter .color-swatch {
width: 36px;
height: 36px;
border-radius: var(--prada-radius-sm);
cursor: pointer;
border: 2px solid transparent;
transition: all var(--prada-duration-fast) var(--prada-ease-out);
position: relative;
}
.prada-modal-filter .color-swatch:hover {
transform: scale(1.1);
box-shadow: var(--prada-shadow-sm);
}
.prada-modal-filter .color-swatch.selected {
border-color: var(--prada-primary);
box-shadow: 0 0 0 2px rgba(190, 31, 72, 0.2);
}
.prada-modal-filter .color-swatch.selected::after {
content: '✓';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: var(--prada-white);
font-size: var(--prada-text-xs);
font-weight: var(--prada-font-bold);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
/* 價格範圍滑桿 */
.prada-modal-filter .price-range {
padding: var(--prada-space-3) 0;
}
.prada-modal-filter .price-range-values {
display: flex;
justify-content: space-between;
margin-bottom: var(--prada-space-4);
}
.prada-modal-filter .price-input {
width: calc(50% - var(--prada-space-2));
padding: var(--prada-space-2) var(--prada-space-3);
font-size: var(--prada-text-sm);
border: var(--prada-border-normal);
border-radius: var(--prada-radius-md);
text-align: center;
font-family: var(--prada-font-mono);
outline: none;
}
.prada-modal-filter .price-input:focus {
border-color: var(--prada-primary);
}
.prada-modal-filter .price-slider {
width: 100%;
height: 4px;
background-color: var(--naily-gray-200);
border-radius: var(--prada-radius-sm);
position: relative;
cursor: pointer;
}
.prada-modal-filter .price-slider-track {
position: absolute;
height: 100%;
background-color: var(--prada-primary);
border-radius: var(--prada-radius-sm);
}
.prada-modal-filter .price-slider-thumb {
position: absolute;
width: 16px;
height: 16px;
background-color: var(--prada-primary);
border: 2px solid var(--prada-white);
border-radius: 50%;
top: -6px;
cursor: grab;
box-shadow: var(--prada-shadow-sm);
}
.prada-modal-filter .price-slider-thumb:active {
cursor: grabbing;
transform: scale(1.2);
}
/* 評分篩選 */
.prada-modal-filter .rating-options {
display: flex;
flex-direction: column;
gap: var(--prada-space-2);
}
.prada-modal-filter .rating-option {
display: flex;
align-items: center;
gap: var(--prada-space-2);
padding: var(--prada-space-2);
cursor: pointer;
border-radius: var(--prada-radius-sm);
transition: background-color var(--prada-duration-fast) var(--prada-ease-out);
}
.prada-modal-filter .rating-option:hover {
background-color: rgba(190, 31, 72, 0.05);
}
.prada-modal-filter .rating-stars {
display: flex;
gap: 2px;
color: var(--prada-gold);
font-size: var(--prada-text-sm);
}
.prada-modal-filter .rating-text {
font-size: var(--prada-text-sm);
color: var(--naily-text-secondary);
}
/* ========================================
Footer - 套用篩選
======================================== */
.prada-modal-filter .prada-modal-footer {
padding: var(--prada-space-5) var(--prada-modal-padding-md) var(--prada-space-6);
border-top: var(--prada-border-light);
display: flex;
flex-direction: column;
gap: var(--prada-space-3);
flex-shrink: 0;
}
/* 結果數量 */
.prada-modal-filter .result-count {
text-align: center;
font-size: var(--prada-text-sm);
color: var(--naily-text-secondary);
}
.prada-modal-filter .result-number {
font-weight: var(--prada-font-bold);
color: var(--prada-primary);
}
/* 套用按鈕 */
.prada-modal-filter .btn-apply {
width: 100%;
padding: var(--prada-space-3) var(--prada-space-6);
font-size: var(--prada-text-base);
font-weight: var(--prada-font-semibold);
color: var(--prada-white);
background-color: var(--prada-primary);
border: none;
border-radius: var(--prada-radius-md);
cursor: pointer;
transition: all var(--prada-duration-fast) var(--prada-ease-out);
}
.prada-modal-filter .btn-apply:hover {
background-color: var(--prada-primary-dark);
box-shadow: var(--prada-shadow-primary);
}
/* ========================================
響應式設計
======================================== */
@media (max-width: 480px) {
.prada-modal-filter .prada-modal-dialog {
max-width: 100%;
}
.prada-modal-filter .prada-modal-header,
.prada-modal-filter .filter-group-header,
.prada-modal-filter .filter-group-content,
.prada-modal-filter .prada-modal-footer {
padding-left: var(--prada-space-4);
padding-right: var(--prada-space-4);
}
}
/**
* Prada Modal - Image Gallery (圖片畫廊)
* 用於全屏查看商品圖片
*
* 設計特點：
* - 全屏黑色背景
* - 左右切換按鈕
* - 縮圖導航
* - 縮放功能
*
* @version 1.0.0
*/
/* ========================================
圖片畫廊 Modal - 全屏佈局
======================================== */
.prada-modal-gallery .prada-modal {
background-color: rgba(0, 0, 0, 0.95);
}
.prada-modal-gallery .prada-modal-backdrop {
background-color: rgba(0, 0, 0, 0.98);
}
.prada-modal-gallery .prada-modal-dialog {
max-width: 100%;
width: 100%;
height: 100%;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
.prada-modal-gallery .prada-modal-content {
background-color: transparent;
border: none;
box-shadow: none;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
/* ========================================
Header - 最小化工具欄
======================================== */
.prada-modal-gallery .prada-modal-header {
position: absolute;
top: 0;
left: 0;
right: 0;
padding: var(--prada-space-5);
background: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, transparent 100%);
border: none;
display: flex;
align-items: center;
justify-content: space-between;
z-index: var(--prada-modal-z-header);
}
.prada-modal-gallery .gallery-title {
font-size: var(--prada-text-sm);
color: var(--prada-white);
font-weight: var(--prada-font-medium);
}
.prada-modal-gallery .gallery-counter {
font-size: var(--prada-text-xs);
color: rgba(255, 255, 255, 0.7);
font-family: var(--prada-font-mono);
}
.prada-modal-gallery .gallery-controls {
display: flex;
align-items: center;
gap: var(--prada-space-2);
}
/* 工具按鈕 */
.prada-modal-gallery .gallery-tool-btn {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(255, 255, 255, 0.1);
border: none;
border-radius: var(--prada-radius-md);
color: var(--prada-white);
cursor: pointer;
transition: all var(--prada-duration-fast) var(--prada-ease-out);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
.prada-modal-gallery .gallery-tool-btn:hover {
background-color: rgba(255, 255, 255, 0.2);
}
.prada-modal-gallery .prada-modal-close {
background-color: rgba(255, 255, 255, 0.1);
color: var(--prada-white);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
.prada-modal-gallery .prada-modal-close:hover {
background-color: rgba(255, 255, 255, 0.2);
}
/* ========================================
Body - 圖片展示區
======================================== */
.prada-modal-gallery .prada-modal-body {
flex: 1 1;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}
/* 主圖片容器 */
.prada-modal-gallery .gallery-main-image {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: var(--prada-space-20) var(--prada-space-12);
}
.prada-modal-gallery .gallery-image {
max-width: 100%;
max-height: 100%;
object-fit: contain;
-webkit-user-select: none;
user-select: none;
transition: transform var(--prada-duration-normal) var(--prada-ease-out);
cursor: zoom-in;
}
.prada-modal-gallery .gallery-image.zoomed {
cursor: zoom-out;
transform: scale(2);
}
/* 左右切換按鈕 */
.prada-modal-gallery .gallery-nav-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(255, 255, 255, 0.1);
border: none;
border-radius: 50%;
color: var(--prada-white);
cursor: pointer;
transition: all var(--prada-duration-fast) var(--prada-ease-out);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
z-index: 1;
}
.prada-modal-gallery .gallery-nav-btn:hover {
background-color: rgba(255, 255, 255, 0.2);
transform: translateY(-50%) scale(1.1);
}
.prada-modal-gallery .gallery-nav-btn:disabled {
opacity: 0.3;
cursor: not-allowed;
transform: translateY(-50%) scale(1);
}
.prada-modal-gallery .gallery-nav-btn.prev {
left: var(--prada-space-5);
}
.prada-modal-gallery .gallery-nav-btn.next {
right: var(--prada-space-5);
}
.prada-modal-gallery .gallery-nav-icon {
width: 24px;
height: 24px;
}
/* 載入狀態 */
.prada-modal-gallery .gallery-loading {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--prada-space-3);
}
.prada-modal-gallery .loading-spinner {
width: 40px;
height: 40px;
border: 3px solid rgba(255, 255, 255, 0.2);
border-top-color: var(--prada-white);
border-radius: 50%;
animation: prada-spin 0.8s linear infinite;
}
.prada-modal-gallery .loading-text {
font-size: var(--prada-text-sm);
color: rgba(255, 255, 255, 0.7);
}
/* ========================================
Footer - 縮圖導航
======================================== */
.prada-modal-gallery .prada-modal-footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: var(--prada-space-5);
background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, transparent 100%);
border: none;
display: flex;
justify-content: center;
z-index: var(--prada-modal-z-header);
}
.prada-modal-gallery .gallery-thumbnails {
display: flex;
gap: var(--prada-space-2);
overflow-x: auto;
max-width: 100%;
padding: var(--prada-space-2);
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}
.prada-modal-gallery .gallery-thumbnails::-webkit-scrollbar {
height: 4px;
}
.prada-modal-gallery .gallery-thumbnails::-webkit-scrollbar-track {
background: transparent;
}
.prada-modal-gallery .gallery-thumbnails::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.3);
border-radius: var(--prada-radius-sm);
}
.prada-modal-gallery .thumbnail-item {
flex: 0 0 80px;
height: 80px;
border: 2px solid transparent;
border-radius: var(--prada-radius-sm);
overflow: hidden;
cursor: pointer;
transition: all var(--prada-duration-fast) var(--prada-ease-out);
opacity: 0.5;
}
.prada-modal-gallery .thumbnail-item:hover {
opacity: 0.8;
transform: translateY(-2px);
}
.prada-modal-gallery .thumbnail-item.active {
border-color: var(--prada-primary);
opacity: 1;
}
.prada-modal-gallery .thumbnail-image {
width: 100%;
height: 100%;
object-fit: cover;
}
/* ========================================
鍵盤提示
======================================== */
.prada-modal-gallery .keyboard-hints {
position: absolute;
bottom: 100px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: var(--prada-space-4);
padding: var(--prada-space-3) var(--prada-space-4);
background-color: rgba(0, 0, 0, 0.7);
border-radius: var(--prada-radius-lg);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
opacity: 0;
pointer-events: none;
transition: opacity var(--prada-duration-normal) var(--prada-ease-out);
}
.prada-modal-gallery .keyboard-hints.visible {
opacity: 1;
}
.prada-modal-gallery .keyboard-hint {
display: flex;
align-items: center;
gap: var(--prada-space-2);
font-size: var(--prada-text-xs);
color: rgba(255, 255, 255, 0.8);
}
.prada-modal-gallery .keyboard-key {
padding: var(--prada-space-1) var(--prada-space-2);
background-color: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: var(--prada-radius-sm);
font-family: var(--prada-font-mono);
font-size: var(--prada-text-xs);
color: var(--prada-white);
}
/* ========================================
手勢提示（觸控裝置）
======================================== */
.prada-modal-gallery .gesture-hint {
position: absolute;
bottom: 120px;
left: 50%;
transform: translateX(-50%);
padding: var(--prada-space-2) var(--prada-space-4);
background-color: rgba(0, 0, 0, 0.7);
border-radius: var(--prada-radius-full);
font-size: var(--prada-text-xs);
color: rgba(255, 255, 255, 0.8);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
white-space: nowrap;
opacity: 0;
animation: gesture-hint-fade 3s ease-in-out;
}
@keyframes gesture-hint-fade {
0%, 100% { opacity: 0; }
10%, 90% { opacity: 1; }
}
/* ========================================
響應式設計
======================================== */
@media (max-width: 768px) {
.prada-modal-gallery .gallery-main-image {
padding: var(--prada-space-16) var(--prada-space-5);
}
.prada-modal-gallery .gallery-nav-btn {
width: 40px;
height: 40px;
}
.prada-modal-gallery .gallery-nav-btn.prev {
left: var(--prada-space-3);
}
.prada-modal-gallery .gallery-nav-btn.next {
right: var(--prada-space-3);
}
.prada-modal-gallery .thumbnail-item {
flex: 0 0 60px;
height: 60px;
}
.prada-modal-gallery .keyboard-hints {
display: none;
}
}
@media (max-width: 480px) {
.prada-modal-gallery .prada-modal-header {
padding: var(--prada-space-4);
}
.prada-modal-gallery .prada-modal-footer {
padding: var(--prada-space-4);
}
.prada-modal-gallery .gallery-tool-btn {
width: 36px;
height: 36px;
}
.prada-modal-gallery .gallery-nav-btn {
display: none; /* 手機上使用滑動手勢 */
}
}
/* ========================================
動畫
======================================== */
/* ========================================
觸控支援
======================================== */
@media (hover: none) and (pointer: coarse) {
/* 觸控裝置上啟用滑動手勢 */
.prada-modal-gallery .gallery-main-image {
touch-action: pan-x pinch-zoom;
}
}
/**
* Prada Modal - Multi-Step (多步驟流程)
* 用於引導式多步驟流程（結帳、表單填寫等）
*
* 設計特點：
* - 清晰的步驟指示器
* - 步驟進度視覺化
* - 前進/後退導航
* - 步驟驗證狀態
*
* @version 1.0.0
*/
/* ========================================
多步驟 Modal - 尺寸與佈局
======================================== */
.prada-modal-multistep .prada-modal-dialog {
max-width: var(--prada-modal-lg); /* 680px */
}
/* ========================================
Header - 步驟指示器
======================================== */
.prada-modal-multistep .prada-modal-header {
padding: var(--prada-space-6) var(--prada-modal-padding-md);
border-bottom: var(--prada-border-light);
display: flex;
flex-direction: column;
gap: var(--prada-space-5);
}
/* 標題區域 */
.prada-modal-multistep .header-title-area {
display: flex;
align-items: center;
justify-content: space-between;
}
.prada-modal-multistep .prada-modal-title {
font-size: var(--prada-text-xl);
font-weight: var(--prada-font-bold);
color: var(--naily-text-primary);
}
/* 步驟指示器 */
.prada-modal-multistep .step-indicator {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
}
.prada-modal-multistep .step-item {
flex: 1 1;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--prada-space-2);
position: relative;
z-index: 1;
}
/* 步驟連接線 */
.prada-modal-multistep .step-item:not(:last-child)::after {
content: '';
position: absolute;
top: 16px;
left: calc(50% + 20px);
right: calc(-50% + 20px);
height: 2px;
background-color: var(--naily-gray-200);
z-index: 0;
transition: background-color var(--prada-duration-normal) var(--prada-ease-out);
}
.prada-modal-multistep .step-item.completed:not(:last-child)::after {
background-color: var(--prada-primary);
}
/* 步驟圓圈 */
.prada-modal-multistep .step-circle {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--prada-white);
border: 2px solid var(--naily-gray-300);
border-radius: 50%;
font-size: var(--prada-text-sm);
font-weight: var(--prada-font-semibold);
color: var(--naily-text-tertiary);
transition: all var(--prada-duration-normal) var(--prada-ease-out);
z-index: 1;
position: relative;
}
/* 步驟狀態 - 當前 */
.prada-modal-multistep .step-item.active .step-circle {
border-color: var(--prada-primary);
background-color: var(--prada-primary);
color: var(--prada-white);
box-shadow: 0 0 0 4px rgba(190, 31, 72, 0.1);
}
/* 步驟狀態 - 已完成 */
.prada-modal-multistep .step-item.completed .step-circle {
border-color: var(--prada-primary);
background-color: var(--prada-primary);
color: var(--prada-white);
}
.prada-modal-multistep .step-item.completed .step-circle::after {
content: '✓';
position: absolute;
}
/* 步驟標籤 */
.prada-modal-multistep .step-label {
font-size: var(--prada-text-xs);
color: var(--naily-text-tertiary);
text-align: center;
white-space: nowrap;
transition: color var(--prada-duration-normal) var(--prada-ease-out);
}
.prada-modal-multistep .step-item.active .step-label {
color: var(--prada-primary);
font-weight: var(--prada-font-semibold);
}
.prada-modal-multistep .step-item.completed .step-label {
color: var(--naily-text-secondary);
}
/* ========================================
Body - 步驟內容區
======================================== */
.prada-modal-multistep .prada-modal-body {
padding: var(--prada-space-8) var(--prada-modal-padding-md);
min-height: 300px;
max-height: 500px;
overflow-y: auto;
}
/* 步驟容器 */
.prada-modal-multistep .step-content {
display: none;
animation: step-fade-in var(--prada-duration-normal) var(--prada-ease-out);
}
.prada-modal-multistep .step-content.active {
display: block;
}
/* 步驟標題 */
.prada-modal-multistep .step-title {
font-size: var(--prada-text-lg);
font-weight: var(--prada-font-semibold);
color: var(--naily-text-primary);
margin-bottom: var(--prada-space-3);
}
.prada-modal-multistep .step-description {
font-size: var(--prada-text-sm);
color: var(--naily-text-secondary);
line-height: var(--prada-leading-relaxed);
margin-bottom: var(--prada-space-6);
}
/* 表單群組 */
.prada-modal-multistep .form-group {
margin-bottom: var(--prada-space-5);
}
.prada-modal-multistep .form-label {
display: block;
font-size: var(--prada-text-sm);
font-weight: var(--prada-font-medium);
color: var(--naily-text-primary);
margin-bottom: var(--prada-space-2);
}
.prada-modal-multistep .form-label.required::after {
content: '*';
color: var(--prada-error);
margin-left: var(--prada-space-1);
}
.prada-modal-multistep .form-input,
.prada-modal-multistep .form-select,
.prada-modal-multistep .form-textarea {
width: 100%;
padding: var(--prada-space-3) var(--prada-space-4);
font-size: var(--prada-text-sm);
line-height: var(--prada-leading-normal);
color: var(--naily-text-primary);
background-color: var(--prada-white);
border: var(--prada-border-normal);
border-radius: var(--prada-radius-md);
transition: all var(--prada-duration-fast) var(--prada-ease-out);
outline: none;
}
.prada-modal-multistep .form-textarea {
min-height: 100px;
resize: vertical;
}
.prada-modal-multistep .form-input:focus,
.prada-modal-multistep .form-select:focus,
.prada-modal-multistep .form-textarea:focus {
border-color: var(--prada-primary);
box-shadow: 0 0 0 3px rgba(190, 31, 72, 0.1);
}
.prada-modal-multistep .form-input.is-invalid,
.prada-modal-multistep .form-select.is-invalid,
.prada-modal-multistep .form-textarea.is-invalid {
border-color: var(--prada-error);
}
.prada-modal-multistep .form-hint {
font-size: var(--prada-text-xs);
color: var(--naily-text-tertiary);
margin-top: var(--prada-space-1);
}
.prada-modal-multistep .form-error {
font-size: var(--prada-text-xs);
color: var(--prada-error);
margin-top: var(--prada-space-1);
}
/* 選項群組（Radio/Checkbox）*/
.prada-modal-multistep .option-group {
display: flex;
flex-direction: column;
gap: var(--prada-space-3);
}
.prada-modal-multistep .option-item {
display: flex;
align-items: center;
padding: var(--prada-space-4);
background-color: var(--prada-white);
border: var(--prada-border-normal);
border-radius: var(--prada-radius-md);
cursor: pointer;
transition: all var(--prada-duration-fast) var(--prada-ease-out);
}
.prada-modal-multistep .option-item:hover {
border-color: var(--prada-primary);
background-color: rgba(190, 31, 72, 0.02);
}
.prada-modal-multistep .option-item.selected {
border-color: var(--prada-primary);
background-color: rgba(190, 31, 72, 0.05);
}
.prada-modal-multistep .option-radio,
.prada-modal-multistep .option-checkbox {
margin-right: var(--prada-space-3);
accent-color: var(--prada-primary);
}
.prada-modal-multistep .option-content {
flex: 1 1;
}
.prada-modal-multistep .option-title {
font-size: var(--prada-text-sm);
font-weight: var(--prada-font-medium);
color: var(--naily-text-primary);
margin-bottom: var(--prada-space-1);
}
.prada-modal-multistep .option-description {
font-size: var(--prada-text-xs);
color: var(--naily-text-tertiary);
}
/* 摘要卡片（最後一步）*/
.prada-modal-multistep .summary-card {
padding: var(--prada-space-5);
background-color: var(--naily-bg-secondary);
border: var(--prada-border-light);
border-radius: var(--prada-radius-md);
margin-bottom: var(--prada-space-4);
}
.prada-modal-multistep .summary-section {
margin-bottom: var(--prada-space-4);
}
.prada-modal-multistep .summary-section:last-child {
margin-bottom: 0;
}
.prada-modal-multistep .summary-title {
font-size: var(--prada-text-xs);
font-weight: var(--prada-font-semibold);
color: var(--naily-text-primary);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: var(--prada-space-2);
}
.prada-modal-multistep .summary-row {
display: flex;
justify-content: space-between;
font-size: var(--prada-text-sm);
color: var(--naily-text-secondary);
margin-bottom: var(--prada-space-2);
}
.prada-modal-multistep .summary-value {
color: var(--naily-text-primary);
font-weight: var(--prada-font-medium);
}
/* ========================================
Footer - 導航按鈕
======================================== */
.prada-modal-multistep .prada-modal-footer {
padding: var(--prada-space-5) var(--prada-modal-padding-md) var(--prada-space-6);
border-top: var(--prada-border-light);
display: flex;
justify-content: space-between;
align-items: center;
}
/* 左側：返回按鈕 */
.prada-modal-multistep .footer-left {
display: flex;
gap: var(--prada-space-3);
}
.prada-modal-multistep .btn-back,
.prada-modal-multistep .btn-cancel {
padding: var(--prada-space-2) var(--prada-space-5);
font-size: var(--prada-text-sm);
font-weight: var(--prada-font-medium);
color: var(--naily-text-secondary);
background-color: var(--prada-white);
border: var(--prada-border-normal);
border-radius: var(--prada-radius-md);
cursor: pointer;
transition: all var(--prada-duration-fast) var(--prada-ease-out);
}
.prada-modal-multistep .btn-back:hover,
.prada-modal-multistep .btn-cancel:hover {
background-color: var(--naily-bg-hover);
border-color: var(--naily-gray-400);
}
.prada-modal-multistep .btn-back:disabled {
opacity: 0.4;
cursor: not-allowed;
}
/* 右側：下一步/完成按鈕 */
.prada-modal-multistep .footer-right {
display: flex;
gap: var(--prada-space-3);
align-items: center;
}
.prada-modal-multistep .btn-next,
.prada-modal-multistep .btn-finish {
padding: var(--prada-space-2) var(--prada-space-6);
font-size: var(--prada-text-sm);
font-weight: var(--prada-font-semibold);
color: var(--prada-white);
background-color: var(--prada-primary);
border: none;
border-radius: var(--prada-radius-md);
cursor: pointer;
transition: all var(--prada-duration-fast) var(--prada-ease-out);
display: flex;
align-items: center;
gap: var(--prada-space-2);
}
.prada-modal-multistep .btn-next:hover,
.prada-modal-multistep .btn-finish:hover {
background-color: var(--prada-primary-dark);
box-shadow: var(--prada-shadow-primary);
}
.prada-modal-multistep .btn-next:disabled,
.prada-modal-multistep .btn-finish:disabled {
background-color: var(--naily-gray-300);
cursor: not-allowed;
box-shadow: none;
}
/* 步驟進度文字 */
.prada-modal-multistep .step-progress-text {
font-size: var(--prada-text-xs);
color: var(--naily-text-tertiary);
font-family: var(--prada-font-mono);
}
/* ========================================
動畫
======================================== */
@keyframes step-fade-in {
from {
opacity: 0;
transform: translateX(20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* ========================================
響應式設計
======================================== */
@media (max-width: 768px) {
.prada-modal-multistep .step-indicator {
gap: var(--prada-space-2);
}
.prada-modal-multistep .step-label {
display: none;
}
.prada-modal-multistep .step-circle {
width: 28px;
height: 28px;
font-size: var(--prada-text-xs);
}
}
@media (max-width: 480px) {
.prada-modal-multistep .prada-modal-header,
.prada-modal-multistep .prada-modal-body,
.prada-modal-multistep .prada-modal-footer {
padding-left: var(--prada-space-4);
padding-right: var(--prada-space-4);
}
.prada-modal-multistep .prada-modal-footer {
flex-wrap: wrap;
}
.prada-modal-multistep .footer-left,
.prada-modal-multistep .footer-right {
width: 100%;
justify-content: space-between;
}
.prada-modal-multistep .btn-back,
.prada-modal-multistep .btn-cancel {
flex: 1 1;
}
.prada-modal-multistep .btn-next,
.prada-modal-multistep .btn-finish {
flex: 1 1;
}
}
/**
* Prada Modal - Product Detail (商品詳情)
* 用於快速查看商品詳細資訊
*
* 設計特點：
* - 左右分欄佈局（圖片 40% + 資訊 60%）
* - 大圖展示區
* - 完整的商品資訊（價格、規格、庫存）
* - 快速加入購物車
*
* @version 1.0.0
*/
/* ========================================
商品詳情 Modal - 尺寸與佈局
======================================== */
.prada-modal-product .prada-modal-dialog {
max-width: var(--prada-modal-xl); /* 920px */
}
.prada-modal-product .prada-modal-content {
overflow: visible; /* 允許圖片放大效果溢出 */
}
/* ========================================
Header 設計 - 極簡無邊框
======================================== */
.prada-modal-product .prada-modal-header {
position: absolute !important;
top: var(--prada-space-4) !important;
right: var(--prada-space-4) !important;
left: auto !important;
left: initial !important;
padding: 0;
border: none;
background: transparent;
z-index: var(--prada-modal-z-close);
}
.prada-modal-product .prada-modal-close {
background-color: var(--prada-white);
box-shadow: var(--prada-shadow-md);
}
.prada-modal-product .prada-modal-close:hover {
background-color: var(--naily-gray-50);
}
/* ========================================
Body - 分欄佈局
======================================== */
.prada-modal-product .prada-modal-body {
padding: 0;
display: flex;
gap: 0;
max-height: 600px;
}
/* 左側：圖片區 (40%) */
.prada-modal-product .product-gallery {
flex: 0 0 40%;
background-color: var(--naily-gray-50);
display: flex;
flex-direction: column;
overflow: hidden;
}
.prada-modal-product .product-main-image {
flex: 1 1;
display: flex;
align-items: center;
justify-content: center;
padding: var(--prada-space-8);
position: relative;
overflow: hidden;
}
.prada-modal-product .product-image {
max-width: 100%;
max-height: 100%;
object-fit: contain;
cursor: zoom-in;
transition: transform var(--prada-duration-normal) var(--prada-ease-out);
}
.prada-modal-product .product-image:hover {
transform: scale(1.05);
}
/* 圖片縮圖列表 */
.prada-modal-product .product-thumbnails {
display: flex;
gap: var(--prada-space-2);
padding: var(--prada-space-4);
overflow-x: auto;
background-color: var(--prada-white);
}
.prada-modal-product .product-thumbnails::-webkit-scrollbar {
height: 4px;
}
.prada-modal-product .product-thumbnails::-webkit-scrollbar-thumb {
background: var(--naily-gray-400);
border-radius: var(--prada-radius-sm);
}
.prada-modal-product .thumbnail-item {
flex: 0 0 60px;
height: 60px;
border: 2px solid transparent;
border-radius: var(--prada-radius-sm);
overflow: hidden;
cursor: pointer;
transition: border-color var(--prada-duration-fast) var(--prada-ease-out);
}
.prada-modal-product .thumbnail-item:hover {
border-color: var(--naily-gray-400);
}
.prada-modal-product .thumbnail-item.active {
border-color: var(--prada-primary);
}
.prada-modal-product .thumbnail-image {
width: 100%;
height: 100%;
object-fit: cover;
}
/* 右側：商品資訊 (60%) */
.prada-modal-product .product-info {
flex: 0 0 60%;
padding: var(--prada-space-8);
overflow-y: auto;
display: flex;
flex-direction: column;
}
/* 商品標題 */
.prada-modal-product .product-title {
font-size: var(--prada-text-2xl);
font-weight: var(--prada-font-bold);
color: var(--naily-text-primary);
line-height: var(--prada-leading-tight);
margin-bottom: var(--prada-space-2);
}
.prada-modal-product .product-subtitle {
font-size: var(--prada-text-sm);
color: var(--naily-text-secondary);
margin-bottom: var(--prada-space-6);
}
/* 評分 */
.prada-modal-product .product-rating {
display: flex;
align-items: center;
gap: var(--prada-space-2);
margin-bottom: var(--prada-space-6);
}
.prada-modal-product .rating-stars {
display: flex;
gap: 2px;
color: var(--prada-gold);
}
.prada-modal-product .rating-text {
font-size: var(--prada-text-sm);
color: var(--naily-text-tertiary);
}
/* 價格 */
.prada-modal-product .product-price {
display: flex;
align-items: baseline;
gap: var(--prada-space-3);
margin-bottom: var(--prada-space-6);
padding-bottom: var(--prada-space-6);
border-bottom: var(--prada-border-light);
}
.prada-modal-product .price-current {
font-size: var(--prada-text-3xl);
font-weight: var(--prada-font-bold);
color: var(--prada-primary);
}
.prada-modal-product .price-original {
font-size: var(--prada-text-lg);
color: var(--naily-text-tertiary);
text-decoration: line-through;
}
.prada-modal-product .price-discount {
font-size: var(--prada-text-sm);
font-weight: var(--prada-font-semibold);
color: var(--prada-error);
background-color: rgba(239, 68, 68, 0.1);
padding: var(--prada-space-1) var(--prada-space-2);
border-radius: var(--prada-radius-sm);
}
/* 商品描述 */
.prada-modal-product .product-description {
font-size: var(--prada-text-sm);
color: var(--naily-text-secondary);
line-height: var(--prada-leading-relaxed);
margin-bottom: var(--prada-space-6);
}
/* 規格選擇 */
.prada-modal-product .product-options {
margin-bottom: var(--prada-space-6);
}
.prada-modal-product .option-group {
margin-bottom: var(--prada-space-5);
}
.prada-modal-product .option-label {
display: block;
font-size: var(--prada-text-sm);
font-weight: var(--prada-font-semibold);
color: var(--naily-text-primary);
margin-bottom: var(--prada-space-3);
}
.prada-modal-product .option-values {
display: flex;
flex-wrap: wrap;
gap: var(--prada-space-2);
}
.prada-modal-product .option-item {
padding: var(--prada-space-2) var(--prada-space-4);
font-size: var(--prada-text-sm);
color: var(--naily-text-primary);
background-color: var(--prada-white);
border: var(--prada-border-normal);
border-radius: var(--prada-radius-md);
cursor: pointer;
transition: all var(--prada-duration-fast) var(--prada-ease-out);
}
.prada-modal-product .option-item:hover {
border-color: var(--prada-primary);
background-color: rgba(190, 31, 72, 0.05);
}
.prada-modal-product .option-item.active {
border-color: var(--prada-primary);
background-color: var(--prada-primary);
color: var(--prada-white);
}
.prada-modal-product .option-item.disabled {
opacity: 0.4;
cursor: not-allowed;
text-decoration: line-through;
}
/* 數量選擇 */
.prada-modal-product .quantity-selector {
display: flex;
align-items: center;
gap: var(--prada-space-4);
margin-bottom: var(--prada-space-6);
}
.prada-modal-product .quantity-label {
font-size: var(--prada-text-sm);
font-weight: var(--prada-font-semibold);
color: var(--naily-text-primary);
}
.prada-modal-product .quantity-control {
display: flex;
align-items: center;
border: var(--prada-border-normal);
border-radius: var(--prada-radius-md);
overflow: hidden;
}
.prada-modal-product .quantity-btn {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--prada-white);
border: none;
cursor: pointer;
color: var(--naily-text-primary);
transition: background-color var(--prada-duration-fast) var(--prada-ease-out);
}
.prada-modal-product .quantity-btn:hover {
background-color: var(--naily-bg-hover);
}
.prada-modal-product .quantity-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.prada-modal-product .quantity-input {
width: 50px;
height: 32px;
text-align: center;
border: none;
border-left: var(--prada-border-light);
border-right: var(--prada-border-light);
font-size: var(--prada-text-sm);
font-weight: var(--prada-font-medium);
outline: none;
}
.prada-modal-product .stock-status {
font-size: var(--prada-text-xs);
color: var(--naily-text-tertiary);
}
.prada-modal-product .stock-status.in-stock {
color: var(--prada-success);
}
.prada-modal-product .stock-status.low-stock {
color: var(--prada-warning);
}
.prada-modal-product .stock-status.out-of-stock {
color: var(--prada-error);
}
/* ========================================
Footer - 操作按鈕
======================================== */
.prada-modal-product .prada-modal-footer {
padding: var(--prada-space-6) var(--prada-space-8);
border-top: var(--prada-border-light);
display: flex;
gap: var(--prada-space-3);
}
.prada-modal-product .btn-add-cart {
flex: 1 1;
padding: var(--prada-space-3) var(--prada-space-6);
font-size: var(--prada-text-base);
font-weight: var(--prada-font-semibold);
color: var(--prada-white);
background-color: var(--prada-primary);
border: none;
border-radius: var(--prada-radius-md);
cursor: pointer;
transition: all var(--prada-duration-fast) var(--prada-ease-out);
}
.prada-modal-product .btn-add-cart:hover {
background-color: var(--prada-primary-dark);
box-shadow: var(--prada-shadow-primary);
}
.prada-modal-product .btn-buy-now {
flex: 1 1;
padding: var(--prada-space-3) var(--prada-space-6);
font-size: var(--prada-text-base);
font-weight: var(--prada-font-semibold);
color: var(--prada-primary);
background-color: var(--prada-white);
border: 2px solid var(--prada-primary);
border-radius: var(--prada-radius-md);
cursor: pointer;
transition: all var(--prada-duration-fast) var(--prada-ease-out);
}
.prada-modal-product .btn-buy-now:hover {
background-color: var(--prada-primary);
color: var(--prada-white);
}
/* ========================================
響應式設計
======================================== */
@media (max-width: 768px) {
.prada-modal-product .prada-modal-body {
flex-direction: column;
max-height: 80vh;
}
.prada-modal-product .product-gallery,
.prada-modal-product .product-info {
flex: 1 1 auto;
}
.prada-modal-product .product-gallery {
max-height: 300px;
}
.prada-modal-product .product-info {
padding: var(--prada-space-5);
}
.prada-modal-product .prada-modal-footer {
padding: var(--prada-space-4) var(--prada-space-5);
}
}
@media (max-width: 480px) {
.prada-modal-product .product-title {
font-size: var(--prada-text-xl);
}
.prada-modal-product .price-current {
font-size: var(--prada-text-2xl);
}
.prada-modal-product .prada-modal-footer {
flex-direction: column;
}
.prada-modal-product .btn-add-cart,
.prada-modal-product .btn-buy-now {
width: 100%;
}
}
/**
* Prada Modal - Order Success (訂單成功)
* 用於顯示訂單成功訊息和後續動作
*
* 設計特點：
* - 慶祝式視覺設計
* - 清晰的訂單號碼
* - 明確的下一步動作
* - 品牌色強調
*
* @version 1.0.0
*/
/* ========================================
訂單成功 Modal - 尺寸與佈局
======================================== */
.prada-modal-success .prada-modal-dialog {
max-width: var(--prada-modal-sm); /* 440px */
}
.prada-modal-success .prada-modal-content {
text-align: center;
overflow: visible;
}
/* ========================================
Header 設計 - 最小化
======================================== */
.prada-modal-success .prada-modal-header {
position: absolute !important;
top: var(--prada-space-4) !important;
right: var(--prada-space-4) !important;
left: auto !important;
left: initial !important;
padding: 0;
border: none;
z-index: var(--prada-modal-z-close);
}
/* ========================================
Body - 成功訊息區域
======================================== */
.prada-modal-success .prada-modal-body {
padding: var(--prada-space-12) var(--prada-modal-padding-md) var(--prada-space-8);
}
/* 成功圖示動畫 */
.prada-modal-success .success-icon-wrapper {
position: relative;
width: 100px;
height: 100px;
margin: 0 auto var(--prada-space-6);
}
.prada-modal-success .success-circle {
width: 100px;
height: 100px;
border-radius: 50%;
background: linear-gradient(135deg,
rgba(190, 31, 72, 0.1) 0%,
rgba(190, 31, 72, 0.05) 100%
);
display: flex;
align-items: center;
justify-content: center;
position: relative;
animation: success-scale-in 0.5s var(--prada-ease-out);
}
.prada-modal-success .success-checkmark {
width: 50px;
height: 50px;
color: var(--prada-primary);
animation: success-checkmark-in 0.6s 0.3s var(--prada-ease-out) both;
}
/* 裝飾性圓環 */
.prada-modal-success .success-ring {
position: absolute;
width: 100%;
height: 100%;
border: 3px solid var(--prada-primary);
border-radius: 50%;
opacity: 0;
animation: success-ring-pulse 1.5s 0.5s ease-out;
}
/* 成功標題 */
.prada-modal-success .success-title {
font-size: var(--prada-text-2xl);
font-weight: var(--prada-font-bold);
color: var(--prada-primary);
margin-bottom: var(--prada-space-3);
animation: success-fade-up 0.5s 0.4s var(--prada-ease-out) both;
}
.prada-modal-success .success-message {
font-size: var(--prada-text-base);
color: var(--naily-text-secondary);
line-height: var(--prada-leading-relaxed);
margin-bottom: var(--prada-space-6);
animation: success-fade-up 0.5s 0.5s var(--prada-ease-out) both;
}
/* 訂單資訊卡片 */
.prada-modal-success .order-info-card {
padding: var(--prada-space-5);
background: linear-gradient(135deg,
rgba(190, 31, 72, 0.03) 0%,
rgba(255, 255, 255, 1) 100%
);
border: var(--prada-border-light);
border-radius: var(--prada-radius-lg);
margin-bottom: var(--prada-space-6);
animation: success-fade-up 0.5s 0.6s var(--prada-ease-out) both;
}
.prada-modal-success .order-number-label {
font-size: var(--prada-text-xs);
color: var(--naily-text-tertiary);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: var(--prada-space-2);
}
.prada-modal-success .order-number {
font-size: var(--prada-text-xl);
font-weight: var(--prada-font-bold);
color: var(--prada-primary);
font-family: var(--prada-font-mono);
letter-spacing: 0.02em;
margin-bottom: var(--prada-space-4);
}
/* 訂單詳情 */
.prada-modal-success .order-details {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: var(--prada-space-3);
gap: var(--prada-space-3);
text-align: left;
}
.prada-modal-success .detail-item {
display: flex;
flex-direction: column;
gap: var(--prada-space-1);
}
.prada-modal-success .detail-label {
font-size: var(--prada-text-xs);
color: var(--naily-text-tertiary);
}
.prada-modal-success .detail-value {
font-size: var(--prada-text-sm);
font-weight: var(--prada-font-medium);
color: var(--naily-text-primary);
}
/* 下一步提示 */
.prada-modal-success .next-steps {
padding: var(--prada-space-4);
background-color: var(--naily-bg-secondary);
border-radius: var(--prada-radius-md);
margin-bottom: var(--prada-space-6);
text-align: left;
animation: success-fade-up 0.5s 0.7s var(--prada-ease-out) both;
}
.prada-modal-success .next-steps-title {
font-size: var(--prada-text-sm);
font-weight: var(--prada-font-semibold);
color: var(--naily-text-primary);
margin-bottom: var(--prada-space-3);
}
.prada-modal-success .next-steps-list {
display: flex;
flex-direction: column;
gap: var(--prada-space-2);
}
.prada-modal-success .next-step-item {
display: flex;
align-items: flex-start;
gap: var(--prada-space-2);
font-size: var(--prada-text-sm);
color: var(--naily-text-secondary);
line-height: var(--prada-leading-relaxed);
}
.prada-modal-success .step-icon {
flex: 0 0 20px;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--prada-primary);
color: var(--prada-white);
border-radius: 50%;
font-size: var(--prada-text-xs);
font-weight: var(--prada-font-bold);
}
/* ========================================
Footer - 操作按鈕
======================================== */
.prada-modal-success .prada-modal-footer {
flex-direction: column;
padding: var(--prada-space-6) var(--prada-modal-padding-md) var(--prada-space-8);
border-top: none;
gap: var(--prada-space-3);
animation: success-fade-up 0.5s 0.8s var(--prada-ease-out) both;
}
.prada-modal-success .btn-primary-action {
width: 100%;
padding: var(--prada-space-3) var(--prada-space-6);
font-size: var(--prada-text-base);
font-weight: var(--prada-font-semibold);
color: var(--prada-white);
background-color: var(--prada-primary);
border: none;
border-radius: var(--prada-radius-md);
cursor: pointer;
transition: all var(--prada-duration-fast) var(--prada-ease-out);
}
.prada-modal-success .btn-primary-action:hover {
background-color: var(--prada-primary-dark);
box-shadow: var(--prada-shadow-primary);
}
.prada-modal-success .btn-secondary-action {
width: 100%;
padding: var(--prada-space-3) var(--prada-space-6);
font-size: var(--prada-text-sm);
font-weight: var(--prada-font-medium);
color: var(--prada-primary);
background-color: rgba(190, 31, 72, 0.1);
border: none;
border-radius: var(--prada-radius-md);
cursor: pointer;
transition: all var(--prada-duration-fast) var(--prada-ease-out);
}
.prada-modal-success .btn-secondary-action:hover {
background-color: rgba(190, 31, 72, 0.15);
}
.prada-modal-success .btn-text-action {
font-size: var(--prada-text-sm);
color: var(--naily-text-tertiary);
background: none;
border: none;
cursor: pointer;
padding: var(--prada-space-2);
transition: color var(--prada-duration-fast) var(--prada-ease-out);
}
.prada-modal-success .btn-text-action:hover {
color: var(--prada-primary);
text-decoration: underline;
}
/* ========================================
動畫定義
======================================== */
@keyframes success-scale-in {
0% {
transform: scale(0.8);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}
@keyframes success-checkmark-in {
0% {
transform: scale(0);
opacity: 0;
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
opacity: 1;
}
}
@keyframes success-ring-pulse {
0% {
transform: scale(1);
opacity: 0.5;
}
100% {
transform: scale(1.5);
opacity: 0;
}
}
@keyframes success-fade-up {
0% {
transform: translateY(20px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
/* ========================================
響應式設計
======================================== */
@media (max-width: 480px) {
.prada-modal-success .prada-modal-body {
padding: var(--prada-space-8) var(--prada-space-4) var(--prada-space-6);
}
.prada-modal-success .success-icon-wrapper {
width: 80px;
height: 80px;
}
.prada-modal-success .success-circle {
width: 80px;
height: 80px;
}
.prada-modal-success .success-checkmark {
width: 40px;
height: 40px;
}
.prada-modal-success .success-title {
font-size: var(--prada-text-xl);
}
.prada-modal-success .order-details {
grid-template-columns: 1fr;
}
.prada-modal-success .prada-modal-footer {
padding: var(--prada-space-4) var(--prada-space-4) var(--prada-space-6);
}
}
/* ========================================
減少動畫偏好支援
======================================== */
@media (prefers-reduced-motion: reduce) {
.prada-modal-success .success-circle,
.prada-modal-success .success-checkmark,
.prada-modal-success .success-ring,
.prada-modal-success .success-title,
.prada-modal-success .success-message,
.prada-modal-success .order-info-card,
.prada-modal-success .next-steps,
.prada-modal-success .prada-modal-footer {
animation: none;
opacity: 1;
transform: none;
}
}
/**
* Prada Modal System - Unified Import
* 統一導入所有 Prada Modal 樣式
*
* 使用方式：
* import 'assets/css/prada/prada-modals.css';
*
* 或者根據需要選擇性導入：
* import 'assets/css/prada/prada-design-tokens.css';
* import 'assets/css/prada/prada-modal-base.css';
* import 'assets/css/prada/prada-modal-auth.css';
*
* @version 1.0.0
* @date 2026-01-28
*/
/* ========================================
核心系統
======================================== */
/* 設計 Token 系統 - 必須最先載入 */
/* 基礎 Modal 樣式 - 第二優先 */
/* ========================================
場景專用 Modal (按字母順序)
======================================== */
/* 1. 地址管理器 - Address Manager */
/* 2. 會員認證 - Authentication */
/* 3. 購物車總覽 - Cart Summary */
/* 4. 即時客服 - Live Chat */
/* 5. 結帳確認 - Checkout Confirmation */
/* 6. 確認對話框 - Confirmation Dialog */
/* 7. 優惠券選擇器 - Coupon Selector */
/* 8. 篩選面板 - Filter Panel */
/* 9. 圖片畫廊 - Image Gallery */
/* 10. 多步驟流程 - Multi-Step Modal */
/* 11. 商品詳情 - Product Detail */
/* 12. 訂單成功 - Order Success */
/**
* ========================================
* 檔案清單
* ========================================
*
* 核心檔案 (2):
* - prada-design-tokens.css (4.2 KB) - 設計變數系統
* - prada-modal-base.css (9.8 KB) - 基礎 Modal 樣式
*
* 場景檔案 (12):
* - prada-modal-address.css - 地址管理器
* - prada-modal-auth.css - 會員認證
* - prada-modal-cart.css - 購物車總覽
* - prada-modal-chat.css - 即時客服
* - prada-modal-checkout.css - 結帳確認
* - prada-modal-confirm.css - 確認對話框
* - prada-modal-coupon.css - 優惠券選擇器
* - prada-modal-filter.css - 篩選面板
* - prada-modal-gallery.css - 圖片畫廊
* - prada-modal-multistep.css - 多步驟流程
* - prada-modal-product.css - 商品詳情
* - prada-modal-success.css - 訂單成功
*
* ========================================
* 設計原則
* ========================================
*
* 1. 零技術債
* - 所有色彩引用 Naily 設計系統
* - 所有 z-index 使用統一變數
* - 無硬編碼值
*
* 2. 品牌一致性
* - 使用 Naily 深紅色 (#BE1F48) 作為主色
* - 統一圓角、間距、陰影
*
* 3. 無障礙支援
* - 符合 WCAG 2.1 AA 標準
* - 鍵盤導航支援
* - 高對比度模式
* - 減少動畫偏好
*
* 4. 響應式設計
* - 手機優先設計
* - 三個斷點 (桌面、平板、手機)
*
* 5. 效能優化
* - CSS 變數優化
* - 無重複樣式
* - 合理的選擇器權重
*/
/**
* MemberBootstrapModal Styles
* 會員端 Bootstrap Modal 組件樣式
*
* 修復問題：
* 1. 添加缺失的 fade 動畫效果
* 2. 添加 RWD 響應式支援
* 3. 優化 modal-xl 在各尺寸的表現
*/
/* ========================================
Modal Backdrop - 背景遮罩
======================================== */
.member-modal-backdrop {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: 3000;
opacity: 0;
pointer-events: none;
transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.member-modal-backdrop.show {
opacity: 1;
pointer-events: auto;
}
.member-modal-backdrop.fade {
opacity: 0;
pointer-events: none;
}
/* ========================================
Modal Container - Modal 主容器
======================================== */
.member-bootstrap-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 3010;
overflow-x: hidden;
overflow-y: auto;
outline: 0;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.member-bootstrap-modal.show {
opacity: 1;
pointer-events: auto;
}
.member-bootstrap-modal.fade {
opacity: 0;
pointer-events: none;
}
.member-bootstrap-modal.hiding {
opacity: 0;
pointer-events: none;
}
/* 置中對齊 */
.member-bootstrap-modal.modal-centered {
display: flex;
align-items: center;
justify-content: center;
}
/* ========================================
Modal Dialog - 對話框
======================================== */
.member-bootstrap-modal .modal-dialog {
position: relative;
width: auto;
margin: 1rem;
pointer-events: none;
transform: scale(0.95) translateY(-20px);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.member-bootstrap-modal.show .modal-dialog {
transform: scale(1) translateY(0);
pointer-events: auto;
}
.member-bootstrap-modal.hiding .modal-dialog {
transform: scale(0.95) translateY(-20px);
}
/* Modal Dialog 尺寸變體 */
.member-bootstrap-modal .modal-dialog.modal-sm {
max-width: 400px;
}
.member-bootstrap-modal .modal-dialog.modal-md {
max-width: 600px;
}
.member-bootstrap-modal .modal-dialog.modal-lg {
max-width: 800px;
}
.member-bootstrap-modal .modal-dialog.modal-xl {
max-width: 1140px;
width: calc(100% - 2rem);
}
/* ========================================
Modal Content - 內容區域
======================================== */
.member-bootstrap-modal .modal-content {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
pointer-events: auto;
background-color: #ffffff;
background-clip: padding-box;
border: none;
border-radius: 16px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
outline: 0;
overflow: hidden;
}
/* ========================================
Modal Header
======================================== */
.member-bootstrap-modal .modal-header {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: space-between;
padding: 1.25rem 1.5rem;
border-bottom: 1px solid #e5e7eb;
}
.member-bootstrap-modal .modal-title {
margin: 0;
font-size: 1.25rem;
font-weight: 600;
line-height: 1.5;
color: #1f2937;
}
/* ========================================
Modal Body
======================================== */
.member-bootstrap-modal .modal-body {
position: relative;
flex: 1 1 auto;
padding: 1.5rem;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/* 滾動條樣式 */
.member-bootstrap-modal .modal-body::-webkit-scrollbar {
width: 6px;
}
.member-bootstrap-modal .modal-body::-webkit-scrollbar-track {
background: #f3f4f6;
border-radius: 3px;
}
.member-bootstrap-modal .modal-body::-webkit-scrollbar-thumb {
background: #d1d5db;
border-radius: 3px;
}
.member-bootstrap-modal .modal-body::-webkit-scrollbar-thumb:hover {
background: #9ca3af;
}
/* ========================================
Modal Footer
======================================== */
.member-bootstrap-modal .modal-footer {
display: flex;
flex-wrap: wrap;
flex-shrink: 0;
align-items: center;
justify-content: flex-end;
padding: 1rem 1.5rem;
border-top: 1px solid #e5e7eb;
gap: 0.75rem;
}
/* ========================================
Close Button
======================================== */
.member-bootstrap-modal .btn-close {
position: relative;
width: 32px;
height: 32px;
padding: 0;
background: transparent;
border: none;
border-radius: 50%;
opacity: 1;
color: #6b7280;
font-size: 1.25rem;
cursor: pointer;
transition: all 0.15s ease-out;
display: flex;
align-items: center;
justify-content: center;
}
.member-bootstrap-modal .btn-close:hover {
background: #f3f4f6;
color: #1f2937;
transform: scale(1.1);
}
.member-bootstrap-modal .btn-close:focus {
outline: 2px solid var(--primary-color);
outline-offset: 2px;
box-shadow: none;
}
/* ========================================
Loading Spinner
======================================== */
.member-bootstrap-modal .modal-loading {
display: flex;
align-items: center;
justify-content: center;
min-height: 200px;
}
.member-bootstrap-modal .spinner {
width: 40px;
height: 40px;
border: 3px solid #f3f4f6;
border-top-color: var(--primary-color);
border-radius: 50%;
animation: memberModalSpin 0.8s linear infinite;
}
@keyframes memberModalSpin {
to {
transform: rotate(360deg);
}
}
/* ========================================
響應式設計 - 平板 (768px - 991px)
======================================== */
@media (min-width: 768px) and (max-width: 991px) {
.member-bootstrap-modal .modal-dialog.modal-xl {
max-width: 90%;
width: 90%;
margin: 1.5rem auto;
}
}
/* ========================================
響應式設計 - 中等螢幕 (≥992px)
======================================== */
@media (min-width: 992px) {
.member-bootstrap-modal .modal-dialog {
margin: 2rem auto;
}
.member-bootstrap-modal .modal-dialog.modal-xl {
max-width: 1100px;
width: calc(100% - 4rem);
}
}
/* ========================================
響應式設計 - 大螢幕 (≥1200px)
======================================== */
@media (min-width: 1200px) {
.member-bootstrap-modal .modal-dialog.modal-xl {
max-width: 1140px;
}
}
/* ========================================
響應式設計 - 手機 (< 768px)
======================================== */
@media (max-width: 767px) {
.member-bootstrap-modal .modal-dialog {
margin: 0.5rem;
max-width: calc(100% - 1rem);
}
.member-bootstrap-modal .modal-dialog.modal-sm,
.member-bootstrap-modal .modal-dialog.modal-md,
.member-bootstrap-modal .modal-dialog.modal-lg,
.member-bootstrap-modal .modal-dialog.modal-xl {
max-width: calc(100% - 1rem);
width: calc(100% - 1rem);
}
.member-bootstrap-modal .modal-content {
border-radius: 12px;
}
.member-bootstrap-modal .modal-header {
padding: 1rem;
}
.member-bootstrap-modal .modal-body {
padding: 1rem;
max-height: calc(100vh - 120px);
}
.member-bootstrap-modal .modal-footer {
padding: 0.75rem 1rem;
flex-direction: column-reverse;
}
.member-bootstrap-modal .modal-footer > * {
width: 100%;
}
}
/* ========================================
手勢提示條（下滑關閉）
======================================== */
.modal-swipe-indicator {
display: none; /* 桌面版隱藏 */
width: 100%;
padding: 8px 0;
position: absolute;
top: 0;
left: 0;
z-index: 10;
cursor: grab;
}
.modal-swipe-bar {
width: 40px;
height: 4px;
background: #d1d5db;
border-radius: 2px;
margin: 0 auto;
transition: background 0.2s ease;
}
.modal-swipe-indicator:active .modal-swipe-bar {
background: #9ca3af;
}
/* 平板和手機顯示手勢提示條 */
@media (max-width: 1199px) {
.modal-swipe-indicator {
display: block;
}
.member-bootstrap-modal .modal-content {
padding-top: 20px; /* 為手勢條預留空間 */
}
}
/* ========================================
Body 滾動鎖定
======================================== */
body.member-modal-open {
overflow: hidden;
}
/* ========================================
無障礙支援
======================================== */
.member-bootstrap-modal *:focus-visible {
outline: 2px solid var(--primary-color);
outline-offset: 2px;
}
/* ========================================
減少動畫偏好支援
======================================== */
@media (prefers-reduced-motion: reduce) {
.member-modal-backdrop,
.member-bootstrap-modal,
.member-bootstrap-modal .modal-dialog,
.member-bootstrap-modal .btn-close {
transition: none;
}
.member-bootstrap-modal .spinner {
animation: none;
}
}
/* ========================================
效能優化
======================================== */
.member-bootstrap-modal .modal-dialog {
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.member-bootstrap-modal .modal-content {
transform: translateZ(0);
will-change: transform, opacity;
}
.member-modal-backdrop,
.member-bootstrap-modal .modal-dialog {
contain: layout style paint;
}
/**
* SystemMaintenanceOverlay.css
* Prada 風格系統維護全屏畫面
*
* 設計原則：
* - 極簡主義，不使用 Emoji
* - Prada 品牌色彩系統
* - Helvetica Neue 字體
* - 優雅的動畫過渡
* - 響應式設計
*/
/* ==================== Prada 色彩變數 ==================== */
:root {
--prada-black: #000000;
--prada-white: #FFFFFF;
--prada-gray-light: #F5F5F5;
--prada-gray-medium: #E0E0E0;
--prada-gray-dark: #666666;
--prada-brand-red: #8B0000;
--prada-brand-red-dark: #6B0000;
--prada-shadow-medium: rgba(0, 0, 0, 0.1);
}
/* ==================== 全屏遮罩層 ==================== */
.maintenance-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.92);
z-index: 6020;
z-index: var(--z-system-maintenance, 6020);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
animation: naily-fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
overflow-y: auto;
}
.maintenance-overlay.closing {
animation: naily-fadeOut 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* ==================== 主卡片容器 ==================== */
.maintenance-card {
background: #FFFFFF;
background: var(--prada-white);
max-width: 520px;
width: 100%;
padding: 48px 40px;
border-radius: 2px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
text-align: center;
animation: slideDown 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
}
/* ==================== 關閉按鈕 ==================== */
.maintenance-close-button {
position: absolute;
top: 20px;
right: 20px;
width: 32px;
height: 32px;
background: transparent;
border: none;
font-size: 1.5rem;
color: #666666;
color: var(--prada-gray-dark);
cursor: pointer;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
line-height: 1;
padding: 0;
z-index: var(--z-normal);
}
.maintenance-close-button:hover {
background: #F5F5F5;
background: var(--prada-gray-light);
color: #000000;
color: var(--prada-black);
}
.maintenance-close-button:active {
background: #E0E0E0;
background: var(--prada-gray-medium);
transform: scale(0.95);
}
.maintenance-close-button:focus {
outline: 2px solid currentColor;
outline-offset: 2px;
}
.maintenance-close-button:focus:not(:focus-visible) {
outline: none;
}
.maintenance-close-button:focus-visible {
outline: 2px solid #8B0000;
outline: 2px solid var(--prada-brand-red);
outline-offset: 2px;
}
/* ==================== 圖標區域 ==================== */
.maintenance-icon {
width: 64px;
height: 64px;
margin: 0 auto 24px;
display: flex;
align-items: center;
justify-content: center;
}
.maintenance-icon svg {
width: 100%;
height: 100%;
}
/* ==================== 標題區 ==================== */
.maintenance-title {
font-family: 'Helvetica Neue', 'Arial', sans-serif;
font-size: 24px;
font-weight: 300;
letter-spacing: 3px;
text-transform: uppercase;
color: #000000;
color: var(--prada-black);
margin-bottom: 8px;
line-height: 1.3;
}
.maintenance-subtitle {
font-family: 'Helvetica Neue', 'Arial', sans-serif;
font-size: 18px;
font-weight: 400;
letter-spacing: 0.5px;
color: #666666;
color: var(--prada-gray-dark);
margin-bottom: 32px;
}
/* ==================== 內文區 ==================== */
.maintenance-description {
font-family: 'Helvetica Neue', 'Arial', sans-serif;
font-size: 15px;
line-height: 1.8;
color: #666666;
color: var(--prada-gray-dark);
letter-spacing: 0.3px;
margin: 32px 0;
text-align: center;
}
.maintenance-description p {
margin: 0 0 12px 0;
}
.maintenance-description p:last-child {
margin-bottom: 0;
}
/* ==================== 按鈕區域 ==================== */
.maintenance-buttons {
display: flex;
gap: 16px;
justify-content: center;
margin: 32px 0 24px;
}
.maintenance-button {
font-family: 'Helvetica Neue', 'Arial', sans-serif;
font-size: 13px;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
padding: 14px 32px;
border: 1px solid #8B0000;
border: 1px solid var(--prada-brand-red);
background: #8B0000;
background: var(--prada-brand-red);
color: #FFFFFF;
color: var(--prada-white);
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border-radius: 2px;
outline: none;
}
.maintenance-button:hover {
background: #6B0000;
background: var(--prada-brand-red-dark);
border-color: #6B0000;
border-color: var(--prada-brand-red-dark);
box-shadow: 0 4px 12px rgba(139, 0, 0, 0.25);
transform: translateY(-1px);
}
.maintenance-button:active {
transform: translateY(0);
box-shadow: 0 2px 6px rgba(139, 0, 0, 0.2);
}
.maintenance-button:focus {
outline: 2px solid currentColor;
outline-offset: 2px;
}
.maintenance-button:focus:not(:focus-visible) {
outline: none;
}
.maintenance-button:focus-visible {
outline: 2px solid #8B0000;
outline: 2px solid var(--prada-brand-red);
outline-offset: 2px;
}
.maintenance-button:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
}
.maintenance-button-secondary {
background: transparent;
color: #8B0000;
color: var(--prada-brand-red);
border: 1px solid #8B0000;
border: 1px solid var(--prada-brand-red);
}
.maintenance-button-secondary:hover {
background: #F5F5F5;
background: var(--prada-gray-light);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.maintenance-button-secondary:active {
background: #E0E0E0;
background: var(--prada-gray-medium);
}
/* ==================== 底部文字 ==================== */
.maintenance-footer-text {
font-family: 'Helvetica Neue', 'Arial', sans-serif;
font-size: 13px;
color: #666666;
color: var(--prada-gray-dark);
letter-spacing: 0.3px;
margin-top: 32px;
opacity: 0.8;
line-height: 1.6;
}
/* ==================== 載入狀態 ==================== */
.maintenance-button-loading {
position: relative;
color: transparent;
pointer-events: none;
}
.maintenance-button-loading::after {
content: '';
position: absolute;
width: 16px;
height: 16px;
top: 50%;
left: 50%;
margin-left: -8px;
margin-top: -8px;
border: 2px solid #FFFFFF;
border: 2px solid var(--prada-white);
border-radius: 50%;
border-top-color: transparent;
animation: naily-spin 0.6s linear infinite;
}
.maintenance-button-secondary.maintenance-button-loading::after {
border-color: #8B0000;
border-color: var(--prada-brand-red);
border-top-color: transparent;
}
/* ==================== 動畫定義 ==================== */
@keyframes naily-fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes naily-fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes naily-spin {
to {
transform: rotate(360deg);
}
}
/* ==================== 響應式設計 ==================== */
/* 平板及以下 (≤ 768px) */
@media (max-width: 768px) {
.maintenance-card {
max-width: 400px;
padding: 36px 28px;
}
.maintenance-icon {
width: 56px;
height: 56px;
margin-bottom: 20px;
}
.maintenance-title {
font-size: 20px;
letter-spacing: 2px;
}
.maintenance-subtitle {
font-size: 16px;
margin-bottom: 24px;
}
.maintenance-description {
font-size: 14px;
margin: 24px 0;
}
.maintenance-buttons {
flex-direction: column;
gap: 12px;
margin: 24px 0 20px;
}
.maintenance-button {
width: 100%;
padding: 16px 24px;
}
.maintenance-footer-text {
font-size: 12px;
margin-top: 24px;
}
}
/* 小型手機 (≤ 375px) */
@media (max-width: 375px) {
.maintenance-card {
padding: 28px 20px;
}
.maintenance-title {
font-size: 18px;
letter-spacing: 1.5px;
}
.maintenance-subtitle {
font-size: 15px;
}
.maintenance-description {
font-size: 13px;
}
.maintenance-button {
font-size: 12px;
padding: 14px 20px;
}
}
/* 超大螢幕 (≥ 1200px) */
@media (min-width: 1200px) {
.maintenance-card {
max-width: 560px;
padding: 56px 48px;
}
.maintenance-icon {
width: 72px;
height: 72px;
margin-bottom: 28px;
}
.maintenance-title {
font-size: 26px;
}
.maintenance-subtitle {
font-size: 19px;
}
.maintenance-description {
font-size: 16px;
}
}
/* ==================== 可訪問性 ==================== */
/* 減少動畫偏好 */
@media (prefers-reduced-motion: reduce) {
.maintenance-overlay,
.maintenance-card,
.maintenance-button {
animation: none;
transition: none;
}
}
/* 高對比度模式 */
@media (prefers-contrast: high) {
.maintenance-card {
border: 2px solid #000000;
border: 2px solid var(--prada-black);
}
.maintenance-button {
border-width: 2px;
}
}
/* 深色模式支援 (可選) */
@media (prefers-color-scheme: dark) {
/* 保持淺色主題，符合 Prada 品牌識別 */
/* 如需深色模式，可在此添加樣式 */
}
/* ==================== 打印樣式 ==================== */
@media print {
.maintenance-overlay {
display: none;
}
}
/**
* PreRegBanner 樣式
*
* @description
* 預註冊Banner的專用樣式，包含動畫效果和響應式設計
*/
/* ==================== Banner 主體樣式 ==================== */
.prereg-banner {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: var(--z-modal);
animation: slideDown 0.5s ease-out forwards;
transform-origin: top center;
}
.prereg-banner--closing {
animation: slideUp 0.3s ease-in forwards;
}
.prereg-banner__alert {
transition: all 0.3s ease;
}
/* ==================== 動畫效果 ==================== */
@keyframes slideDown {
from {
transform: translateY(-100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes slideUp {
from {
transform: translateY(0);
opacity: 1;
}
to {
transform: translateY(-100%);
opacity: 0;
}
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
/* ==================== 圖示動畫 ==================== */
.prereg-banner__icon {
animation: pulse 2s infinite ease-in-out;
}
.prereg-banner__icon:hover {
animation-play-state: paused;
transform: scale(1.2);
transition: transform 0.2s ease;
}
/* ==================== 按鈕樣式 ==================== */
.prereg-banner__cta-btn {
transition: all 0.2s ease;
font-weight: 600;
}
.prereg-banner__cta-btn:hover {
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.prereg-banner__cta-btn:active {
transform: scale(0.98);
}
.prereg-banner__close-btn {
transition: all 0.2s ease;
border-radius: 50%;
}
.prereg-banner__close-btn:hover {
background-color: rgba(255, 255, 255, 0.1);
transform: rotate(90deg);
}
.prereg-banner__close-btn:focus {
outline: 2px solid rgba(255, 255, 255, 0.5);
outline-offset: 2px;
}
/* ==================== 響應式設計 ==================== */
/* 大螢幕 */
@media (min-width: 1200px) {
.prereg-banner .container-fluid {
max-width: 1200px;
margin: 0 auto;
}
}
/* 中等螢幕 */
@media (max-width: 991.98px) {
.prereg-banner__alert {
font-size: 0.9rem;
}
.prereg-banner .fw-bold {
font-size: 0.95rem;
}
}
/* 小螢幕 */
@media (max-width: 767.98px) {
.prereg-banner {
position: -webkit-sticky;
position: sticky;
top: 0;
}
.prereg-banner__alert {
font-size: 0.85rem;
padding: 12px 0;
}
.prereg-banner .fw-bold {
font-size: 0.9rem;
}
.prereg-banner .small {
font-size: 0.8rem;
}
/* 手機版按鈕調整 */
.prereg-banner__cta-btn {
font-size: 0.8rem;
padding: 6px 14px;
}
/* 隱藏稍後按鈕在極小螢幕上 */
@media (max-width: 575.98px) {
.d-sm-inline-flex {
display: none;
}
}
}
/* 超小螢幕 */
@media (max-width: 575.98px) {
.prereg-banner__alert {
font-size: 0.8rem;
padding: 10px 0;
}
.prereg-banner .fw-bold {
font-size: 0.85rem;
}
.prereg-banner__cta-btn {
font-size: 0.75rem;
padding: 5px 12px;
}
.prereg-banner__icon {
width: 20px;
height: 20px;
}
}
/* 深色模式规则已移除 - 确保所有用户都看到统一的浅色界面 */
/* ==================== 無障礙設計 ==================== */
/* 高對比模式 */
@media (prefers-contrast: high) {
.prereg-banner__alert {
border: 2px solid rgba(255, 255, 255, 0.8);
}
.prereg-banner__cta-btn {
border: 2px solid var(--naily-accent-light);
}
.prereg-banner__close-btn:focus {
outline: 3px solid #ffffff;
outline-offset: 2px;
}
}
/* 減少動畫 */
@media (prefers-reduced-motion: reduce) {
.prereg-banner,
.prereg-banner--closing,
.prereg-banner__icon,
.prereg-banner__cta-btn,
.prereg-banner__close-btn {
animation: none;
transition: none;
}
.prereg-banner__icon:hover,
.prereg-banner__cta-btn:hover,
.prereg-banner__close-btn:hover {
transform: none;
}
}
/* ==================== 打印樣式 ==================== */
@media print {
.prereg-banner {
display: none;
}
}
/* ==================== Z-index 管理 ==================== */
.prereg-banner {
z-index: var(--z-modal); /* 確保在其他內容之上，但低於 Modal (1055) */
}
/* 如果需要在特定情況下提高優先級 */
.prereg-banner--priority {
z-index: var(--z-modal-fullscreen);
}
/* ==================== 狀態指示器 ==================== */
.prereg-banner--success {
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}
.prereg-banner--warning {
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}
.prereg-banner--error {
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}
/* ==================== 載入狀態 ==================== */
.prereg-banner--loading .prereg-banner__cta-btn {
opacity: 0.7;
cursor: not-allowed;
}
.prereg-banner--loading .prereg-banner__cta-btn:hover {
transform: none;
}
/* ==================== 特殊效果 ==================== */
/* 背景光暈效果（可選） */
.prereg-banner--glow {
box-shadow:
0 2px 20px rgba(233, 102, 135, 0.3),
0 0 40px rgba(233, 102, 135, 0.1);
}
/* 漸變邊框效果（可選） */
.prereg-banner--gradient-border::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg,
transparent 0%,
rgba(255, 255, 255, 0.5) 20%,
rgba(255, 255, 255, 0.8) 50%,
rgba(255, 255, 255, 0.5) 80%,
transparent 100%);
animation: shimmer 3s infinite linear;
}
@keyframes shimmer {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}