/** * ======================================================================= * THEME SYSTEM CSS - CSS Variables & Utility Classes * ======================================================================= * * ระบบ Theme ใช้ CSS Variables ภายใต้ Theme Class บน * เปลี่ยน Theme ทั้งระบบได้โดยเปลี่ยน Class บน เพียงจุดเดียว * * Usage: * * Available Themes: * - .theme-forest (🌲 โทนเขียว - Default) * - .theme-ocean (🌊 โทนน้ำเงิน) * - .theme-sunset (🌅 โทนส้มทอง) * - .theme-luxury (✨ โทนดำทอง) * ======================================================================= */ /* ======================================================================= THEME DEFINITIONS - CSS Variables สำหรับแต่ละ Theme ======================================================================= */ /* Default Theme (fallback) */ :root { /* Base colors */ --theme-primary: #508D4E; --theme-primary-rgb: 80, 141, 78; --theme-primary-hover: #1A5319; --theme-primary-light: #D6EFD8; --theme-secondary: #80AF81; --theme-secondary-rgb: 128, 175, 129; --theme-secondary-hover: #508D4E; --theme-accent: #1A5319; /* Status colors */ --theme-success: #10b981; --theme-success-light: #d1fae5; --theme-warning: #f59e0b; --theme-warning-light: #fef3c7; --theme-danger: #ef4444; --theme-danger-light: #fee2e2; --theme-info: #3b82f6; --theme-info-light: #dbeafe; /* Text colors - Theme Specific */ --theme-text-heading: #1A5319; --theme-text-body: #2d4a2c; --theme-text-muted: #508D4E; --theme-text-light: #80AF81; --theme-text-white: #ffffff; /* Background colors */ --theme-bg-body: #ffffff; --theme-bg-light: #f8f9fa; --theme-bg-card: #ffffff; --theme-bg-header: #ffffff; --theme-bg-footer: #1A5319; /* Border colors */ --theme-border: #e5e7eb; --theme-border-dark: #d1d5db; /* Gradients */ --theme-gradient: linear-gradient(135deg, #508D4E 0%, #1A5319 100%); --theme-gradient-subtle: linear-gradient(180deg, #ffffff 0%, #f9fafb 100%); --theme-gradient-gold: linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%); /* Special */ --theme-star: #FBBF24; --theme-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); } /* ======================================================================= 🌲 THEME: FOREST (Default - โทนเขียวธรรมชาติ) ======================================================================= */ .theme-forest { --theme-primary: #508D4E; --theme-primary-rgb: 80, 141, 78; --theme-primary-hover: #1A5319; --theme-primary-light: #D6EFD8; --theme-secondary: #80AF81; --theme-secondary-rgb: 128, 175, 129; --theme-secondary-hover: #508D4E; --theme-accent: #1A5319; --theme-text-heading: #1A5319; --theme-text-body: #2d4a2c; --theme-text-muted: #508D4E; --theme-text-light: #80AF81; --theme-bg-footer: #1A5319; --theme-gradient: linear-gradient(135deg, #508D4E 0%, #1A5319 100%); --theme-gradient-subtle: linear-gradient(180deg, #ffffff 0%, #D6EFD8 100%); } /* ======================================================================= 🌊 THEME: OCEAN (โทนน้ำเงินมหาสมุทร) ======================================================================= */ .theme-ocean { --theme-primary: #3B82F6; --theme-primary-rgb: 59, 130, 246; --theme-primary-hover: #1D4ED8; --theme-primary-light: #DBEAFE; --theme-secondary: #60A5FA; --theme-secondary-rgb: 96, 165, 250; --theme-secondary-hover: #3B82F6; --theme-accent: #1E3A8A; --theme-text-heading: #1E3A8A; --theme-text-body: #1E40AF; --theme-text-muted: #3B82F6; --theme-text-light: #60A5FA; --theme-bg-footer: #1E3A8A; --theme-gradient: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%); --theme-gradient-subtle: linear-gradient(180deg, #ffffff 0%, #DBEAFE 100%); } /* ======================================================================= 🌅 THEME: SUNSET (โทนส้มทอง) ======================================================================= */ .theme-sunset { --theme-primary: #F59E0B; --theme-primary-rgb: 245, 158, 11; --theme-primary-hover: #D97706; --theme-primary-light: #FEF3C7; --theme-secondary: #FBBF24; --theme-secondary-rgb: 251, 191, 36; --theme-secondary-hover: #F59E0B; --theme-accent: #92400E; --theme-text-heading: #92400E; --theme-text-body: #78350F; --theme-text-muted: #B45309; --theme-text-light: #D97706; --theme-bg-footer: #78350F; --theme-gradient: linear-gradient(135deg, #F59E0B 0%, #D97706 100%); --theme-gradient-subtle: linear-gradient(180deg, #ffffff 0%, #FEF3C7 100%); } /* ======================================================================= ✨ THEME: LUXURY (โทนดำทองหรูหรา) ======================================================================= */ .theme-luxury { --theme-primary: #D4AF37; --theme-primary-rgb: 212, 175, 55; --theme-primary-hover: #B8860B; --theme-primary-light: #FDF6E3; --theme-secondary: #1A1A1A; --theme-secondary-rgb: 26, 26, 26; --theme-secondary-hover: #333333; --theme-accent: #8B7355; --theme-text-heading: #1A1A1A; --theme-text-body: #333333; --theme-text-muted: #8B7355; --theme-text-light: #A89F91; --theme-bg-footer: #1A1A1A; --theme-gradient: linear-gradient(135deg, #D4AF37 0%, #B8860B 100%); --theme-gradient-subtle: linear-gradient(180deg, #ffffff 0%, #FDF6E3 100%); } /* ======================================================================= NEUTRAL / UTILITY CLASSES (FOR VISUAL BALANCE) Use these for standard text, readability, and structure. Do not use theme colors for body text or labels to avoid visual clutter. ======================================================================= */ .text-neutral-900 { color: #111827 !important; } .text-neutral-800 { color: #1f2937 !important; } .text-neutral-700 { color: #374151 !important; } .text-neutral-600 { color: #4b5563 !important; } .text-neutral-500 { color: #6b7280 !important; } .text-neutral-400 { color: #9ca3af !important; } .bg-neutral-50 { background-color: #f9fafb !important; } .bg-neutral-100 { background-color: #f3f4f6 !important; } .bg-neutral-200 { background-color: #e5e7eb !important; } .bg-neutral-900 { background-color: #111827 !important; } .border-neutral-100 { border-color: #f3f4f6 !important; } .border-neutral-200 { border-color: #e5e7eb !important; } .border-neutral-300 { border-color: #d1d5db !important; } .border-neutral-400 { border-color: #9ca3af !important; } /* ======================================================================= TEXT COLOR UTILITIES (THEME) Use these ONLY for emphasis, branding, or specific highlights. ======================================================================= */ .text-theme-primary { color: var(--theme-primary) !important; } .text-theme-primary-hover { color: var(--theme-primary-hover) !important; } .text-theme-secondary { color: var(--theme-secondary) !important; } .text-theme-accent { color: var(--theme-accent) !important; } .text-theme-heading { color: var(--theme-text-heading) !important; } .text-theme-body { color: var(--theme-text-body) !important; } .text-theme-muted { color: var(--theme-text-muted) !important; } .text-theme-light { color: var(--theme-text-light) !important; } .text-theme-white { color: var(--theme-text-white) !important; } .text-theme-success { color: var(--theme-success) !important; } .text-theme-warning { color: var(--theme-warning) !important; } .text-theme-danger { color: var(--theme-danger) !important; } .text-theme-info { color: var(--theme-info) !important; } /* ======================================================================= BACKGROUND COLOR UTILITIES ======================================================================= */ .bg-theme-primary { background-color: var(--theme-primary) !important; } .bg-theme-primary-hover { background-color: var(--theme-primary-hover) !important; } .bg-theme-primary-light { background-color: var(--theme-primary-light) !important; } .bg-theme-secondary { background-color: var(--theme-secondary) !important; } .bg-theme-accent { background-color: var(--theme-accent) !important; } .bg-theme-body { background-color: var(--theme-bg-body) !important; } .bg-theme-light { background-color: var(--theme-bg-light) !important; } .bg-theme-card { background-color: var(--theme-bg-card) !important; } .bg-theme-header { background-color: var(--theme-bg-header) !important; } .bg-theme-footer { background-color: var(--theme-bg-footer) !important; } /* Transparent Backgrounds */ .bg-theme-primary-alpha-10 { background-color: rgba(var(--theme-primary-rgb), 0.1) !important; } .bg-theme-primary-alpha-20 { background-color: rgba(var(--theme-primary-rgb), 0.2) !important; } .bg-theme-secondary-alpha-10 { background-color: rgba(var(--theme-secondary-rgb), 0.1) !important; } .bg-theme-secondary-alpha-20 { background-color: rgba(var(--theme-secondary-rgb), 0.2) !important; } /* ======================================================================= GRADIENT UTILITIES ======================================================================= */ .bg-theme-gradient { background: var(--theme-gradient) !important; } .bg-theme-gradient-subtle { background: var(--theme-gradient-subtle) !important; } .bg-theme-gradient-gold { background: var(--theme-gradient-gold) !important; } /* ======================================================================= BORDER COLOR UTILITIES ======================================================================= */ .border-theme-primary { border-color: var(--theme-primary) !important; } .border-theme-secondary { border-color: var(--theme-secondary) !important; } .border-theme-accent { border-color: var(--theme-accent) !important; } .border-theme-light { border-color: var(--theme-border) !important; } .border-theme-dark { border-color: var(--theme-border-dark) !important; } /* ======================================================================= BADGE UTILITIES ======================================================================= */ .badge-theme-primary { background-color: var(--theme-primary) !important; color: var(--theme-text-white) !important; } .badge-theme-primary-light { background-color: var(--theme-primary-light) !important; color: var(--theme-primary-hover) !important; } .badge-theme-sell { background-color: var(--theme-danger) !important; color: var(--theme-text-white) !important; } .badge-theme-rent { background-color: var(--theme-primary) !important; color: var(--theme-text-white) !important; } .badge-theme-featured { background: var(--theme-gradient-gold) !important; color: #000000 !important; font-weight: 700; } /* ======================================================================= BUTTON UTILITIES ======================================================================= */ .btn-theme-primary { background-color: var(--theme-primary) !important; border-color: var(--theme-primary) !important; color: var(--theme-text-white) !important; } .btn-theme-primary:hover, .btn-theme-primary:focus { background-color: var(--theme-primary-hover) !important; border-color: var(--theme-primary-hover) !important; } .btn-theme-secondary { background-color: var(--theme-secondary) !important; border-color: var(--theme-secondary) !important; color: var(--theme-text-white) !important; } .btn-theme-secondary:hover, .btn-theme-secondary:focus { background-color: var(--theme-secondary-hover) !important; border-color: var(--theme-secondary-hover) !important; } .btn-theme-outline { background-color: transparent !important; border-color: var(--theme-primary) !important; color: var(--theme-primary) !important; } .btn-theme-outline:hover, .btn-theme-outline:focus { background-color: var(--theme-primary) !important; color: var(--theme-text-white) !important; } .btn-theme-gradient { background: var(--theme-gradient) !important; border: none !important; color: var(--theme-text-white) !important; } .btn-theme-gradient:hover { filter: brightness(1.1); } /* ======================================================================= ICON UTILITIES ======================================================================= */ .icon-theme-primary { color: var(--theme-primary) !important; } .icon-theme-secondary { color: var(--theme-secondary) !important; } .icon-theme-accent { color: var(--theme-accent) !important; } .icon-theme-muted { color: var(--theme-text-muted) !important; } .icon-theme-light { color: var(--theme-text-light) !important; } .icon-theme-star { color: var(--theme-star) !important; } .icon-theme-white { color: var(--theme-text-white) !important; } /* ======================================================================= SECTION UTILITIES ======================================================================= */ .section-theme-primary { background-color: var(--theme-primary); color: var(--theme-text-white); } .section-theme-light { background-color: var(--theme-bg-light); } .section-theme-gradient { background: var(--theme-gradient); color: var(--theme-text-white); } /* ======================================================================= CARD UTILITIES ======================================================================= */ .card-theme { background-color: var(--theme-bg-card); border-color: var(--theme-border); } .card-theme-hover:hover { border-color: var(--theme-primary); } /* ======================================================================= LINK UTILITIES ======================================================================= */ .link-theme-primary { color: var(--theme-primary) !important; } .link-theme-primary:hover { color: var(--theme-primary-hover) !important; } /* ======================================================================= MODAL HEADER THEME ======================================================================= */ .modal-header-theme { background: var(--theme-gradient); color: var(--theme-text-white); } .modal-header-theme .btn-close { filter: invert(1); } /* ======================================================================= FORM THEME ======================================================================= */ .form-control:focus, .form-select:focus { border-color: var(--theme-primary); box-shadow: 0 0 0 0.2rem rgba(var(--theme-primary-rgb), 0.25); } .form-check-input:checked { background-color: var(--theme-primary); border-color: var(--theme-primary); } /* ======================================================================= STEP PROGRESS UTILITIES ======================================================================= */ .step-theme-circle { width: 45px; height: 45px; border-radius: 50%; background-color: #f3f4f6; border: 3px solid #e5e7eb; display: flex; align-items: center; justify-content: center; font-weight: bold; color: #6b7280; transition: all 0.3s ease; } .step-theme-active .step-theme-circle { background-color: var(--theme-primary); border-color: var(--theme-primary); color: var(--theme-text-white); } .step-theme-completed .step-theme-circle { background-color: var(--theme-success); border-color: var(--theme-success); color: var(--theme-text-white); } .step-theme-label { margin-top: 6px; font-size: 0.8rem; color: #6b7280; font-weight: 500; } .step-theme-active .step-theme-label { color: var(--theme-primary); font-weight: 600; } .step-theme-line { flex: 1; height: 3px; background-color: #e5e7eb; margin: 0 8px; align-self: center; } .step-theme-completed+.step-theme-line { background-color: var(--theme-success); } /* ======================================================================= UPLOAD ZONE UTILITIES ======================================================================= */ .upload-zone-theme { border: 2px dashed #9ca3af; border-radius: 12px; padding: 2rem 1.5rem; text-align: center; background: #f9fafb; transition: all 0.3s ease; cursor: pointer; } .upload-zone-theme:hover, .upload-zone-theme.drag-over { border-color: var(--theme-primary); background: rgba(var(--theme-primary-rgb), 0.05); /* Use primary with low opacity */ } /* ======================================================================= SHADOW UTILITIES ======================================================================= */ .shadow-theme { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }