/* ================================================== */ /* == PALET WARNA DINAMIS (DARK/LIGHT) == */ /* == (Gunakan data-theme="dark" atau "light") == */ /* ================================================== */ /* * Pengaturan Transisi Global: * Menerapkan transisi yang mulus untuk semua elemen yang warnanya bisa berubah. * Ini membuat pergantian tema terasa lebih halus dan profesional. */ * { transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, border-color 0.3s ease-in-out; } /* * ================================================ * TEMA GELAP (Dark Theme) * ================================================ * Diterapkan secara default melalui `:root` dan juga * secara eksplisit melalui `html[data-theme="dark"]`. * Ini memastikan tema gelap berfungsi sebagai fallback jika * atribut `data-theme` tidak ada. */ :root, html[data-theme="dark"] { /* -- Warna Utama & Aksen -- */ --primary-color: #0091ff; /* Azure Blue */ --secondary-color: #8338ec; /* Royal Purple */ --accent-color: #ffc107; /* Amber Gold */ /* -- Warna Kontekstual (Status) -- */ --success-color: #28a745; /* Forest Green */ --danger-color: #f94144; /* Crimson Red */ --warning-color: #ffc107; /* Amber Gold */ --info-color: #20c997; /* Aqua Marine */ /* -- Netral Tema Gelap -- */ --background-color: #0d1117; /* GitHub Dark: Sedikit kebiruan, lebih modern */ --background-start: #161b22; /* Gradasi Awal */ --background-end: #0d1117; /* Gradasi Akhir */ --surface-color: #161b22; /* Dark Charcoal: Untuk kartu (card), modal */ --surface-light: #21262d; /* Lighter Charcoal: Untuk hover, header tabel */ --border-color: #30363d; /* Dark Gray: Untuk border */ --overlay-bg: rgba(13, 17, 23, 0.7); /* Overlay gelap dengan transparansi */ /* -- Warna Teks Tema Gelap -- */ --text-color-primary: #c9d1d9; /* Off-White: Teks utama */ --text-color-secondary: #8b949e; /* Light Gray: Sub-teks, placeholder */ --text-color-inverse: #0d1117; /* Dark: Teks untuk di atas background cerah */ } /* * ================================================ * TEMA TERANG (Light Theme) * ================================================ * Diterapkan saat tag memiliki atribut `data-theme="light"`. * Nilai variabel di sini akan menimpa nilai dari tema gelap. */ html[data-theme="light"] { /* -- Warna Utama & Aksen (disesuaikan untuk kontras yang lebih baik) -- */ --primary-color: #007bff; /* Classic Blue: Lebih standar di background putih */ --secondary-color: #6f42c1; /* Deep Purple */ --accent-color: #ffc107; /* Amber Gold (tetap bagus) */ /* -- Warna Kontekstual (Status) -- */ --success-color: #28a745; --danger-color: #dc3545; /* Merah yang sedikit lebih gelap untuk keterbacaan */ --warning-color: #ffc107; --info-color: #17a2b8; /* Biru info yang lebih standar */ /* -- Netral Tema Terang -- */ --background-color: #f8f9fa; /* Very Light Gray: Latar belakang utama */ --background-start: #ffffff; /* Gradasi Awal (putih bersih) */ --background-end: #f8f9fa; /* Gradasi Akhir */ --surface-color: #ffffff; /* White: Untuk kartu, modal, header */ --surface-light: #f1f3f5; /* Lighter Gray: Untuk hover atau variasi permukaan */ --border-color: #dee2e6; /* Light Gray: Untuk border */ --overlay-bg: rgba(33, 37, 41, 0.5); /* Overlay semi-transparan gelap */ /* -- Warna Teks Tema Terang -- */ --text-color-primary: #212529; /* Almost Black: Teks utama */ --text-color-secondary: #6c757d; /* Medium Gray: Sub-teks, placeholder */ --text-color-inverse: #ffffff; /* White: Teks untuk di atas background berwarna */ } /* ================================================== */ /* == GAYA TOMBOL SWITCH FUTURISTIK == */ /* ================================================== */ /* ================================================== */ /* == GAYA DASAR TOMBOL SWITCH FUTURISTIK == */ /* ================================================== */ /* Bagian ini adalah kode yang sudah Anda buat, sedikit dimodifikasi */ .theme-switch { /* Default position is relative to flow with content */ position: relative; display: inline-block; width: 70px; height: 38px; vertical-align: middle; /* Memastikan sejajar dengan teks di sekitarnya */ } .theme-switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--surface-color); /* Menggunakan variabel tema Anda */ border: 2px solid var(--border-color); /* Menggunakan variabel tema Anda */ border-radius: 38px; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .slider:before { position: absolute; content: ""; height: 28px; width: 28px; left: 4px; bottom: 3px; background-color: var(--accent-color); border-radius: 50%; transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow: 0 0 8px var(--accent-color); } input:checked + .slider { border-color: var(--secondary-color); box-shadow: 0 0 15px rgba(155, 93, 229, 0.5); /* Glow ungu */ } input:checked + .slider:before { transform: translateX(32px); background-color: var(--secondary-color); box-shadow: 0 0 15px var(--secondary-color); } /* ========================================================== */ /* == BAGIAN BARU: PENGATURAN POSISI MENGGUNAKAN ATRIBUT == */ /* ========================================================== */ /* Atur gaya dasar untuk SEMUA tombol yang memiliki atribut data-position. Ini mengeluarkannya dari alur dokumen normal dan meletakkannya di atas konten lain. */ .theme-switch[data-position] { position: fixed; /* Posisi relatif terhadap viewport browser */ z-index: 999; /* Memastikan tombol selalu di atas elemen lain */ } /* Definisikan setiap posisi spesifik */ .theme-switch[data-position="flex"] { position: relative; } .theme-switch[data-position="top-right"] { top: 20px; right: 20px; } .theme-switch[data-position="top-left"] { top: 20px; left: 20px; } .theme-switch[data-position="bottom-right"] { bottom: 20px; right: 20px; } .theme-switch[data-position="bottom-left"] { bottom: 20px; left: 20px; } /* Bonus: Posisi tengah jika Anda memerlukannya */ .theme-switch[data-position="top-center"] { top: 20px; left: 50%; transform: translateX(-50%); /* Trik untuk sentralisasi horizontal */ } .theme-switch[data-position="bottom-center"] { bottom: 20px; left: 50%; transform: translateX(-50%); } ::-webkit-scrollbar { width: 5px; height: 8px; } ::-webkit-scrollbar-thumb { background: var(--primary-color); border-radius: 4px; } ::-webkit-scrollbar-track { background: var(--surface-light); } textarea { resize: none; } /* ================================================== */ /* == GAYA GLOBAL SELECT & OPTION (SEDERHANA) == */ /* ================================================== */ /* * Menargetkan semua elemen