diff --git a/styles.css b/styles.css index a3488e2..18f9042 100644 --- a/styles.css +++ b/styles.css @@ -1 +1,316 @@ -/* Logfire – Styles */ +/* ═══════════════════════════════════════════════════════════════════════════ + Logfire — Obsidian Plugin Styles + Aesthetic: Utilitarian System Monitor + ═══════════════════════════════════════════════════════════════════════════ */ + +/* --------------------------------------------------------------------------- + Event Stream View — Container + --------------------------------------------------------------------------- */ + +.logfire-event-stream { + display: flex; + flex-direction: column; + height: 100%; + overflow: hidden; + background: var(--background-primary); +} + +/* --------------------------------------------------------------------------- + Event Stream — Toolbar + --------------------------------------------------------------------------- */ + +.logfire-stream-toolbar { + display: flex; + align-items: center; + gap: 6px; + padding: 8px 10px; + border-bottom: 1px solid var(--background-modifier-border); + background: var(--background-secondary); + flex-shrink: 0; +} + +.logfire-stream-search { + flex: 1; + min-width: 0; + padding: 4px 8px; + border: 1px solid var(--background-modifier-border); + border-radius: 4px; + background: var(--background-primary); + color: var(--text-normal); + font-family: var(--font-monospace); + font-size: 12px; + outline: none; + transition: border-color 120ms ease; +} + +.logfire-stream-search:focus { + border-color: var(--interactive-accent); +} + +.logfire-stream-search::placeholder { + color: var(--text-faint); + font-style: italic; +} + +.logfire-stream-btn-group { + display: flex; + gap: 4px; + flex-shrink: 0; +} + +.logfire-stream-btn-group button { + padding: 3px 10px; + border: 1px solid var(--background-modifier-border); + border-radius: 4px; + background: var(--background-primary); + color: var(--text-muted); + font-size: 11px; + font-family: var(--font-monospace); + cursor: pointer; + transition: background 100ms ease, color 100ms ease, border-color 100ms ease; + letter-spacing: 0.02em; + text-transform: uppercase; +} + +.logfire-stream-btn-group button:hover { + background: var(--background-modifier-hover); + color: var(--text-normal); + border-color: var(--text-faint); +} + +.logfire-stream-btn-group button.is-active { + background: var(--interactive-accent); + color: var(--text-on-accent); + border-color: var(--interactive-accent); +} + +/* --------------------------------------------------------------------------- + Event Stream — Category Filter Bar + --------------------------------------------------------------------------- */ + +.logfire-stream-categories { + display: flex; + gap: 2px; + padding: 6px 10px; + border-bottom: 1px solid var(--background-modifier-border); + background: var(--background-secondary); + flex-shrink: 0; + flex-wrap: wrap; +} + +.logfire-cat-toggle { + display: inline-flex; + align-items: center; + gap: 3px; + padding: 2px 7px; + border-radius: 3px; + font-family: var(--font-monospace); + font-size: 10px; + letter-spacing: 0.03em; + text-transform: uppercase; + color: var(--text-muted); + cursor: pointer; + transition: background 80ms ease, color 80ms ease; + user-select: none; + line-height: 1; +} + +.logfire-cat-toggle:hover { + background: var(--background-modifier-hover); + color: var(--text-normal); +} + +.logfire-cat-toggle input[type="checkbox"] { + margin: 0; + width: 10px; + height: 10px; + accent-color: var(--interactive-accent); + cursor: pointer; +} + +.logfire-cat-toggle span { + pointer-events: none; +} + +/* --------------------------------------------------------------------------- + Event Stream — List + --------------------------------------------------------------------------- */ + +.logfire-stream-list { + flex: 1; + overflow-y: auto; + overflow-x: hidden; + font-family: var(--font-monospace); + font-size: 11.5px; + line-height: 1.5; + padding: 2px 0; +} + +/* Subtle scrollbar */ +.logfire-stream-list::-webkit-scrollbar { + width: 6px; +} + +.logfire-stream-list::-webkit-scrollbar-track { + background: transparent; +} + +.logfire-stream-list::-webkit-scrollbar-thumb { + background: var(--background-modifier-border); + border-radius: 3px; +} + +.logfire-stream-list::-webkit-scrollbar-thumb:hover { + background: var(--text-faint); +} + +/* --------------------------------------------------------------------------- + Event Stream — Row + --------------------------------------------------------------------------- */ + +.logfire-stream-row { + display: flex; + gap: 8px; + padding: 2px 10px; + border-bottom: 1px solid transparent; + transition: background 60ms ease; + white-space: nowrap; + overflow: hidden; +} + +.logfire-stream-row:hover { + background: var(--background-secondary); + border-bottom-color: var(--background-modifier-border); +} + +/* Alternating row tint for scanability */ +.logfire-stream-row:nth-child(even) { + background: color-mix(in srgb, var(--background-secondary) 30%, transparent); +} + +.logfire-stream-row:nth-child(even):hover { + background: var(--background-secondary); +} + +/* --------------------------------------------------------------------------- + Event Stream — Row Segments + --------------------------------------------------------------------------- */ + +.logfire-stream-time { + color: var(--text-faint); + flex-shrink: 0; + font-variant-numeric: tabular-nums; +} + +.logfire-stream-type { + color: var(--text-accent); + flex-shrink: 0; + font-weight: 600; + min-width: 0; +} + +.logfire-stream-source { + color: var(--text-normal); + overflow: hidden; + text-overflow: ellipsis; + min-width: 0; + flex-shrink: 1; +} + +.logfire-stream-payload { + color: var(--text-faint); + flex-shrink: 0; + margin-left: auto; + font-variant-numeric: tabular-nums; +} + +/* --------------------------------------------------------------------------- + Status Bar + --------------------------------------------------------------------------- */ + +.logfire-status-bar { + cursor: pointer; + font-family: var(--font-monospace); + font-size: 11px; + letter-spacing: 0.01em; + padding: 0 4px; + font-variant-numeric: tabular-nums; + transition: color 100ms ease; +} + +.logfire-status-bar:hover { + color: var(--text-accent); +} + +/* --------------------------------------------------------------------------- + Scan Modal + --------------------------------------------------------------------------- */ + +.logfire-scan-modal { + font-family: var(--font-monospace); +} + +.logfire-scan-modal h2 { + font-size: 16px; + font-weight: 700; + letter-spacing: -0.01em; + margin-bottom: 8px; + color: var(--text-normal); +} + +.logfire-scan-modal > p { + color: var(--text-muted); + font-size: 12px; + line-height: 1.5; + margin-bottom: 16px; +} + +.logfire-scan-progress { + margin-bottom: 12px; +} + +.logfire-scan-progress progress { + width: 100%; + height: 6px; + border: none; + border-radius: 3px; + overflow: hidden; + appearance: none; + -webkit-appearance: none; +} + +.logfire-scan-progress progress::-webkit-progress-bar { + background: var(--background-modifier-border); + border-radius: 3px; +} + +.logfire-scan-progress progress::-webkit-progress-value { + background: var(--interactive-accent); + border-radius: 3px; + transition: width 200ms ease; +} + +.logfire-scan-status { + font-size: 11.5px; + line-height: 1.5; + color: var(--text-normal); + word-break: break-all; +} + +.logfire-scan-status > div:last-child { + color: var(--text-muted); + font-variant-numeric: tabular-nums; +} + +.logfire-scan-buttons { + display: flex; + justify-content: flex-end; + gap: 8px; + margin-top: 16px; +} + +.logfire-scan-buttons button { + font-family: var(--font-monospace); + font-size: 12px; + letter-spacing: 0.02em; +}