e2667f8e12
Forked from hermes-frontend, stripped openclaw/bun specifics: - Auth tokens: openclaw_session -> nyx_session - Vite proxy: localhost:3003 -> localhost:8000 (assay) - Prod WS: wss://assay.loop42.de/ws - Workspace paths: removed openclaw-specific paths - Added missing deps: @heroicons/vue, overlayscrollbars-vue - Branding: title -> nyx Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
185 lines
3.5 KiB
CSS
185 lines
3.5 KiB
CSS
.app-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
}
|
|
|
|
/* legacy alias kept for any views that still reference it */
|
|
|
|
|
|
.page {
|
|
padding-left: var(--space-page);
|
|
padding-right: var(--space-page);
|
|
}
|
|
|
|
.content {
|
|
padding-left: var(--space-inset);
|
|
padding-right: var(--space-inset);
|
|
}
|
|
/* Agents: scroll container extends to viewport edge for scrollbar alignment */
|
|
.agents-view .content {
|
|
padding-right: 0;
|
|
margin-right: calc(-1 * var(--space-page));
|
|
}
|
|
|
|
.view-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-gap);
|
|
padding-top: var(--space-gap);
|
|
padding-bottom: var(--space-gap);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.content-area {
|
|
position: relative;
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
}
|
|
|
|
.main-footer {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
position: relative;
|
|
height: 44px;
|
|
background: transparent;
|
|
border-top: none;
|
|
color: var(--text-dim);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.main-footer .version-label {
|
|
color: var(--text-dim);
|
|
font-family: var(--font-mono);
|
|
cursor: default;
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.main-nav {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0;
|
|
padding: 0 var(--space-page);
|
|
background: var(--panel-bg);
|
|
border-radius: var(--radius-panel);
|
|
box-shadow: var(--panel-shadow);
|
|
height: var(--height-nav);
|
|
position: relative;
|
|
margin: var(--panel-gap);
|
|
}
|
|
|
|
.main-nav a {
|
|
color: var(--nav-link, var(--text-dim));
|
|
padding: 8px var(--space-page);
|
|
text-decoration: none;
|
|
position: relative;
|
|
transition: color 0.15s;
|
|
}
|
|
.main-nav a:first-of-type {
|
|
padding-left: 0;
|
|
}
|
|
|
|
.main-nav a.active {
|
|
color: var(--nav-link-active, var(--text));
|
|
}
|
|
|
|
.main-nav a::after { display: none; }
|
|
|
|
/* Sliding dot — single element on the nav itself */
|
|
.main-nav {
|
|
--dot-left: 50%;
|
|
}
|
|
|
|
.main-nav::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: var(--dot-left);
|
|
width: 4px;
|
|
height: 4px;
|
|
border-radius: 50%;
|
|
background: var(--accent);
|
|
transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.main-nav a:hover:not(.active) { color: var(--nav-link-active, var(--text)); }
|
|
|
|
.main-nav .spacer { margin-left: auto; }
|
|
|
|
.nav-home-logo {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 8px 12px 8px 0 !important;
|
|
}
|
|
|
|
.nav-theme-icon {
|
|
width: 22px;
|
|
height: 22px;
|
|
stroke-width: 1.5;
|
|
}
|
|
|
|
.nav-home-logo .nav-agent-logo {
|
|
width: 28px;
|
|
height: 22px;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.app-layout {
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
display: flex;
|
|
}
|
|
|
|
/* Agents view — full-height flex column */
|
|
.agents-view {
|
|
flex: 1;
|
|
align-self: stretch;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
background: transparent;
|
|
}
|
|
|
|
.agent-column {
|
|
width: auto;
|
|
background: var(--panel-bg);
|
|
border-radius: var(--radius-panel);
|
|
box-shadow: var(--panel-shadow);
|
|
padding: var(--space-page);
|
|
flex-shrink: 0;
|
|
overflow-y: auto;
|
|
min-height: 0;
|
|
}
|
|
|
|
.chat-column {
|
|
flex-grow: 1;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.chat-frame {
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-gap);
|
|
margin: 0;
|
|
}
|
|
|
|
/* ── Mobile — visibility only, no spacing changes ── */
|
|
@media (max-width: 639px) {
|
|
.nav-agent-logo {
|
|
width: 22px;
|
|
margin-right: 2px;
|
|
}
|
|
}
|