Spaces:
Sleeping
Sleeping
| /* ───────────────────────────────────────────────────────────────────── | |
| * app-shell.css — shared chrome for Admin and Analytics pages | |
| * | |
| * Both pages get the same brand mark, same nav links, same action | |
| * buttons, same tab style. Page-specific content lives below in | |
| * their respective stylesheets. | |
| * | |
| * Layout primitives: | |
| * .app-page full-viewport page background | |
| * .app-header sticky top chrome | |
| * .app-header-row one 48px row inside the header | |
| * .app-brand "APE · <page name>" wordmark | |
| * .app-brand-dot thin divider between APE and page name | |
| * .app-tabs / .app-tab / .app-tab.active | |
| * .app-link quiet cross-nav link (Chat / Admin / Analytics) | |
| * .app-actions right-aligned button cluster | |
| * .btn-text standard secondary button | |
| * .btn-text-emphasis primary-color filled button | |
| * .app-main page content container, max-width 1200px | |
| * ──────────────────────────────────────────────────────────────────── */ | |
| .app-page { | |
| min-height: 100vh; | |
| background: var(--bg); | |
| color: var(--text); | |
| font-size: 14px; | |
| font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; | |
| } | |
| /* ── Header ─────────────────────────────────────────────────────────── */ | |
| .app-header { | |
| position: sticky; | |
| top: 0; | |
| z-index: 10; | |
| background: var(--surface); | |
| border-bottom: 1px solid var(--border); | |
| box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02); | |
| } | |
| .app-header-row { | |
| display: flex; | |
| align-items: center; | |
| padding: 0 24px; | |
| height: 48px; | |
| gap: 16px; | |
| } | |
| .app-header-row + .app-header-row { | |
| border-top: 1px solid var(--border); | |
| background: var(--bg); | |
| height: 44px; | |
| gap: 12px; | |
| } | |
| /* ── Brand mark ─────────────────────────────────────────────────────── */ | |
| .app-brand { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| font-size: 13.5px; | |
| font-weight: 600; | |
| letter-spacing: -0.005em; | |
| color: var(--text); | |
| flex-shrink: 0; | |
| padding-right: 14px; | |
| margin-right: 6px; | |
| border-right: 1px solid var(--border); | |
| height: 28px; | |
| line-height: 28px; | |
| } | |
| .app-brand-name { | |
| color: var(--primary); | |
| font-weight: 700; | |
| letter-spacing: 0.02em; | |
| } | |
| .app-brand-dot { | |
| color: var(--border-strong); | |
| font-weight: 400; | |
| margin: 0 2px; | |
| } | |
| .app-brand-page { | |
| color: var(--text); | |
| font-weight: 500; | |
| } | |
| /* ── Tabs ───────────────────────────────────────────────────────────── */ | |
| .app-tabs { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0; | |
| margin: 0; | |
| padding: 0; | |
| border: none; | |
| height: 48px; /* match the header row so no stray scrollbar */ | |
| overflow-x: auto; | |
| overflow-y: hidden; /* prevent the vertical scrollbar artifact */ | |
| scrollbar-width: none; /* hide the scrollbar entirely (Firefox) */ | |
| -ms-overflow-style: none; /* hide (old Edge) */ | |
| flex: 1; | |
| min-width: 0; | |
| } | |
| .app-tabs::-webkit-scrollbar { display: none; } /* hide (Chrome/Safari) */ | |
| .app-tab { | |
| display: inline-flex; | |
| align-items: center; | |
| padding: 0 14px; | |
| height: 47px; /* matches header row minus 1px border */ | |
| background: transparent; | |
| border: none; | |
| border-bottom: 2px solid transparent; | |
| font-family: inherit; | |
| font-size: 13px; | |
| font-weight: 500; | |
| color: var(--text-secondary); | |
| cursor: pointer; | |
| white-space: nowrap; | |
| transition: color 0.12s, border-color 0.12s; | |
| margin-bottom: -1px; | |
| } | |
| .app-tab:hover { color: var(--text); } | |
| .app-tab.active { | |
| color: var(--primary); | |
| border-bottom-color: var(--primary); | |
| font-weight: 600; | |
| } | |
| /* ── Right-side action cluster ──────────────────────────────────────── */ | |
| .app-actions { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 4px; | |
| margin-left: auto; | |
| flex-shrink: 0; | |
| } | |
| /* Quiet cross-nav link */ | |
| .app-link { | |
| color: var(--text-secondary); | |
| text-decoration: none; | |
| font-size: 12.5px; | |
| font-weight: 500; | |
| padding: 6px 10px; | |
| border-radius: var(--radius-sm); | |
| transition: color 0.12s, background 0.12s; | |
| } | |
| .app-link:hover { | |
| color: var(--text); | |
| background: var(--bg); | |
| } | |
| /* Standard action button (text, low weight) */ | |
| .btn-text { | |
| background: transparent; | |
| border: 1px solid var(--border); | |
| color: var(--text-secondary); | |
| font-size: 12.5px; | |
| font-weight: 500; | |
| font-family: inherit; | |
| padding: 5px 12px; | |
| border-radius: var(--radius-sm); | |
| cursor: pointer; | |
| transition: background 0.12s, color 0.12s, border-color 0.12s; | |
| white-space: nowrap; | |
| line-height: 1.2; | |
| } | |
| .btn-text:hover:not(:disabled) { | |
| background: var(--bg); | |
| color: var(--text); | |
| border-color: var(--border-strong); | |
| } | |
| .btn-text:disabled { | |
| opacity: 0.45; | |
| cursor: not-allowed; | |
| } | |
| .btn-text-emphasis { | |
| background: var(--primary); | |
| color: var(--primary-fg); | |
| border-color: var(--primary); | |
| } | |
| .btn-text-emphasis:hover:not(:disabled) { | |
| background: var(--primary-hover); | |
| border-color: var(--primary-hover); | |
| color: var(--primary-fg); | |
| } | |
| /* ── Main content container ─────────────────────────────────────────── */ | |
| .app-main { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 24px 24px 64px; | |
| } | |
| /* ── Responsive: stack tabs below brand on narrow screens ───────────── */ | |
| @media (max-width: 900px) { | |
| .app-header-row { | |
| flex-wrap: wrap; | |
| height: auto; | |
| padding: 8px 16px; | |
| } | |
| .app-brand { | |
| border-right: none; | |
| margin-right: 0; | |
| padding-right: 0; | |
| } | |
| .app-tabs { | |
| width: 100%; | |
| margin-top: 4px; | |
| border-top: 1px solid var(--border); | |
| padding-top: 4px; | |
| } | |
| } | |
| /* ============================================================ | |
| Shared product chrome polish | |
| ============================================================ */ | |
| .app-page { | |
| background: | |
| linear-gradient(135deg, rgba(200, 122, 76, 0.06), transparent 36%), | |
| linear-gradient(315deg, rgba(208, 138, 40, 0.06), transparent 30%), | |
| var(--bg); | |
| } | |
| .app-header { | |
| background: rgba(255, 255, 255, 0.82); | |
| border-bottom-color: rgba(217, 213, 204, 0.74); | |
| backdrop-filter: blur(14px); | |
| box-shadow: 0 8px 30px rgba(45, 42, 38, 0.05); | |
| } | |
| .app-header-row { | |
| min-height: 56px; | |
| height: auto; | |
| } | |
| .app-header-row + .app-header-row { | |
| background: rgba(250, 248, 244, 0.78); | |
| min-height: 48px; | |
| height: auto; | |
| } | |
| .app-brand { | |
| height: 34px; | |
| gap: 9px; | |
| padding-right: 18px; | |
| } | |
| .app-brand-name { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 34px; | |
| height: 34px; | |
| border-radius: 9px; | |
| background: linear-gradient(145deg, var(--primary), #e0975f); | |
| color: #fff; | |
| font-size: 12px; | |
| letter-spacing: 0.04em; | |
| box-shadow: 0 10px 22px rgba(200, 122, 76, 0.18); | |
| } | |
| .app-brand-page { | |
| font-size: 14px; | |
| font-weight: 650; | |
| } | |
| .app-tab { | |
| height: 56px; | |
| padding: 0 16px; | |
| font-size: 13.5px; | |
| border-bottom-width: 3px; | |
| } | |
| .app-tab.active { | |
| color: var(--primary); | |
| } | |
| .app-link, | |
| .btn-text { | |
| min-height: 32px; | |
| border-radius: var(--radius-md); | |
| } | |
| .btn-text { | |
| background: rgba(255, 255, 255, 0.66); | |
| border-color: var(--border); | |
| } | |
| .btn-text-emphasis { | |
| background: linear-gradient(145deg, var(--primary), #e0975f); | |
| box-shadow: 0 10px 22px rgba(200, 122, 76, 0.16); | |
| } | |
| .app-main { | |
| max-width: 1320px; | |
| padding-top: 30px; | |
| } | |
| /* ============================================================ | |
| Operator UI refresh | |
| ============================================================ */ | |
| .app-page { | |
| --bg: #f5f7fb; | |
| --bg-strong: #e8edf5; | |
| --surface: #ffffff; | |
| --surface-raised: #ffffff; | |
| --surface-soft: #f8fafc; | |
| --border: #dbe3ee; | |
| --border-strong: #b8c4d4; | |
| --text: #172033; | |
| --text-secondary: #536173; | |
| --muted: #788697; | |
| --primary: #0f766e; | |
| --primary-hover: #0b5f59; | |
| --primary-fg: #ffffff; | |
| --accent-soft: #e7f5f3; | |
| --accent-warm: #fff3d9; | |
| --secondary: #eef2f7; | |
| --secondary-fg: #172033; | |
| --danger: #c2413c; | |
| --pos: #228b5e; | |
| --neg: #c2413c; | |
| --code-bg: #eef2f7; | |
| --code-fg: #172033; | |
| --radius-sm: 6px; | |
| --radius-md: 8px; | |
| --radius-lg: 8px; | |
| --shadow-sm: 0 1px 2px rgba(23, 32, 51, 0.06); | |
| --shadow-md: 0 8px 24px rgba(23, 32, 51, 0.08); | |
| --shadow-lg: 0 18px 42px rgba(23, 32, 51, 0.12); | |
| background: #f5f7fb; | |
| } | |
| .app-header { | |
| background: rgba(255, 255, 255, 0.94); | |
| border-bottom-color: var(--border); | |
| box-shadow: 0 1px 0 rgba(23, 32, 51, 0.04), 0 12px 32px rgba(23, 32, 51, 0.06); | |
| } | |
| .app-header-row { | |
| min-height: 58px; | |
| } | |
| .app-header-row + .app-header-row { | |
| min-height: 54px; | |
| background: rgba(248, 250, 252, 0.92); | |
| } | |
| .app-brand { | |
| border-right-color: var(--border); | |
| } | |
| .app-brand-name { | |
| width: 32px; | |
| height: 32px; | |
| border-radius: 8px; | |
| background: #0f766e; | |
| color: #fff; | |
| box-shadow: none; | |
| } | |
| .app-brand-page { | |
| color: var(--text); | |
| font-size: 14px; | |
| font-weight: 700; | |
| } | |
| .app-tabs { | |
| gap: 6px; | |
| height: auto; | |
| padding: 8px 0; | |
| } | |
| .app-tab { | |
| height: 34px; | |
| padding: 0 12px; | |
| border: 1px solid transparent; | |
| border-radius: 8px; | |
| color: var(--text-secondary); | |
| font-size: 13px; | |
| } | |
| .app-tab:hover { | |
| background: #eef2f7; | |
| color: var(--text); | |
| } | |
| .app-tab.active { | |
| background: #e7f5f3; | |
| border-color: #b7ded9; | |
| color: #0f766e; | |
| box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.05); | |
| } | |
| .app-link, | |
| .btn-text { | |
| border-radius: 8px; | |
| } | |
| .app-link:hover, | |
| .btn-text:hover:not(:disabled) { | |
| background: #eef2f7; | |
| } | |
| .btn-text-emphasis { | |
| background: #0f766e; | |
| border-color: #0f766e; | |
| box-shadow: none; | |
| } | |
| .btn-text-emphasis:hover:not(:disabled) { | |
| background: #0b5f59; | |
| border-color: #0b5f59; | |
| } | |
| .app-main { | |
| max-width: 1360px; | |
| padding: 26px 28px 72px; | |
| } | |