244 lines
6.6 KiB
CSS
244 lines
6.6 KiB
CSS
/* Restrained Hermes/Atlas identity layered after the pinned upstream theme. */
|
|
:root {
|
|
--accent: #187f8b;
|
|
--accent-hover: #126a74;
|
|
--accent-bg: rgba(24, 127, 139, 0.09);
|
|
--accent-bg-strong: rgba(24, 127, 139, 0.17);
|
|
--accent-text: #126f7a;
|
|
--blue: #187f9f;
|
|
--gold: #9a661f;
|
|
--focus-ring: rgba(24, 127, 139, 0.38);
|
|
--focus-glow: rgba(24, 127, 139, 0.12);
|
|
--hermes-violet: #7065a8;
|
|
--hermes-grid: rgba(24, 127, 139, 0.035);
|
|
}
|
|
|
|
:root.dark {
|
|
color-scheme: dark;
|
|
--bg: #070a12;
|
|
--sidebar: #0d1420;
|
|
--surface: #111b29;
|
|
--surface-subtle: rgba(116, 202, 214, 0.035);
|
|
--surface-subtle-hover: rgba(116, 202, 214, 0.075);
|
|
--border: #203044;
|
|
--border2: rgba(174, 218, 224, 0.18);
|
|
--border-subtle: rgba(174, 218, 224, 0.08);
|
|
--border-muted: rgba(174, 218, 224, 0.13);
|
|
--text: #e8f1f4;
|
|
--strong: #f8fcfd;
|
|
--muted: #91a5b3;
|
|
--em: #c5d2d8;
|
|
--accent: #48cfcc;
|
|
--accent-hover: #75dedb;
|
|
--accent-bg: rgba(72, 207, 204, 0.09);
|
|
--accent-bg-strong: rgba(72, 207, 204, 0.17);
|
|
--accent-text: #6bd8d4;
|
|
--blue: #4ca4cd;
|
|
--gold: #f0b66b;
|
|
--code-bg: #09111c;
|
|
--code-inline-bg: rgba(4, 10, 17, 0.72);
|
|
--code-text: #b9e5e4;
|
|
--pre-text: #dce8ec;
|
|
--input-bg: rgba(193, 229, 233, 0.045);
|
|
--hover-bg: rgba(193, 229, 233, 0.07);
|
|
--topbar-bg: rgba(9, 14, 24, 0.96);
|
|
--main-bg: rgba(7, 10, 18, 0.72);
|
|
--focus-ring: rgba(72, 207, 204, 0.38);
|
|
--focus-glow: rgba(72, 207, 204, 0.12);
|
|
--hermes-violet: #9d8ee0;
|
|
--hermes-violet-muted: rgba(157, 142, 224, 0.12);
|
|
--hermes-grid: rgba(72, 207, 204, 0.025);
|
|
--error: #f08b79;
|
|
--success: #65c9a6;
|
|
--warning: #f0b66b;
|
|
--info: #69b9dc;
|
|
}
|
|
|
|
:root.dark body {
|
|
background:
|
|
radial-gradient(circle at 78% 8%, rgba(72, 164, 205, 0.085), transparent 31rem),
|
|
radial-gradient(circle at 28% 100%, rgba(157, 142, 224, 0.045), transparent 34rem),
|
|
linear-gradient(145deg, #070a12, #080d17 55%, #071017);
|
|
}
|
|
|
|
:root.dark .app-titlebar,
|
|
:root.dark .rail,
|
|
:root.dark .sidebar,
|
|
:root.dark .rightpanel,
|
|
:root.dark .topbar,
|
|
:root.dark .composer-wrap {
|
|
border-color: var(--border);
|
|
background-color: rgba(13, 20, 32, 0.94);
|
|
}
|
|
|
|
/* A quiet workstation canvas: enough technical texture to feel intentional,
|
|
but low-contrast enough to remain behind the work. */
|
|
:root.dark .main-view,
|
|
:root.dark .messages {
|
|
background-color: transparent;
|
|
}
|
|
|
|
:root.dark .messages {
|
|
background-image:
|
|
linear-gradient(var(--hermes-grid) 1px, transparent 1px),
|
|
linear-gradient(90deg, var(--hermes-grid) 1px, transparent 1px),
|
|
radial-gradient(circle at 76% 22%, rgba(76, 164, 205, 0.055), transparent 30rem),
|
|
radial-gradient(circle at 22% 78%, var(--hermes-violet-muted), transparent 35rem);
|
|
background-size: 32px 32px, 32px 32px, auto, auto;
|
|
}
|
|
|
|
:root.dark .rail {
|
|
background-image: linear-gradient(180deg, rgba(72, 207, 204, 0.035), transparent 38%, rgba(157, 142, 224, 0.03));
|
|
}
|
|
|
|
:root.dark .sidebar {
|
|
box-shadow: inset -1px 0 rgba(72, 207, 204, 0.035);
|
|
}
|
|
|
|
:root.dark .session-item.active {
|
|
border-color: rgba(72, 207, 204, 0.17);
|
|
background: linear-gradient(90deg, rgba(72, 207, 204, 0.11), rgba(157, 142, 224, 0.045));
|
|
box-shadow: inset 2px 0 rgba(72, 207, 204, 0.52);
|
|
}
|
|
|
|
.app-titlebar-icon img {
|
|
display: block;
|
|
width: 22px;
|
|
height: 22px;
|
|
border: 1px solid rgba(72, 207, 204, 0.24);
|
|
border-radius: 7px;
|
|
box-shadow: 0 0 0 2px rgba(72, 207, 204, 0.05);
|
|
}
|
|
|
|
.app-titlebar-title {
|
|
letter-spacing: 0.025em;
|
|
}
|
|
|
|
/* The established Hermes-agent character is the new-chat persona. */
|
|
.empty-logo {
|
|
isolation: isolate;
|
|
min-width: 126px;
|
|
min-height: 126px;
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.empty-logo::before {
|
|
width: 224px;
|
|
height: 224px;
|
|
background:
|
|
radial-gradient(circle, rgba(72, 207, 204, 0.15), rgba(76, 164, 205, 0.07) 42%, rgba(112, 101, 168, 0.035) 58%, transparent 72%);
|
|
}
|
|
|
|
.empty-logo::after {
|
|
content: "";
|
|
position: absolute;
|
|
z-index: 1;
|
|
inset: -7px;
|
|
border: 1px solid rgba(24, 127, 139, 0.2);
|
|
border-radius: 29px;
|
|
background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), transparent 38%, rgba(112, 101, 168, 0.08));
|
|
box-shadow: 0 16px 42px rgba(18, 55, 65, 0.12);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.empty-logo .hermes-agent-portrait {
|
|
position: relative;
|
|
z-index: 2;
|
|
display: block;
|
|
width: 112px;
|
|
height: 112px;
|
|
object-fit: cover;
|
|
border: 1px solid rgba(24, 127, 139, 0.28);
|
|
border-radius: 22px;
|
|
box-shadow: 0 10px 30px rgba(18, 55, 65, 0.18);
|
|
}
|
|
|
|
:root.dark .empty-logo::after {
|
|
border-color: rgba(72, 207, 204, 0.28);
|
|
background: linear-gradient(145deg, rgba(72, 207, 204, 0.1), transparent 40%, rgba(157, 142, 224, 0.09));
|
|
box-shadow: 0 0 0 1px rgba(72, 207, 204, 0.035), 0 18px 48px rgba(0, 0, 0, 0.36), 0 0 34px rgba(76, 164, 205, 0.07);
|
|
}
|
|
|
|
:root.dark .empty-logo .hermes-agent-portrait {
|
|
border-color: rgba(72, 207, 204, 0.32);
|
|
box-shadow: 0 12px 34px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
:root.dark .empty-state h2 {
|
|
color: var(--strong);
|
|
letter-spacing: -0.015em;
|
|
text-shadow: 0 0 24px rgba(72, 207, 204, 0.08);
|
|
}
|
|
|
|
:root.dark .empty-state p {
|
|
color: #9cafba;
|
|
}
|
|
|
|
:root.dark .suggestion {
|
|
border-color: rgba(174, 218, 224, 0.15);
|
|
background: linear-gradient(105deg, rgba(17, 27, 41, 0.88), rgba(13, 20, 32, 0.74));
|
|
box-shadow: inset 2px 0 rgba(72, 207, 204, 0.12), 0 8px 22px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
:root.dark .suggestion:hover,
|
|
:root.dark .suggestion:focus-visible {
|
|
color: var(--strong);
|
|
border-color: rgba(72, 207, 204, 0.4);
|
|
background: linear-gradient(105deg, rgba(72, 207, 204, 0.11), rgba(157, 142, 224, 0.065));
|
|
}
|
|
|
|
:root.dark .suggestion:focus-visible {
|
|
outline: 2px solid var(--focus-ring);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
:root.dark .composer-box:focus-within {
|
|
border-color: rgba(72, 207, 204, 0.66);
|
|
box-shadow: 0 0 0 2px var(--focus-glow), 0 10px 34px rgba(0, 0, 0, 0.28), 0 0 28px rgba(157, 142, 224, 0.04);
|
|
}
|
|
|
|
/* Keep the conversation instrument inside the same cyan/blue/gold family. */
|
|
:root.dark .voice-mode-bar {
|
|
--voice-accent: 72, 207, 204;
|
|
--voice-accent-secondary: 76, 164, 205;
|
|
border-bottom-color: rgba(174, 218, 224, 0.11);
|
|
background:
|
|
radial-gradient(circle at 50% 38%, rgba(var(--voice-accent), 0.085), transparent 47%),
|
|
linear-gradient(180deg, rgba(17, 27, 41, 0.8), rgba(7, 10, 18, 0.35));
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
:root.dark body {
|
|
background: #070a12;
|
|
}
|
|
|
|
.app-titlebar-icon img,
|
|
:root.dark .composer-box:focus-within,
|
|
.suggestion {
|
|
transition: none !important;
|
|
}
|
|
|
|
.suggestion:hover,
|
|
.suggestion:focus-visible {
|
|
transform: none !important;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.empty-logo {
|
|
min-width: 104px;
|
|
min-height: 104px;
|
|
}
|
|
|
|
.empty-logo::before {
|
|
width: 176px;
|
|
height: 176px;
|
|
}
|
|
|
|
.empty-logo .hermes-agent-portrait {
|
|
width: 92px;
|
|
height: 92px;
|
|
border-radius: 19px;
|
|
}
|
|
}
|