fix styling
This commit is contained in:
@@ -6044,3 +6044,333 @@ body:not([data-theme]) #marketUserPersonaList {
|
||||
max-height: none;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/* Dark mode normalization must stay last; earlier theme-specific component rules are mixed with light-mode colors. */
|
||||
body[data-theme-mode="dark"] {
|
||||
--bg: #0f1218;
|
||||
--bg-soft: #151a22;
|
||||
--surface: rgba(23, 28, 37, 0.88);
|
||||
--surface-strong: rgba(27, 33, 43, 0.94);
|
||||
--text: #eef3ff;
|
||||
--text-soft: #c2ccdc;
|
||||
--text-muted: #96a2b6;
|
||||
--line: rgba(238, 243, 255, 0.1);
|
||||
--line-strong: rgba(238, 243, 255, 0.18);
|
||||
--shadow: 0 18px 44px rgba(0, 0, 0, 0.32);
|
||||
--bg-gradient: linear-gradient(180deg, #0f1218 0%, #151a22 100%);
|
||||
--bg-overlay: linear-gradient(rgba(255, 255, 255, 0.015), rgba(255, 255, 255, 0.015));
|
||||
--hero-gradient: linear-gradient(180deg, rgba(20, 25, 34, 0.98), rgba(27, 33, 43, 0.94));
|
||||
--overview-gradient: var(--hero-gradient);
|
||||
--panel-subtle: rgba(24, 29, 39, 0.74);
|
||||
--panel-soft: rgba(30, 36, 48, 0.82);
|
||||
--panel-soft-strong: rgba(35, 42, 55, 0.92);
|
||||
--chip-surface: rgba(31, 37, 49, 0.86);
|
||||
--chip-muted: rgba(238, 243, 255, 0.07);
|
||||
--field-surface: rgba(18, 22, 31, 0.96);
|
||||
--field-surface-strong: rgba(18, 22, 31, 0.98);
|
||||
--field-focus-surface: rgba(24, 29, 39, 0.98);
|
||||
--status-surface: rgba(26, 31, 41, 0.92);
|
||||
--status-border: rgba(238, 243, 255, 0.08);
|
||||
--secondary-surface: color-mix(in srgb, var(--brand) 14%, rgba(24, 29, 39, 0.9));
|
||||
--secondary-surface-strong: color-mix(in srgb, var(--brand) 24%, rgba(24, 29, 39, 0.94));
|
||||
--secondary-border: color-mix(in srgb, var(--brand) 36%, rgba(238, 243, 255, 0.12));
|
||||
--secondary-border-strong: color-mix(in srgb, var(--brand) 50%, rgba(238, 243, 255, 0.16));
|
||||
--item-hover-border: color-mix(in srgb, var(--brand) 34%, rgba(238, 243, 255, 0.12));
|
||||
--item-active-border: color-mix(in srgb, var(--brand) 48%, rgba(238, 243, 255, 0.16));
|
||||
--overlay-surface: linear-gradient(180deg, rgba(9, 12, 18, 0.84), rgba(17, 22, 31, 0.92));
|
||||
--overlay-card-surface: linear-gradient(155deg, rgba(24, 29, 39, 0.98), rgba(31, 37, 49, 0.96));
|
||||
--overlay-card-border: rgba(238, 243, 255, 0.12);
|
||||
--overlay-card-shadow: 0 28px 80px rgba(0, 0, 0, 0.46);
|
||||
--prompt-chip-surface: rgba(31, 37, 49, 0.9);
|
||||
--messages-surface: rgba(22, 27, 37, 0.78);
|
||||
--pill-surface: rgba(31, 37, 49, 0.88);
|
||||
--pill-border: rgba(238, 243, 255, 0.1);
|
||||
--tag-surface: rgba(238, 243, 255, 0.07);
|
||||
--tag-ai-surface: color-mix(in srgb, var(--brand) 16%, rgba(238, 243, 255, 0.04));
|
||||
--tag-user-surface: color-mix(in srgb, var(--success) 18%, rgba(238, 243, 255, 0.04));
|
||||
--panel-elevated: rgba(27, 33, 43, 0.98);
|
||||
--sidebar-bg: rgba(22, 27, 37, 0.9);
|
||||
--sidebar-border: rgba(238, 243, 255, 0.09);
|
||||
--message-user-text: #f7fbff;
|
||||
--message-bot-bg: rgba(27, 33, 43, 0.98);
|
||||
--message-bot-text: #eef3ff;
|
||||
--composer-bg: rgba(18, 22, 31, 0.98);
|
||||
--composer-shadow: 0 -16px 36px rgba(0, 0, 0, 0.22);
|
||||
--nav-surface: rgba(20, 25, 34, 0.92);
|
||||
--nav-item-surface: rgba(31, 37, 49, 0.9);
|
||||
--editorial-surface: linear-gradient(180deg, rgba(25, 30, 40, 0.98), rgba(31, 37, 49, 0.95));
|
||||
--ui-bg: var(--bg-gradient);
|
||||
--ui-surface: var(--surface-strong);
|
||||
--ui-surface-raised: var(--panel-elevated);
|
||||
--ui-surface-soft: var(--panel-soft);
|
||||
--ui-border: var(--line);
|
||||
--ui-border-strong: var(--line-strong);
|
||||
--ui-text: var(--text);
|
||||
--ui-text-secondary: var(--text-soft);
|
||||
--ui-text-muted: var(--text-muted);
|
||||
--ui-accent: var(--brand);
|
||||
--ui-accent-strong: var(--brand-strong);
|
||||
--ui-danger: var(--error);
|
||||
--ui-shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.24);
|
||||
--ui-shadow-md: 0 22px 58px rgba(0, 0, 0, 0.34);
|
||||
--ui-shadow-lg: 0 34px 92px rgba(0, 0, 0, 0.48);
|
||||
background: var(--ui-bg);
|
||||
color: var(--ui-text);
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
body[data-theme-mode="dark"][data-theme="fakegpt"] {
|
||||
--bg-gradient: linear-gradient(180deg, #0b0f0d 0%, #111715 100%);
|
||||
--panel-elevated: rgba(18, 24, 21, 0.98);
|
||||
--nav-surface: rgba(13, 18, 16, 0.94);
|
||||
--nav-item-surface: rgba(20, 27, 24, 0.92);
|
||||
--field-surface: rgba(10, 15, 13, 0.96);
|
||||
--field-surface-strong: rgba(10, 15, 13, 0.98);
|
||||
--message-bot-bg: rgba(18, 24, 21, 0.98);
|
||||
--message-bot-text: #e8fff7;
|
||||
--composer-bg: rgba(10, 15, 13, 0.98);
|
||||
--editorial-surface: linear-gradient(180deg, rgba(14, 20, 18, 0.98), rgba(18, 24, 21, 0.95));
|
||||
}
|
||||
|
||||
body[data-theme-mode="dark"][data-theme="fraud"] {
|
||||
--bg-gradient: linear-gradient(180deg, #17120f 0%, #241a14 100%);
|
||||
--text: #f5ece2;
|
||||
--text-soft: #d6c2ad;
|
||||
--text-muted: #ad9279;
|
||||
--line: rgba(245, 220, 197, 0.1);
|
||||
--line-strong: rgba(245, 220, 197, 0.18);
|
||||
--panel-elevated: rgba(39, 29, 23, 0.98);
|
||||
--nav-surface: rgba(34, 25, 20, 0.92);
|
||||
--nav-item-surface: rgba(48, 36, 29, 0.92);
|
||||
--field-surface: rgba(31, 23, 18, 0.96);
|
||||
--field-surface-strong: rgba(31, 23, 18, 0.98);
|
||||
--message-bot-bg: rgba(43, 32, 25, 0.98);
|
||||
--message-bot-text: #f5ece2;
|
||||
--composer-bg: rgba(31, 23, 18, 0.98);
|
||||
--editorial-surface: linear-gradient(180deg, rgba(39, 29, 23, 0.97), rgba(51, 38, 30, 0.94));
|
||||
}
|
||||
|
||||
body[data-theme-mode="dark"][data-theme="germini"] {
|
||||
--bg-gradient: linear-gradient(180deg, #12162a 0%, #1e2440 100%);
|
||||
--panel-elevated: rgba(24, 27, 52, 0.94);
|
||||
--nav-surface: rgba(21, 24, 47, 0.88);
|
||||
--nav-item-surface: rgba(35, 39, 72, 0.84);
|
||||
--field-surface: rgba(21, 24, 47, 0.9);
|
||||
--field-surface-strong: rgba(21, 24, 47, 0.96);
|
||||
--message-bot-bg: rgba(29, 33, 61, 0.94);
|
||||
--message-bot-text: #eef3ff;
|
||||
--composer-bg: rgba(21, 24, 47, 0.96);
|
||||
--editorial-surface: linear-gradient(180deg, rgba(26, 30, 58, 0.94), rgba(37, 40, 74, 0.9));
|
||||
}
|
||||
|
||||
body[data-theme-mode="dark"][data-theme="slopilot"] {
|
||||
--bg-gradient: linear-gradient(180deg, #0d1524 0%, #14213a 100%);
|
||||
--panel-elevated: rgba(18, 28, 48, 0.98);
|
||||
--nav-surface: rgba(15, 25, 44, 0.94);
|
||||
--nav-item-surface: rgba(24, 39, 66, 0.92);
|
||||
--field-surface: rgba(13, 22, 39, 0.96);
|
||||
--field-surface-strong: rgba(13, 22, 39, 0.98);
|
||||
--message-bot-bg: rgba(18, 30, 52, 0.98);
|
||||
--message-bot-text: #eef6ff;
|
||||
--composer-bg: rgba(13, 22, 39, 0.98);
|
||||
--editorial-surface: linear-gradient(180deg, rgba(18, 28, 48, 0.97), rgba(22, 36, 62, 0.94));
|
||||
}
|
||||
|
||||
body[data-theme-mode="dark"][data-theme="beta-ai"] {
|
||||
--bg-gradient: linear-gradient(180deg, #151329 0%, #221d3e 100%);
|
||||
--panel-elevated: rgba(28, 25, 54, 0.98);
|
||||
--nav-surface: rgba(24, 21, 48, 0.94);
|
||||
--nav-item-surface: rgba(39, 34, 72, 0.92);
|
||||
--field-surface: rgba(22, 19, 45, 0.96);
|
||||
--field-surface-strong: rgba(22, 19, 45, 0.98);
|
||||
--message-bot-bg: linear-gradient(145deg, rgba(31, 27, 61, 0.98), rgba(43, 36, 78, 0.96));
|
||||
--message-bot-text: #f2efff;
|
||||
--composer-bg: rgba(22, 19, 45, 0.98);
|
||||
--editorial-surface: linear-gradient(180deg, rgba(31, 27, 61, 0.97), rgba(43, 36, 78, 0.94));
|
||||
}
|
||||
|
||||
body[data-theme-mode="dark"][data-theme="confusity"] {
|
||||
--bg-gradient: linear-gradient(180deg, #11151d 0%, #1a1f2a 100%);
|
||||
--panel-elevated: rgba(24, 28, 38, 0.98);
|
||||
--nav-surface: rgba(20, 24, 33, 0.94);
|
||||
--nav-item-surface: rgba(31, 36, 48, 0.94);
|
||||
--field-surface: rgba(18, 22, 31, 0.96);
|
||||
--field-surface-strong: rgba(18, 22, 31, 0.98);
|
||||
--message-user-bg: rgba(31, 36, 48, 0.94);
|
||||
--message-user-text: #eef3ff;
|
||||
--message-bot-bg: rgba(24, 28, 38, 0.98);
|
||||
--message-bot-text: #eef3ff;
|
||||
--composer-bg: rgba(18, 22, 31, 0.98);
|
||||
--editorial-surface: linear-gradient(180deg, rgba(24, 28, 38, 0.98), rgba(31, 36, 48, 0.95));
|
||||
}
|
||||
|
||||
body[data-theme-mode="dark"] .chat-main,
|
||||
body[data-theme-mode="dark"] .chat-main-focus,
|
||||
body[data-theme-mode="dark"] .settings-shell,
|
||||
body[data-theme-mode="dark"] .market-shell,
|
||||
body[data-theme-mode="dark"] .messages-empty {
|
||||
background: var(--editorial-surface);
|
||||
}
|
||||
|
||||
body[data-theme-mode="dark"] .chat-sidebar,
|
||||
body[data-theme-mode="dark"] .chat-header,
|
||||
body[data-theme-mode="dark"] .chat-header-focus,
|
||||
body[data-theme-mode="dark"] .input-container,
|
||||
body[data-theme-mode="dark"] .settings-panel,
|
||||
body[data-theme-mode="dark"] .market-preview-details > div,
|
||||
body[data-theme-mode="dark"] .persona-item,
|
||||
body[data-theme-mode="dark"] .modal-card,
|
||||
body[data-theme-mode="dark"] .chat-drawer-panel,
|
||||
body[data-theme-mode="dark"] .model-popover,
|
||||
body[data-theme-mode="dark"] .model-select,
|
||||
body[data-theme-mode="dark"] .model-help,
|
||||
body[data-theme-mode="dark"] .persona-popover,
|
||||
body[data-theme-mode="dark"] .persona-form-intro,
|
||||
body[data-theme-mode="dark"] .persona-form .field,
|
||||
body[data-theme-mode="dark"] .roleplay-starter-intro,
|
||||
body[data-theme-mode="dark"] .dialogue-format-card,
|
||||
body[data-theme-mode="dark"] .auth-panel,
|
||||
body[data-theme-mode="dark"] .auth-hero,
|
||||
body[data-theme-mode="dark"] .workspace-overview,
|
||||
body[data-theme-mode="dark"] .summary-card,
|
||||
body[data-theme-mode="dark"] .hero-stat {
|
||||
background: var(--ui-surface-raised);
|
||||
border-color: var(--ui-border);
|
||||
color: var(--ui-text);
|
||||
}
|
||||
|
||||
body[data-theme-mode="dark"] .chat-card,
|
||||
body[data-theme-mode="dark"] .card {
|
||||
background: var(--ui-surface);
|
||||
border-color: var(--ui-border);
|
||||
color: var(--ui-text);
|
||||
}
|
||||
|
||||
body[data-theme-mode="dark"] input,
|
||||
body[data-theme-mode="dark"] textarea,
|
||||
body[data-theme-mode="dark"] select,
|
||||
body[data-theme-mode="dark"] .model-select-control select {
|
||||
background: var(--field-surface-strong);
|
||||
border-color: var(--ui-border-strong);
|
||||
color: var(--ui-text);
|
||||
}
|
||||
|
||||
body[data-theme-mode="dark"] input::placeholder,
|
||||
body[data-theme-mode="dark"] textarea::placeholder {
|
||||
color: var(--ui-text-muted);
|
||||
}
|
||||
|
||||
body[data-theme-mode="dark"] option {
|
||||
background: var(--field-surface-strong);
|
||||
color: var(--ui-text);
|
||||
}
|
||||
|
||||
body[data-theme-mode="dark"] .secondary-action,
|
||||
body[data-theme-mode="dark"] .icon-button,
|
||||
body[data-theme-mode="dark"] .chat-item,
|
||||
body[data-theme-mode="dark"] .chat-item button,
|
||||
body[data-theme-mode="dark"] .session-chip,
|
||||
body[data-theme-mode="dark"] .context-pill,
|
||||
body[data-theme-mode="dark"] .prompt-chip,
|
||||
body[data-theme-mode="dark"] .settings-nav,
|
||||
body[data-theme-mode="dark"] .settings-nav-item:not(.active):not([aria-selected="true"]),
|
||||
body[data-theme-mode="dark"] .chat-drawer-action,
|
||||
body[data-theme-mode="dark"] .persona-item-actions button {
|
||||
background: var(--nav-item-surface);
|
||||
border-color: var(--ui-border);
|
||||
color: var(--ui-text);
|
||||
}
|
||||
|
||||
body[data-theme-mode="dark"] .chat-item:hover,
|
||||
body[data-theme-mode="dark"] .chat-item:focus-visible,
|
||||
body[data-theme-mode="dark"] .secondary-action:hover,
|
||||
body[data-theme-mode="dark"] .icon-button:hover,
|
||||
body[data-theme-mode="dark"] .settings-nav-item:not(.active):not([aria-selected="true"]):hover {
|
||||
background: var(--secondary-surface);
|
||||
border-color: var(--item-hover-border);
|
||||
color: var(--ui-text);
|
||||
}
|
||||
|
||||
body[data-theme-mode="dark"] .settings-nav-item.active,
|
||||
body[data-theme-mode="dark"] .settings-nav-item[aria-selected="true"],
|
||||
body[data-theme-mode="dark"] .primary-action,
|
||||
body[data-theme-mode="dark"] button:not(.secondary-action):not(.icon-button):not(.chat-item-delete):not(.settings-nav-item):not(.market-preview-toggle) {
|
||||
background: var(--message-user-bg);
|
||||
border-color: var(--item-active-border);
|
||||
color: var(--message-user-text);
|
||||
}
|
||||
|
||||
body[data-theme-mode="dark"] .msg,
|
||||
body[data-theme-mode="dark"] .msg-content,
|
||||
body[data-theme-mode="dark"] .msg-content p,
|
||||
body[data-theme-mode="dark"] .msg-content li,
|
||||
body[data-theme-mode="dark"] .msg-content blockquote,
|
||||
body[data-theme-mode="dark"] .subtitle,
|
||||
body[data-theme-mode="dark"] .persona-helper,
|
||||
body[data-theme-mode="dark"] .market-preview-details p,
|
||||
body[data-theme-mode="dark"] .market-preview-details strong,
|
||||
body[data-theme-mode="dark"] .model-help-summary,
|
||||
body[data-theme-mode="dark"] .dropdown-subtitle {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
body[data-theme-mode="dark"] .msg.bot,
|
||||
body[data-theme-mode="dark"] .msg.loading {
|
||||
background: color-mix(in srgb, var(--message-bot-bg) 92%, transparent);
|
||||
border-color: var(--ui-border);
|
||||
color: var(--message-bot-text);
|
||||
}
|
||||
|
||||
body[data-theme-mode="dark"] .msg.user {
|
||||
background: var(--message-user-bg);
|
||||
border-color: var(--item-active-border);
|
||||
color: var(--message-user-text);
|
||||
}
|
||||
|
||||
body[data-theme-mode="dark"] .eyebrow,
|
||||
body[data-theme-mode="dark"] .chat-list-section-header,
|
||||
body[data-theme-mode="dark"] .chat-item-meta,
|
||||
body[data-theme-mode="dark"] .composer-hint,
|
||||
body[data-theme-mode="dark"] .settings-theme-note,
|
||||
body[data-theme-mode="dark"] .model-count,
|
||||
body[data-theme-mode="dark"] .model-badge-label,
|
||||
body[data-theme-mode="dark"] .chat-drawer-row-hint {
|
||||
color: var(--ui-text-muted);
|
||||
}
|
||||
|
||||
body[data-theme-mode="dark"] .input-shell,
|
||||
body[data-theme-mode="dark"] .input-shell-focus,
|
||||
body[data-theme-mode="dark"] .persona-actions {
|
||||
background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--composer-bg) 96%, transparent) 28%);
|
||||
}
|
||||
|
||||
/* Button sizing fixes: chat delete is a text action, not a square icon. */
|
||||
.chat-item .chat-item-delete,
|
||||
body[data-theme] .chat-item .chat-item-delete,
|
||||
body:not([data-theme]) .chat-item .chat-item-delete {
|
||||
width: auto;
|
||||
min-width: max-content;
|
||||
height: 32px;
|
||||
min-height: 32px;
|
||||
padding: 0 10px;
|
||||
border-radius: 999px;
|
||||
justify-self: end;
|
||||
align-self: center;
|
||||
white-space: nowrap;
|
||||
overflow: visible;
|
||||
font-size: 0.72rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
body[data-theme-mode="dark"] .chat-item .chat-item-delete {
|
||||
background: var(--chip-muted);
|
||||
border-color: transparent;
|
||||
color: var(--ui-text-muted);
|
||||
}
|
||||
|
||||
body[data-theme-mode="dark"] .chat-item .chat-item-delete:hover,
|
||||
body[data-theme-mode="dark"] .chat-item .chat-item-delete:focus-visible {
|
||||
background: color-mix(in srgb, var(--ui-danger) 10%, var(--chip-muted));
|
||||
border-color: color-mix(in srgb, var(--ui-danger) 28%, transparent);
|
||||
color: var(--ui-danger);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user