/* ══════════════════════════════════════════════════════════════ theme.css — tema "monochrome glass" (abu-abu/hitam) untuk /app. Dimuat PALING AKHIR (setelah style.css & enhancements.css). Hanya token + poles + tata letak; struktur HTML dan semua id/onclick di app.js tidak disentuh. ══════════════════════════════════════════════════════════════ */ /* ─────────────── 1. token ─────────────── */ :root { /* ── skala abu netral ── */ --g-050: #f5f5f7; --g-100: #e3e4e8; --g-200: #c6c7ce; --g-300: #a3a5ad; --g-400: #7c7e87; --g-500: #5a5c64; --g-600: #3e4046; --g-700: #26272b; --g-800: #161719; --g-900: #0d0e10; --g-950: #050506; /* Aksen disimpan sebagai komponen RGB supaya semua rgba() turunan ikut membalik sendiri saat mode pagi menimpa --accent-rgb. */ --accent-rgb: 212, 213, 218; --on-accent: #0a0a0c; --void: #050506; --bg-dark: #0d0e10; --bg-darker: #030304; --primary: #d4d5da; --primary-soft: #e3e4e8; --primary-deep: #a3a5ad; --primary-glow: rgba(var(--accent-rgb), .22); --aqua: #8d8f98; --verified: #60a5fa; --success: #d4d5da; /* role tetap ikut panel admin: merah / emas / abu, dan lgbt tetap pelangi beranimasi dari style.css */ --role-color-developer: #ef4444; --role-color-premium: #d4af37; --role-color-user: #9ca3af; --danger: #ff7a8a; --warning: #ffc46b; --status-online-color: #d4d5da; /* nama lama dipertahankan supaya style.css lama tetap jalan */ --nebula-violet: #d4d5da; --nebula-magenta: #a3a5ad; --nebula-cyan: #8d8f98; /* awan di belakang kaca — sekarang murni cahaya putih redup */ --cloud-1: rgba(255, 255, 255, .10); --cloud-2: rgba(255, 255, 255, .06); --cloud-3: rgba(255, 255, 255, .03); --cloud-4: rgba(255, 255, 255, .07); /* material kaca */ --glass-bg: rgba(22, 23, 25, .52); --glass-bg-strong: rgba(13, 14, 16, .86); --glass-border: rgba(255, 255, 255, .10); --glass-border-hi: rgba(255, 255, 255, .28); --glass-sheen: rgba(255, 255, 255, .06); --border-color: rgba(255, 255, 255, .10); --nav-bg: rgba(5, 5, 6, .70); --input-bg: rgba(0, 0, 0, .34); --row-bg: rgba(255, 255, 255, .028); --accent-bg: rgba(var(--accent-rgb), .13); --accent-text: #0a0a0c; --text-main: #f2f2f4; --text-primary: #f2f2f4; --text-muted: #9b9da5; --text-secondary: #9b9da5; --text-faint: #65676e; --font-display: 'Sora', 'Space Grotesk', sans-serif; --font-body: 'Plus Jakarta Sans', 'Manrope', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; --r-sm: 12px; --r-md: 16px; --r-lg: 20px; color-scheme: dark; } /* ── mode pagi ── Hanya token yang dibalik; tidak ada aturan tata letak yang diulang. Atribut data-theme dipasang di oleh skrip kecil di index.html, memakai kunci localStorage yang sama dengan landing (udun-theme). */ [data-theme="light"] { --accent-rgb: 43, 44, 49; --on-accent: #f7f7f9; --void: #ececed; --bg-dark: #f7f7f9; --bg-darker: #ffffff; --primary: #2b2c31; --primary-soft: #3e4046; --primary-deep: #131417; --primary-glow: rgba(var(--accent-rgb), .16); --aqua: #5a5c64; --success: #2b2c31; --status-online-color: #2b2c31; --nebula-violet: #2b2c31; --nebula-magenta: #3e4046; --nebula-cyan: #5a5c64; --cloud-1: rgba(0, 0, 0, .06); --cloud-2: rgba(0, 0, 0, .04); --cloud-3: rgba(0, 0, 0, .02); --cloud-4: rgba(0, 0, 0, .05); --glass-bg: rgba(255, 255, 255, .58); --glass-bg-strong: rgba(255, 255, 255, .90); --glass-border: rgba(0, 0, 0, .10); --glass-border-hi: rgba(0, 0, 0, .28); --glass-sheen: rgba(255, 255, 255, .75); --border-color: rgba(0, 0, 0, .10); --nav-bg: rgba(236, 236, 237, .78); --input-bg: rgba(0, 0, 0, .045); --row-bg: rgba(0, 0, 0, .028); --accent-bg: rgba(var(--accent-rgb), .10); --accent-text: #f7f7f9; --text-main: #131417; --text-primary: #131417; --text-muted: #55575f; --text-secondary: #55575f; --text-faint: #83858d; color-scheme: light; } /* ─────────────── 2. latar ─────────────── */ /* Awan besar tetap ada (itu nyawa glassmorphism-nya), tapi bergerak jauh lebih pelan. Bintang + grid diturunkan supaya kartu yang jadi fokus, bukan latarnya. */ .app-container::before { filter: blur(80px) !important; animation-duration: 120s !important; } .app-container::after { opacity: .22 !important; } .app-container { box-shadow: none; } /* ─────────────── 3. bingkai & tata letak ─────────────── */ @media (min-width: 640px) { body { padding: 28px 20px; } .app-container { width: 100%; max-width: 540px; min-height: 760px; max-height: min(940px, calc(100vh - 56px)); border-radius: 26px; border: 1px solid var(--glass-border); box-shadow: 0 40px 100px rgba(0, 0, 0, .6), inset 0 1px 0 var(--glass-sheen), 0 0 70px rgba(var(--accent-rgb), .07); } } /* Layar lebar: dasbor jadi dua kolom, bukan satu pita sempit. */ @media (min-width: 1100px) { .app-container { max-width: 1080px; max-height: min(980px, calc(100vh - 56px)); } .dashboard-content { max-width: 980px; padding: 26px 32px 44px; gap: 14px; } .dashboard-stack { display: grid; grid-template-columns: 1.4fr 1fr; align-items: start; gap: 14px; } .dashboard-stack .terminal-card { grid-column: 1 / -1; } .dashboard-stack .terminal-body { max-height: 260px; } /* Panel koneksi berdampingan dengan kartu status, bukan menumpuk. */ #dashboard-content > .glass-card.action-card, #dashboard-content > .glass-card.pairing-card { max-width: 560px; margin-inline: auto; } /* ── Bot Config dua kolom ── */ #config-content { max-width: 980px; } #config-content .form-row { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; } #cfg-features-container { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 12px; } #cfg-features-container .cfg-group { margin: 0; } .config-actions { flex-direction: row; } } /* Efek arahkan-kursor hanya untuk perangkat yang punya penunjuk asli; di layar sentuh, hover menempel setelah disentuh. */ @media (hover: hover) and (pointer: fine) { .glass-card { transition: border-color .25s ease, transform .25s ease; } .glass-card:hover { border-color: var(--glass-border-hi); } } /* ══════════════════════════════════════════════════════════════ UKURAN LINTAS PERANGKAT Sebelumnya hanya ada dua keadaan: lebar penuh (ponsel) dan bingkai 540px, lalu melompat ke 1080px di 1100px. Akibatnya di laptop kecil (900-1100px) panel tetap 540px -- terlihat sempit -- dan halaman login menampilkan kartu 450px di tengah bingkai 1080px yang kosong. Blok ini mengisi jenjang yang hilang itu. ══════════════════════════════════════════════════════════════ */ /* ── tablet & laptop kecil: jangan tertahan di 540px ── */ @media (min-width: 900px) { .app-container { max-width: 760px; max-height: min(900px, calc(100vh - 56px)); } .dashboard-content { max-width: 700px; padding: 24px 28px 40px; } } /* ── desktop: pakai lebar layar yang tersedia, bukan angka mati ── min() menjaga agar di layar sempit tetap ada napas di tepi, dan di layar lebar tidak melar sampai baris teks jadi sulit dibaca. */ @media (min-width: 1100px) { .app-container { max-width: min(1180px, calc(100vw - 64px)); max-height: calc(100vh - 48px); } /* Wajib dinyatakan ulang di sini: blok 900px di atas berada SETELAH blok 1100px asli, jadi tanpa baris ini nilai 700px dari blok 900px yang menang di layar desktop dan isi dasbor jadi sempit lagi. */ .dashboard-content { max-width: 1040px; padding: 26px 32px 44px; } #config-content { max-width: 1040px; } } @media (min-width: 1500px) { .app-container { max-width: min(1360px, calc(100vw - 96px)); max-height: calc(100vh - 56px); } .dashboard-content { max-width: 1180px; padding: 32px 44px 56px; } #config-content { max-width: 1180px; } } /* ══ halaman login di layar lebar ══ Kartu 450px di tengah bingkai selebar 1080px membuat halaman terasa kosong. Di desktop halaman dipecah dua: panel penjelasan di kiri, formulir di kanan. Panel kiri TIDAK dirender di ponsel. */ .auth-aside { display: none; } @media (min-width: 1000px) { #auth-screen { display: grid; /* Kolom diberi ukuran pasti lalu seluruh gridnya yang dipusatkan lewat justify-content. Ini penting: #auth-screen memakai position:absolute (dari .screen), sehingga max-width + margin:auto tidak akan memusatkannya. */ grid-template-columns: minmax(0, 480px) minmax(380px, 430px); justify-content: center; align-content: center; gap: 56px; padding: 40px 48px; overflow-y: auto; } .auth-aside { display: block; min-width: 0; } .auth-aside-mark { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; background: rgba(var(--accent-rgb), .12); box-shadow: inset 0 0 0 1px var(--glass-border-hi); font-size: 1.5rem; color: var(--primary); margin-bottom: 26px; } .auth-aside h2 { font-family: var(--font-display); font-size: clamp(1.9rem, 2.6vw, 2.6rem); line-height: 1.12; letter-spacing: -.025em; max-width: 13ch; } .auth-aside p { color: var(--text-muted); font-size: 1rem; line-height: 1.6; margin-top: 16px; max-width: 42ch; } .auth-aside-list { list-style: none; margin-top: 28px; display: grid; gap: 11px; } .auth-aside-list li { position: relative; padding-left: 24px; color: var(--text-secondary); font-size: .92rem; } .auth-aside-list li::before { content: ""; position: absolute; left: 3px; top: .45em; width: 10px; height: 5px; border-left: 2px solid var(--primary); border-bottom: 2px solid var(--primary); transform: rotate(-45deg); } /* Kartu formulir tidak lagi dipaksa ke tengah; ia mengisi kolom kanan, jadi ukurannya terasa sepadan dengan panel kiri. */ .auth-card { max-width: none; } /* Bingkai halaman login dibuat sedikit lebih sempit dari dasbor; tingginya sengaja TIDAK diubah, karena isi satu-satunya (#auth-screen) diposisikan absolut -- kalau min-height dilepas, bingkainya kolaps. */ .app-container:has(#auth-screen) { max-width: 1120px; } } /* ══ switch malam/pagi & pemilih bahasa di topbar dasbor ══ Bentuknya sengaja dibuat identik dengan yang ada di landing supaya terasa satu produk, bukan dua halaman berbeda. */ .topbar-actions { display: flex; align-items: center; gap: 10px; } .theme-switch { position: relative; width: 62px; height: 32px; flex: none; border-radius: 999px; cursor: pointer; border: 1px solid var(--glass-border); background: var(--glass-bg); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); display: flex; align-items: center; padding: 0 4px; -webkit-tap-highlight-color: transparent; transition: border-color .3s ease, background .35s ease; } .theme-switch:hover { border-color: var(--glass-border-hi); } .theme-switch:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; } .theme-switch:active .switch-thumb { width: 28px; } .switch-thumb { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(150deg, rgba(var(--accent-rgb), .95), rgba(var(--accent-rgb), .62)); box-shadow: 0 4px 14px -4px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .35); transition: transform .42s cubic-bezier(.34, 1.35, .5, 1), width .2s ease; } [data-theme="light"] .switch-thumb { transform: translateX(30px); } .switch-ic { position: relative; z-index: 1; width: 24px; height: 24px; flex: none; display: grid; place-items: center; transition: opacity .35s ease; } .switch-ic svg { width: 14px; height: 14px; fill: none; stroke: var(--text-muted); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s ease; } .switch-ic.is-on svg { stroke: var(--on-accent); } .switch-ic.is-off { opacity: .55; } .theme-switch:hover .switch-ic.is-off { opacity: .85; } .switch-ic.moon { margin-right: auto; } .switch-ic.sun { margin-left: auto; } @media (prefers-reduced-motion: reduce) { .switch-thumb, .switch-ic { transition-duration: .01ms !important; } } /* tombol bahasa, di kanan switch */ .lang-btn { display: flex; align-items: center; gap: 6px; flex: none; height: 32px; padding: 0 10px 0 8px; border-radius: 999px; border: 1px solid var(--glass-border); background: var(--glass-bg); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); color: var(--text-muted); cursor: pointer; font: inherit; -webkit-tap-highlight-color: transparent; transition: border-color .25s ease, color .25s ease; } .lang-btn:hover { border-color: var(--glass-border-hi); color: var(--text-main); } .lang-btn:active { transform: scale(.95); } .lang-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; } .lang-btn svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .lang-code { font-family: var(--font-mono); font-size: .7rem; font-weight: 500; letter-spacing: .04em; line-height: 1; } @media (max-width: 380px) { .lang-btn { height: 29px; padding: 0 8px 0 7px; gap: 4px; } .lang-code { font-size: .66rem; } .theme-switch { width: 54px; height: 29px; } .switch-thumb { width: 21px; height: 21px; } [data-theme="light"] .switch-thumb { transform: translateX(27px); } .switch-ic { width: 21px; height: 21px; } } /* ─────────────── 4. tipografi ─────────────── */ body { font-family: var(--font-body); letter-spacing: -.005em; } h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -.02em; } .glass-card h3 { font-size: .98rem; font-weight: 600; line-height: 1.35; } .subtitle { font-size: .84rem; line-height: 1.6; color: var(--text-muted); margin: 6px 0 16px; } .form-group label { font-size: .78rem; font-weight: 500; color: var(--text-muted); } code, kbd, .pairing-code, .terminal-body, .cfg-json-editor { font-family: var(--font-mono); } /* ─────────────── 5. kartu kaca ─────────────── */ .glass-card { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--r-lg); padding: 20px; backdrop-filter: blur(22px) saturate(155%); -webkit-backdrop-filter: blur(22px) saturate(155%); box-shadow: 0 26px 60px -28px rgba(0, 0, 0, .9), inset 0 1px 0 var(--glass-sheen); transition: border-color .22s ease, box-shadow .22s ease; } /* Tepi atas kartu diberi garis cahaya tipis — kesan futuristik tanpa menambah keramaian. */ .glass-card::before { content: ""; position: absolute; top: 0; left: 18%; right: 18%; height: 1px; background: linear-gradient(90deg, transparent, var(--glass-border-hi), transparent); opacity: .8; pointer-events: none; } /* Kartu tidak melompat saat hover — gerakan itu yang bikin tumpukan kartu terasa ramai. Cukup tepinya yang menyala. */ .glass-card:hover { transform: none; border-color: var(--glass-border-hi); box-shadow: 0 26px 60px -26px rgba(0, 0, 0, .9), inset 0 1px 0 var(--glass-sheen), 0 0 28px -6px rgba(var(--accent-rgb), .16); } .card-quiet { background: rgba(255, 255, 255, .022); } .dashboard-content { padding: 20px 18px 36px; gap: 12px; } .dashboard-stack { gap: 12px; } .dashboard-stack .stack-item { padding: 16px; } .dashboard-stack .stack-item h3 { font-size: .9rem; } /* ─────────────── 6. label bagian ─────────────── */ .section-label { margin-top: 26px; margin-bottom: 4px; font-size: .68rem; letter-spacing: .14em; color: var(--text-faint); } .section-label i { color: var(--primary); opacity: .85; } .section-label::after { background: linear-gradient(90deg, var(--glass-border), transparent); } /* ─────────────── 7. topbar ─────────────── */ .topbar { padding: 14px 18px; background: var(--nav-bg); border-bottom: 1px solid var(--glass-border); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); } .avatar { width: 40px; height: 40px; border-radius: 13px; background: linear-gradient(140deg, rgba(var(--accent-rgb), .26), rgba(var(--accent-rgb), .06)); color: var(--primary); font-size: 1.1rem; box-shadow: inset 0 0 0 1px var(--glass-border-hi), 0 0 18px rgba(var(--accent-rgb), .18); } #display-username { font-size: .95rem; font-weight: 600; } .hamburger-btn { border-radius: 12px; border: 1px solid var(--glass-border); } .hamburger-btn:hover { border-color: var(--glass-border-hi); background: rgba(var(--accent-rgb), .08); } .hamburger-menu { border-radius: var(--r-md); border: 1px solid var(--glass-border); background: var(--glass-bg-strong); backdrop-filter: blur(26px) saturate(160%); -webkit-backdrop-filter: blur(26px) saturate(160%); box-shadow: 0 26px 60px rgba(0, 0, 0, .65); } .hamburger-menu a { border-radius: var(--r-sm); font-size: .88rem; } .hamburger-menu a i { color: var(--text-muted); width: 18px; text-align: center; } .hamburger-menu a:hover i { color: var(--primary); } .hamburger-menu a.danger:hover i { color: var(--danger); } /* ─────────────── 8. tombol ─────────────── */ .btn-primary, .btn-connect, button.primary { background: linear-gradient(135deg, var(--primary-soft), var(--primary) 42%, var(--primary-deep)); color: var(--accent-text); border: none; border-radius: 13px; font-family: var(--font-body); font-weight: 600; box-shadow: 0 14px 32px -16px rgba(var(--accent-rgb), .85); transition: box-shadow .18s ease, filter .18s ease, transform .18s ease; } .btn-primary:hover, .btn-connect:hover, button.primary:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 20px 40px -16px rgba(var(--accent-rgb), .95); } .btn-primary:active { transform: translateY(1px); } .btn-primary:disabled { opacity: .5; box-shadow: none; cursor: not-allowed; filter: none; } .btn-ghost { font-family: var(--font-body); font-size: .85rem; font-weight: 500; border-radius: 12px; padding: 10px 18px; color: var(--text-main); border-color: var(--glass-border); background: rgba(255, 255, 255, .03); } .btn-ghost:hover { color: var(--primary); border-color: var(--primary); background: rgba(var(--accent-rgb), .08); } .btn-ghost.danger { color: var(--danger); border-color: rgba(255, 122, 138, .3); } .btn-ghost.danger:hover { color: var(--danger); border-color: var(--danger); background: rgba(255, 122, 138, .1); } .btn-danger { background: rgba(255, 122, 138, .12); color: var(--danger); border: 1px solid rgba(255, 122, 138, .3); border-radius: 13px; font-family: var(--font-body); font-weight: 600; } .btn-danger:hover { background: rgba(255, 122, 138, .2); } .btn-icon { border-radius: 10px; color: var(--text-muted); } .btn-icon:hover { color: var(--primary); background: rgba(var(--accent-rgb), .1); } /* ─────────────── 9. input ─────────────── */ .cfg-input, .session-select, .admin-user-search-input, .cfg-search-group input, .phone-input input, .input-group input { border-radius: 12px; border: 1px solid var(--glass-border); background: var(--input-bg); color: var(--text-main); font-family: var(--font-body); font-size: .88rem; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; } input:focus, textarea:focus, select:focus, .cfg-input:focus { border-color: rgba(var(--accent-rgb), .55); box-shadow: 0 0 0 3px var(--primary-glow); background: rgba(0, 0, 0, .44); } ::placeholder { color: var(--text-faint); } textarea.cfg-input { line-height: 1.6; resize: vertical; } /* Panah dropdown sendiri, karena appearance:none menghapus bawaan. */ select.cfg-input, .session-select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 13px center; background-size: 15px; padding-right: 40px; } .phone-input .country-code { border-radius: 12px; border-color: var(--glass-border); background: var(--input-bg); color: var(--primary); } .cfg-search-group i { color: var(--primary); opacity: .7; } /* ─────────────── 10. sakelar ─────────────── */ .switch .slider { background-color: rgba(255, 255, 255, .09); } .switch input:checked + .slider { background: linear-gradient(135deg, var(--primary-soft), var(--primary-deep)); border-color: transparent; box-shadow: 0 0 0 3px var(--primary-glow), 0 0 14px rgba(var(--accent-rgb), .3); } .toggle-row { border-radius: 10px; font-size: .86rem; padding: 12px 8px; } .toggle-row:hover { background: rgba(var(--accent-rgb), .05); } .toggle-row.is-on { box-shadow: inset 2px 0 0 var(--primary); } .toggle-state-text { font-family: var(--font-body); font-size: .7rem; color: var(--text-faint); } .toggle-row.is-on .toggle-state-text { color: var(--primary); } /* ─────────────── 11. status & sesi ─────────────── */ .session-row { font-family: var(--font-body); font-size: .86rem; padding: 12px 0; border-bottom-color: var(--glass-border); } .session-row span { color: var(--text-muted); } .session-row strong { font-family: var(--font-mono); font-size: .84rem; font-weight: 500; } .status-online { text-shadow: 0 0 14px rgba(var(--accent-rgb), .5); } .status-badge { font-family: var(--font-body); font-size: .72rem; font-weight: 600; } .status-badge.online { background: rgba(var(--accent-rgb), .14); color: var(--primary); } .session-tabs-counter { font-family: var(--font-mono); font-size: .74rem; color: var(--text-faint); padding: 3px 10px; border-radius: 99px; border: 1px solid var(--glass-border); } /* ─────────────── 12. terminal ─────────────── */ /* Tinggi terminal dikunci permanen — kotaknya tidak ikut memanjang atau memendek saat log bertambah/dibersihkan, jadi kartu di bawahnya tidak pernah bergeser. Isinya yang menggulir di dalam. */ .terminal-body, .dashboard-stack .terminal-body { height: 240px; min-height: 240px; max-height: 240px; overflow-y: auto; overflow-x: hidden; resize: none; border-radius: 13px; background: rgba(0, 0, 0, .5); border: 1px solid var(--glass-border); } .terminal-card { flex: none; } .terminal-output { font-family: var(--font-mono); font-size: .74rem; line-height: 1.7; color: #b9f2d8; } .terminal-live-dot { box-shadow: 0 0 10px var(--primary); } /* ─────────────── 13. pairing & QR ─────────────── */ /* Kartu pairing sebelumnya putih terang dan lepas dari tema. */ .pairing-card { background: var(--glass-bg); border: 1px solid var(--glass-border-hi); } .pairing-code { background: linear-gradient(120deg, var(--primary-soft), var(--primary) 45%, var(--aqua)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 20px rgba(var(--accent-rgb), .35)); font-size: 2.1rem; font-weight: 600; letter-spacing: 7px; } .instruction { font-size: .8rem; color: var(--text-faint); } .qr-code-wrap img { border-radius: 14px; padding: 12px; box-shadow: 0 0 40px rgba(var(--accent-rgb), .18); } .loader { border-top-color: var(--primary); } /* ─────────────── 14. Bot Config ─────────────── */ /* Tombol simpan/reset menempel di atas saat menggulir daftar setting yang panjang — tidak perlu scroll balik ke atas untuk menyimpan. */ .config-actions { position: sticky; top: 0; z-index: 20; padding: 10px 4px; margin: -4px -4px 0; background: linear-gradient(rgba(3, 7, 5, .92), rgba(3, 7, 5, .72)); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: var(--r-sm); } .config-back-btn { border-radius: 12px; font-size: .84rem; color: var(--text-muted); } .config-back-btn:hover { color: var(--primary); border-color: var(--glass-border-hi); } .cfg-group { /* app.js menyuntik --cfg-group-hue; lightness dinaikkan supaya semua warna kategori keluar sebagai nada muda, bukan tua. */ --group-color: hsl(var(--cfg-group-hue, 146), 85%, 70%); border-radius: var(--r-md); background: rgba(255, 255, 255, .022); border-color: var(--glass-border); } .cfg-group summary.cfg-group-label { padding: 14px 15px; } .cfg-group-title { font-family: var(--font-display); font-size: .87rem; font-weight: 600; } .cfg-group-count { font-family: var(--font-mono); background: rgba(var(--accent-rgb), .1); color: var(--primary); border: 1px solid var(--glass-border); } .cfg-group-body { padding: 4px 15px 12px; } .cfg-group-label { color: var(--text-faint); font-size: .68rem; letter-spacing: .14em; } .cfg-features-toolbar { padding: 10px 2px 4px; border-bottom: 1px solid var(--glass-border); margin-bottom: 8px; } .cfg-features-toolbar-summary { font-family: var(--font-mono); font-size: .72rem; color: var(--text-faint); } .cfg-toolbar-btn { border-radius: 9px; font-size: .73rem; background: rgba(var(--accent-rgb), .06); border-color: var(--glass-border); } .cfg-toolbar-btn:hover { border-color: var(--primary); color: var(--primary); background: rgba(var(--accent-rgb), .13); } .cfg-allowedgroup-list { border-radius: var(--r-sm); } .cfg-json-editor { border-radius: 12px; font-size: .76rem; } /* ─────────────── 15. modal ─────────────── */ .modal-overlay { background: rgba(2, 5, 4, .74); backdrop-filter: blur(7px); } .modal-card { border-radius: 22px; border: 1px solid var(--glass-border-hi); background: var(--glass-bg-strong); backdrop-filter: blur(28px) saturate(160%); -webkit-backdrop-filter: blur(28px) saturate(160%); box-shadow: 0 40px 100px rgba(0, 0, 0, .75); } .modal-header { padding-bottom: 12px; border-bottom: 1px solid var(--glass-border); } .modal-header h3 { font-size: 1rem; } .modal-header h3 i { color: var(--primary); margin-right: 6px; } .accordion-toggle { border-radius: 11px; font-size: .88rem; } .info-cell { border-radius: 13px; background: rgba(255, 255, 255, .025); border: 1px solid var(--glass-border); } .info-cell i { color: var(--primary); opacity: .8; } .info-label { color: var(--text-faint); font-size: .68rem; letter-spacing: .06em; } .info-value { font-size: .84rem; } .info-value-mono { font-family: var(--font-mono); font-size: .74rem; } .profile-avatar { box-shadow: inset 0 0 0 1px var(--glass-border-hi), 0 0 40px rgba(var(--accent-rgb), .18); } /* ─────────────── 16. daftar user & admin ─────────────── */ .user-name-chip, .admin-user-row, .role-session-limit-row { border-radius: 13px; border: 1px solid var(--glass-border); background: rgba(255, 255, 255, .022); transition: border-color .2s ease, background .2s ease; } .user-name-chip:hover, .admin-user-row:hover { border-color: var(--glass-border-hi); background: rgba(var(--accent-rgb), .06); } .role-badge, .role-toggle-chip { border-radius: 99px; font-size: .68rem; letter-spacing: .04em; } /* Centang terverifikasi biru — dibedakan dari hijau "online" supaya dua status itu tidak tertukar saat dilihat sekilas. */ .verified-badge, .user-name-chip .verified-badge, #profile-username .verified-badge { color: var(--verified); filter: drop-shadow(0 0 5px rgba(96, 165, 250, .55)); } /* ─────────────── 17. status pesan & detail ─────────────── */ .cfg-status { font-family: var(--font-body); font-size: .82rem; padding: 8px 5px 14px; } .cfg-status.success { color: var(--primary); } .cfg-status.error { color: var(--danger); } .error-msg { font-size: .8rem; color: var(--danger); } #toast-stack { z-index: 400; } ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-thumb { background: rgba(var(--accent-rgb), .22); border-radius: 99px; } ::-webkit-scrollbar-thumb:hover { background: rgba(var(--accent-rgb), .4); } ::selection { background: rgba(var(--accent-rgb), .3); color: var(--text-main); } :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 8px; } /* ─────────────── 18. hormati preferensi gerak minimal ─────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }