Styles: Utilitarian-System-Monitor-Design

Event-Stream mit Monospace, alternierenden Zeilen,
Toolbar, Kategorie-Chips. Status-Bar kompakt.
Scan-Modal mit animiertem Fortschrittsbalken.
Ausschließlich Obsidian CSS-Variablen.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

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;
+}