244 lines
7.1 KiB
CSS
244 lines
7.1 KiB
CSS
/* ===============================
|
||
Midnight — refined dark
|
||
=============================== */
|
||
|
||
/* Page background & base ink */
|
||
html[data-theme="midnight"] body{
|
||
background:#0e1420; /* deep navy, not pure black */
|
||
color:#e6edf3; /* GitHub-like ink */
|
||
min-height:100vh;
|
||
}
|
||
|
||
/* Subtle global selection */
|
||
html[data-theme="midnight"] ::selection{ background:rgba(59,130,246,.28); }
|
||
|
||
/* ---------- Top bar ---------- */
|
||
html[data-theme="midnight"] .topbar-wrap{
|
||
background:rgba(17,25,39,.88); /* translucent */
|
||
backdrop-filter:blur(6px);
|
||
-webkit-backdrop-filter:blur(6px);
|
||
border-bottom:1px solid #1f2a44;
|
||
}
|
||
html[data-theme="midnight"] .brand-title{ color:#f0f3f8; }
|
||
html[data-theme="midnight"] .version-link{ color:#a8b3c6; }
|
||
|
||
/* ---------- Cards / panels ---------- */
|
||
html[data-theme="midnight"] .card,
|
||
html[data-theme="midnight"] .result-card,
|
||
html[data-theme="midnight"] .search-form,
|
||
html[data-theme="midnight"] .form-card{
|
||
background:#121a2b;
|
||
border:1px solid #1f2a44;
|
||
border-radius:16px;
|
||
box-shadow:0 8px 24px rgba(0,0,0,.35);
|
||
color:#e6edf3;
|
||
}
|
||
|
||
/* Section headings & muted text */
|
||
html[data-theme="midnight"] .section-label,
|
||
html[data-theme="midnight"] .meta-label,
|
||
html[data-theme="midnight"] .page-subtitle,
|
||
html[data-theme="midnight"] .muted{ color:#a8b3c6; }
|
||
html[data-theme="midnight"] .subject-title,
|
||
html[data-theme="midnight"] .page-title{ color:#f0f4ff; }
|
||
|
||
/* ---------- Inputs ---------- */
|
||
html[data-theme="midnight"] .search-input,
|
||
html[data-theme="midnight"] .form-control,
|
||
html[data-theme="midnight"] .login-input{
|
||
background:#0f1728;
|
||
border:1px solid #253151;
|
||
color:#e6edf3;
|
||
}
|
||
html[data-theme="midnight"] .search-input::placeholder,
|
||
html[data-theme="midnight"] .form-control::placeholder{ color:#8692a6; }
|
||
html[data-theme="midnight"] .search-input:focus,
|
||
html[data-theme="midnight"] .form-control:focus,
|
||
html[data-theme="midnight"] .login-input:focus{
|
||
border-color:#3b82f6;
|
||
box-shadow:0 0 0 3px rgba(59,130,246,.28);
|
||
outline:none;
|
||
}
|
||
|
||
/* Pills / check pills */
|
||
html[data-theme="midnight"] .check-pill{
|
||
background:#0f1728;
|
||
border:1px solid #253151;
|
||
color:#cfd7e4;
|
||
}
|
||
html[data-theme="midnight"] .check-pill:hover{ background:#121b30; }
|
||
|
||
/* Chips */
|
||
html[data-theme="midnight"] .chip,
|
||
html[data-theme="midnight"] .chip-link{
|
||
background:#0f1728;
|
||
border:1px solid #273455;
|
||
color:#cfd7e4;
|
||
}
|
||
html[data-theme="midnight"] .chip-muted{
|
||
background:#0e1626;
|
||
color:#9aa6bb;
|
||
}
|
||
|
||
/* ---------- Buttons ---------- */
|
||
html[data-theme="midnight"] .btn{
|
||
background:#0f1728;
|
||
border:1px solid #273455;
|
||
color:#e6edf3;
|
||
}
|
||
html[data-theme="midnight"] .btn:hover{ background:#141f35; }
|
||
|
||
html[data-theme="midnight"] .btn-primary{
|
||
background:#3b82f6; /* blue-500 */
|
||
border-color:#3b82f6;
|
||
color:#fff;
|
||
}
|
||
html[data-theme="midnight"] .btn-primary:hover{
|
||
background:#2563eb; /* blue-600 */
|
||
border-color:#2563eb;
|
||
}
|
||
html[data-theme="midnight"] .btn-danger{
|
||
background:#ef4444;
|
||
border-color:#ef4444;
|
||
color:#fff;
|
||
}
|
||
html[data-theme="midnight"] .btn-danger:hover{
|
||
filter:brightness(.95);
|
||
}
|
||
|
||
/* Header nav buttons (Find/Create/Insights) */
|
||
html[data-theme="midnight"] .nav-btn{
|
||
background:#0f1728;
|
||
border:1px solid #273455;
|
||
color:#dbe5f1;
|
||
}
|
||
html[data-theme="midnight"] .nav-btn:hover{ background:#16223a; }
|
||
html[data-theme="midnight"] .nav-btn.primary{
|
||
background:#3b82f6; border-color:#3b82f6; color:#fff;
|
||
}
|
||
|
||
/* User menu + mobile menu */
|
||
html[data-theme="midnight"] .user-menu,
|
||
html[data-theme="midnight"] .mobile-menu-inner{
|
||
background:#121a2b;
|
||
border:1px solid #273455;
|
||
}
|
||
html[data-theme="midnight"] .user-menu .menu-item:hover,
|
||
html[data-theme="midnight"] .mobile-link:hover{ background:#18233b; }
|
||
|
||
/* ---------- Messages ---------- */
|
||
html[data-theme="midnight"] .msg{
|
||
background:#0f1728; border-color:#24314f; color:#dbe5f1;
|
||
}
|
||
html[data-theme="midnight"] .msg.info{ background:#0f1728; border-color:#3b82f6; }
|
||
html[data-theme="midnight"] .msg.success{ background:#0f1728; border-color:#22c55e; }
|
||
html[data-theme="midnight"] .msg.warning{ background:#0f1728; border-color:#f59e0b; }
|
||
html[data-theme="midnight"] .msg.error{ background:#0f1728; border-color:#ef4444; }
|
||
|
||
/* ---------- Links ---------- */
|
||
html[data-theme="midnight"] a{ color:#93c5fd; }
|
||
html[data-theme="midnight"] a:hover{ color:#bfdbfe; }
|
||
|
||
/* ---------- Misc polish ---------- */
|
||
html[data-theme="midnight"] .rt-count,
|
||
html[data-theme="midnight"] .meta-value.small{ color:#a8b3c6; }
|
||
|
||
html[data-theme="midnight"] .topbar-wrap.is-scrolled{
|
||
box-shadow:0 6px 24px rgba(0,0,0,.45);
|
||
border-bottom-color:transparent;
|
||
}
|
||
|
||
/* Keep Classic’s gradient opt-in separate; Midnight doesn’t use .themed-bg */
|
||
|
||
/* =========================================
|
||
Midnight — Command Center fixes
|
||
========================================= */
|
||
|
||
/* Panel containers */
|
||
html[data-theme="midnight"] .settings-console .cc-panel{
|
||
background:#121a2b; /* match other cards */
|
||
border:1px solid #1f2a44;
|
||
color:#e6edf3;
|
||
}
|
||
|
||
/* Titles, labels, kickers */
|
||
html[data-theme="midnight"] .settings-console .cc-title,
|
||
html[data-theme="midnight"] .settings-console .cc-panel-title{
|
||
color:#f0f4ff;
|
||
}
|
||
html[data-theme="midnight"] .settings-console .cc-kicker{
|
||
color:#9fb0c6; /* muted header label */
|
||
}
|
||
|
||
/* Buttons inside Command Center reuse midnight buttons,
|
||
but ensure the “Save/Publish” contrast is right */
|
||
html[data-theme="midnight"] .settings-console .btn{
|
||
background:#0f1728;
|
||
border:1px solid #273455;
|
||
color:#e6edf3;
|
||
}
|
||
html[data-theme="midnight"] .settings-console .btn-primary{
|
||
background:#3b82f6;
|
||
border-color:#3b82f6;
|
||
color:#fff;
|
||
}
|
||
html[data-theme="midnight"] .settings-console .btn-danger{
|
||
background:#ef4444;
|
||
border-color:#ef4444;
|
||
color:#fff;
|
||
}
|
||
|
||
/* Theme swatches: soften label pill + tile hover */
|
||
html[data-theme="midnight"] .settings-console .swatch{
|
||
border-color:#273455;
|
||
background:linear-gradient(135deg,#0f1728,#1c2741);
|
||
}
|
||
html[data-theme="midnight"] .settings-console .swatch:hover{
|
||
filter:brightness(1.06);
|
||
}
|
||
html[data-theme="midnight"] .settings-console .swatch-name{
|
||
background:rgba(255,255,255,.12);
|
||
color:#e6edf3;
|
||
}
|
||
|
||
/* Security tiles */
|
||
html[data-theme="midnight"] .settings-console .sec-tile{
|
||
background:rgba(18,26,43,.92);
|
||
border-color:rgba(34,197,94,.25);
|
||
color:#e6edf3;
|
||
}
|
||
html[data-theme="midnight"] .settings-console .sec-tile:hover{
|
||
border-color:rgba(34,197,94,.45);
|
||
box-shadow:0 10px 24px rgba(0,0,0,.35);
|
||
}
|
||
html[data-theme="midnight"] .settings-console .sec-icon{
|
||
background:rgba(34,197,94,.16);
|
||
color:#86efac;
|
||
}
|
||
html[data-theme="midnight"] .settings-console .sec-sub{
|
||
color:#9fb0c6;
|
||
}
|
||
html[data-theme="midnight"] .settings-console .sec-cta{
|
||
color:#e6edf3;
|
||
opacity:.8;
|
||
}
|
||
|
||
/* Inputs in Comms panel */
|
||
html[data-theme="midnight"] .settings-console .tool-input{
|
||
background:#0f1728;
|
||
border:1px solid #253151;
|
||
color:#e6edf3;
|
||
}
|
||
html[data-theme="midnight"] .settings-console .tool-input::placeholder{
|
||
color:#8692a6;
|
||
}
|
||
html[data-theme="midnight"] .settings-console .tool-input:focus{
|
||
border-color:#3b82f6;
|
||
box-shadow:0 0 0 3px rgba(59,130,246,.28);
|
||
outline:none;
|
||
}
|
||
|
||
/* Toggle switch track looks a bit dark otherwise */
|
||
html[data-theme="midnight"] .settings-console .slider{
|
||
background:#223055;
|
||
} |