/*
* ══════════════════════════════════════════════════════════════
* SMaart Channel — Dark Mode Override
* File : theme-dark.css
* Cara pakai di setiap halaman — tambahkan di :
*
* ← HARUS PERTAMA
*
*
* theme.js akan set data-theme="dark" pada
* saat user memilih Dark Mode di halaman Pengaturan.
* Semua selector di bawah baru aktif kalau data-theme="dark".
* ══════════════════════════════════════════════════════════════
*/
/* ── Smooth transition untuk semua elemen utama ───────────── */
body,
.main,
.header,
.sec-card,
.card,
.panel,
.table-wrap,
.modal-box,
.dropdown-menu,
input, select, textarea,
.hdr-btn-ghost,
.icon-btn,
.seg,
.seg-btn.on,
.upload-box,
.tab-bar,
.stat-card,
.activity-item,
.msg-bubble,
.chat-input-area,
.contact-row,
.pipeline-col,
.kanban-card {
transition:
background 0.25s ease,
border-color 0.25s ease,
color 0.25s ease,
box-shadow 0.25s ease;
}
/* ════════════════════════════════════════════════════════════
1. CSS VARIABLES — override root vars di dark mode
════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
--bg : #0d1117;
--border: #1e293b;
--t1 : #f1f5f9;
--t2 : #cbd5e1;
--t3 : #94a3b8;
--t4 : #64748b;
}
/* ════════════════════════════════════════════════════════════
2. BASE — body, html, scrollbar
════════════════════════════════════════════════════════════ */
[data-theme="dark"] body {
background: #0d1117;
color: #f1f5f9;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb {
background: #1e293b;
}
[data-theme="dark"] ::-webkit-scrollbar-track {
background: transparent;
}
/* ════════════════════════════════════════════════════════════
3. LAYOUT — main area, header, body wrapper
════════════════════════════════════════════════════════════ */
[data-theme="dark"] .main {
background: #0d1117;
}
[data-theme="dark"] .header {
background: #161b22 !important;
border-bottom-color: #1e293b !important;
box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
[data-theme="dark"] .body {
background: #0d1117;
}
[data-theme="dark"] .hdr-title {
color: #f1f5f9;
}
/* ════════════════════════════════════════════════════════════
4. HEADER BUTTONS & ICONS
════════════════════════════════════════════════════════════ */
[data-theme="dark"] .hdr-btn-ghost {
background: #161b22 !important;
border-color: #1e293b !important;
color: #cbd5e1 !important;
}
[data-theme="dark"] .hdr-btn-ghost:hover {
background: #1e293b !important;
}
[data-theme="dark"] .icon-btn {
background: #1e293b !important;
color: #94a3b8;
}
[data-theme="dark"] .icon-btn:hover {
background: #252f3e !important;
border-color: #334155 !important;
}
[data-theme="dark"] .ham {
background: #161b22;
border-color: #1e293b;
color: #94a3b8;
}
/* ════════════════════════════════════════════════════════════
5. SECTION CARDS & PANELS
════════════════════════════════════════════════════════════ */
[data-theme="dark"] .sec-card,
[data-theme="dark"] .card,
[data-theme="dark"] .panel,
[data-theme="dark"] .box {
background: #161b22 !important;
border-color: #1e293b !important;
}
[data-theme="dark"] .sec-card:hover,
[data-theme="dark"] .card:hover {
box-shadow: 0 4px 20px rgba(0,0,0,.4) !important;
}
[data-theme="dark"] .sec-title {
color: #f1f5f9;
}
[data-theme="dark"] .sec-sub {
color: #64748b;
}
/* ════════════════════════════════════════════════════════════
6. STAT / KPI CARDS (dashboard)
════════════════════════════════════════════════════════════ */
[data-theme="dark"] .stat-card {
background: #161b22 !important;
border-color: #1e293b !important;
}
[data-theme="dark"] .stat-val {
color: #f1f5f9;
}
[data-theme="dark"] .stat-label {
color: #64748b;
}
[data-theme="dark"] .stat-change.up { color: #34d399; }
[data-theme="dark"] .stat-change.down { color: #f87171; }
/* ════════════════════════════════════════════════════════════
7. TABLES
════════════════════════════════════════════════════════════ */
[data-theme="dark"] .table-wrap {
background: #161b22;
border-color: #1e293b;
}
[data-theme="dark"] table {
background: transparent;
}
[data-theme="dark"] thead tr {
background: #0d1117;
border-bottom-color: #1e293b;
}
[data-theme="dark"] th {
color: #64748b;
border-color: #1e293b;
}
[data-theme="dark"] td {
color: #cbd5e1;
border-color: #1e293b;
}
[data-theme="dark"] tbody tr:hover {
background: rgba(255,255,255,.03);
}
[data-theme="dark"] .table-row:hover {
background: rgba(255,255,255,.03);
}
/* ════════════════════════════════════════════════════════════
8. FORMS — input, select, textarea, search
════════════════════════════════════════════════════════════ */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] select,
[data-theme="dark"] textarea {
background: #0d1117 !important;
border-color: #1e293b !important;
color: #f1f5f9 !important;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
color: #475569;
}
[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
border-color: #ea580c !important;
background: #161b22 !important;
}
[data-theme="dark"] .search-box,
[data-theme="dark"] .input-wrap {
background: #161b22;
border-color: #1e293b;
}
/* ════════════════════════════════════════════════════════════
9. SEGMENTED CONTROL
════════════════════════════════════════════════════════════ */
[data-theme="dark"] .seg {
background: #161b22 !important;
}
[data-theme="dark"] .seg-btn {
color: #64748b;
}
[data-theme="dark"] .seg-btn.on {
background: #252f3e !important;
color: #f1f5f9 !important;
box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
[data-theme="dark"] .seg-btn:hover:not(.on) {
background: rgba(255,255,255,.05) !important;
}
/* ════════════════════════════════════════════════════════════
10. UPLOAD BOX (brand identity)
════════════════════════════════════════════════════════════ */
[data-theme="dark"] .upload-box {
background: #0d1117 !important;
border-color: #334155 !important;
}
[data-theme="dark"] .upload-box:hover {
background: #161b22 !important;
border-color: #ea580c !important;
}
[data-theme="dark"] .upload-icon {
background: #1e293b;
border-color: #334155;
}
/* ════════════════════════════════════════════════════════════
11. THEME CARDS (settings page)
════════════════════════════════════════════════════════════ */
[data-theme="dark"] .theme-card {
background: #161b22 !important;
border-color: #1e293b !important;
}
[data-theme="dark"] .theme-card:hover {
border-color: #334155 !important;
}
[data-theme="dark"] .theme-card.selected {
border-color: #ea580c !important;
}
[data-theme="dark"] .theme-label-row {
border-top-color: #1e293b;
color: #64748b;
background: #161b22;
}
[data-theme="dark"] .theme-card.selected .theme-label-row {
color: #ea580c;
}
/* ════════════════════════════════════════════════════════════
12. CONVERSATION / CHAT PAGE
════════════════════════════════════════════════════════════ */
[data-theme="dark"] .conv-list {
background: #161b22;
border-color: #1e293b;
}
[data-theme="dark"] .conv-item {
border-bottom-color: #1e293b;
}
[data-theme="dark"] .conv-item:hover,
[data-theme="dark"] .conv-item.active {
background: #1e293b;
}
[data-theme="dark"] .conv-name { color: #f1f5f9; }
[data-theme="dark"] .conv-preview { color: #64748b; }
[data-theme="dark"] .conv-time { color: #475569; }
[data-theme="dark"] .chat-area {
background: #0d1117;
}
[data-theme="dark"] .chat-input-area {
background: #161b22;
border-top-color: #1e293b;
}
[data-theme="dark"] .chat-input {
background: #0d1117 !important;
border-color: #1e293b !important;
color: #f1f5f9 !important;
}
[data-theme="dark"] .msg-bubble.incoming {
background: #1e293b;
color: #e2e8f0;
}
[data-theme="dark"] .msg-bubble.outgoing {
background: #ea580c;
color: #fff;
}
[data-theme="dark"] .msg-time { color: #475569; }
[data-theme="dark"] .chat-header {
background: #161b22;
border-bottom-color: #1e293b;
}
[data-theme="dark"] .chat-contact-name { color: #f1f5f9; }
[data-theme="dark"] .chat-contact-status { color: #64748b; }
/* ════════════════════════════════════════════════════════════
13. CONTACT / CRM PAGE
════════════════════════════════════════════════════════════ */
[data-theme="dark"] .contact-row {
background: #161b22;
border-color: #1e293b;
}
[data-theme="dark"] .contact-row:hover {
background: #1a2332;
}
[data-theme="dark"] .contact-name { color: #f1f5f9; }
[data-theme="dark"] .contact-email { color: #64748b; }
[data-theme="dark"] .contact-tag {
background: #1e293b;
color: #94a3b8;
}
[data-theme="dark"] .pipeline-col {
background: #161b22;
border-color: #1e293b;
}
[data-theme="dark"] .pipeline-head {
color: #94a3b8;
border-bottom-color: #1e293b;
}
[data-theme="dark"] .kanban-card {
background: #0d1117 !important;
border-color: #1e293b !important;
}
[data-theme="dark"] .kanban-card:hover {
border-color: #334155 !important;
}
/* ════════════════════════════════════════════════════════════
14. ANALYTICS PAGE — charts, filters
════════════════════════════════════════════════════════════ */
[data-theme="dark"] .chart-card {
background: #161b22 !important;
border-color: #1e293b !important;
}
[data-theme="dark"] .chart-title { color: #f1f5f9; }
[data-theme="dark"] .chart-sub { color: #64748b; }
[data-theme="dark"] .filter-bar {
background: #161b22;
border-color: #1e293b;
}
[data-theme="dark"] .filter-btn {
background: #0d1117;
border-color: #1e293b;
color: #94a3b8;
}
[data-theme="dark"] .filter-btn.active,
[data-theme="dark"] .filter-btn:hover {
background: #1e293b;
color: #f1f5f9;
}
[data-theme="dark"] .legend-dot-label { color: #94a3b8; }
/* ════════════════════════════════════════════════════════════
15. TABS
════════════════════════════════════════════════════════════ */
[data-theme="dark"] .tab-bar {
background: #161b22;
border-color: #1e293b;
}
[data-theme="dark"] .tab-btn {
color: #64748b;
}
[data-theme="dark"] .tab-btn.active {
color: #ea580c;
border-bottom-color: #ea580c;
}
[data-theme="dark"] .tab-btn:hover:not(.active) {
color: #cbd5e1;
background: rgba(255,255,255,.04);
}
/* ════════════════════════════════════════════════════════════
16. BADGES & TAGS
════════════════════════════════════════════════════════════ */
[data-theme="dark"] .badge-gray {
background: #1e293b;
color: #94a3b8;
}
[data-theme="dark"] .badge-green {
background: rgba(34,197,94,.15);
color: #4ade80;
}
[data-theme="dark"] .badge-red {
background: rgba(239,68,68,.15);
color: #f87171;
}
[data-theme="dark"] .badge-yellow {
background: rgba(234,179,8,.15);
color: #facc15;
}
[data-theme="dark"] .badge-blue {
background: rgba(59,130,246,.15);
color: #60a5fa;
}
/* ════════════════════════════════════════════════════════════
17. DROPDOWN & MODAL
════════════════════════════════════════════════════════════ */
[data-theme="dark"] .dropdown-menu {
background: #161b22;
border-color: #1e293b;
box-shadow: 0 8px 32px rgba(0,0,0,.5);
}
[data-theme="dark"] .dropdown-item {
color: #cbd5e1;
}
[data-theme="dark"] .dropdown-item:hover {
background: #1e293b;
color: #f1f5f9;
}
[data-theme="dark"] .dropdown-divider {
background: #1e293b;
}
[data-theme="dark"] .modal-box {
background: #161b22;
border-color: #1e293b;
}
[data-theme="dark"] .modal-header {
border-bottom-color: #1e293b;
}
[data-theme="dark"] .modal-footer {
border-top-color: #1e293b;
}
[data-theme="dark"] .modal-title { color: #f1f5f9; }
[data-theme="dark"] .overlay-backdrop {
background: rgba(0,0,0,.7);
}
/* ════════════════════════════════════════════════════════════
18. CHANNEL / WEBHOOK / AI PAGES
════════════════════════════════════════════════════════════ */
[data-theme="dark"] .channel-card {
background: #161b22 !important;
border-color: #1e293b !important;
}
[data-theme="dark"] .channel-card:hover {
border-color: #334155 !important;
}
[data-theme="dark"] .channel-name { color: #f1f5f9; }
[data-theme="dark"] .channel-meta { color: #64748b; }
[data-theme="dark"] .webhook-row {
background: #161b22;
border-color: #1e293b;
}
[data-theme="dark"] .webhook-url {
background: #0d1117;
border-color: #1e293b;
color: #94a3b8;
font-family: 'JetBrains Mono', monospace;
}
[data-theme="dark"] .ai-card {
background: #161b22 !important;
border-color: #1e293b !important;
}
[data-theme="dark"] .ai-card-title { color: #f1f5f9; }
[data-theme="dark"] .ai-card-sub { color: #64748b; }
/* ════════════════════════════════════════════════════════════
19. ACTIVITY / TIMELINE
════════════════════════════════════════════════════════════ */
[data-theme="dark"] .activity-item {
border-left-color: #1e293b;
}
[data-theme="dark"] .activity-dot {
border-color: #0d1117;
}
[data-theme="dark"] .activity-text { color: #cbd5e1; }
[data-theme="dark"] .activity-time { color: #475569; }
/* ════════════════════════════════════════════════════════════
20. STATUS / SERVICE PAGE
════════════════════════════════════════════════════════════ */
[data-theme="dark"] .status-row {
background: #161b22;
border-color: #1e293b;
}
[data-theme="dark"] .status-row:hover {
background: #1a2332;
}
[data-theme="dark"] .status-name { color: #f1f5f9; }
[data-theme="dark"] .status-detail { color: #64748b; }
/* ════════════════════════════════════════════════════════════
21. MOBILE BOTTOM NAV
════════════════════════════════════════════════════════════ */
[data-theme="dark"] .mob-nav {
background: #161b22 !important;
border-top-color: #1e293b !important;
}
/* ════════════════════════════════════════════════════════════
22. EMPTY STATES & ILLUSTRATIONS
════════════════════════════════════════════════════════════ */
[data-theme="dark"] .empty-state-title { color: #f1f5f9; }
[data-theme="dark"] .empty-state-sub { color: #64748b; }
[data-theme="dark"] .empty-icon {
background: #1e293b;
border-color: #334155;
}
/* ════════════════════════════════════════════════════════════
23. DIVIDERS & SEPARATORS
════════════════════════════════════════════════════════════ */
[data-theme="dark"] hr,
[data-theme="dark"] .divider,
[data-theme="dark"] .sep {
border-color: #1e293b;
background: #1e293b;
}