/* ============================================================ Dynamic Theme Pack - 8 Themes ใช้ร่วมกับ data-theme บน body: ============================================================ */ body[data-theme="royal_blue"] { --primary: #1e40af; --primary-dark: #1e3a8a; --primary-light: #3b82f6; --secondary: #dc2626; --secondary-dark: #991b1b; --accent: #fbbf24; --theme-bg-soft: #eff6ff; --theme-card-shadow: rgba(30,64,175,.12); } body[data-theme="navy_gold"] { --primary: #0f172a; --primary-dark: #020617; --primary-light: #334155; --secondary: #b45309; --secondary-dark: #78350f; --accent: #f59e0b; --theme-bg-soft: #f8fafc; --theme-card-shadow: rgba(15,23,42,.16); } body[data-theme="emerald"] { --primary: #047857; --primary-dark: #065f46; --primary-light: #10b981; --secondary: #0f766e; --secondary-dark: #115e59; --accent: #f59e0b; --theme-bg-soft: #ecfdf5; --theme-card-shadow: rgba(4,120,87,.14); } body[data-theme="purple"] { --primary: #6d28d9; --primary-dark: #4c1d95; --primary-light: #8b5cf6; --secondary: #be185d; --secondary-dark: #831843; --accent: #fbbf24; --theme-bg-soft: #f5f3ff; --theme-card-shadow: rgba(109,40,217,.14); } body[data-theme="crimson"] { --primary: #b91c1c; --primary-dark: #7f1d1d; --primary-light: #ef4444; --secondary: #1e40af; --secondary-dark: #1e3a8a; --accent: #fbbf24; --theme-bg-soft: #fef2f2; --theme-card-shadow: rgba(185,28,28,.14); } body[data-theme="teal"] { --primary: #0f766e; --primary-dark: #134e4a; --primary-light: #14b8a6; --secondary: #0369a1; --secondary-dark: #075985; --accent: #f59e0b; --theme-bg-soft: #f0fdfa; --theme-card-shadow: rgba(15,118,110,.14); } body[data-theme="slate"] { --primary: #334155; --primary-dark: #0f172a; --primary-light: #64748b; --secondary: #0284c7; --secondary-dark: #075985; --accent: #38bdf8; --theme-bg-soft: #f8fafc; --theme-card-shadow: rgba(51,65,85,.14); } body[data-theme="orange"] { --primary: #ea580c; --primary-dark: #9a3412; --primary-light: #fb923c; --secondary: #2563eb; --secondary-dark: #1e40af; --accent: #fde047; --theme-bg-soft: #fff7ed; --theme-card-shadow: rgba(234,88,12,.14); } body[data-theme] { background: var(--neutral-100); } body[data-theme] .hero-section, body[data-theme] .login-wrap { background: radial-gradient(circle at 15% 20%, rgba(255,255,255,.14), transparent 28%), linear-gradient(135deg, var(--primary), var(--primary-dark)); } body[data-theme] .sidebar, body[data-theme] .dash-wrap .sidebar { background: linear-gradient(180deg, var(--primary-dark), var(--primary)); } body[data-theme] .dash-header, body[data-theme] .card, body[data-theme] .login-card, body[data-theme] .service-card, body[data-theme] .table-card { box-shadow: 0 14px 40px var(--theme-card-shadow, rgba(0,0,0,.08)); } body[data-theme] .btn-primary, body[data-theme] button.btn-primary, body[data-theme] .btn-login, body[data-theme] .sidebar-menu a.active { background: linear-gradient(135deg, var(--primary), var(--primary-light)); border-color: var(--primary); } body[data-theme] .btn-secondary { background: var(--secondary); border-color: var(--secondary); } body[data-theme] .btn-hero, body[data-theme] .services-title::after, body[data-theme] .stat-icon, body[data-theme] .badge-warning { background: var(--accent); } body[data-theme] a, body[data-theme] .navbar-menu a.active, body[data-theme] .service-card .icon, body[data-theme] .login-card h1, body[data-theme] .dash-header h1 { color: var(--primary); } body[data-theme] .form-control:focus, body[data-theme] input:focus, body[data-theme] select:focus, body[data-theme] textarea:focus { border-color: var(--primary-light) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-light) 24%, transparent) !important; } .theme-preview-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px; } .theme-card-option { border:2px solid var(--neutral-200); border-radius:18px; padding:18px; background:#fff; cursor:pointer; transition:.2s; position:relative; } .theme-card-option:hover { transform:translateY(-2px); box-shadow:0 16px 35px rgba(0,0,0,.08); } .theme-card-option.active { border-color:var(--primary); box-shadow:0 0 0 4px color-mix(in srgb, var(--primary) 16%, transparent); } .theme-swatches { display:flex; gap:8px; margin:12px 0; } .theme-swatch { width:34px; height:34px; border-radius:999px; border:3px solid #fff; box-shadow:0 2px 10px rgba(0,0,0,.18); } .theme-check { position:absolute; top:14px; right:14px; background:var(--primary); color:#fff; border-radius:999px; padding:4px 9px; font-weight:700; font-size:.8rem; } /* Theme settings selectable card fix */ .theme-card-option { width: 100%; text-align: left; appearance: none; -webkit-appearance: none; font-family: inherit; } .theme-card-option:focus { outline: 3px solid color-mix(in srgb, var(--primary) 28%, transparent); outline-offset: 2px; } /* ============================================================ Premium Readability & Beauty Fix v2 - Fix text disappearing on theme colors - Keep original layout, improve colors/contrast only ============================================================ */ body[data-theme] { --text-on-primary: #ffffff; --surface: #ffffff; --surface-soft: rgba(255,255,255,.08); --surface-soft-strong: rgba(255,255,255,.16); --sidebar-text: rgba(255,255,255,.92); --sidebar-muted: rgba(255,255,255,.68); --sidebar-active-bg: rgba(255,255,255,.18); } /* ปรับธีม Orange ให้อ่านง่ายขึ้น ไม่ให้ส้มชนส้ม */ body[data-theme="orange"] { --primary: #2563eb; --primary-dark: #1e3a8a; --primary-light: #3b82f6; --secondary: #ea580c; --secondary-dark: #9a3412; --accent: #fb923c; --theme-bg-soft: #fff7ed; --theme-card-shadow: rgba(234,88,12,.13); } /* Header / Navbar */ body[data-theme] .navbar { background: rgba(255,255,255,.96); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(15,23,42,.06); box-shadow: 0 10px 30px rgba(15,23,42,.06); } body[data-theme] .navbar-brand, body[data-theme] .navbar-brand span, body[data-theme] .navbar-menu a:not(.btn-login) { color: #1f2937 !important; } body[data-theme] .navbar-menu a:not(.btn-login):hover, body[data-theme] .navbar-menu a:not(.btn-login).active { color: var(--primary) !important; background: color-mix(in srgb, var(--primary) 10%, #ffffff) !important; } body[data-theme] .btn-login, body[data-theme] a.btn-login { color: #ffffff !important; background: linear-gradient(135deg, var(--primary), var(--primary-light)) !important; box-shadow: 0 10px 22px color-mix(in srgb, var(--primary) 28%, transparent) !important; } /* Sidebar */ body[data-theme] .sidebar, body[data-theme] .dash-wrap .sidebar { background: radial-gradient(circle at 20% 0%, rgba(255,255,255,.12), transparent 30%), linear-gradient(180deg, var(--primary-dark), var(--primary)) !important; color: #fff !important; } body[data-theme] .sidebar-brand h2, body[data-theme] .sidebar-brand p { color: #ffffff !important; text-shadow: 0 2px 8px rgba(0,0,0,.22); } body[data-theme] .sidebar-menu .section-title { color: var(--sidebar-muted) !important; opacity: 1 !important; font-weight: 700 !important; letter-spacing: .03em; } body[data-theme] .sidebar-menu li a, body[data-theme] .sidebar-menu li a span { color: var(--sidebar-text) !important; opacity: 1 !important; text-shadow: 0 1px 6px rgba(0,0,0,.15); } body[data-theme] .sidebar-menu li a:hover { background: rgba(255,255,255,.12) !important; color: #ffffff !important; border-left-color: var(--accent) !important; } body[data-theme] .sidebar-menu li a.active, body[data-theme] .sidebar-menu a.active { background: linear-gradient(90deg, rgba(255,255,255,.22), rgba(255,255,255,.10)) !important; color: #ffffff !important; border-left-color: var(--accent) !important; font-weight: 800 !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); } body[data-theme] .sidebar-menu li a.active span, body[data-theme] .sidebar-menu a.active span { color: #ffffff !important; } /* Buttons: กันสีตัวหนังสือหายทุกกรณี */ body[data-theme] .btn, body[data-theme] button, body[data-theme] input[type="submit"], body[data-theme] a.btn, body[data-theme] .btn span, body[data-theme] button span, body[data-theme] a.btn span { text-decoration: none !important; } body[data-theme] .btn-primary, body[data-theme] button.btn-primary, body[data-theme] a.btn-primary, body[data-theme] .btn-login, body[data-theme] a.btn-login { color: #ffffff !important; background: linear-gradient(135deg, var(--primary), var(--primary-light)) !important; border: 0 !important; } body[data-theme] .btn-success, body[data-theme] a.btn-success, body[data-theme] button.btn-success { color: #ffffff !important; background: linear-gradient(135deg, #059669, #10b981) !important; border: 0 !important; } body[data-theme] .btn-warning, body[data-theme] a.btn-warning, body[data-theme] button.btn-warning { color: #ffffff !important; background: linear-gradient(135deg, #d97706, #f97316) !important; border: 0 !important; } body[data-theme] .btn-danger, body[data-theme] a.btn-danger, body[data-theme] button.btn-danger { color: #ffffff !important; background: linear-gradient(135deg, #dc2626, #ef4444) !important; border: 0 !important; } body[data-theme] .btn-secondary, body[data-theme] a.btn-secondary, body[data-theme] button.btn-secondary { color: #1f2937 !important; background: #e5e7eb !important; border: 1px solid #d1d5db !important; } /* ปุ่มแบบ link/action ที่เป็น a แต่มี class btn */ body[data-theme] a.btn, body[data-theme] a.btn:visited, body[data-theme] a.btn:hover, body[data-theme] a.btn:focus, body[data-theme] a.btn-primary, body[data-theme] a.btn-success, body[data-theme] a.btn-warning, body[data-theme] a.btn-danger, body[data-theme] a.btn-login { color: #ffffff !important; } /* Dashboard cards / list action cards */ body[data-theme] .card, body[data-theme] .table-card, body[data-theme] .stat-card, body[data-theme] .service-card, body[data-theme] .login-card { border: 1px solid rgba(15,23,42,.06); box-shadow: 0 18px 45px var(--theme-card-shadow, rgba(15,23,42,.08)) !important; } body[data-theme] .card-header h2, body[data-theme] .dash-header h1, body[data-theme] .login-card h1, body[data-theme] .service-card h3 { color: var(--primary-dark) !important; } /* แก้เมนู/การ์ดที่เป็นสีพื้นหลังแล้วตัวอักษรกลืน */ body[data-theme] [style*="background"] a, body[data-theme] [style*="background"] span, body[data-theme] [style*="background"] b, body[data-theme] [style*="background"] strong { color: inherit; } /* Theme settings cards */ .theme-card-option { border-radius: 20px !important; border: 1px solid rgba(15,23,42,.10) !important; background: #ffffff !important; box-shadow: 0 8px 22px rgba(15,23,42,.06) !important; } .theme-card-option:hover { transform: translateY(-4px) !important; box-shadow: 0 18px 42px rgba(15,23,42,.12) !important; } .theme-card-option.active { border-color: var(--primary) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 14%, transparent), 0 18px 42px rgba(15,23,42,.12) !important; } .theme-card-option .theme-preview, .theme-preview { color: #ffffff !important; font-weight: 800 !important; text-shadow: 0 2px 10px rgba(0,0,0,.35) !important; } /* Public hero CTA */ body[data-theme] .btn-hero, body[data-theme] a.btn-hero { background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #ffffff)) !important; color: #111827 !important; box-shadow: 0 12px 28px color-mix(in srgb, var(--accent) 35%, transparent) !important; } /* Make small action buttons consistent */ body[data-theme] .btn, body[data-theme] button { border-radius: 12px !important; font-weight: 800 !important; letter-spacing: .01em; } /* Specific orange theme public buttons remain premium but readable */ body[data-theme="orange"] .hero-section, body[data-theme="orange"] .login-wrap { background: radial-gradient(circle at 15% 20%, rgba(255,255,255,.14), transparent 28%), linear-gradient(135deg, #ea580c, #9a3412) !important; } body[data-theme="orange"] .sidebar, body[data-theme="orange"] .dash-wrap .sidebar { background: radial-gradient(circle at 20% 0%, rgba(255,255,255,.12), transparent 30%), linear-gradient(180deg, #1e3a8a, #2563eb) !important; }