/* * ============================================================ * KARAOKE SYSTEM — SHARED THEME v2.0 * Dùng chung cho server.php và index.php * ============================================================ */ /* ===== PRESET MÀU ===== */ /* Mỗi preset định nghĩa 6 biến CSS cốt lõi. Server + Client đều dùng var(--accent), var(--accent2), v.v. Thêm class preset vào hoặc để đổi toàn bộ */ /* --- Preset 1: Đỏ Lửa (mặc định) --- */ :root, [data-theme="red"] { --accent: #dc3545; --accent2: #ff416c; --accent-glow: rgba(220, 53, 69, 0.45); --bg-dark: #0d0007; --bg-panel: rgba(14, 5, 8, 0.97); --text-hi: #ff8fa3; --marquee-from: #b02030; --marquee-to: #6b0f1a; --idle-logo: linear-gradient(135deg, #ff416c, #ff4b2b, #f7971e, #ffd200); } /* --- Preset 2: Đêm Xanh --- */ [data-theme="blue"] { --accent: #0d6efd; --accent2: #00b4d8; --accent-glow: rgba(13, 110, 253, 0.45); --bg-dark: #00050f; --bg-panel: rgba(4, 8, 20, 0.97); --text-hi: #90caf9; --marquee-from: #0a3d7a; --marquee-to: #023e8a; --idle-logo: linear-gradient(135deg, #00b4d8, #0077b6, #48cae4, #90e0ef); } /* --- Preset 3: Tím Galaxy --- */ [data-theme="purple"] { --accent: #9b59b6; --accent2: #e040fb; --accent-glow: rgba(155, 89, 182, 0.45); --bg-dark: #07000f; --bg-panel: rgba(12, 5, 20, 0.97); --text-hi: #ce93d8; --marquee-from: #6a1b9a; --marquee-to: #4a148c; --idle-logo: linear-gradient(135deg, #e040fb, #9b59b6, #7c4dff, #d500f9); } /* --- Preset 4: Vàng Gold --- */ [data-theme="gold"] { --accent: #e6a817; --accent2: #ffd700; --accent-glow: rgba(230, 168, 23, 0.45); --bg-dark: #0d0900; --bg-panel: rgba(18, 12, 0, 0.97); --text-hi: #ffe082; --marquee-from: #7d5800; --marquee-to: #5c3d00; --idle-logo: linear-gradient(135deg, #ffd700, #e6a817, #ff8f00, #ffca28); } /* --- Preset 5: Xanh Lá Neon --- */ [data-theme="green"] { --accent: #00c853; --accent2: #69ff47; --accent-glow: rgba(0, 200, 83, 0.45); --bg-dark: #000d04; --bg-panel: rgba(2, 14, 6, 0.97); --text-hi: #b9f6ca; --marquee-from: #005723; --marquee-to: #003d16; --idle-logo: linear-gradient(135deg, #00e676, #00c853, #1de9b6, #00bfa5); } /* ===== POPUP / ALERT ===== */ .popup-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.55); z-index: 99999; display: none; align-items: center; justify-content: center; backdrop-filter: blur(6px); } .popup-overlay.active { display: flex; } .popup-box { background: #fff; width: 88%; max-width: 320px; border-radius: 18px; padding: 24px 20px; text-align: center; box-shadow: 0 16px 40px rgba(0,0,0,0.25); transform: scale(0.85); transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1); border-top: 4px solid var(--accent, #dc3545); } .popup-overlay.active .popup-box { transform: scale(1); } .popup-title { font-weight: 800; font-size: 17px; margin-bottom: 8px; color: #222; } .popup-message { font-size: 14px; color: #555; margin-bottom: 22px; line-height: 1.5; } .popup-buttons { display: flex; gap: 10px; justify-content: center; } .btn-popup { padding: 9px 22px; border-radius: 30px; border: none; font-size: 14px; font-weight: 700; flex: 1; cursor: pointer; transition: 0.2s; } .btn-confirm { background: var(--accent, #dc3545); color: #fff; } .btn-confirm:hover { filter: brightness(1.1); } .btn-cancel { background: #f0f0f0; color: #555; } .btn-cancel:hover { background: #e0e0e0; } /* ===== PRESET SWITCHER WIDGET ===== */ .theme-switcher { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .theme-dot { width: 24px; height: 24px; border-radius: 50%; cursor: pointer; border: 3px solid transparent; transition: 0.2s; box-shadow: 0 2px 6px rgba(0,0,0,0.3); position: relative; } .theme-dot:hover { transform: scale(1.2); } .theme-dot.active { border-color: #fff; box-shadow: 0 0 0 2px var(--accent, #dc3545), 0 2px 8px rgba(0,0,0,0.4); } .theme-dot[data-t="red"] { background: linear-gradient(135deg, #dc3545, #ff416c); } .theme-dot[data-t="blue"] { background: linear-gradient(135deg, #0d6efd, #00b4d8); } .theme-dot[data-t="purple"] { background: linear-gradient(135deg, #9b59b6, #e040fb); } .theme-dot[data-t="gold"] { background: linear-gradient(135deg, #e6a817, #ffd700); } .theme-dot[data-t="green"] { background: linear-gradient(135deg, #00c853, #69ff47); } /* ===== IDLE MARQUEE (server) ===== */ .marquee-container { background: linear-gradient(to right, var(--marquee-from), var(--marquee-to)) !important; } /* ===== IDLE LOGO (server) ===== */ #idle-logo h1 { background: var(--idle-logo) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; filter: drop-shadow(0 0 30px var(--accent-glow)); } /* ===== SONG INFO BOX (server) ===== */ #song-info { border-left-color: var(--accent2, #00f2fe) !important; box-shadow: 0 4px 20px var(--accent-glow) !important; } #song-info .label { color: var(--accent2, #00f2fe) !important; } /* ===== BUTTON MENU (server) ===== */ #btn-toggle-menu { background: linear-gradient(135deg, var(--accent), var(--accent2)) !important; box-shadow: 0 0 20px var(--accent-glow) !important; } /* ===== NAV PILLS (server) ===== */ .nav-pills .nav-link.active { background: linear-gradient(135deg, var(--accent), var(--accent2)) !important; } /* ===== BTN NEXT (server) ===== */ .btn-next { background: linear-gradient(135deg, var(--accent), var(--accent2)) !important; box-shadow: 0 4px 15px var(--accent-glow) !important; } /* ===== INDEX — NAV TABS ===== */ .nav-link.active { color: var(--accent, #dc3545) !important; border-bottom-color: var(--accent, #dc3545) !important; } /* ===== INDEX — BOTTOM CONTROL ===== */ .btn-next-remote { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; border: none; border-radius: 30px; padding: 12px 24px; font-weight: 700; font-size: 0.9rem; letter-spacing: 1px; box-shadow: 0 4px 15px var(--accent-glow); } /* ===== PLAYING NOW (index) ===== */ .playing-now { border-left-color: var(--accent, #28a745) !important; background: rgba(0,200,83,0.06) !important; }