/**
* ShopDesk admin themes. Controlled via html[data-theme="…"] on .
* Options: default, cream, deep-blue, midnight, paper, ocean, slate
*/
/* ─── Deep cream: warm deep cream surfaces, deep blue accents ─── */
html[data-theme="cream"] {
--bg: #2a2318;
--surface: #faf6ef;
--card: #fffdf8;
--border: #d4c4b0;
--accent: #0d3b66;
--accent2: #c45c4a;
--green: #2d8a5e;
--text: #1e1810;
--muted: #6b5f52;
--light: #4a433a;
}
html[data-theme="cream"] .platform-app {
background: #ebe4d6;
}
html[data-theme="cream"] .platform-header {
background: linear-gradient(135deg, #4a3f35 0%, #3a3228 100%);
color: #faf6ef;
border-bottom-color: rgba(255, 255, 255, 0.1);
}
html[data-theme="cream"] .platform-header .topbar-brand span {
color: #fffef8;
}
html[data-theme="cream"] .platform-header .logo-icon {
background: #0d3b66;
}
html[data-theme="cream"] .platform-header .logo-icon svg {
fill: #faf6ef;
}
html[data-theme="cream"] .platform-header .store-link {
color: #c8ddf0;
border-color: rgba(255, 255, 255, 0.22);
}
html[data-theme="cream"] .platform-header .store-link:hover {
color: #fff;
border-color: #e8c080;
}
html[data-theme="cream"] .platform-header .currency-switcher {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.18);
}
html[data-theme="cream"] .platform-header .currency-switcher label {
color: #e8c080;
}
html[data-theme="cream"] .platform-header .currency-rate-badge {
background: rgba(13, 59, 102, 0.35);
border-color: rgba(200, 220, 240, 0.35);
color: #d4e8f8;
}
html[data-theme="cream"] .platform-sidebar {
background: #faf6ef;
border-right-color: #d4c4b0;
}
html[data-theme="cream"] .platform-sidebar button.nav-item:hover {
background: #f0e8dc;
}
html[data-theme="cream"] .platform-sidebar button.nav-item.active {
background: #e4ecf5;
border-left-color: #0d3b66;
color: #0d3b66;
}
html[data-theme="cream"] .section-title {
color: #2a2318;
}
html[data-theme="cream"] .ov-card,
html[data-theme="cream"] .platform-card {
background: #fffdf8;
border-color: #d4c4b0;
box-shadow: 0 2px 10px rgba(42, 35, 24, 0.08);
}
html[data-theme="cream"] .ov-card.blue {
border-top-color: #0d3b66;
}
html[data-theme="cream"] table.platform-table th {
background: #f0e8dc;
color: #2a2318;
}
html[data-theme="cream"] table.platform-table th,
html[data-theme="cream"] table.platform-table td {
border-bottom-color: #e5d9cc;
}
html[data-theme="cream"] .btn-pf {
background: #0d3b66;
color: #fffef8;
}
html[data-theme="cream"] .btn-pf.secondary {
background: #e8dfd2;
color: #2a2318;
}
html[data-theme="cream"] .pf-modal-backdrop {
background: rgba(42, 35, 24, 0.5);
}
html[data-theme="cream"] .pf-modal-panel {
background: #fffdf8;
border-color: #d4c4b0;
}
/* ─── Bright deep blue: vivid deep blue chrome, cool light surfaces ─── */
html[data-theme="deep-blue"] {
--bg: #051525;
--surface: #f0f8ff;
--card: #ffffff;
--border: #b8d4f0;
--accent: #1565c0;
--accent2: #e53935;
--green: #00897b;
--text: #0d2137;
--muted: #546e7a;
--light: #37474f;
}
html[data-theme="deep-blue"] .platform-app {
background: #e3f2fd;
}
html[data-theme="deep-blue"] .platform-header {
background: linear-gradient(135deg, #0a4d8c 0%, #1565c0 45%, #1976d2 100%);
color: #f5fbff;
border-bottom-color: rgba(255, 255, 255, 0.15);
}
html[data-theme="deep-blue"] .platform-header .topbar-brand span {
color: #fff;
}
html[data-theme="deep-blue"] .platform-header .logo-icon {
background: #ffca28;
}
html[data-theme="deep-blue"] .platform-header .logo-icon svg {
fill: #0d47a1;
}
html[data-theme="deep-blue"] .platform-header .store-link {
color: #bbdefb;
border-color: rgba(255, 255, 255, 0.35);
}
html[data-theme="deep-blue"] .platform-header .store-link:hover {
color: #fff;
border-color: #ffca28;
}
html[data-theme="deep-blue"] .platform-header .currency-switcher {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.25);
}
html[data-theme="deep-blue"] .platform-header .currency-switcher label {
color: #ffecb3;
}
html[data-theme="deep-blue"] .platform-header .currency-rate-badge {
background: rgba(255, 202, 40, 0.2);
border-color: rgba(255, 202, 40, 0.45);
color: #fff8e1;
}
html[data-theme="deep-blue"] .platform-sidebar {
background: #fff;
border-right-color: #90caf9;
}
html[data-theme="deep-blue"] .platform-sidebar button.nav-item:hover {
background: #e3f2fd;
}
html[data-theme="deep-blue"] .platform-sidebar button.nav-item.active {
background: #e8f4fd;
border-left-color: #0d47a1;
color: #0d47a1;
}
html[data-theme="deep-blue"] .section-title {
color: #0d47a1;
}
html[data-theme="deep-blue"] .section-hint {
color: #546e7a;
}
html[data-theme="deep-blue"] .ov-card,
html[data-theme="deep-blue"] .platform-card {
background: #fff;
border-color: #90caf9;
box-shadow: 0 2px 12px rgba(13, 71, 161, 0.08);
}
html[data-theme="deep-blue"] .ov-card.blue {
border-top-color: #1565c0;
}
html[data-theme="deep-blue"] table.platform-table th {
background: #e3f2fd;
color: #0d47a1;
}
html[data-theme="deep-blue"] table.platform-table th,
html[data-theme="deep-blue"] table.platform-table td {
border-bottom-color: #e1f0ff;
}
html[data-theme="deep-blue"] .btn-pf {
background: linear-gradient(180deg, #1976d2 0%, #1565c0 100%);
color: #fff;
}
html[data-theme="deep-blue"] .btn-pf.secondary {
background: #e3f2fd;
color: #0d47a1;
}
html[data-theme="deep-blue"] .pf-modal-backdrop {
background: rgba(5, 21, 37, 0.55);
}
html[data-theme="deep-blue"] .pf-modal-panel {
background: #fff;
border-color: #90caf9;
}
html[data-theme="deep-blue"] .pf-form-grid input,
html[data-theme="deep-blue"] .pf-form-grid select {
border-color: #90caf9;
}
/* ─── Midnight: dark shell, light text (WCAG-friendly contrast) ─── */
html[data-theme="midnight"] {
--bg: #0d1117;
--surface: #161b22;
--card: #21262d;
--border: #30363d;
--accent: #58a6ff;
--accent2: #f85149;
--green: #3fb950;
--text: #e6edf3;
--muted: #8b949e;
--light: #c9d1d9;
}
html[data-theme="midnight"] .platform-app {
background: #0d1117;
}
html[data-theme="midnight"] .platform-header {
background: linear-gradient(135deg, #010409 0%, #161b22 55%, #21262d 100%);
color: #f0f6fc;
border-bottom-color: #30363d;
}
html[data-theme="midnight"] .platform-header .topbar-brand span {
color: #f0f6fc;
}
html[data-theme="midnight"] .platform-header .logo-icon {
background: #238636;
}
html[data-theme="midnight"] .platform-header .logo-icon svg {
fill: #fff;
}
html[data-theme="midnight"] .platform-header .store-link {
color: #a5d6ff;
border-color: rgba(255, 255, 255, 0.28);
}
html[data-theme="midnight"] .platform-header .store-link:hover {
color: #fff;
border-color: #58a6ff;
}
html[data-theme="midnight"] .platform-header .currency-switcher {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.18);
}
html[data-theme="midnight"] .platform-header .currency-switcher label {
color: #d4a72c;
}
html[data-theme="midnight"] .platform-header .currency-rate-badge {
background: rgba(56, 139, 253, 0.15);
border-color: rgba(88, 166, 255, 0.35);
color: #c9e1ff;
}
html[data-theme="midnight"] .platform-sidebar {
background: #161b22;
border-right-color: #30363d;
}
html[data-theme="midnight"] .platform-sidebar .nav-group-title {
color: #8b949e;
}
html[data-theme="midnight"] .platform-sidebar button.nav-item {
color: #c9d1d9;
}
html[data-theme="midnight"] .platform-sidebar button.nav-item:hover {
background: #21262d;
}
html[data-theme="midnight"] .platform-sidebar button.nav-item.active {
background: rgba(88, 166, 255, 0.12);
border-left-color: #58a6ff;
color: #58a6ff;
}
html[data-theme="midnight"] .platform-main {
color: #e6edf3;
-webkit-font-smoothing: antialiased;
}
html[data-theme="midnight"] .section-title {
color: #f0f6fc;
}
html[data-theme="midnight"] .section-hint {
color: #adbac7;
}
html[data-theme="midnight"] .ov-card,
html[data-theme="midnight"] .platform-card {
background: #21262d;
border-color: #30363d;
box-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
color: #e6edf3;
}
html[data-theme="midnight"] .ov-card.blue {
border-top-color: #58a6ff;
}
html[data-theme="midnight"] table.platform-table th {
background: #161b22;
color: #f0f6fc;
}
html[data-theme="midnight"] table.platform-table th,
html[data-theme="midnight"] table.platform-table td {
border-bottom-color: #30363d;
color: #e6edf3;
}
html[data-theme="midnight"] .btn-pf {
background: #238636;
color: #fff;
}
html[data-theme="midnight"] .btn-pf.secondary {
background: #21262d;
color: #e6edf3;
border: 1px solid #30363d;
}
html[data-theme="midnight"] .pf-modal-backdrop {
background: rgba(1, 4, 9, 0.65);
}
html[data-theme="midnight"] .pf-modal-panel {
background: #21262d;
border-color: #30363d;
color: #e6edf3;
}
html[data-theme="midnight"] .pf-form-grid input,
html[data-theme="midnight"] .pf-form-grid select,
html[data-theme="midnight"] .pf-form-grid textarea {
border-color: #30363d;
background: #0d1117;
color: #e6edf3;
}
/* Nested panels & Super Admin–heavy UI (API refs, matrix, billing) */
html[data-theme="midnight"] .platform-main a {
color: #58a6ff;
}
html[data-theme="midnight"] .platform-main a:hover {
color: #79c0ff;
}
html[data-theme="midnight"] .platform-main code {
background: #0d1117;
border: 1px solid #30363d;
color: #e6edf3;
padding: 0.1em 0.35em;
border-radius: 6px;
font-size: 0.88em;
}
html[data-theme="midnight"] .ov-card .ov-label {
color: #8b949e;
}
html[data-theme="midnight"] .ov-card .ov-value {
color: #f0f6fc;
}
html[data-theme="midnight"] #section-overview .dash-overview-api-details,
html[data-theme="midnight"] #section-overview .dash-wallet-ledger-card .dash-wallet-activity-api-details,
html[data-theme="midnight"] #section-overview .dash-wallet-adjust-card .dash-wallet-adjust-api-details,
html[data-theme="midnight"] #section-audit .dash-audit-api-details,
html[data-theme="midnight"] #section-catalog .dash-catalog-api-details,
html[data-theme="midnight"] #section-stock .dash-stock-api-details,
html[data-theme="midnight"] #section-shop-profile .dash-shop-profile-api-details,
html[data-theme="midnight"] #section-vendors .dash-vendor-api-details,
html[data-theme="midnight"] #section-roles .dash-assign-role-api-details,
html[data-theme="midnight"] #section-tax-settings .dash-tax-api-details {
border-color: #30363d;
background: #161b22;
}
html[data-theme="midnight"] #section-overview .dash-overview-api-summary,
html[data-theme="midnight"] #section-overview .dash-wallet-ledger-card .dash-wallet-activity-api-summary,
html[data-theme="midnight"] #section-overview .dash-wallet-adjust-card .dash-wallet-adjust-api-summary,
html[data-theme="midnight"] #section-audit .dash-audit-api-summary,
html[data-theme="midnight"] #section-catalog .dash-catalog-api-summary,
html[data-theme="midnight"] #section-stock .dash-stock-api-summary,
html[data-theme="midnight"] #section-shop-profile .dash-shop-profile-api-summary,
html[data-theme="midnight"] #section-vendors .dash-vendor-api-summary,
html[data-theme="midnight"] #section-roles .dash-assign-role-api-summary,
html[data-theme="midnight"] #section-tax-settings .dash-tax-api-summary {
color: #f0f6fc;
}
html[data-theme="midnight"] #section-overview .dash-overview-api-body,
html[data-theme="midnight"] #section-overview .dash-wallet-ledger-card .dash-wallet-activity-api-body,
html[data-theme="midnight"] #section-overview .dash-wallet-adjust-card .dash-wallet-adjust-api-body,
html[data-theme="midnight"] #section-audit .dash-audit-api-body,
html[data-theme="midnight"] #section-catalog .dash-catalog-api-body,
html[data-theme="midnight"] #section-stock .dash-stock-api-body,
html[data-theme="midnight"] #section-shop-profile .dash-shop-profile-api-body,
html[data-theme="midnight"] #section-vendors .dash-vendor-api-body,
html[data-theme="midnight"] #section-roles .dash-assign-role-api-body,
html[data-theme="midnight"] #section-tax-settings .dash-tax-api-body {
border-top-color: #30363d;
color: #e6edf3;
}
html[data-theme="midnight"] #section-tax-settings .dash-tax-api-dl dt {
color: #8b949e;
}
html[data-theme="midnight"] #section-tax-settings .dash-tax-api-meta {
color: #adbac7;
}
html[data-theme="midnight"] #section-overview .dash-wallet-ledger-card .dash-wallet-activity-api-p {
color: #e6edf3;
}
html[data-theme="midnight"] #section-roles .dash-assign-role-api-p {
color: #e6edf3;
}
html[data-theme="midnight"] #section-stock .dash-stock-api-p {
color: #e6edf3;
}
html[data-theme="midnight"] #section-audit .dash-audit-json-pre {
background: #0d1117;
border-color: #30363d;
color: #c9d1d9;
}
html[data-theme="midnight"] .dash-admin-api-ref-card .dash-admin-api-ref-details,
html[data-theme="midnight"] .dash-geo-card .dash-geo-help-details {
border-color: #30363d;
background: #161b22;
}
html[data-theme="midnight"] .dash-admin-api-ref-card .dash-admin-api-ref-summary,
html[data-theme="midnight"] .dash-geo-card .dash-geo-help-summary {
color: #f0f6fc;
}
html[data-theme="midnight"] .dash-admin-api-ref-card .dash-admin-api-ref-body,
html[data-theme="midnight"] .dash-geo-card .dash-geo-help-body {
border-top-color: #30363d;
color: #e6edf3;
}
html[data-theme="midnight"] .dash-admin-api-ref-card .dash-admin-api-regenerate-cmd {
background: #0d1117;
border-color: #30363d;
color: #e6edf3;
}
html[data-theme="midnight"] .dash-admin-api-ref-card .dash-rbac-legend-list {
color: #adbac7;
}
html[data-theme="midnight"] .dash-admin-api-regenerate-lead {
color: #8b949e;
}
html[data-theme="midnight"] .dash-assign-role-card .dash-assign-role-field-hint {
color: #8b949e;
}
html[data-theme="midnight"] .admin-api-matrix-table .admin-api-matrix-rbac-sep {
color: #6e7681;
}
html[data-theme="midnight"] .admin-api-matrix-table .admin-api-matrix-rbac-desc {
color: #adbac7;
}
html[data-theme="midnight"] .bc-stat-label {
color: #8b949e;
}
html[data-theme="midnight"] .bc-stat-value {
color: #f0f6fc;
}
html[data-theme="midnight"] .bc-stat-sub {
color: #adbac7;
}
html[data-theme="midnight"] .bc-progress-label {
color: #adbac7;
}
html[data-theme="midnight"] .bc-progress-track {
background: #21262d;
border-color: #30363d;
}
html[data-theme="midnight"] .stock-mgmt-intro code {
background: #0d1117;
border: 1px solid #30363d;
color: #e6edf3;
}
html[data-theme="midnight"] .dash-sessions-file-backed {
border-color: #30363d;
background: #161b22;
}
html[data-theme="midnight"] .dash-sessions-file-backed-lead {
color: #e6edf3;
}
html[data-theme="midnight"] .dash-sessions-file-backed-hint {
color: #adbac7;
}
html[data-theme="midnight"] .dash-catalog-discovery-live {
color: #8b949e;
}
html[data-theme="midnight"] #section-catalog .dash-catalog-discovery-title {
color: #f0f6fc;
}
html[data-theme="midnight"] #section-catalog .dash-catalog-api-block-title {
color: #adbac7;
}
html[data-theme="midnight"] #section-catalog .dash-catalog-card-title {
color: #f0f6fc;
}
html[data-theme="midnight"] .dash-perm-glossary-wildcard {
color: #adbac7;
}
/* ─── Paper: crisp light, near-black body text ─── */
html[data-theme="paper"] {
--bg: #f4f4f5;
--surface: #ffffff;
--card: #ffffff;
--border: #e4e4e7;
--accent: #2563eb;
--accent2: #dc2626;
--green: #15803d;
--text: #171717;
--muted: #52525b;
--light: #3f3f46;
}
html[data-theme="paper"] .platform-app {
background: #f4f4f5;
}
html[data-theme="paper"] .platform-header {
background: linear-gradient(135deg, #18181b 0%, #27272a 100%);
color: #fafafa;
border-bottom-color: #3f3f46;
}
html[data-theme="paper"] .platform-header .topbar-brand span {
color: #fff;
}
html[data-theme="paper"] .platform-header .logo-icon {
background: #2563eb;
}
html[data-theme="paper"] .platform-header .logo-icon svg {
fill: #fff;
}
html[data-theme="paper"] .platform-header .store-link {
color: #e4e4e7;
border-color: rgba(255, 255, 255, 0.35);
}
html[data-theme="paper"] .platform-header .store-link:hover {
color: #fff;
border-color: #60a5fa;
}
html[data-theme="paper"] .platform-header .currency-switcher {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.22);
}
html[data-theme="paper"] .platform-header .currency-switcher label {
color: #fbbf24;
}
html[data-theme="paper"] .platform-header .currency-rate-badge {
background: rgba(37, 99, 235, 0.25);
border-color: rgba(147, 197, 253, 0.45);
color: #eff6ff;
}
html[data-theme="paper"] .platform-sidebar {
background: #fff;
border-right-color: #e4e4e7;
}
html[data-theme="paper"] .platform-sidebar button.nav-item:hover {
background: #f4f4f5;
}
html[data-theme="paper"] .platform-sidebar button.nav-item.active {
background: #eff6ff;
border-left-color: #2563eb;
color: #1d4ed8;
}
html[data-theme="paper"] .platform-main {
color: #171717;
-webkit-font-smoothing: antialiased;
}
html[data-theme="paper"] .section-title {
color: #0a0a0a;
}
html[data-theme="paper"] .section-hint {
color: #3f3f46;
}
html[data-theme="paper"] .ov-card,
html[data-theme="paper"] .platform-card {
background: #fff;
border-color: #d4d4d8;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}
html[data-theme="paper"] .ov-card.blue {
border-top-color: #2563eb;
}
html[data-theme="paper"] table.platform-table th {
background: #f4f4f5;
color: #0a0a0a;
}
html[data-theme="paper"] table.platform-table th,
html[data-theme="paper"] table.platform-table td {
border-bottom-color: #e4e4e7;
color: #171717;
}
html[data-theme="paper"] .btn-pf {
background: #2563eb;
color: #fff;
}
html[data-theme="paper"] .btn-pf.secondary {
background: #f4f4f5;
color: #171717;
border: 1px solid #d4d4d8;
}
html[data-theme="paper"] .pf-modal-backdrop {
background: rgba(0, 0, 0, 0.5);
}
html[data-theme="paper"] .pf-modal-panel {
background: #fff;
border-color: #d4d4d8;
}
html[data-theme="paper"] .pf-form-grid input,
html[data-theme="paper"] .pf-form-grid select,
html[data-theme="paper"] .pf-form-grid textarea {
border-color: #d4d4d8;
color: #171717;
}
/* ─── Ocean: teal accents, readable green-blues ─── */
html[data-theme="ocean"] {
--bg: #ecfeff;
--surface: #ffffff;
--card: #ffffff;
--border: #99f6e4;
--accent: #0f766e;
--accent2: #c2410c;
--green: #059669;
--text: #134e4a;
--muted: #3f6b63;
--light: #115e59;
}
html[data-theme="ocean"] .platform-app {
background: #ecfeff;
}
html[data-theme="ocean"] .platform-header {
background: linear-gradient(135deg, #0d5c56 0%, #0f766e 50%, #14b8a6 100%);
color: #f0fdfa;
border-bottom-color: rgba(255, 255, 255, 0.15);
}
html[data-theme="ocean"] .platform-header .topbar-brand span {
color: #fff;
}
html[data-theme="ocean"] .platform-header .logo-icon {
background: #ccfbf1;
}
html[data-theme="ocean"] .platform-header .logo-icon svg {
fill: #0f766e;
}
html[data-theme="ocean"] .platform-header .store-link {
color: #ccfbf1;
border-color: rgba(255, 255, 255, 0.35);
}
html[data-theme="ocean"] .platform-header .store-link:hover {
color: #fff;
border-color: #fbbf24;
}
html[data-theme="ocean"] .platform-header .currency-switcher {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.25);
}
html[data-theme="ocean"] .platform-header .currency-switcher label {
color: #fef3c7;
}
html[data-theme="ocean"] .platform-header .currency-rate-badge {
background: rgba(204, 251, 241, 0.2);
border-color: rgba(204, 251, 241, 0.4);
color: #f0fdfa;
}
html[data-theme="ocean"] .platform-sidebar {
background: #fff;
border-right-color: #5eead4;
}
html[data-theme="ocean"] .platform-sidebar button.nav-item:hover {
background: #ccfbf1;
}
html[data-theme="ocean"] .platform-sidebar button.nav-item.active {
background: #e0fdfa;
border-left-color: #0f766e;
color: #0f766e;
}
html[data-theme="ocean"] .platform-main {
color: #134e4a;
-webkit-font-smoothing: antialiased;
}
html[data-theme="ocean"] .section-title {
color: #042f2e;
}
html[data-theme="ocean"] .section-hint {
color: #3f6b63;
}
html[data-theme="ocean"] .ov-card,
html[data-theme="ocean"] .platform-card {
background: #fff;
border-color: #99f6e4;
box-shadow: 0 2px 12px rgba(15, 118, 110, 0.08);
}
html[data-theme="ocean"] .ov-card.blue {
border-top-color: #0f766e;
}
html[data-theme="ocean"] table.platform-table th {
background: #ccfbf1;
color: #042f2e;
}
html[data-theme="ocean"] table.platform-table th,
html[data-theme="ocean"] table.platform-table td {
border-bottom-color: #ccfbf1;
color: #134e4a;
}
html[data-theme="ocean"] .btn-pf {
background: linear-gradient(180deg, #14b8a6 0%, #0f766e 100%);
color: #fff;
}
html[data-theme="ocean"] .btn-pf.secondary {
background: #ccfbf1;
color: #0f766e;
}
html[data-theme="ocean"] .pf-modal-backdrop {
background: rgba(4, 47, 46, 0.45);
}
html[data-theme="ocean"] .pf-modal-panel {
background: #fff;
border-color: #99f6e4;
}
html[data-theme="ocean"] .pf-form-grid input,
html[data-theme="ocean"] .pf-form-grid select,
html[data-theme="ocean"] .pf-form-grid textarea {
border-color: #99f6e4;
color: #134e4a;
}
/* ─── Slate: indigo chrome, cool neutrals ─── */
html[data-theme="slate"] {
--bg: #f1f5f9;
--surface: #ffffff;
--card: #ffffff;
--border: #cbd5e1;
--accent: #4f46e5;
--accent2: #e11d48;
--green: #059669;
--text: #0f172a;
--muted: #475569;
--light: #334155;
}
html[data-theme="slate"] .platform-app {
background: #f1f5f9;
}
html[data-theme="slate"] .platform-header {
background: linear-gradient(135deg, #312e81 0%, #4f46e5 55%, #6366f1 100%);
color: #eef2ff;
border-bottom-color: rgba(255, 255, 255, 0.12);
}
html[data-theme="slate"] .platform-header .topbar-brand span {
color: #fff;
}
html[data-theme="slate"] .platform-header .logo-icon {
background: #fde68a;
}
html[data-theme="slate"] .platform-header .logo-icon svg {
fill: #3730a3;
}
html[data-theme="slate"] .platform-header .store-link {
color: #c7d2fe;
border-color: rgba(255, 255, 255, 0.35);
}
html[data-theme="slate"] .platform-header .store-link:hover {
color: #fff;
border-color: #fde68a;
}
html[data-theme="slate"] .platform-header .currency-switcher {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.22);
}
html[data-theme="slate"] .platform-header .currency-switcher label {
color: #fde68a;
}
html[data-theme="slate"] .platform-header .currency-rate-badge {
background: rgba(99, 102, 241, 0.25);
border-color: rgba(199, 210, 254, 0.4);
color: #eef2ff;
}
html[data-theme="slate"] .platform-sidebar {
background: #fff;
border-right-color: #cbd5e1;
}
html[data-theme="slate"] .platform-sidebar button.nav-item:hover {
background: #f1f5f9;
}
html[data-theme="slate"] .platform-sidebar button.nav-item.active {
background: #eef2ff;
border-left-color: #4f46e5;
color: #4338ca;
}
html[data-theme="slate"] .platform-main {
color: #0f172a;
-webkit-font-smoothing: antialiased;
}
html[data-theme="slate"] .section-title {
color: #020617;
}
html[data-theme="slate"] .section-hint {
color: #475569;
}
html[data-theme="slate"] .ov-card,
html[data-theme="slate"] .platform-card {
background: #fff;
border-color: #cbd5e1;
box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
}
html[data-theme="slate"] .ov-card.blue {
border-top-color: #4f46e5;
}
html[data-theme="slate"] table.platform-table th {
background: #f1f5f9;
color: #0f172a;
}
html[data-theme="slate"] table.platform-table th,
html[data-theme="slate"] table.platform-table td {
border-bottom-color: #e2e8f0;
color: #0f172a;
}
html[data-theme="slate"] .btn-pf {
background: linear-gradient(180deg, #6366f1 0%, #4f46e5 100%);
color: #fff;
}
html[data-theme="slate"] .btn-pf.secondary {
background: #f1f5f9;
color: #334155;
border: 1px solid #cbd5e1;
}
html[data-theme="slate"] .pf-modal-backdrop {
background: rgba(15, 23, 42, 0.5);
}
html[data-theme="slate"] .pf-modal-panel {
background: #fff;
border-color: #cbd5e1;
}
html[data-theme="slate"] .pf-form-grid input,
html[data-theme="slate"] .pf-form-grid select,
html[data-theme="slate"] .pf-form-grid textarea {
border-color: #cbd5e1;
color: #0f172a;
}
/* Theme switcher UI */
.login-theme-row {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin-top: 1.25rem;
flex-wrap: wrap;
}
.login-theme-row label {
font-size: 0.72rem;
color: var(--muted);
}
.login-theme-row .theme-select {
background: var(--card);
border: 1px solid var(--border);
color: var(--text);
padding: 0.45rem 0.65rem;
border-radius: 8px;
font: inherit;
font-size: 0.8rem;
width: fit-content;
max-width: min(16rem, 100%);
min-width: 10ch;
cursor: pointer;
}
.theme-wrap {
display: flex;
align-items: center;
gap: 0.35rem;
}
.theme-wrap label {
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: rgba(255, 255, 255, 0.88);
white-space: nowrap;
}
.platform-header .theme-select {
font-size: 0.75rem;
padding: 0.35rem 0.5rem;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.28);
background: rgba(255, 255, 255, 0.12);
color: #fff;
width: fit-content;
max-width: min(13rem, 100%);
min-width: 11ch;
cursor: pointer;
}
.platform-header .theme-select option {
background: #1a2744;
color: #fff;
}
html[data-theme="cream"] .platform-header .theme-select option,
html[data-theme="deep-blue"] .platform-header .theme-select option,
html[data-theme="midnight"] .platform-header .theme-select option,
html[data-theme="paper"] .platform-header .theme-select option,
html[data-theme="ocean"] .platform-header .theme-select option,
html[data-theme="slate"] .platform-header .theme-select option {
background: #0d2137;
color: #f8fafc;
}
/* Theme picker text: shining deep blue-black (default) + dynamic glow */
html:not([data-theme]) .login-theme-row .theme-select,
html:not([data-theme]) .platform-header .theme-select {
color: #0c3d6b;
}
.login-theme-row .theme-select option,
.platform-header .theme-select option {
/* Default text will be overridden by theme-specific html[data-theme="…"] blocks above,
but the glow stays consistent. */
text-shadow:
0 0 12px rgba(12, 61, 107, 0.28),
0 1px 0 rgba(255, 255, 255, 0.06);
}
html:not([data-theme]) .login-theme-row .theme-select option,
html:not([data-theme]) .platform-header .theme-select option {
color: #0c3d6b;
}