fix dark mode styling
This commit is contained in:
+96
-94
@@ -2379,105 +2379,107 @@ select:focus {
|
|||||||
border: 1px dashed var(--line-strong);
|
border: 1px dashed var(--line-strong);
|
||||||
}
|
}
|
||||||
|
|
||||||
body[data-theme="fakegpt"] {
|
@media (prefers-color-scheme: dark) {
|
||||||
--bg: #0b0f0d;
|
body[data-theme="fakegpt"] {
|
||||||
--bg-soft: #111715;
|
--bg: #0b0f0d;
|
||||||
--surface: rgba(18, 24, 21, 0.88);
|
--bg-soft: #111715;
|
||||||
--surface-strong: rgba(18, 24, 21, 0.96);
|
--surface: rgba(18, 24, 21, 0.88);
|
||||||
--text: #e8fff7;
|
--surface-strong: rgba(18, 24, 21, 0.96);
|
||||||
--text-soft: #b7d8ce;
|
--text: #e8fff7;
|
||||||
--text-muted: #87aea3;
|
--text-soft: #b7d8ce;
|
||||||
--line: rgba(36, 255, 180, 0.12);
|
--text-muted: #87aea3;
|
||||||
--line-strong: rgba(36, 255, 180, 0.2);
|
--line: rgba(36, 255, 180, 0.12);
|
||||||
--shadow: 0 0 0 1px rgba(36, 255, 180, 0.05), 0 0 26px rgba(16, 163, 127, 0.12);
|
--line-strong: rgba(36, 255, 180, 0.2);
|
||||||
--bg-gradient: linear-gradient(180deg, #0b0f0d 0%, #111715 100%);
|
--shadow: 0 0 0 1px rgba(36, 255, 180, 0.05), 0 0 26px rgba(16, 163, 127, 0.12);
|
||||||
--hero-gradient: linear-gradient(180deg, rgba(10, 15, 13, 0.96), rgba(18, 24, 21, 0.92));
|
--bg-gradient: linear-gradient(180deg, #0b0f0d 0%, #111715 100%);
|
||||||
--overview-gradient: linear-gradient(180deg, rgba(10, 15, 13, 0.96), rgba(18, 24, 21, 0.92));
|
--hero-gradient: linear-gradient(180deg, rgba(10, 15, 13, 0.96), rgba(18, 24, 21, 0.92));
|
||||||
--panel-subtle: rgba(10, 15, 13, 0.92);
|
--overview-gradient: linear-gradient(180deg, rgba(10, 15, 13, 0.96), rgba(18, 24, 21, 0.92));
|
||||||
--panel-soft: rgba(18, 24, 21, 0.9);
|
--panel-subtle: rgba(10, 15, 13, 0.92);
|
||||||
--panel-soft-strong: rgba(18, 24, 21, 0.92);
|
--panel-soft: rgba(18, 24, 21, 0.9);
|
||||||
--chip-surface: rgba(10, 15, 13, 0.92);
|
--panel-soft-strong: rgba(18, 24, 21, 0.92);
|
||||||
--chip-muted: rgba(36, 255, 180, 0.08);
|
--chip-surface: rgba(10, 15, 13, 0.92);
|
||||||
--field-surface: rgba(10, 15, 13, 0.96);
|
--chip-muted: rgba(36, 255, 180, 0.08);
|
||||||
--field-surface-strong: rgba(10, 15, 13, 0.96);
|
--field-surface: rgba(10, 15, 13, 0.96);
|
||||||
--field-focus-surface: rgba(12, 19, 16, 0.98);
|
--field-surface-strong: rgba(10, 15, 13, 0.96);
|
||||||
--field-focus-border: rgba(36, 255, 180, 0.26);
|
--field-focus-surface: rgba(12, 19, 16, 0.98);
|
||||||
--field-focus-ring: 0 0 0 4px rgba(16, 163, 127, 0.14);
|
--field-focus-border: rgba(36, 255, 180, 0.26);
|
||||||
--status-surface: rgba(18, 24, 21, 0.9);
|
--field-focus-ring: 0 0 0 4px rgba(16, 163, 127, 0.14);
|
||||||
--status-border: rgba(36, 255, 180, 0.12);
|
--status-surface: rgba(18, 24, 21, 0.9);
|
||||||
--status-error-surface: rgba(181, 71, 61, 0.16);
|
--status-border: rgba(36, 255, 180, 0.12);
|
||||||
--status-error-border: rgba(181, 71, 61, 0.28);
|
--status-error-surface: rgba(181, 71, 61, 0.16);
|
||||||
--status-success-surface: rgba(16, 163, 127, 0.14);
|
--status-error-border: rgba(181, 71, 61, 0.28);
|
||||||
--status-success-border: rgba(36, 255, 180, 0.24);
|
--status-success-surface: rgba(16, 163, 127, 0.14);
|
||||||
--secondary-surface: rgba(18, 24, 21, 0.96);
|
--status-success-border: rgba(36, 255, 180, 0.24);
|
||||||
--secondary-surface-strong: rgba(16, 163, 127, 0.16);
|
--secondary-surface: rgba(18, 24, 21, 0.96);
|
||||||
--secondary-border: rgba(36, 255, 180, 0.16);
|
--secondary-surface-strong: rgba(16, 163, 127, 0.16);
|
||||||
--secondary-border-strong: rgba(36, 255, 180, 0.26);
|
--secondary-border: rgba(36, 255, 180, 0.16);
|
||||||
--item-hover-border: rgba(36, 255, 180, 0.22);
|
--secondary-border-strong: rgba(36, 255, 180, 0.26);
|
||||||
--item-active-border: rgba(36, 255, 180, 0.34);
|
--item-hover-border: rgba(36, 255, 180, 0.22);
|
||||||
--overlay-surface: linear-gradient(180deg, rgba(9, 14, 12, 0.82), rgba(15, 22, 19, 0.9));
|
--item-active-border: rgba(36, 255, 180, 0.34);
|
||||||
--overlay-card-surface: linear-gradient(155deg, rgba(14, 20, 18, 0.96), rgba(18, 24, 21, 0.94));
|
--overlay-surface: linear-gradient(180deg, rgba(9, 14, 12, 0.82), rgba(15, 22, 19, 0.9));
|
||||||
--overlay-card-border: rgba(36, 255, 180, 0.16);
|
--overlay-card-surface: linear-gradient(155deg, rgba(14, 20, 18, 0.96), rgba(18, 24, 21, 0.94));
|
||||||
--overlay-card-shadow: 0 24px 70px rgba(3, 10, 8, 0.5);
|
--overlay-card-border: rgba(36, 255, 180, 0.16);
|
||||||
--prompt-chip-surface: rgba(18, 24, 21, 0.9);
|
--overlay-card-shadow: 0 24px 70px rgba(3, 10, 8, 0.5);
|
||||||
--messages-surface: rgba(18, 24, 21, 0.88);
|
--prompt-chip-surface: rgba(18, 24, 21, 0.9);
|
||||||
--pill-surface: rgba(18, 24, 21, 0.9);
|
--messages-surface: rgba(18, 24, 21, 0.88);
|
||||||
--pill-border: rgba(36, 255, 180, 0.14);
|
--pill-surface: rgba(18, 24, 21, 0.9);
|
||||||
--tag-surface: rgba(36, 255, 180, 0.08);
|
--pill-border: rgba(36, 255, 180, 0.14);
|
||||||
--tag-ai-surface: rgba(16, 163, 127, 0.16);
|
--tag-surface: rgba(36, 255, 180, 0.08);
|
||||||
--tag-user-surface: rgba(36, 255, 180, 0.12);
|
--tag-ai-surface: rgba(16, 163, 127, 0.16);
|
||||||
background: radial-gradient(circle at top left, rgba(16, 163, 127, 0.15), transparent 26%), linear-gradient(180deg, #0b0f0d 0%, #111715 100%);
|
--tag-user-surface: rgba(36, 255, 180, 0.12);
|
||||||
color: #e8fff7;
|
background: radial-gradient(circle at top left, rgba(16, 163, 127, 0.15), transparent 26%), linear-gradient(180deg, #0b0f0d 0%, #111715 100%);
|
||||||
color-scheme: dark;
|
color: #e8fff7;
|
||||||
}
|
color-scheme: dark;
|
||||||
|
}
|
||||||
|
|
||||||
body[data-theme="fakegpt"] .card,
|
body[data-theme="fakegpt"] .card,
|
||||||
body[data-theme="fakegpt"] .chat-sidebar,
|
body[data-theme="fakegpt"] .chat-sidebar,
|
||||||
body[data-theme="fakegpt"] .messages-panel,
|
body[data-theme="fakegpt"] .messages-panel,
|
||||||
body[data-theme="fakegpt"] .input-shell,
|
body[data-theme="fakegpt"] .input-shell,
|
||||||
body[data-theme="fakegpt"] .market-shell,
|
body[data-theme="fakegpt"] .market-shell,
|
||||||
body[data-theme="fakegpt"] .settings-panel,
|
body[data-theme="fakegpt"] .settings-panel,
|
||||||
body[data-theme="fakegpt"] .modal-card,
|
body[data-theme="fakegpt"] .modal-card,
|
||||||
body[data-theme="fakegpt"] .persona-popover {
|
body[data-theme="fakegpt"] .persona-popover {
|
||||||
background: rgba(18, 24, 21, 0.88);
|
background: rgba(18, 24, 21, 0.88);
|
||||||
border-color: rgba(36, 255, 180, 0.14);
|
border-color: rgba(36, 255, 180, 0.14);
|
||||||
box-shadow: 0 0 0 1px rgba(36, 255, 180, 0.05), 0 0 26px rgba(16, 163, 127, 0.12);
|
box-shadow: 0 0 0 1px rgba(36, 255, 180, 0.05), 0 0 26px rgba(16, 163, 127, 0.12);
|
||||||
}
|
}
|
||||||
|
|
||||||
body[data-theme="fakegpt"] .auth-panel,
|
body[data-theme="fakegpt"] .auth-panel,
|
||||||
body[data-theme="fakegpt"] .auth-hero,
|
body[data-theme="fakegpt"] .auth-hero,
|
||||||
body[data-theme="fakegpt"] .workspace-overview,
|
body[data-theme="fakegpt"] .workspace-overview,
|
||||||
body[data-theme="fakegpt"] .hero-stat,
|
body[data-theme="fakegpt"] .hero-stat,
|
||||||
body[data-theme="fakegpt"] .summary-card,
|
body[data-theme="fakegpt"] .summary-card,
|
||||||
body[data-theme="fakegpt"] .context-pill,
|
body[data-theme="fakegpt"] .context-pill,
|
||||||
body[data-theme="fakegpt"] .prompt-chip,
|
body[data-theme="fakegpt"] .prompt-chip,
|
||||||
body[data-theme="fakegpt"] .status,
|
body[data-theme="fakegpt"] .status,
|
||||||
body[data-theme="fakegpt"] .model-popover,
|
body[data-theme="fakegpt"] .model-popover,
|
||||||
body[data-theme="fakegpt"] .model-select,
|
body[data-theme="fakegpt"] .model-select,
|
||||||
body[data-theme="fakegpt"] .model-help {
|
body[data-theme="fakegpt"] .model-help {
|
||||||
background: rgba(18, 24, 21, 0.9);
|
background: rgba(18, 24, 21, 0.9);
|
||||||
color: #e8fff7;
|
color: #e8fff7;
|
||||||
border-color: rgba(36, 255, 180, 0.12);
|
border-color: rgba(36, 255, 180, 0.12);
|
||||||
}
|
}
|
||||||
|
|
||||||
body[data-theme="fakegpt"] .chat-item,
|
body[data-theme="fakegpt"] .chat-item,
|
||||||
body[data-theme="fakegpt"] .persona-item,
|
body[data-theme="fakegpt"] .persona-item,
|
||||||
body[data-theme="fakegpt"] .hero-panel {
|
body[data-theme="fakegpt"] .hero-panel {
|
||||||
background: rgba(10, 15, 13, 0.92);
|
background: rgba(10, 15, 13, 0.92);
|
||||||
border-color: rgba(36, 255, 180, 0.12);
|
border-color: rgba(36, 255, 180, 0.12);
|
||||||
}
|
}
|
||||||
|
|
||||||
body[data-theme="fakegpt"] .msg.user {
|
body[data-theme="fakegpt"] .msg.user {
|
||||||
border-radius: 24px 24px 8px 24px;
|
border-radius: 24px 24px 8px 24px;
|
||||||
box-shadow: 0 0 24px rgba(16, 163, 127, 0.22);
|
box-shadow: 0 0 24px rgba(16, 163, 127, 0.22);
|
||||||
}
|
}
|
||||||
|
|
||||||
body[data-theme="fakegpt"] .msg.bot,
|
body[data-theme="fakegpt"] .msg.bot,
|
||||||
body[data-theme="fakegpt"] .msg.loading {
|
body[data-theme="fakegpt"] .msg.loading {
|
||||||
background: #141917;
|
background: #141917;
|
||||||
border: 1px solid rgba(36, 255, 180, 0.08);
|
border: 1px solid rgba(36, 255, 180, 0.08);
|
||||||
border-radius: 24px 24px 24px 8px;
|
border-radius: 24px 24px 24px 8px;
|
||||||
box-shadow: 0 0 18px rgba(16, 163, 127, 0.08);
|
box-shadow: 0 0 18px rgba(16, 163, 127, 0.08);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
body[data-theme="fakegpt"] .typing-dot {
|
body[data-theme="fakegpt"] .typing-dot {
|
||||||
|
|||||||
Reference in New Issue
Block a user