diff --git "a/journals/20260223-0020-\343\203\230\343\203\203\343\203\200\343\203\225\343\203\203\343\202\277\345\206\215\350\250\255\350\250\210.md" "b/journals/20260223-0020-\343\203\230\343\203\203\343\203\200\343\203\225\343\203\203\343\202\277\345\206\215\350\250\255\350\250\210.md" new file mode 100644 index 0000000..f74cb21 --- /dev/null +++ "b/journals/20260223-0020-\343\203\230\343\203\203\343\203\200\343\203\225\343\203\203\343\202\277\345\206\215\350\250\255\350\250\210.md" @@ -0,0 +1,72 @@ +# 2026-02-23 - ヘッダ/フッタ再設計 + +**作業者**: AIエージェント（Antigravity） + +## 目的 +ユーザーからの指示に基づき、アプリケーションのヘッダおよびフッタの見た目と配置を安定させる。特に「画面左端基準でのヘッダ配置」「フッタを左端基準に揃える」要求に対応すること。 + +## 指示 +- ヘッダは画面左端基準で配置する（サイドバーありきのレイアウトではなく、まず画面左端基準で確定する）。 +- フッタも同様に左端基準で揃える。 +- ヘッダの微調整のみで落ち着かない場合は、フッタも合わせて再配置する。 + +## 実施日 +2026-02-23 + +## 作業要約（AI視点） +- AIエージェントは、`site-header.js` と `styles.css` の該当箇所を逐次編集し、ヘッダのロゴ位置を画面左端に安定させるための変更を行った。さらに、フッタの内側コンテナを左寄せへ変更した。 +- 変更は段階的に行い、ユーザーからのスクリーンショットとフィードバックを受けながら微調整を実施した。 + +## 変更履歴（主要ファイル） +- `src/frontend/components/site-header.js` + - ヘッダのDOM構造を調整し、`header-content` ラッパーを導入。ロゴ（`.logo-mark`）をラッパー内へ移動して配置の一貫性を確保。 +- `src/frontend/components/main-panel.js` + - 検索パネル内に残っていたブランド（大見出し）を削除し、`model-name-display` を `stats` 内へ移動。 +- `src/frontend/components/site-footer.js` + - 変更は不要（コンポーネント本体はそのまま）。 +- `src/frontend/styles.css` + - `--page-vertical-padding` を `0` に設定し、全体の上下余白を削除。 + - ヘッダ：`.site-header` を `position: fixed` で維持しつつ、`header-content` を導入して左端基準（`margin-left: 0`）で揃えるよう修正。 + - ロゴ：`.header-left-logo` を相対配置にしてロゴのオフセットを調整（最終的に `padding-left: 6px`、可変）。 + - フッタ：`.site-footer .footer-inner` を左端基準に変更し、`padding-left` を小さくして表示を整えた。 + - `glass-panel` / `sidebar-panel` / `activity-log` / `result-card` のボーダーを削除し、視覚をフラット化。 + +## 実施手順（要点） +1. 既存スタイルの読み取りと、ユーザーのスクリーンショットによる問題点の確認。 +2. `styles.css` のヘッダ・フッタ関連を編集して左端基準に揃える。 +3. `site-header.js` を修正して DOM を `header-content` に整形し、ロゴの収まりを安定化。 +4. ユーザーに表示確認を依頼し、追加の微調整（ロゴの padding）を実施。 +5. 最終的にフッタも左端基準へ変更。 + +## 影響範囲 +- 表示のみの変更（DOM構造の小規模調整を含む）が主。既存のグローバルスクリプト（`query` 要素や SSE 処理）は `main-panel` 内で ID を維持したため機能影響は最小。 +- レスポンシブ（狭い画面）において一部挙動の再確認が必要（`@media` での補正を残す可能性あり）。 + +## 差分のポイント（技術的） +- パネルのボーダー削除は見た目の好みに関する変更であり、好みが分かれるため容易に元に戻せるよう `git` コミット単位で管理することを推奨。 + +## 次の作業（推奨） +- ユーザーによる最終確認（表示、重なり、レスポンシブ挙動）。 +- 問題なければ変更をコミットするか、望まれる場合は別ブランチでの確定コミットを作成する提案を行う。 +- 必要ならヘッダのフォントサイズ／縦オフセットの微調整を実施。 + +## 参考: 作業フロー（Mermaid） +```mermaid +flowchart TD + A[ユーザー: ヘッダ/フッタ再設計要求] --> B[AI: 現状確認] + B --> C[AI: styles.css 編集（ヘッダ/フッタ）] + C --> D[AI: site-header.js DOM調整] + D --> E[ユーザー確認（スクショ）] + E --> F{満足？} + F -- Yes --> G[最終調整 & 提案: コミット] + F -- No --> H[微調整を繰り返す] +``` + +## AIエージェントの所感 +AIエージェントは、ユーザーの繰り返しの要求に対して速やかに対応しましたが、初期段階での設計方針（サイドバーに被らないようメイン領域と揃える）がユーザーの意図と食い違い、混乱を招きました。今回の学びとして、次回からはまずユーザーにレイアウト基準（画面左端基準 or サイドバー基準）を明確に確認するプロンプトを挟む運用に改善します。 + +--- + +作業ファイル: `src/frontend/components/site-header.js`, `src/frontend/components/main-panel.js`, `src/frontend/styles.css` + +対応完了。コミットまたは追加調整の指示をください。 diff --git a/src/frontend/components/main-panel.js b/src/frontend/components/main-panel.js new file mode 100644 index 0000000..356494d --- /dev/null +++ b/src/frontend/components/main-panel.js @@ -0,0 +1,100 @@ +class MainPanel extends HTMLElement { + connectedCallback() { + if (this._initialized) return; + this._initialized = true; + this.className = 'main-panel'; + this.innerHTML = ` +
+ + + + + +
+ `; + + // Handle navigation events from sidebar + document.addEventListener('navigate-panel', (e) => { + const target = String(e.detail || 'search'); + this.showPanel(target); + }); + + // Expose showPanel as method + this.showPanel = (panelId) => { + const panels = this.querySelectorAll('.panel'); + panels.forEach(p => p.classList.add('hidden')); + switch (panelId) { + case 'docs': + this.querySelector('#panel-docs').classList.remove('hidden'); + break; + case 'settings': + this.querySelector('#panel-settings').classList.remove('hidden'); + break; + default: + this.querySelector('#panel-search').classList.remove('hidden'); + } + }; + // default show search + this.showPanel('search'); + } +} + +customElements.define('main-panel', MainPanel); + +export { }; + diff --git a/src/frontend/components/site-header.js b/src/frontend/components/site-header.js new file mode 100644 index 0000000..cecd61f --- /dev/null +++ b/src/frontend/components/site-header.js @@ -0,0 +1,26 @@ +class SiteHeader extends HTMLElement { + connectedCallback() { + // Avoid double-rendering + if (this._initialized) return; + this._initialized = true; + this.className = 'site-header'; + this.innerHTML = ` +
+
+ +
+
判定中...
+
+ + LSA Search +
+
+
+
+ `; + } +} + +customElements.define('site-header', SiteHeader); diff --git a/src/frontend/styles.css b/src/frontend/styles.css index 94d50f4..2c65438 100644 --- a/src/frontend/styles.css +++ b/src/frontend/styles.css @@ -1,197 +1,254 @@ :root { - --glass-bg: rgba(255, 255, 255, 0.1); - --glass-border: rgba(255, 255, 255, 0.2); - --accent-blue: #4f46e5; - --accent-purple: #9333ea; - --text-primary: #f8fafc; - --text-secondary: #94a3b8; + /* Black theme variables (adjusted for improved contrast) */ + --glass-bg: rgba(255, 255, 255, 0.05); + --panel-bg: rgba(255, 255, 255, 0.03); + --glass-border: rgba(255, 255, 255, 0.08); + --glass-border-strong: rgba(255, 255, 255, 0.18); + --divider: rgba(255, 255, 255, 0.12); + --accent-blue: #5b21b6; + --accent-purple: #9b5cf6; + --text-primary: #f3f7fb; + --text-secondary: #b9c6d1; + --sidebar-width: 244px; + --header-height: 64px; + --footer-height: 48px; + --page-vertical-padding: 0px; /* remove extra vertical page padding */ } -* { - box-sizing: border-box; - margin: 0; - padding: 0; - -webkit-user-select: none; - user-select: none; -} - +/* Reset & base */ +* { box-sizing: border-box; margin: 0; padding: 0; } +html, body { height: 100%; } body { font-family: 'Inter', sans-serif; - background: radial-gradient(circle at top left, #0f172a, #1e1b4b); + background: radial-gradient(circle at top left, #020204, #07060a); color: var(--text-primary); min-height: 100vh; display: flex; - justify-content: center; - align-items: center; - padding: 20px; + justify-content: flex-start; + align-items: flex-start; + padding: 0; /* removed outer page padding per user request */ overflow-x: hidden; } .container { width: 100%; - max-width: 900px; + max-width: none; /* allow main area to fill available width */ z-index: 10; + margin-top: var(--header-height); /* space for fixed header */ + margin-bottom: var(--footer-height); /* space for fixed footer */ + margin-left: var(--sidebar-width); /* space for fixed left sidebar */ + padding: 0; /* removed container padding */ } /* Glass Card */ .glass-panel { - background: var(--glass-bg); - -webkit-backdrop-filter: blur(20px); - backdrop-filter: blur(20px); - border: 1px solid var(--glass-border); - border-radius: 24px; - padding: 40px; - box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); - animation: fadeIn 0.8s ease-out; + background: linear-gradient(180deg, var(--panel-bg), rgba(255,255,255,0.02)); + -webkit-backdrop-filter: blur(14px); + backdrop-filter: blur(14px); + border: none; + border-radius: 20px; + padding: 28px; + box-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.6); + animation: fadeIn 0.45s ease-out; } +@keyframes fadeIn { from { opacity: 0; transform: translateY(20px);} to { opacity: 1; transform: translateY(0);} } -@keyframes fadeIn { - from { - opacity: 0; - transform: translateY(20px); - } - - to { - opacity: 1; - transform: translateY(0); - } +/* Header */ +.site-header { + position: fixed; /* keep header fixed at top */ + z-index: 80; + --page-vertical-padding: 0px; /* no extra page padding */ + top: 0; left: 0; right: 0; + height: var(--header-height); + display: flex; align-items: center; justify-content: flex-start; + background: linear-gradient(90deg, rgba(0,0,0,0.92), rgba(12,12,18,0.92)); + backdrop-filter: blur(8px); + border-bottom: 1px solid var(--glass-border-strong); } - -header { +.site-header .header-inner { + width: 100%; display: flex; - justify-content: space-between; - align-items: flex-start; - margin-bottom: 40px; } -.brand h1 { - font-size: 2.5rem; - font-weight: 800; - letter-spacing: -0.05em; - background: linear-gradient(to right, #818cf8, #c084fc); - -webkit-background-clip: text; - background-clip: text; - -webkit-text-fill-color: transparent; -} - -.brand p { - color: var(--text-secondary); - font-size: 0.9rem; - margin-top: 4px; -} - -.stats { - display: flex; +/* content area aligned with main container */ +.site-header .header-content { + width: 100%; + max-width: none; + display:flex; justify-content:space-between; align-items:center; + margin-left: 0; + padding: 0 12px; gap: 12px; } +.site-header .header-info { display:flex; gap:12px; align-items:center; } +.model-name-top { color: var(--text-secondary); font-size:0.9rem; } +.site-header .header-info { display:flex; gap:12px; align-items:center; } +.model-name-top { color: var(--text-secondary); font-size:0.9rem; } -.status-badge { - padding: 6px 12px; - border-radius: 999px; - font-size: 0.75rem; - font-weight: 600; +/* Left logo area (fixed at viewport left) */ +.header-left-logo { + position: relative; + height: var(--header-height); + display:flex; align-items:center; padding-left:6px; pointer-events: auto; +} +.header-left-logo .logo-mark { + font-weight: 700; font-size: 0.95rem; + background: linear-gradient(to right, #818cf8, #c084fc); + -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; +} + +/* Footer */ +.site-footer { + position: fixed; left: 0; right: 0; bottom: 0; height: 48px; + display:flex; align-items:center; justify-content:center; + background: linear-gradient(90deg, rgba(0,0,0,0.94), rgba(10,10,14,0.94)); + border-top: 1px solid var(--glass-border-strong); + z-index: 60; +} +.site-footer .footer-inner { + width: 100%; + max-width: none; + margin: 0; display: flex; + justify-content: space-between; align-items: center; - gap: 6px; - background: rgba(0, 0, 0, 0.2); - border: 1px solid var(--glass-border); + padding: 0 20px; + padding-left: 12px; + color: var(--text-secondary); + font-size: 0.85rem; } -.status-dot { - width: 8px; - height: 8px; - border-radius: 50%; - display: inline-block; +/* Layout with left sidebar */ +.layout { display: flex; gap: 0; align-items: flex-start; width:100%; } +.sidebar { + width: var(--sidebar-width); flex: 0 0 var(--sidebar-width); background: transparent; border: none; padding: 0; color: var(--text-secondary); + position: fixed; left: 0; top: 64px; height: calc(100vh - 112px); + display:flex; flex-direction:column; justify-content:flex-start; + background: linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0)); + border-right: 1px solid var(--divider); } +.sidebar-inner { display:flex; flex-direction:column; gap:0; height:100%; } +.sidebar-nav { display:flex; flex-direction:column; gap:0; margin-top:0; } +.nav-item { background: transparent; border: none; color: var(--text-secondary); padding:10px 12px; border-radius:0; text-align:left; cursor:pointer; width:100%; } +.nav-item:hover { background: rgba(255,255,255,0.02); color: var(--text-primary); } +.nav-item.small { padding:6px 8px; font-size:0.85rem; } +.sidebar-top { } +.sidebar-bottom { margin-top: auto; padding: 0; } + +/* Sidebar panel wrapper inside the fixed sidebar (no outer padding on .sidebar) */ +.sidebar-panel { + margin: 0; /* flush to sidebar edges */ + height: 100%; + display:flex; + flex-direction:column; + background: var(--panel-bg); + border: none; + border-radius: 12px; + padding: 8px 0; /* keep vertical padding but remove horizontal gap */ + box-shadow: 0 8px 24px -12px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.02); +} + +/* Resizer handle on the right edge of the fixed sidebar */ +.sidebar-resizer { + position: absolute; + right: 0; + top: 0; + bottom: 0; + width: 8px; + cursor: col-resize; + background: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0)); + z-index: 70; +} +.sidebar-resizer:hover { background: rgba(255,255,255,0.04); } + +.sidebar-panel .sidebar-bottom { margin-top: auto; padding: 8px 0 0 0; } + +/* Accordion */ +.accordion { border-radius: 6px; overflow: hidden; margin: 0; } +.accordion-header { width:100%; display:flex; justify-content:space-between; align-items:center; background: transparent; border: none; color:var(--text-secondary); padding:6px 12px; border-radius:4px; cursor:pointer; } +.accordion-header:hover { background: rgba(255,255,255,0.02); color:var(--text-primary); } +.accordion-title { font-weight:700; font-size:0.9rem; } +.accordion-toggle { font-size:0.9rem; opacity:0.8; } +.accordion-content { margin-top:0; padding:6px 0; border-radius:6px; background: transparent; border: none; } +.version { color: var(--text-secondary); font-size:0.85rem; margin-bottom:8px; } +.settings-list { display:flex; flex-direction:column; gap:6px; } + +.main-content { + flex: 1; + padding-left: 0; /* remove inner padding so panel sits flush */ + height: calc(100vh - var(--header-height) - var(--footer-height) - var(--page-vertical-padding)); /* consider header/footer and body padding */ + display: flex; + flex-direction: column; + min-width: 0; +} + +.main-panel { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; +} + +.main-panel > .glass-panel { + height: 100%; + display: flex; + flex-direction: column; + padding: 20px; + border-radius: 14px; + width: 100%; + box-sizing: border-box; + margin: 0; +} + +.panel { flex: 1; display: flex; flex-direction: column; min-height: 0; } +.panel > header { flex: 0 0 auto; } +.panel .panel-body { flex: 1 1 auto; min-height: 0; display:flex; flex-direction:column; overflow: auto; padding-right: 8px; } +.panel .results-panel { flex: 1 1 auto; overflow: auto; } + +.container { margin-left: var(--sidebar-width); } + +@media (max-width: 900px) { + .layout { flex-direction: column; } + .sidebar { width: 100%; flex: none; border-radius: 12px; position: static; height: auto; } + .container { margin-top: 90px; margin-left: 0; } + .site-header .header-inner { margin-left: 0; width: 100%; padding-right: 20px; } + .header-left-logo { display: none; } +} + +/* Brand / Header inside main panel */ +header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 40px; } +.brand h1 { font-size: 2.5rem; font-weight: 800; letter-spacing: -0.05em; background: linear-gradient(to right, #818cf8, #c084fc); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } +.brand p { color: var(--text-secondary); font-size: 0.9rem; margin-top: 4px; } + +.stats { display: flex; gap: 12px; } +.status-badge { padding: 6px 12px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; display: flex; align-items: center; gap: 6px; background: rgba(0, 0, 0, 0.2); border: 1px solid var(--glass-border); } +.status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } .status-dot.idle { background: #94a3b8; } .status-dot.running { background: #22c55e; box-shadow: 0 0 8px #22c55e; } .status-dot.stopped { background: #ef4444; } -/* Search Section */ -.search-container { - position: relative; - margin-bottom: 30px; -} +/* Search */ +.search-container { position: relative; margin-bottom: 30px; } +.search-input { width: 100%; background: var(--panel-bg); border: 1px solid var(--glass-border); border-radius: 16px; padding: 18px 24px; padding-right: 120px; color: var(--text-primary); font-size: 1.1rem; transition: all 0.18s; outline: none; } +.search-input:focus { background: rgba(255,255,255,0.04); border-color: var(--accent-purple); box-shadow: 0 0 0 6px rgba(155,92,246,0.10); } +.search-btn { position: absolute; right: 8px; top: 8px; bottom: 8px; background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple)); color: white; border: none; padding: 0 24px; border-radius: 12px; font-weight: 600; cursor: pointer; } -.search-input { - width: 100%; - background: rgba(0, 0, 0, 0.3); - border: 1px solid var(--glass-border); - border-radius: 16px; - padding: 18px 24px; - padding-right: 120px; - color: white; - font-size: 1.1rem; - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); - outline: none; -} - -.search-input:focus { - background: rgba(0, 0, 0, 0.4); - border-color: #6366f1; - box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2); -} - -.search-btn { - position: absolute; - right: 8px; - top: 8px; - bottom: 8px; - background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple)); - color: white; - border: none; - padding: 0 24px; - border-radius: 12px; - font-weight: 600; - cursor: pointer; - transition: transform 0.2s, box-shadow 0.2s; -} - -.search-btn:hover { transform: scale(1.02); box-shadow: 0 10px 15px -3px rgba(79, 70, 229, 0.4); } -.search-btn:active { transform: scale(0.98); } - -/* Results Area */ +/* Results */ .results-panel { min-height: 200px; } -.result-card { background: rgba(255,255,255,0.03); border: 1px solid var(--glass-border); border-radius:16px; padding:20px; margin-bottom:12px; transition: background 0.2s; } -.result-card:hover { background: rgba(255,255,255,0.06); } +.result-card { background: var(--panel-bg); border: none; border-radius:16px; padding:18px; margin-bottom:12px; transition: background 0.18s, transform 0.12s; } +.result-card:hover { background: rgba(255,255,255,0.04); transform: translateY(-2px); } .result-header { display:flex; justify-content:space-between; font-size:0.8rem; color:var(--text-secondary); margin-bottom:8px; } .result-content { font-size:1rem; line-height:1.6; color:var(--text-primary); } -/* MCP Modal */ -#mcp-json-modal { - position: fixed; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: 80%; - max-width: 600px; - background: #1e1b4b; - border: 1px solid var(--glass-border); - border-radius: 20px; - padding: 30px; - z-index: 100; - display: none; - box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8); -} - +/* Modal */ +#mcp-json-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 600px; background: #0b0b0c; border: 1px solid var(--glass-border); border-radius: 16px; padding: 28px; z-index: 100; display: none; box-shadow: 0 22px 48px -10px rgba(0,0,0,0.7); } #mcp-json-modal.open { display: block; } - -.modal-overlay { - position: fixed; - inset: 0; - background: rgba(0, 0, 0, 0.6); - -webkit-backdrop-filter: blur(4px); - backdrop-filter: blur(4px); - z-index: 90; - display: none; -} - +.modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); z-index: 90; display: none; } .modal-overlay.open { display: block; } -pre { background:#0f172a; padding:15px; border-radius:10px; font-family:monospace; font-size:0.85rem; max-height:400px; overflow:auto; color:#818cf8; } +pre { background:#070709; padding:15px; border-radius:10px; font-family:monospace; font-size:0.85rem; max-height:400px; overflow:auto; color:#9aa4b2; } .actions { display:flex; gap:10px; margin-top:20px; } -.secondary-btn { background: transparent; border: 1px solid var(--glass-border); color: var(--text-secondary); padding:8px 16px; border-radius:8px; cursor:pointer; font-size:0.8rem; transition: all 0.2s; } -.secondary-btn:hover { background: rgba(255,255,255,0.1); color: white; } +.secondary-btn { background: transparent; border: 1px solid rgba(255,255,255,0.04); color: var(--text-secondary); padding:8px 16px; border-radius:8px; cursor:pointer; font-size:0.8rem; transition: all 0.2s; } +.secondary-btn:hover { background: rgba(255,255,255,0.05); color: var(--text-primary); } .warning-btn:hover { border-color: #f59e0b; color: #f59e0b; background: rgba(245, 158, 11, 0.05); } .empty-state { text-align:center; padding:40px; color: var(--text-secondary); } @@ -200,72 +257,12 @@ .accent-purple { color: var(--accent-purple); } .modal-title { margin-bottom: 15px; } -/* small helpers */ -.status-info { color: var(--text-secondary); } +/* Activity Log */ +.activity-log { margin-top: 30px; background: var(--panel-bg); border: none; border-radius: 14px; padding: 14px; min-height: 120px; max-height: 200px; overflow-y: auto; } +.activity-log-title { font-size: 0.75rem; font-weight: 800; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 10px; display: flex; justify-content: space-between; } +.log-item { font-size: 0.85rem; padding: 8px 12px; border-radius: 8px; background: rgba(255, 255, 255, 0.04); margin-bottom: 6px; border-left: 3px solid var(--accent-purple); animation: slideIn 0.28s ease-out; display: flex; justify-content: space-between; } +.log-time { color: var(--text-secondary); font-family: monospace; font-size: 0.75rem; } +.log-method { font-weight: 600; color: #a5b4fc; } -.model-name { - position: absolute; - top: 16px; - right: 16px; - color: #94a3b8; - font-size: 0.9em; -} - -/* Activity Log Panel */ -.activity-log { - margin-top: 30px; - background: rgba(0, 0, 0, 0.2); - border: 1px solid var(--glass-border); - border-radius: 16px; - padding: 15px; - min-height: 120px; - max-height: 200px; - overflow-y: auto; -} - -.activity-log-title { - font-size: 0.75rem; - font-weight: 800; - color: var(--text-secondary); - text-transform: uppercase; - letter-spacing: 0.1em; - margin-bottom: 10px; - display: flex; - justify-content: space-between; -} - -.log-item { - font-size: 0.85rem; - padding: 8px 12px; - border-radius: 8px; - background: rgba(255, 255, 255, 0.03); - margin-bottom: 6px; - border-left: 3px solid var(--accent-purple); - animation: slideIn 0.3s ease-out; - display: flex; - justify-content: space-between; -} - -.log-time { - color: var(--text-secondary); - font-family: monospace; - font-size: 0.75rem; -} - -.log-method { - font-weight: 600; - color: #a5b4fc; -} - -@keyframes slideIn { - from { opacity: 0; transform: translateX(-10px); } - to { opacity: 1; transform: translateX(0); } -} - -::-webkit-scrollbar { - width: 6px; -} -::-webkit-scrollbar-thumb { - background: var(--glass-border); - border-radius: 10px; -} +::-webkit-scrollbar { width: 6px; } +::-webkit-scrollbar-thumb { background: var(--divider); border-radius: 10px; }