/* ============================================================ styles.css — Demo Melawai / Qiscus Custom Channel Menu ============================================================ */ /* ========== Variables ========== */ /* Palet & font mengikuti identitas visual qiscus.com (navy #01416c, accent blue #2f80ed, font Inter/Plus Jakarta Sans — diambil dari CSS resmi qiscus.com/v5/css/app.css). */ :root { --accent: #01416c; --accent-bright: #2f80ed; --accent-soft: #eff7fc; --text: #14181f; --muted: #5b667e; --line: #dfe8f1; --radius: 16px; --font-body: "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-heading: "Plus Jakarta Sans", var(--font-body); } /* ========== Qiscus Default UI Override ========== */ .qcw-trigger-btn { display: none !important; } /* Bubble teaser bawaan Qiscus ("Hello There, Welcome to Qiscus!") — disembunyikan secara default (digantikan tampilannya oleh toggle + panel custom, #ccm-toggle / #ccm-panel) TAPI di-reveal lagi begitu user benar-benar klik "Live chat" (QiscusLoader.openChat() di js/app.js menambahkan class "ccm-chat-active" ke ). Teaser ini satu-satunya tempat tombol asli "Ask for Questions" yang membuka form login Qiscus — kalau disembunyikan permanen, tidak ada jalan sama sekali untuk membuka chat. */ iframe#qcw-welcome-iframe { display: none !important; } body.ccm-chat-active iframe#qcw-welcome-iframe { display: block !important; } iframe#qcw-iframe { max-width: calc(100vw - 48px); } /* ========== Toggle Button ========== */ #ccm-toggle { position: fixed; bottom: 24px; right: 24px; width: 60px; height: 60px; padding: 0; border: none; border-radius: 50%; background: var(--accent); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(1, 65, 108, 0.28); z-index: 999999999 !important; transition: transform 0.15s ease, box-shadow 0.15s ease; font-family: var(--font-body); } #ccm-toggle:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(1, 65, 108, 0.34); } #ccm-toggle svg { flex: 0 0 auto; } /* ========== Panel ========== */ #ccm-panel { position: fixed; bottom: 96px; right: 24px; width: 360px; max-width: calc(100vw - 48px); background: #fff; border-radius: var(--radius); box-shadow: 0 20px 60px rgba(1, 65, 108, 0.22); z-index: 100000; overflow: hidden; opacity: 0; transform: translateY(12px) scale(0.98); pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease; font-family: var(--font-body); } #ccm-panel.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } /* ========== Header ========== */ .ccm-header { position: relative; padding: 26px 24px 22px; background: var(--accent); color: #fff; } .ccm-header .ccm-eyebrow { font-size: 13px; opacity: 0.7; margin-bottom: 6px; } .ccm-header h2 { margin: 0; font-family: var(--font-heading); font-size: 21px; font-weight: 700; line-height: 1.3; } .ccm-close { position: absolute; top: 18px; right: 18px; width: 32px; height: 32px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.15); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; } .ccm-close:hover { background: rgba(255, 255, 255, 0.28); } /* ========== Menu Items ========== */ .ccm-list { padding: 12px; } .ccm-item { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; background: #fff; border: none; border-radius: 12px; padding: 14px 12px; cursor: pointer; text-decoration: none; color: inherit; transition: background 0.12s ease; } .ccm-item:hover { background: var(--accent-soft); } .ccm-badge { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; } .ccm-text { flex: 1; min-width: 0; } .ccm-text .ccm-title { display: block; font-weight: 600; font-size: 15.5px; color: var(--text); } .ccm-text .ccm-sub { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; line-height: 1.35; } .ccm-chevron { color: #c7ccd4; flex: 0 0 auto; } .ccm-item:hover .ccm-chevron { color: var(--accent); } /* ========== App ID Modal ========== */ .ccm-modal-overlay { position: fixed; inset: 0; background: rgba(20, 24, 31, 0.5); display: none; align-items: center; justify-content: center; z-index: 9999999999; font-family: var(--font-body); padding: 20px; } .ccm-modal-overlay.open { display: flex; } .ccm-modal { background: #fff; border-radius: var(--radius); width: 100%; max-width: 400px; overflow: hidden; box-shadow: 0 20px 60px rgba(1, 65, 108, 0.3); } .ccm-modal-header { padding: 24px; background: var(--accent); color: #fff; } .ccm-modal-header h2 { margin: 0; font-family: var(--font-heading); font-size: 19px; font-weight: 700; line-height: 1.3; } .ccm-modal-body { padding: 22px 24px 24px; } .ccm-modal-body p { margin: 0 0 16px; font-size: 13.5px; color: var(--muted); line-height: 1.5; } #ccm-appid-form { display: flex; flex-direction: column; gap: 6px; } .ccm-modal-label { font-size: 12.5px; font-weight: 600; color: var(--muted); margin-top: 6px; } .ccm-modal-label:first-child { margin-top: 0; } #ccm-appid-input, #ccm-channelid-input { border: 1px solid var(--line); border-radius: 10px; padding: 11px 14px; font-size: 14px; font-family: var(--font-body); color: var(--text); margin-bottom: 6px; } #ccm-appid-input:focus, #ccm-channelid-input:focus { outline: none; border-color: var(--accent-bright); } .ccm-modal-body button[type="submit"] { margin-top: 6px; border: none; border-radius: 10px; background: var(--accent); color: #fff; font-weight: 600; font-size: 14px; padding: 12px; cursor: pointer; font-family: var(--font-body); transition: background 0.12s ease; } .ccm-modal-body button[type="submit"]:hover { background: var(--accent-bright); } /* ========== Load Error Page ========== */ .ccm-error-overlay { position: fixed; inset: 0; background: #f7fafc; display: none; align-items: center; justify-content: center; z-index: 9999999998; font-family: var(--font-body); padding: 20px; } .ccm-error-overlay.open { display: flex; } .ccm-error-box { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 12px 32px rgba(1, 65, 108, 0.08); max-width: 380px; width: 100%; padding: 32px 28px; text-align: center; } .ccm-error-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; } .ccm-error-box h2 { margin: 0 0 8px; font-family: var(--font-heading); font-size: 18px; font-weight: 700; color: var(--text); } .ccm-error-box p { margin: 0 0 22px; font-size: 13.5px; color: var(--muted); line-height: 1.5; } .ccm-error-actions { display: flex; flex-direction: column; gap: 10px; } .ccm-error-actions button { border-radius: 10px; padding: 11px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: var(--font-body); transition: background 0.12s ease; } #ccm-error-reload { border: none; background: var(--accent); color: #fff; } #ccm-error-reload:hover { background: var(--accent-bright); } #ccm-error-change-appid { border: 1px solid var(--line); background: #fff; color: var(--text); } #ccm-error-change-appid:hover { background: var(--accent-soft); } /* ========== Footer ========== */ .ccm-footer { padding: 14px 24px 18px; border-top: 1px solid var(--line); } .ccm-footer .ccm-disclaimer { color: #9aa1ac; font-size: 12.5px; margin-bottom: 8px; } .ccm-footer .ccm-powered { color: var(--muted); font-size: 12.5px; }