Spaces:
Running
Running
| /* VSCode-style bottom log panel. Fixed to the bottom of the viewport so | |
| the main app can freely scroll underneath; we reserve bottom padding | |
| via `body { padding-bottom: 28px }` in the global styles (added via | |
| the component's mount — see App.jsx). */ | |
| .logs-footer { | |
| position: fixed; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| z-index: 40; | |
| display: flex; | |
| flex-direction: column; | |
| /* Chrome tokens defined at :root in index.css. The Header topbar | |
| uses the same set, so changes here flow to both surfaces. */ | |
| background: var(--chrome-bg); | |
| border-top: 1px solid var(--chrome-border); | |
| font-family: var(--font-sans); | |
| font-size: 12px; | |
| color: var(--chrome-fg); | |
| user-select: none; | |
| } | |
| .logs-footer--collapsed { | |
| height: var(--chrome-bar-h); | |
| } | |
| .logs-footer--open { | |
| /* height is set inline via React state */ | |
| min-height: 180px; | |
| } | |
| /* Drag handle — 4 px strip on the top edge. Cursor + subtle hover | |
| hint so it feels grabbable. */ | |
| .logs-footer__resize { | |
| position: absolute; | |
| top: -2px; | |
| left: 0; | |
| right: 0; | |
| height: 5px; | |
| cursor: ns-resize; | |
| z-index: 1; | |
| } | |
| .logs-footer__resize:hover { | |
| background: rgba(243, 165, 182, 0.35); | |
| } | |
| /* Top bar — always visible */ | |
| .logs-footer__bar { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| height: 28px; | |
| padding: 0 8px; | |
| gap: 8px; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.04); | |
| flex-shrink: 0; | |
| } | |
| .logs-footer__left { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| min-width: 0; | |
| flex: 1; | |
| overflow: hidden; | |
| } | |
| .logs-footer__title { | |
| color: #a89984; | |
| font-size: 11px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.06em; | |
| margin-right: 4px; | |
| } | |
| /* Thin vertical divider between the UI-scale toggle (leftmost) and the | |
| Logs title + source pills. Keeps the two distinct control groups from | |
| visually running into each other. */ | |
| .logs-footer__divider { | |
| width: 1px; | |
| height: 16px; | |
| background: rgba(255, 255, 255, 0.08); | |
| margin: 0 4px; | |
| } | |
| .logs-footer__scale { | |
| margin-right: 2px; | |
| } | |
| /* Theme color dots */ | |
| .logs-footer__themes { | |
| display: flex; | |
| align-items: center; | |
| gap: 4px; | |
| } | |
| .logs-footer__theme-dot { | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 50%; | |
| border: 2px solid transparent; | |
| background: var(--dot-color, #888); | |
| cursor: pointer; | |
| transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s; | |
| padding: 0; | |
| } | |
| .logs-footer__theme-dot:hover { | |
| transform: scale(1.25); | |
| box-shadow: 0 0 6px color-mix(in srgb, var(--dot-color, #888) 50%, transparent); | |
| } | |
| .logs-footer__theme-dot.is-active { | |
| border-color: var(--dot-color, #888); | |
| box-shadow: 0 0 8px color-mix(in srgb, var(--dot-color, #888) 40%, transparent); | |
| transform: scale(1.15); | |
| } | |
| .logs-footer__toggle { | |
| background: none; | |
| border: none; | |
| color: #a89984; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 20px; | |
| height: 20px; | |
| border-radius: 3px; | |
| } | |
| .logs-footer__toggle:hover { | |
| color: #ebdbb2; | |
| background: rgba(255, 255, 255, 0.04); | |
| } | |
| /* Source pills with badges */ | |
| .logs-footer__pill { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| padding: 2px 8px; | |
| height: 20px; | |
| border-radius: 3px; | |
| background: none; | |
| border: 1px solid transparent; | |
| color: #a89984; | |
| font-size: 11px; | |
| cursor: pointer; | |
| transition: all 0.1s; | |
| font-family: inherit; | |
| } | |
| .logs-footer__pill:hover { | |
| background: rgba(255, 255, 255, 0.04); | |
| color: #ebdbb2; | |
| } | |
| .logs-footer__pill--active { | |
| background: rgba(243, 165, 182, 0.12); | |
| border-color: rgba(243, 165, 182, 0.35); | |
| color: #f3a5b6; | |
| } | |
| .logs-footer__pill--error { | |
| color: #fb4934; | |
| } | |
| .logs-footer__pill--warn { | |
| color: #fabd2f; | |
| } | |
| .logs-footer__pill-label { | |
| font-weight: 500; | |
| } | |
| .logs-footer__badge { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| min-width: 18px; | |
| padding: 0 5px; | |
| height: 14px; | |
| border-radius: 7px; | |
| font-size: 10px; | |
| font-weight: 600; | |
| background: rgba(255, 255, 255, 0.08); | |
| color: var(--chrome-fg); | |
| font-family: var(--chrome-font-mono); | |
| } | |
| .logs-footer__badge--error { | |
| background: rgba(251, 73, 52, 0.2); | |
| color: #fb4934; | |
| } | |
| .logs-footer__badge--warn { | |
| background: rgba(250, 189, 47, 0.2); | |
| color: #fabd2f; | |
| } | |
| /* Action buttons on the right */ | |
| .logs-footer__right { | |
| display: flex; | |
| align-items: center; | |
| gap: 4px; | |
| flex-shrink: 0; | |
| } | |
| .logs-footer__actions { | |
| display: flex; | |
| align-items: center; | |
| gap: 2px; | |
| } | |
| /* Discord button */ | |
| .logs-footer__discord { | |
| background: none; | |
| border: none; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 24px; | |
| height: 24px; | |
| flex-shrink: 0; | |
| border-radius: 4px; | |
| color: #7289da; | |
| opacity: 0.6; | |
| transition: color 0.15s, opacity 0.15s, transform 0.15s; | |
| } | |
| .logs-footer__discord:hover { | |
| opacity: 1; | |
| color: #5865F2; | |
| transform: scale(1.1); | |
| } | |
| /* Glowing donate heart */ | |
| .logs-footer__donate { | |
| background: none; | |
| border: none; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 24px; | |
| height: 24px; | |
| flex-shrink: 0; | |
| border-radius: 4px; | |
| color: #d3869b; | |
| margin-left: 4px; | |
| transition: color 0.15s, transform 0.15s; | |
| animation: heart-glow 2.5s ease-in-out infinite; | |
| } | |
| .logs-footer__donate:hover { | |
| color: #f3a5b6; | |
| transform: scale(1.15); | |
| } | |
| .logs-footer__donate svg { | |
| fill: rgba(211, 134, 155, 0.25); | |
| filter: drop-shadow(0 0 4px rgba(211, 134, 155, 0.35)); | |
| } | |
| .logs-footer__donate:hover svg { | |
| fill: rgba(211, 134, 155, 0.5); | |
| filter: drop-shadow(0 0 8px rgba(211, 134, 155, 0.6)); | |
| } | |
| @keyframes heart-glow { | |
| 0%, 100% { opacity: 0.7; transform: scale(1); } | |
| 50% { opacity: 1; transform: scale(1.08); } | |
| } | |
| .logs-footer__icon-btn { | |
| background: none; | |
| border: none; | |
| color: #a89984; | |
| cursor: pointer; | |
| width: 22px; | |
| height: 22px; | |
| border-radius: 3px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: all 0.1s; | |
| } | |
| .logs-footer__icon-btn:hover { | |
| color: #ebdbb2; | |
| background: rgba(255, 255, 255, 0.06); | |
| } | |
| .logs-footer__icon-btn:disabled { | |
| opacity: 0.4; | |
| cursor: not-allowed; | |
| } | |
| .logs-footer__icon-btn--report:hover { | |
| color: #fabd2f; | |
| } | |
| .logs-footer__icon-btn .spinner { | |
| animation: logs-spin 1s linear infinite; | |
| } | |
| @keyframes logs-spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| /* Body (scrollable log area) */ | |
| .logs-footer__body { | |
| flex: 1; | |
| min-height: 0; | |
| overflow-y: auto; | |
| overflow-x: auto; | |
| padding: 4px 8px; | |
| user-select: text; | |
| } | |
| .logs-footer__body::-webkit-scrollbar { width: 8px; height: 8px; } | |
| .logs-footer__body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.08); border-radius: 4px; } | |
| .logs-footer__body::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.15); } | |
| .logs-footer__empty { | |
| padding: 12px; | |
| color: var(--chrome-fg-dim); | |
| font-style: normal; | |
| font-size: 11px; | |
| text-align: center; | |
| } | |
| .logs-footer__line { | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 6px; | |
| padding: 1px 2px; | |
| border-radius: 2px; | |
| } | |
| .logs-footer__line--error { | |
| background: rgba(251, 73, 52, 0.06); | |
| } | |
| .logs-footer__line--warn { | |
| background: rgba(250, 189, 47, 0.04); | |
| } | |
| .logs-footer__line-icon { | |
| padding-top: 2px; | |
| flex-shrink: 0; | |
| } | |
| .logs-footer__line-text { | |
| margin: 0; | |
| padding: 0; | |
| font-family: inherit; | |
| font-size: 11.5px; | |
| line-height: 1.5; | |
| white-space: pre-wrap; | |
| word-break: break-word; | |
| color: #ebdbb2; | |
| flex: 1; | |
| } | |
| .logs-footer__line--error .logs-footer__line-text { color: #fb4934; } | |
| .logs-footer__line--warn .logs-footer__line-text { color: #fabd2f; } | |
| /* ── Notification panel in footer ────────────────────────────────── */ | |
| .logs-footer__notif-body { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 2px; | |
| padding: 6px 8px; | |
| } | |
| .logs-footer__notif-item { | |
| display: flex; | |
| gap: 8px; | |
| align-items: flex-start; | |
| padding: 8px 10px; | |
| border-radius: var(--radius-md); | |
| background: rgba(255, 255, 255, 0.02); | |
| border: 1px solid transparent; | |
| } | |
| .logs-footer__notif-item:hover { background: rgba(255, 255, 255, 0.04); } | |
| .logs-footer__notif-item--warn { border-left: 2px solid #fabd2f; } | |
| .logs-footer__notif-item--error { border-left: 2px solid #fb4934; } | |
| .logs-footer__notif-item--info { border-left: 2px solid #83a598; } | |
| .logs-footer__notif-icon { | |
| flex-shrink: 0; | |
| margin-top: 2px; | |
| } | |
| .logs-footer__notif-content { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 2px; | |
| flex: 1; | |
| min-width: 0; | |
| } | |
| .logs-footer__notif-content strong { | |
| font-size: 12px; | |
| color: var(--color-fg); | |
| } | |
| .logs-footer__notif-msg { | |
| font-size: 11px; | |
| color: var(--color-fg-muted); | |
| line-height: 1.5; | |
| } | |
| .logs-footer__notif-link { | |
| font-size: 11px; | |
| color: var(--color-brand); | |
| text-decoration: none; | |
| margin-top: 2px; | |
| } | |
| .logs-footer__notif-link:hover { text-decoration: underline; } | |
| .logs-footer__notif-hf { | |
| display: flex; | |
| gap: 4px; | |
| margin-top: 4px; | |
| } | |
| .logs-footer__notif-hf-input { | |
| flex: 1; | |
| max-width: 280px; | |
| background: var(--color-bg-elev-2); | |
| border: 1px solid var(--color-border); | |
| border-radius: var(--radius-md); | |
| color: var(--color-fg); | |
| font-size: 11px; | |
| font-family: var(--font-mono); | |
| padding: 3px 8px; | |
| } | |
| .logs-footer__notif-hf-input:focus { | |
| border-color: var(--color-brand); | |
| outline: none; | |
| } | |
| .logs-footer__notif-hf-btn { | |
| background: var(--color-brand); | |
| color: #1d2021; | |
| border: none; | |
| border-radius: var(--radius-md); | |
| font-size: 11px; | |
| font-weight: 600; | |
| padding: 3px 10px; | |
| cursor: pointer; | |
| } | |
| .logs-footer__notif-hf-btn:hover { opacity: 0.85; } | |
| .logs-footer__notif-item--clickable { cursor: pointer; } | |
| .logs-footer__notif-item--clickable:hover { background: rgba(255, 255, 255, 0.06); } | |
| .logs-footer__notif-action { | |
| flex-shrink: 0; | |
| font-size: 11px; | |
| font-weight: 600; | |
| color: var(--color-brand); | |
| white-space: nowrap; | |
| } | |