update styling
This commit is contained in:
+304
-83
@@ -30,6 +30,39 @@
|
||||
--assistant-message: #1f2937;
|
||||
--assistant-message-text: #eff4f2;
|
||||
--button-text: #fff8f0;
|
||||
--panel-subtle: rgba(255, 251, 245, 0.55);
|
||||
--panel-soft: rgba(255, 253, 249, 0.56);
|
||||
--panel-soft-strong: rgba(252, 248, 240, 0.82);
|
||||
--chip-surface: rgba(255, 252, 246, 0.8);
|
||||
--chip-muted: rgba(24, 32, 31, 0.06);
|
||||
--field-surface: rgba(255, 253, 249, 0.92);
|
||||
--field-surface-strong: rgba(255, 253, 249, 0.96);
|
||||
--field-focus-surface: #fffdfa;
|
||||
--field-focus-border: rgba(164, 85, 45, 0.55);
|
||||
--field-focus-ring: 0 0 0 4px rgba(164, 85, 45, 0.12);
|
||||
--status-surface: rgba(24, 32, 31, 0.04);
|
||||
--status-border: rgba(24, 32, 31, 0.06);
|
||||
--status-error-surface: rgba(181, 71, 61, 0.09);
|
||||
--status-error-border: rgba(181, 71, 61, 0.2);
|
||||
--status-success-surface: rgba(37, 115, 93, 0.1);
|
||||
--status-success-border: rgba(37, 115, 93, 0.2);
|
||||
--secondary-surface: rgba(164, 85, 45, 0.1);
|
||||
--secondary-surface-strong: rgba(164, 85, 45, 0.18);
|
||||
--secondary-border: rgba(164, 85, 45, 0.18);
|
||||
--secondary-border-strong: rgba(164, 85, 45, 0.34);
|
||||
--item-hover-border: rgba(164, 85, 45, 0.28);
|
||||
--item-active-border: rgba(164, 85, 45, 0.48);
|
||||
--overlay-surface: linear-gradient(180deg, rgba(244, 239, 231, 0.78), rgba(248, 245, 239, 0.86));
|
||||
--overlay-card-surface: linear-gradient(155deg, rgba(255, 253, 249, 0.96), rgba(248, 241, 233, 0.94));
|
||||
--overlay-card-border: rgba(24, 32, 31, 0.1);
|
||||
--overlay-card-shadow: 0 24px 70px rgba(56, 39, 21, 0.16);
|
||||
--prompt-chip-surface: rgba(255, 251, 245, 0.65);
|
||||
--messages-surface: rgba(252, 248, 240, 0.52);
|
||||
--pill-surface: rgba(24, 32, 31, 0.04);
|
||||
--pill-border: rgba(24, 32, 31, 0.08);
|
||||
--tag-surface: rgba(24, 32, 31, 0.06);
|
||||
--tag-ai-surface: rgba(164, 85, 45, 0.12);
|
||||
--tag-user-surface: rgba(37, 115, 93, 0.12);
|
||||
}
|
||||
|
||||
body[data-theme="fakegpt"] {
|
||||
@@ -58,6 +91,32 @@ body[data-theme="fakegpt"] {
|
||||
--assistant-message: #202123;
|
||||
--assistant-message-text: #f3f4f6;
|
||||
--button-text: #f8fffc;
|
||||
--panel-subtle: rgba(246, 251, 249, 0.58);
|
||||
--panel-soft: rgba(255, 255, 255, 0.62);
|
||||
--panel-soft-strong: rgba(255, 255, 255, 0.82);
|
||||
--chip-surface: rgba(255, 255, 255, 0.82);
|
||||
--chip-muted: rgba(17, 24, 39, 0.06);
|
||||
--field-surface: rgba(255, 255, 255, 0.92);
|
||||
--field-surface-strong: rgba(255, 255, 255, 0.96);
|
||||
--field-focus-surface: #ffffff;
|
||||
--field-focus-border: rgba(16, 163, 127, 0.48);
|
||||
--field-focus-ring: 0 0 0 4px rgba(16, 163, 127, 0.12);
|
||||
--secondary-surface: rgba(16, 163, 127, 0.1);
|
||||
--secondary-surface-strong: rgba(16, 163, 127, 0.18);
|
||||
--secondary-border: rgba(16, 163, 127, 0.16);
|
||||
--secondary-border-strong: rgba(16, 163, 127, 0.28);
|
||||
--item-hover-border: rgba(16, 163, 127, 0.26);
|
||||
--item-active-border: rgba(16, 163, 127, 0.42);
|
||||
--overlay-surface: linear-gradient(180deg, rgba(241, 249, 246, 0.82), rgba(236, 243, 239, 0.9));
|
||||
--overlay-card-surface: linear-gradient(155deg, rgba(255, 255, 255, 0.97), rgba(239, 247, 243, 0.95));
|
||||
--overlay-card-shadow: 0 24px 70px rgba(16, 52, 44, 0.14);
|
||||
--prompt-chip-surface: rgba(248, 255, 252, 0.72);
|
||||
--messages-surface: rgba(243, 248, 246, 0.62);
|
||||
--pill-surface: rgba(17, 24, 39, 0.04);
|
||||
--pill-border: rgba(17, 24, 39, 0.08);
|
||||
--tag-surface: rgba(17, 24, 39, 0.06);
|
||||
--tag-ai-surface: rgba(16, 163, 127, 0.12);
|
||||
--tag-user-surface: rgba(15, 138, 103, 0.12);
|
||||
}
|
||||
|
||||
body[data-theme="fraud"] {
|
||||
@@ -83,6 +142,32 @@ body[data-theme="fraud"] {
|
||||
--assistant-message: #40352f;
|
||||
--assistant-message-text: #faf4ef;
|
||||
--button-text: #fff9f4;
|
||||
--panel-subtle: rgba(255, 248, 240, 0.6);
|
||||
--panel-soft: rgba(255, 249, 242, 0.62);
|
||||
--panel-soft-strong: rgba(252, 246, 238, 0.82);
|
||||
--chip-surface: rgba(255, 250, 244, 0.82);
|
||||
--chip-muted: rgba(45, 38, 30, 0.06);
|
||||
--field-surface: rgba(255, 249, 242, 0.92);
|
||||
--field-surface-strong: rgba(255, 249, 242, 0.96);
|
||||
--field-focus-surface: #fffaf5;
|
||||
--field-focus-border: rgba(196, 111, 76, 0.45);
|
||||
--field-focus-ring: 0 0 0 4px rgba(196, 111, 76, 0.12);
|
||||
--secondary-surface: rgba(196, 111, 76, 0.1);
|
||||
--secondary-surface-strong: rgba(196, 111, 76, 0.18);
|
||||
--secondary-border: rgba(196, 111, 76, 0.18);
|
||||
--secondary-border-strong: rgba(196, 111, 76, 0.32);
|
||||
--item-hover-border: rgba(196, 111, 76, 0.24);
|
||||
--item-active-border: rgba(196, 111, 76, 0.38);
|
||||
--overlay-surface: linear-gradient(180deg, rgba(245, 236, 227, 0.82), rgba(250, 244, 236, 0.88));
|
||||
--overlay-card-surface: linear-gradient(155deg, rgba(255, 251, 245, 0.97), rgba(246, 237, 226, 0.94));
|
||||
--overlay-card-shadow: 0 24px 70px rgba(94, 58, 33, 0.14);
|
||||
--prompt-chip-surface: rgba(255, 250, 244, 0.74);
|
||||
--messages-surface: rgba(250, 243, 234, 0.62);
|
||||
--pill-surface: rgba(45, 38, 30, 0.04);
|
||||
--pill-border: rgba(45, 38, 30, 0.08);
|
||||
--tag-surface: rgba(45, 38, 30, 0.06);
|
||||
--tag-ai-surface: rgba(196, 111, 76, 0.12);
|
||||
--tag-user-surface: rgba(111, 131, 96, 0.14);
|
||||
}
|
||||
|
||||
body[data-theme="germini"] {
|
||||
@@ -108,6 +193,33 @@ body[data-theme="germini"] {
|
||||
--assistant-message: linear-gradient(145deg, #3046c8, #7e3fdc);
|
||||
--assistant-message-text: #f8f7ff;
|
||||
--button-text: #f8f7ff;
|
||||
--panel-subtle: rgba(255, 255, 255, 0.34);
|
||||
--panel-soft: rgba(255, 255, 255, 0.38);
|
||||
--panel-soft-strong: rgba(255, 255, 255, 0.46);
|
||||
--chip-surface: rgba(255, 255, 255, 0.38);
|
||||
--chip-muted: rgba(255, 255, 255, 0.2);
|
||||
--field-surface: rgba(255, 255, 255, 0.42);
|
||||
--field-surface-strong: rgba(255, 255, 255, 0.46);
|
||||
--field-focus-surface: rgba(255, 255, 255, 0.52);
|
||||
--field-focus-border: rgba(90, 109, 240, 0.34);
|
||||
--field-focus-ring: 0 0 0 4px rgba(90, 109, 240, 0.12);
|
||||
--secondary-surface: rgba(255, 255, 255, 0.3);
|
||||
--secondary-surface-strong: rgba(255, 255, 255, 0.42);
|
||||
--secondary-border: rgba(255, 255, 255, 0.32);
|
||||
--secondary-border-strong: rgba(255, 255, 255, 0.48);
|
||||
--item-hover-border: rgba(255, 255, 255, 0.42);
|
||||
--item-active-border: rgba(90, 109, 240, 0.34);
|
||||
--overlay-surface: linear-gradient(180deg, rgba(227, 235, 255, 0.74), rgba(241, 245, 255, 0.84));
|
||||
--overlay-card-surface: linear-gradient(155deg, rgba(255, 255, 255, 0.78), rgba(235, 238, 255, 0.86));
|
||||
--overlay-card-border: rgba(255, 255, 255, 0.34);
|
||||
--overlay-card-shadow: 0 24px 70px rgba(98, 110, 255, 0.16);
|
||||
--prompt-chip-surface: rgba(255, 255, 255, 0.36);
|
||||
--messages-surface: rgba(255, 255, 255, 0.3);
|
||||
--pill-surface: rgba(255, 255, 255, 0.22);
|
||||
--pill-border: rgba(255, 255, 255, 0.3);
|
||||
--tag-surface: rgba(255, 255, 255, 0.24);
|
||||
--tag-ai-surface: rgba(90, 109, 240, 0.16);
|
||||
--tag-user-surface: rgba(45, 143, 133, 0.14);
|
||||
}
|
||||
|
||||
body[data-theme="slopilot"] {
|
||||
@@ -133,6 +245,32 @@ body[data-theme="slopilot"] {
|
||||
--assistant-message: linear-gradient(145deg, #123460, #1f6fff);
|
||||
--assistant-message-text: #f6fbff;
|
||||
--button-text: #f6fbff;
|
||||
--panel-subtle: rgba(248, 251, 255, 0.7);
|
||||
--panel-soft: rgba(255, 255, 255, 0.72);
|
||||
--panel-soft-strong: rgba(255, 255, 255, 0.86);
|
||||
--chip-surface: rgba(255, 255, 255, 0.84);
|
||||
--chip-muted: rgba(13, 104, 255, 0.06);
|
||||
--field-surface: rgba(255, 255, 255, 0.92);
|
||||
--field-surface-strong: rgba(255, 255, 255, 0.96);
|
||||
--field-focus-surface: #ffffff;
|
||||
--field-focus-border: rgba(13, 104, 255, 0.42);
|
||||
--field-focus-ring: 0 0 0 4px rgba(13, 104, 255, 0.12);
|
||||
--secondary-surface: rgba(13, 104, 255, 0.1);
|
||||
--secondary-surface-strong: rgba(13, 104, 255, 0.16);
|
||||
--secondary-border: rgba(13, 104, 255, 0.16);
|
||||
--secondary-border-strong: rgba(13, 104, 255, 0.3);
|
||||
--item-hover-border: rgba(13, 104, 255, 0.22);
|
||||
--item-active-border: rgba(13, 104, 255, 0.36);
|
||||
--overlay-surface: linear-gradient(180deg, rgba(233, 243, 255, 0.78), rgba(244, 249, 255, 0.88));
|
||||
--overlay-card-surface: linear-gradient(155deg, rgba(255, 255, 255, 0.97), rgba(236, 244, 255, 0.95));
|
||||
--overlay-card-shadow: 0 24px 70px rgba(25, 77, 147, 0.14);
|
||||
--prompt-chip-surface: rgba(248, 251, 255, 0.76);
|
||||
--messages-surface: rgba(244, 249, 255, 0.72);
|
||||
--pill-surface: rgba(13, 104, 255, 0.05);
|
||||
--pill-border: rgba(13, 104, 255, 0.12);
|
||||
--tag-surface: rgba(13, 104, 255, 0.07);
|
||||
--tag-ai-surface: rgba(13, 104, 255, 0.12);
|
||||
--tag-user-surface: rgba(17, 133, 115, 0.14);
|
||||
}
|
||||
|
||||
body[data-theme="beta-ai"] {
|
||||
@@ -158,6 +296,32 @@ body[data-theme="beta-ai"] {
|
||||
--assistant-message: linear-gradient(145deg, #2d236f, #5c49f1);
|
||||
--assistant-message-text: #f8f7ff;
|
||||
--button-text: #f8f7ff;
|
||||
--panel-subtle: rgba(248, 245, 255, 0.68);
|
||||
--panel-soft: rgba(255, 255, 255, 0.72);
|
||||
--panel-soft-strong: rgba(255, 255, 255, 0.86);
|
||||
--chip-surface: rgba(255, 255, 255, 0.84);
|
||||
--chip-muted: rgba(79, 70, 229, 0.06);
|
||||
--field-surface: rgba(255, 255, 255, 0.92);
|
||||
--field-surface-strong: rgba(255, 255, 255, 0.96);
|
||||
--field-focus-surface: #ffffff;
|
||||
--field-focus-border: rgba(79, 70, 229, 0.36);
|
||||
--field-focus-ring: 0 0 0 4px rgba(79, 70, 229, 0.12);
|
||||
--secondary-surface: rgba(79, 70, 229, 0.1);
|
||||
--secondary-surface-strong: rgba(79, 70, 229, 0.18);
|
||||
--secondary-border: rgba(79, 70, 229, 0.16);
|
||||
--secondary-border-strong: rgba(79, 70, 229, 0.28);
|
||||
--item-hover-border: rgba(79, 70, 229, 0.22);
|
||||
--item-active-border: rgba(79, 70, 229, 0.36);
|
||||
--overlay-surface: linear-gradient(180deg, rgba(240, 236, 255, 0.8), rgba(248, 246, 255, 0.9));
|
||||
--overlay-card-surface: linear-gradient(155deg, rgba(255, 255, 255, 0.97), rgba(241, 237, 255, 0.95));
|
||||
--overlay-card-shadow: 0 24px 70px rgba(61, 54, 122, 0.14);
|
||||
--prompt-chip-surface: rgba(250, 248, 255, 0.76);
|
||||
--messages-surface: rgba(246, 243, 255, 0.72);
|
||||
--pill-surface: rgba(79, 70, 229, 0.05);
|
||||
--pill-border: rgba(79, 70, 229, 0.12);
|
||||
--tag-surface: rgba(79, 70, 229, 0.08);
|
||||
--tag-ai-surface: rgba(79, 70, 229, 0.13);
|
||||
--tag-user-surface: rgba(42, 140, 123, 0.14);
|
||||
}
|
||||
|
||||
body[data-theme="confusity"] {
|
||||
@@ -183,6 +347,32 @@ body[data-theme="confusity"] {
|
||||
--assistant-message: #111827;
|
||||
--assistant-message-text: #f9fafb;
|
||||
--button-text: #f9fafb;
|
||||
--panel-subtle: rgba(255, 255, 255, 0.7);
|
||||
--panel-soft: rgba(248, 250, 252, 0.82);
|
||||
--panel-soft-strong: rgba(255, 255, 255, 0.9);
|
||||
--chip-surface: rgba(255, 255, 255, 0.92);
|
||||
--chip-muted: rgba(17, 24, 39, 0.06);
|
||||
--field-surface: rgba(255, 255, 255, 0.96);
|
||||
--field-surface-strong: rgba(255, 255, 255, 0.98);
|
||||
--field-focus-surface: #ffffff;
|
||||
--field-focus-border: rgba(2, 132, 199, 0.34);
|
||||
--field-focus-ring: 0 0 0 4px rgba(2, 132, 199, 0.1);
|
||||
--secondary-surface: rgba(17, 24, 39, 0.05);
|
||||
--secondary-surface-strong: rgba(17, 24, 39, 0.1);
|
||||
--secondary-border: rgba(17, 24, 39, 0.1);
|
||||
--secondary-border-strong: rgba(17, 24, 39, 0.18);
|
||||
--item-hover-border: rgba(17, 24, 39, 0.14);
|
||||
--item-active-border: rgba(2, 132, 199, 0.26);
|
||||
--overlay-surface: linear-gradient(180deg, rgba(241, 245, 249, 0.82), rgba(248, 250, 252, 0.9));
|
||||
--overlay-card-surface: linear-gradient(155deg, rgba(255, 255, 255, 0.98), rgba(241, 245, 249, 0.96));
|
||||
--overlay-card-shadow: 0 24px 70px rgba(17, 24, 39, 0.1);
|
||||
--prompt-chip-surface: rgba(248, 250, 252, 0.86);
|
||||
--messages-surface: rgba(255, 255, 255, 0.92);
|
||||
--pill-surface: rgba(17, 24, 39, 0.04);
|
||||
--pill-border: rgba(17, 24, 39, 0.08);
|
||||
--tag-surface: rgba(17, 24, 39, 0.06);
|
||||
--tag-ai-surface: rgba(17, 24, 39, 0.08);
|
||||
--tag-user-surface: rgba(2, 132, 199, 0.12);
|
||||
}
|
||||
|
||||
* {
|
||||
@@ -220,7 +410,7 @@ body::before {
|
||||
|
||||
.card {
|
||||
background: var(--surface);
|
||||
border: 1px solid rgba(24, 32, 31, 0.08);
|
||||
border: 1px solid var(--pill-border);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: var(--radius-xl);
|
||||
box-shadow: var(--shadow);
|
||||
@@ -242,7 +432,7 @@ body::before {
|
||||
.auth-hero {
|
||||
padding: 48px;
|
||||
background: var(--hero-gradient);
|
||||
border-right: 1px solid rgba(24, 32, 31, 0.08);
|
||||
border-right: 1px solid var(--pill-border);
|
||||
display: grid;
|
||||
align-content: start;
|
||||
gap: 24px;
|
||||
@@ -277,7 +467,7 @@ body::before {
|
||||
display: grid;
|
||||
align-content: center;
|
||||
gap: 18px;
|
||||
background: rgba(252, 248, 240, 0.82);
|
||||
background: var(--panel-soft-strong);
|
||||
}
|
||||
|
||||
.auth-hero-compact {
|
||||
@@ -348,8 +538,8 @@ h2 {
|
||||
.hero-panel {
|
||||
padding: 20px;
|
||||
border-radius: var(--radius-lg);
|
||||
background: rgba(255, 251, 245, 0.55);
|
||||
border: 1px solid rgba(24, 32, 31, 0.08);
|
||||
background: var(--panel-subtle);
|
||||
border: 1px solid var(--pill-border);
|
||||
}
|
||||
|
||||
.hero-panel h2 {
|
||||
@@ -362,8 +552,8 @@ h2 {
|
||||
.context-pill {
|
||||
padding: 14px;
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(255, 253, 249, 0.56);
|
||||
border: 1px solid rgba(24, 32, 31, 0.08);
|
||||
background: var(--panel-soft);
|
||||
border: 1px solid var(--pill-border);
|
||||
}
|
||||
|
||||
.hero-stat span,
|
||||
@@ -397,7 +587,7 @@ h2 {
|
||||
.modal-card,
|
||||
.market-shell {
|
||||
background: var(--surface-strong);
|
||||
border: 1px solid rgba(24, 32, 31, 0.08);
|
||||
border: 1px solid var(--pill-border);
|
||||
}
|
||||
|
||||
.auth-toggle {
|
||||
@@ -485,9 +675,9 @@ textarea,
|
||||
select {
|
||||
width: 100%;
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(24, 32, 31, 0.1);
|
||||
border: 1px solid var(--line-strong);
|
||||
padding: 14px 16px;
|
||||
background: rgba(255, 253, 249, 0.92);
|
||||
background: var(--field-surface);
|
||||
font: inherit;
|
||||
color: var(--text);
|
||||
outline: none;
|
||||
@@ -501,9 +691,9 @@ textarea {
|
||||
input:focus,
|
||||
textarea:focus,
|
||||
select:focus {
|
||||
border-color: rgba(164, 85, 45, 0.55);
|
||||
box-shadow: 0 0 0 4px rgba(164, 85, 45, 0.12);
|
||||
background: #fffdfa;
|
||||
border-color: var(--field-focus-border);
|
||||
box-shadow: var(--field-focus-ring);
|
||||
background: var(--field-focus-surface);
|
||||
}
|
||||
|
||||
.primary-action {
|
||||
@@ -515,21 +705,21 @@ select:focus {
|
||||
margin: 0;
|
||||
padding: 12px 14px;
|
||||
border-radius: 14px;
|
||||
background: rgba(24, 32, 31, 0.04);
|
||||
border: 1px solid rgba(24, 32, 31, 0.06);
|
||||
background: var(--status-surface);
|
||||
border: 1px solid var(--status-border);
|
||||
color: var(--text-soft);
|
||||
}
|
||||
|
||||
.status.error {
|
||||
color: var(--error);
|
||||
background: rgba(181, 71, 61, 0.09);
|
||||
border-color: rgba(181, 71, 61, 0.2);
|
||||
background: var(--status-error-surface);
|
||||
border-color: var(--status-error-border);
|
||||
}
|
||||
|
||||
.status.success {
|
||||
color: var(--success);
|
||||
background: rgba(37, 115, 93, 0.1);
|
||||
border-color: rgba(37, 115, 93, 0.2);
|
||||
background: var(--status-success-surface);
|
||||
border-color: var(--status-success-border);
|
||||
}
|
||||
|
||||
.inline-status {
|
||||
@@ -642,8 +832,8 @@ select:focus {
|
||||
gap: 10px;
|
||||
padding: 10px 12px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(24, 32, 31, 0.08);
|
||||
background: rgba(24, 32, 31, 0.04);
|
||||
border: 1px solid var(--pill-border);
|
||||
background: var(--pill-surface);
|
||||
color: var(--text-soft);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
@@ -662,8 +852,8 @@ select:focus {
|
||||
gap: 10px;
|
||||
padding: 16px;
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid rgba(24, 32, 31, 0.08);
|
||||
background: rgba(255, 252, 246, 0.8);
|
||||
border: 1px solid var(--pill-border);
|
||||
background: var(--chip-surface);
|
||||
transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
@@ -676,13 +866,13 @@ select:focus {
|
||||
|
||||
.chat-item:hover,
|
||||
.persona-item:hover {
|
||||
border-color: rgba(164, 85, 45, 0.28);
|
||||
border-color: var(--item-hover-border);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.chat-item.active,
|
||||
.persona-item.active {
|
||||
border-color: rgba(164, 85, 45, 0.48);
|
||||
border-color: var(--item-active-border);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@@ -710,7 +900,7 @@ select:focus {
|
||||
.chat-item button,
|
||||
.icon-button {
|
||||
padding: 8px 12px;
|
||||
background: rgba(24, 32, 31, 0.06);
|
||||
background: var(--chip-muted);
|
||||
color: var(--text);
|
||||
box-shadow: none;
|
||||
min-height: 40px;
|
||||
@@ -719,16 +909,16 @@ select:focus {
|
||||
.secondary-action {
|
||||
padding: 11px 16px;
|
||||
min-height: 44px;
|
||||
background: rgba(164, 85, 45, 0.1);
|
||||
background: var(--secondary-surface);
|
||||
color: var(--text);
|
||||
border: 1px solid rgba(164, 85, 45, 0.18);
|
||||
border: 1px solid var(--secondary-border);
|
||||
text-decoration: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.secondary-action.active {
|
||||
background: rgba(164, 85, 45, 0.18);
|
||||
border-color: rgba(164, 85, 45, 0.34);
|
||||
background: var(--secondary-surface-strong);
|
||||
border-color: var(--secondary-border-strong);
|
||||
}
|
||||
|
||||
.action-pair {
|
||||
@@ -758,9 +948,9 @@ select:focus {
|
||||
}
|
||||
|
||||
.tools-details {
|
||||
border: 1px solid rgba(24, 32, 31, 0.08);
|
||||
border: 1px solid var(--pill-border);
|
||||
border-radius: 14px;
|
||||
background: rgba(24, 32, 31, 0.04);
|
||||
background: var(--pill-surface);
|
||||
padding: 8px 10px;
|
||||
}
|
||||
|
||||
@@ -786,8 +976,8 @@ select:focus {
|
||||
gap: 4px;
|
||||
padding: 12px 14px;
|
||||
border-radius: 14px;
|
||||
border: 1px solid rgba(24, 32, 31, 0.08);
|
||||
background: rgba(24, 32, 31, 0.04);
|
||||
border: 1px solid var(--pill-border);
|
||||
background: var(--pill-surface);
|
||||
}
|
||||
|
||||
.session-chip-label {
|
||||
@@ -827,7 +1017,7 @@ select:focus {
|
||||
|
||||
.chat-header-focus {
|
||||
padding-bottom: 2px;
|
||||
border-bottom: 1px solid rgba(24, 32, 31, 0.07);
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.messages-panel-focus {
|
||||
@@ -841,8 +1031,7 @@ select:focus {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 28px;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(244, 239, 231, 0.78), rgba(248, 245, 239, 0.86));
|
||||
background: var(--overlay-surface);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
@@ -850,10 +1039,9 @@ select:focus {
|
||||
width: min(440px, 100%);
|
||||
padding: 28px;
|
||||
border-radius: 26px;
|
||||
border: 1px solid rgba(24, 32, 31, 0.1);
|
||||
background:
|
||||
linear-gradient(155deg, rgba(255, 253, 249, 0.96), rgba(248, 241, 233, 0.94));
|
||||
box-shadow: 0 24px 70px rgba(56, 39, 21, 0.16);
|
||||
border: 1px solid var(--overlay-card-border);
|
||||
background: var(--overlay-card-surface);
|
||||
box-shadow: var(--overlay-card-shadow);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@@ -897,7 +1085,7 @@ select:focus {
|
||||
}
|
||||
|
||||
.input-shell-focus {
|
||||
border-top: 1px solid rgba(24, 32, 31, 0.07);
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.workspace-overview,
|
||||
@@ -912,7 +1100,7 @@ select:focus {
|
||||
grid-template-columns: minmax(0, 1fr) minmax(300px, 500px);
|
||||
gap: 14px;
|
||||
background: var(--overview-gradient);
|
||||
border: 1px solid rgba(24, 32, 31, 0.07);
|
||||
border: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.workspace-intro {
|
||||
@@ -957,9 +1145,9 @@ select:focus {
|
||||
min-height: 40px;
|
||||
padding: 8px 12px;
|
||||
border-radius: 999px;
|
||||
background: rgba(24, 32, 31, 0.06);
|
||||
background: var(--chip-muted);
|
||||
color: var(--text);
|
||||
border: 1px solid rgba(24, 32, 31, 0.12);
|
||||
border: 1px solid var(--line-strong);
|
||||
}
|
||||
|
||||
.context-chip-button span {
|
||||
@@ -1013,9 +1201,9 @@ select:focus {
|
||||
min-height: 44px;
|
||||
padding: 10px 14px;
|
||||
border-radius: 999px;
|
||||
background: rgba(164, 85, 45, 0.1);
|
||||
background: var(--secondary-surface);
|
||||
color: var(--text);
|
||||
border: 1px solid rgba(164, 85, 45, 0.18);
|
||||
border: 1px solid var(--secondary-border);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@@ -1033,8 +1221,8 @@ select:focus {
|
||||
}
|
||||
|
||||
.model-badge-button[aria-expanded="true"] {
|
||||
background: rgba(164, 85, 45, 0.16);
|
||||
border-color: rgba(164, 85, 45, 0.28);
|
||||
background: var(--secondary-surface-strong);
|
||||
border-color: var(--secondary-border-strong);
|
||||
}
|
||||
|
||||
.model-popover {
|
||||
@@ -1049,7 +1237,7 @@ select:focus {
|
||||
gap: 14px;
|
||||
z-index: 20;
|
||||
background: var(--surface-strong);
|
||||
border: 1px solid rgba(24, 32, 31, 0.08);
|
||||
border: 1px solid var(--pill-border);
|
||||
}
|
||||
|
||||
.model-select {
|
||||
@@ -1090,10 +1278,10 @@ select:focus {
|
||||
padding-right: 48px;
|
||||
border-radius: 14px;
|
||||
appearance: none;
|
||||
background: rgba(255, 253, 249, 0.96);
|
||||
border-color: rgba(24, 32, 31, 0.12);
|
||||
background: var(--field-surface-strong);
|
||||
border-color: var(--line-strong);
|
||||
font-weight: 700;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.model-select-chevron {
|
||||
@@ -1113,8 +1301,8 @@ select:focus {
|
||||
gap: 8px;
|
||||
padding: 14px;
|
||||
border-radius: 14px;
|
||||
border: 1px solid rgba(24, 32, 31, 0.08);
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(255, 252, 246, 0.92));
|
||||
border: 1px solid var(--pill-border);
|
||||
background: linear-gradient(180deg, var(--panel-soft), var(--field-surface));
|
||||
min-height: 92px;
|
||||
}
|
||||
|
||||
@@ -1134,8 +1322,8 @@ select:focus {
|
||||
.model-help-badge {
|
||||
padding: 5px 10px;
|
||||
border-radius: 999px;
|
||||
background: rgba(164, 85, 45, 0.1);
|
||||
border: 1px solid rgba(164, 85, 45, 0.18);
|
||||
background: var(--secondary-surface);
|
||||
border: 1px solid var(--secondary-border);
|
||||
color: var(--brand-strong);
|
||||
font-size: 0.72rem;
|
||||
font-weight: 800;
|
||||
@@ -1175,8 +1363,8 @@ select:focus {
|
||||
}
|
||||
|
||||
.model-help-badge[data-badge="waiting"] {
|
||||
background: rgba(24, 32, 31, 0.06);
|
||||
border-color: rgba(24, 32, 31, 0.1);
|
||||
background: var(--chip-muted);
|
||||
border-color: var(--line-strong);
|
||||
color: var(--text-soft);
|
||||
}
|
||||
|
||||
@@ -1208,9 +1396,9 @@ select:focus {
|
||||
justify-content: center;
|
||||
padding: 9px 12px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 251, 245, 0.65);
|
||||
background: var(--prompt-chip-surface);
|
||||
color: var(--text);
|
||||
border: 1px solid rgba(24, 32, 31, 0.08);
|
||||
border: 1px solid var(--pill-border);
|
||||
box-shadow: none;
|
||||
font-weight: 600;
|
||||
}
|
||||
@@ -1221,7 +1409,7 @@ select:focus {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
background: rgba(252, 248, 240, 0.52);
|
||||
background: var(--messages-surface);
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
@@ -1540,8 +1728,8 @@ select:focus {
|
||||
gap: 14px;
|
||||
padding: 16px 18px;
|
||||
border-radius: 16px;
|
||||
background: rgba(24, 32, 31, 0.04);
|
||||
border: 1px solid rgba(24, 32, 31, 0.08);
|
||||
background: var(--pill-surface);
|
||||
border: 1px solid var(--pill-border);
|
||||
}
|
||||
|
||||
.character-library-list {
|
||||
@@ -1557,8 +1745,8 @@ select:focus {
|
||||
.roleplay-starter-intro {
|
||||
padding: 16px 18px;
|
||||
border-radius: 16px;
|
||||
background: rgba(24, 32, 31, 0.04);
|
||||
border: 1px solid rgba(24, 32, 31, 0.08);
|
||||
background: var(--pill-surface);
|
||||
border: 1px solid var(--pill-border);
|
||||
}
|
||||
|
||||
.roleplay-starter-page {
|
||||
@@ -1576,17 +1764,17 @@ select:focus {
|
||||
font-size: 0.72rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.12em;
|
||||
background: rgba(24, 32, 31, 0.06);
|
||||
background: var(--tag-surface);
|
||||
}
|
||||
|
||||
.persona-role-tag.ai {
|
||||
color: var(--brand-strong);
|
||||
background: rgba(164, 85, 45, 0.12);
|
||||
background: var(--tag-ai-surface);
|
||||
}
|
||||
|
||||
.persona-role-tag.user {
|
||||
color: var(--success);
|
||||
background: rgba(37, 115, 93, 0.12);
|
||||
background: var(--tag-user-surface);
|
||||
}
|
||||
|
||||
.persona-item p {
|
||||
@@ -1722,8 +1910,8 @@ select:focus {
|
||||
.persona-form-intro {
|
||||
padding: 16px 18px;
|
||||
border-radius: 16px;
|
||||
background: rgba(24, 32, 31, 0.04);
|
||||
border: 1px solid rgba(24, 32, 31, 0.08);
|
||||
background: var(--pill-surface);
|
||||
border: 1px solid var(--pill-border);
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
}
|
||||
@@ -1746,8 +1934,8 @@ select:focus {
|
||||
.persona-form .field-wide {
|
||||
padding: 14px;
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(24, 32, 31, 0.03);
|
||||
border: 1px solid rgba(24, 32, 31, 0.06);
|
||||
background: var(--status-surface);
|
||||
border: 1px solid var(--status-border);
|
||||
}
|
||||
|
||||
.persona-form .field textarea {
|
||||
@@ -1759,8 +1947,8 @@ select:focus {
|
||||
gap: 8px;
|
||||
padding: 14px 16px;
|
||||
border-radius: 14px;
|
||||
background: rgba(24, 32, 31, 0.05);
|
||||
border: 1px dashed rgba(24, 32, 31, 0.16);
|
||||
background: var(--chip-muted);
|
||||
border: 1px dashed var(--line-strong);
|
||||
}
|
||||
|
||||
.dialogue-format-label {
|
||||
@@ -1924,7 +2112,7 @@ select:focus {
|
||||
padding: 12px;
|
||||
border-radius: var(--radius-lg);
|
||||
background: var(--surface-strong);
|
||||
border: 1px solid rgba(24, 32, 31, 0.08);
|
||||
border: 1px solid var(--pill-border);
|
||||
}
|
||||
|
||||
.settings-nav-item {
|
||||
@@ -1935,9 +2123,9 @@ select:focus {
|
||||
text-align: left;
|
||||
padding: 12px 14px;
|
||||
min-height: 48px;
|
||||
background: rgba(24, 32, 31, 0.04);
|
||||
background: var(--pill-surface);
|
||||
color: var(--text);
|
||||
border: 1px solid rgba(24, 32, 31, 0.08);
|
||||
border: 1px solid var(--pill-border);
|
||||
}
|
||||
|
||||
.settings-nav-item.active {
|
||||
@@ -1970,7 +2158,7 @@ select:focus {
|
||||
padding: 16px;
|
||||
border-radius: var(--radius-lg);
|
||||
background: var(--surface-strong);
|
||||
border: 1px solid rgba(24, 32, 31, 0.08);
|
||||
border: 1px solid var(--pill-border);
|
||||
}
|
||||
|
||||
.settings-panel-compact {
|
||||
@@ -1997,8 +2185,8 @@ select:focus {
|
||||
padding: 12px 14px;
|
||||
min-height: 76px;
|
||||
border-radius: 14px;
|
||||
border: 1px solid rgba(24, 32, 31, 0.08);
|
||||
background: rgba(24, 32, 31, 0.04);
|
||||
border: 1px solid var(--pill-border);
|
||||
background: var(--pill-surface);
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
@@ -2015,8 +2203,8 @@ select:focus {
|
||||
gap: 10px;
|
||||
padding: 16px;
|
||||
border-radius: 14px;
|
||||
background: rgba(24, 32, 31, 0.04);
|
||||
border: 1px dashed rgba(24, 32, 31, 0.14);
|
||||
background: var(--pill-surface);
|
||||
border: 1px dashed var(--line-strong);
|
||||
}
|
||||
|
||||
body[data-theme="fakegpt"] {
|
||||
@@ -2033,6 +2221,39 @@ body[data-theme="fakegpt"] {
|
||||
--bg-gradient: linear-gradient(180deg, #0b0f0d 0%, #111715 100%);
|
||||
--hero-gradient: linear-gradient(180deg, rgba(10, 15, 13, 0.96), rgba(18, 24, 21, 0.92));
|
||||
--overview-gradient: linear-gradient(180deg, rgba(10, 15, 13, 0.96), rgba(18, 24, 21, 0.92));
|
||||
--panel-subtle: rgba(10, 15, 13, 0.92);
|
||||
--panel-soft: rgba(18, 24, 21, 0.9);
|
||||
--panel-soft-strong: rgba(18, 24, 21, 0.92);
|
||||
--chip-surface: rgba(10, 15, 13, 0.92);
|
||||
--chip-muted: rgba(36, 255, 180, 0.08);
|
||||
--field-surface: rgba(10, 15, 13, 0.96);
|
||||
--field-surface-strong: rgba(10, 15, 13, 0.96);
|
||||
--field-focus-surface: rgba(12, 19, 16, 0.98);
|
||||
--field-focus-border: rgba(36, 255, 180, 0.26);
|
||||
--field-focus-ring: 0 0 0 4px rgba(16, 163, 127, 0.14);
|
||||
--status-surface: rgba(18, 24, 21, 0.9);
|
||||
--status-border: rgba(36, 255, 180, 0.12);
|
||||
--status-error-surface: rgba(181, 71, 61, 0.16);
|
||||
--status-error-border: rgba(181, 71, 61, 0.28);
|
||||
--status-success-surface: rgba(16, 163, 127, 0.14);
|
||||
--status-success-border: rgba(36, 255, 180, 0.24);
|
||||
--secondary-surface: rgba(18, 24, 21, 0.96);
|
||||
--secondary-surface-strong: rgba(16, 163, 127, 0.16);
|
||||
--secondary-border: rgba(36, 255, 180, 0.16);
|
||||
--secondary-border-strong: rgba(36, 255, 180, 0.26);
|
||||
--item-hover-border: rgba(36, 255, 180, 0.22);
|
||||
--item-active-border: rgba(36, 255, 180, 0.34);
|
||||
--overlay-surface: linear-gradient(180deg, rgba(9, 14, 12, 0.82), rgba(15, 22, 19, 0.9));
|
||||
--overlay-card-surface: linear-gradient(155deg, rgba(14, 20, 18, 0.96), rgba(18, 24, 21, 0.94));
|
||||
--overlay-card-border: rgba(36, 255, 180, 0.16);
|
||||
--overlay-card-shadow: 0 24px 70px rgba(3, 10, 8, 0.5);
|
||||
--prompt-chip-surface: rgba(18, 24, 21, 0.9);
|
||||
--messages-surface: rgba(18, 24, 21, 0.88);
|
||||
--pill-surface: rgba(18, 24, 21, 0.9);
|
||||
--pill-border: rgba(36, 255, 180, 0.14);
|
||||
--tag-surface: rgba(36, 255, 180, 0.08);
|
||||
--tag-ai-surface: rgba(16, 163, 127, 0.16);
|
||||
--tag-user-surface: rgba(36, 255, 180, 0.12);
|
||||
background: radial-gradient(circle at top left, rgba(16, 163, 127, 0.15), transparent 26%), linear-gradient(180deg, #0b0f0d 0%, #111715 100%);
|
||||
color: #e8fff7;
|
||||
color-scheme: dark;
|
||||
|
||||
Reference in New Issue
Block a user