agentandClaude
9248ae62c7
Diagnose: Mobile Graph sichtbar aber nicht bedienbar. Root cause: iOS Safari interpretiert Single-Finger-Touch als Scroll-Geste statt als Drag, weil touch-action: none fehlt. Fixes: 1. CSS: touch-action: none auf .graph-modal-canvas, canvas und .graph-modal (verhindert iOS-Safari Scroll-Hijacking + Rubber-Band-Effect) 2. JS: Touch-Event-Fallbacks (touchstart/move/end/cancel) parallel zu pointer-events (für ältere iOS-Safari-Versionen die pointer-events noch nicht voll unterstützen) 3. JS: Pinch-to-Zoom via Zwei-Finger-Gestenerkennung 4. JS: Initial-Render mit Resize-Retry bis Canvas echte Dimensionen hat (Modal-Container kann initial 0x0 sein bevor Flex-Layout settled) 5. JS: ResizeObserver auf Canvas re-rendert bei Größenänderung 6. CSS: overscroll-behavior: contain auf Modal (kein Bounce) 7. CSS: -webkit-user-select: none + tap-highlight: transparent (verhindert iOS-Safari Selektions-Overlay beim Drag) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
715 lines
18 KiB
CSS
715 lines
18 KiB
CSS
/* Hermes Wiki — Touch-First CSS for Phase 2
|
|
*
|
|
* Design principles:
|
|
* - Bottom-Nav on mobile (3 tabs: Files, Search, Graph)
|
|
* - Hamburger-Tree always off-canvas on mobile, slide-in on click
|
|
* - Graph shown via FAB-style toggle → opens full-screen modal
|
|
* - Desktop: 3-panel layout (tree 280px, content flex, graph 320px)
|
|
* - Tablet (768-1023px): 2-panel (tree 220px, content flex), graph as bottom panel
|
|
* - Mobile (<768px): 1-panel (content only), tree/graph via toggles
|
|
* - Tap targets ≥ 44px, no accidental 300ms delay
|
|
* - Safe-area-insets for iOS Dynamic Island
|
|
* - Pull-to-refresh via overscroll-behavior: contain
|
|
*/
|
|
|
|
:root {
|
|
--bg-primary: #0a0a14;
|
|
--bg-secondary: #0e0e1a;
|
|
--bg-surface: #1a1a2e;
|
|
--bg-elevated: #252537;
|
|
--text-primary: #cdd6f4;
|
|
--text-secondary: #a6adc8;
|
|
--text-muted: #6c7086;
|
|
--accent: #FFD700;
|
|
--link: #FFD700;
|
|
--link-visited: #cba6f7;
|
|
--border: #313244;
|
|
--green: #a6e3a1;
|
|
--red: #f38ba8;
|
|
--blue: #89b4fa;
|
|
--teal: #94e2d5;
|
|
--sat: env(safe-area-inset-top, 0px);
|
|
--sab: env(safe-area-inset-bottom, 0px);
|
|
--sal: env(safe-area-inset-left, 0px);
|
|
--sar: env(safe-area-inset-right, 0px);
|
|
--tap-min: 44px;
|
|
}
|
|
|
|
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
|
|
|
|
html, body {
|
|
height: 100%;
|
|
overflow: hidden;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, sans-serif;
|
|
font-size: 15px;
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
overscroll-behavior: contain; /* pull-to-refresh only where intended */
|
|
}
|
|
|
|
body {
|
|
padding-top: var(--sat);
|
|
padding-left: var(--sal);
|
|
padding-right: var(--sar);
|
|
padding-bottom: var(--sab);
|
|
}
|
|
|
|
/* ============================================================
|
|
* Layout: Desktop (≥1024px) — 3-panel
|
|
* ============================================================ */
|
|
.app-shell {
|
|
display: grid;
|
|
grid-template-columns: 280px 1fr 320px;
|
|
grid-template-rows: 48px 1fr;
|
|
height: 100vh;
|
|
height: 100dvh;
|
|
width: 100%;
|
|
max-width: 100vw;
|
|
}
|
|
|
|
.app-header {
|
|
grid-column: 1 / -1;
|
|
background: var(--bg-secondary);
|
|
border-bottom: 1px solid var(--border);
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 16px;
|
|
gap: 12px;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 50;
|
|
}
|
|
|
|
.brand {
|
|
color: var(--accent);
|
|
font-weight: 700;
|
|
font-size: 14px;
|
|
letter-spacing: 0.5px;
|
|
text-decoration: none;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
#search {
|
|
flex: 1;
|
|
max-width: 480px;
|
|
height: 36px;
|
|
padding: 0 12px 0 36px;
|
|
background: var(--bg-surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
color: var(--text-primary);
|
|
font-size: 13px;
|
|
outline: none;
|
|
transition: border-color 0.15s;
|
|
}
|
|
#search:focus { border-color: var(--accent); }
|
|
#search::placeholder { color: var(--text-muted); }
|
|
|
|
.search-wrap { position: relative; flex: 1; max-width: 480px; }
|
|
.search-wrap::before {
|
|
content: '🔍';
|
|
position: absolute;
|
|
left: 12px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
font-size: 13px;
|
|
pointer-events: none;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.icon-btn {
|
|
background: transparent;
|
|
border: 1px solid var(--border);
|
|
color: var(--text-secondary);
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
}
|
|
.icon-btn:hover { border-color: var(--accent); color: var(--accent); }
|
|
|
|
.app-tree {
|
|
grid-column: 1;
|
|
grid-row: 2;
|
|
background: var(--bg-secondary);
|
|
border-right: 1px solid var(--border);
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
padding: 8px 0;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.app-content {
|
|
grid-column: 2;
|
|
grid-row: 2;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
padding: 32px 48px 64px;
|
|
max-width: 100%;
|
|
word-wrap: break-word;
|
|
overflow-wrap: break-word;
|
|
hyphens: auto;
|
|
}
|
|
|
|
.app-graph {
|
|
grid-column: 3;
|
|
grid-row: 2;
|
|
background: var(--bg-secondary);
|
|
border-left: 1px solid var(--border);
|
|
overflow: hidden;
|
|
position: relative;
|
|
min-height: 0;
|
|
}
|
|
|
|
.app-graph canvas {
|
|
display: block;
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
cursor: grab;
|
|
}
|
|
.app-graph canvas:active { cursor: grabbing; }
|
|
|
|
/* ============================================================
|
|
* Tree rendering
|
|
* ============================================================ */
|
|
.tree-root { padding: 4px 0; }
|
|
.tree-folder { margin: 1px 0; }
|
|
.tree-folder-header {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 6px 12px;
|
|
gap: 6px;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
color: var(--text-secondary);
|
|
font-weight: 500;
|
|
border-radius: 4px;
|
|
margin: 1px 4px;
|
|
min-height: var(--tap-min);
|
|
font-size: 13px;
|
|
}
|
|
.tree-folder-header:hover { background: rgba(255, 215, 0, 0.05); }
|
|
.tree-folder-header.active { background: rgba(255, 215, 0, 0.08); color: var(--accent); }
|
|
.tree-folder-header .arrow {
|
|
color: var(--text-muted);
|
|
font-size: 10px;
|
|
width: 12px;
|
|
display: inline-block;
|
|
transition: transform 0.15s;
|
|
}
|
|
.tree-folder.open > .tree-folder-header .arrow { transform: rotate(90deg); }
|
|
.tree-children { padding-left: 12px; display: none; }
|
|
.tree-folder.open > .tree-children { display: block; }
|
|
|
|
.tree-file {
|
|
display: block;
|
|
padding: 6px 12px 6px 24px;
|
|
color: var(--text-primary);
|
|
text-decoration: none;
|
|
border-radius: 4px;
|
|
margin: 1px 4px;
|
|
min-height: var(--tap-min);
|
|
font-size: 13px;
|
|
display: flex;
|
|
align-items: center;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.tree-file:hover { background: rgba(255, 215, 0, 0.05); color: var(--accent); }
|
|
.tree-file.current {
|
|
background: rgba(255, 215, 0, 0.12);
|
|
color: var(--accent);
|
|
border-left: 3px solid var(--accent);
|
|
padding-left: 21px;
|
|
}
|
|
.tree-file-icon { margin-right: 6px; opacity: 0.5; }
|
|
|
|
/* ============================================================
|
|
* Note content
|
|
* ============================================================ */
|
|
.note { max-width: 920px; margin: 0 auto; }
|
|
.meta-card {
|
|
background: var(--bg-surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
padding: 14px 18px;
|
|
margin-bottom: 24px;
|
|
font-size: 12px;
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 6px 16px;
|
|
}
|
|
.meta-row {
|
|
display: flex;
|
|
gap: 8px;
|
|
align-items: baseline;
|
|
min-width: 0;
|
|
}
|
|
.meta-key {
|
|
color: var(--accent);
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
font-size: 10px;
|
|
letter-spacing: 0.5px;
|
|
min-width: 70px;
|
|
flex-shrink: 0;
|
|
}
|
|
.meta-value {
|
|
color: var(--text-secondary);
|
|
word-break: break-word;
|
|
font-family: ui-monospace, 'SF Mono', Monaco, monospace;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.note-body {
|
|
line-height: 1.7;
|
|
font-size: 16px;
|
|
}
|
|
.note-body h1 { font-size: 2em; margin: 0.6em 0 0.4em; padding-bottom: 8px; border-bottom: 1px solid var(--border); color: var(--text-primary); }
|
|
.note-body h2 { font-size: 1.5em; margin: 1.5em 0 0.5em; color: var(--text-primary); border-bottom: 1px solid rgba(49,50,68,0.5); padding-bottom: 4px; }
|
|
.note-body h3 { font-size: 1.25em; margin: 1.2em 0 0.4em; color: var(--text-primary); }
|
|
.note-body h4 { font-size: 1.1em; margin: 1em 0 0.4em; color: var(--text-secondary); }
|
|
.note-body p { margin: 0.8em 0; }
|
|
.note-body ul, .note-body ol { margin: 0.5em 0; padding-left: 1.8em; }
|
|
.note-body li { margin: 0.3em 0; }
|
|
.note-body blockquote {
|
|
border-left: 3px solid var(--accent);
|
|
padding: 0.5em 1em;
|
|
margin: 1em 0;
|
|
background: rgba(255, 215, 0, 0.04);
|
|
color: var(--text-secondary);
|
|
font-style: italic;
|
|
}
|
|
.note-body code {
|
|
background: var(--bg-surface);
|
|
padding: 2px 6px;
|
|
border-radius: 3px;
|
|
font-family: ui-monospace, 'SF Mono', Monaco, monospace;
|
|
font-size: 0.9em;
|
|
color: var(--teal);
|
|
}
|
|
.note-body pre {
|
|
background: var(--bg-surface);
|
|
border: 1px solid var(--border);
|
|
padding: 14px 16px;
|
|
border-radius: 8px;
|
|
overflow-x: auto;
|
|
margin: 1em 0;
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
}
|
|
.note-body pre code {
|
|
background: transparent;
|
|
padding: 0;
|
|
color: var(--text-primary);
|
|
font-size: inherit;
|
|
}
|
|
.note-body table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin: 1em 0;
|
|
font-size: 14px;
|
|
display: block;
|
|
overflow-x: auto;
|
|
}
|
|
.note-body th {
|
|
background: var(--bg-surface);
|
|
padding: 8px 12px;
|
|
text-align: left;
|
|
border: 1px solid var(--border);
|
|
font-weight: 600;
|
|
color: var(--accent);
|
|
}
|
|
.note-body td {
|
|
padding: 8px 12px;
|
|
border: 1px solid var(--border);
|
|
}
|
|
.note-body tr:nth-child(even) { background: rgba(30, 30, 50, 0.3); }
|
|
.note-body a {
|
|
color: var(--link);
|
|
text-decoration: none;
|
|
border-bottom: 1px solid rgba(255, 215, 0, 0.3);
|
|
}
|
|
.note-body a:hover { border-bottom-color: var(--accent); }
|
|
.note-body a:visited { color: var(--link-visited); }
|
|
.note-body .wikilink {
|
|
color: var(--blue);
|
|
border-bottom: 1px dashed var(--blue);
|
|
}
|
|
.note-body .wikilink:hover { color: var(--accent); border-bottom-color: var(--accent); }
|
|
.note-body .wikilink-missing {
|
|
color: var(--text-muted);
|
|
border-bottom: 1px dotted var(--text-muted);
|
|
text-decoration: line-through;
|
|
}
|
|
.note-body img { max-width: 100%; height: auto; border-radius: 6px; margin: 1em 0; }
|
|
.note-body hr { border: none; border-top: 1px solid var(--border); margin: 2em 0; }
|
|
.note-body .headerlink { color: var(--text-muted); margin-left: 8px; font-size: 0.7em; text-decoration: none; opacity: 0; transition: opacity 0.15s; }
|
|
.note-body h1:hover .headerlink, .note-body h2:hover .headerlink, .note-body h3:hover .headerlink { opacity: 1; }
|
|
|
|
/* TOC sidebar (in note footer area) */
|
|
.note-toc {
|
|
margin-top: 48px;
|
|
padding: 16px 0;
|
|
border-top: 1px solid var(--border);
|
|
font-size: 13px;
|
|
}
|
|
.note-toc-title {
|
|
color: var(--accent);
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.5px;
|
|
text-transform: uppercase;
|
|
margin-bottom: 8px;
|
|
}
|
|
.note-toc ul { list-style: none; padding-left: 0; }
|
|
.note-toc li { margin: 3px 0; }
|
|
.note-toc a {
|
|
color: var(--text-secondary);
|
|
text-decoration: none;
|
|
border-bottom: none;
|
|
}
|
|
.note-toc a:hover { color: var(--accent); }
|
|
.note-toc ul ul { padding-left: 16px; }
|
|
|
|
/* Backlinks section */
|
|
.note-backlinks {
|
|
margin-top: 24px;
|
|
padding: 16px 0;
|
|
border-top: 1px solid var(--border);
|
|
font-size: 13px;
|
|
}
|
|
.note-backlinks-title {
|
|
color: var(--accent);
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.5px;
|
|
text-transform: uppercase;
|
|
margin-bottom: 8px;
|
|
}
|
|
.note-backlinks ul { list-style: none; padding-left: 0; }
|
|
.note-backlinks li { margin: 4px 0; }
|
|
.note-backlinks a { color: var(--blue); border-bottom: 1px dashed var(--blue); }
|
|
|
|
.note-footer {
|
|
margin-top: 32px;
|
|
padding-top: 16px;
|
|
border-top: 1px solid var(--border);
|
|
font-size: 11px;
|
|
color: var(--text-muted);
|
|
font-family: ui-monospace, 'SF Mono', Monaco, monospace;
|
|
}
|
|
|
|
/* ============================================================
|
|
* Search dropdown
|
|
* ============================================================ */
|
|
.search-results {
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
right: 0;
|
|
background: var(--bg-elevated);
|
|
border: 1px solid var(--border);
|
|
border-top: none;
|
|
border-radius: 0 0 6px 6px;
|
|
max-height: 60vh;
|
|
overflow-y: auto;
|
|
display: none;
|
|
z-index: 100;
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
|
|
}
|
|
.search-results.open { display: block; }
|
|
.search-result {
|
|
display: block;
|
|
padding: 10px 16px;
|
|
color: var(--text-primary);
|
|
text-decoration: none;
|
|
border-bottom: 1px solid rgba(49, 50, 68, 0.3);
|
|
min-height: var(--tap-min);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
.search-result:hover, .search-result.active {
|
|
background: rgba(255, 215, 0, 0.08);
|
|
}
|
|
.search-result-title {
|
|
font-weight: 600;
|
|
font-size: 13px;
|
|
}
|
|
.search-result-path {
|
|
font-size: 11px;
|
|
color: var(--text-muted);
|
|
font-family: ui-monospace, monospace;
|
|
}
|
|
.search-result-tag {
|
|
display: inline-block;
|
|
background: var(--bg-surface);
|
|
color: var(--accent);
|
|
padding: 1px 6px;
|
|
border-radius: 3px;
|
|
font-size: 10px;
|
|
margin-right: 4px;
|
|
}
|
|
.search-empty {
|
|
padding: 16px;
|
|
color: var(--text-muted);
|
|
font-size: 12px;
|
|
text-align: center;
|
|
}
|
|
|
|
/* ============================================================
|
|
* Graph modal (full-screen on mobile)
|
|
* ============================================================ */
|
|
.graph-modal {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: var(--bg-primary);
|
|
z-index: 200;
|
|
flex-direction: column;
|
|
padding-top: var(--sat);
|
|
padding-left: var(--sal);
|
|
padding-right: var(--sar);
|
|
padding-bottom: var(--sab);
|
|
}
|
|
.graph-modal.open { display: flex; }
|
|
.graph-modal-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 8px 16px;
|
|
background: var(--bg-secondary);
|
|
border-bottom: 1px solid var(--border);
|
|
height: 48px;
|
|
flex-shrink: 0;
|
|
}
|
|
.graph-modal-title {
|
|
color: var(--accent);
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
.graph-modal-close {
|
|
background: transparent;
|
|
border: 1px solid var(--border);
|
|
color: var(--text-secondary);
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-size: 18px;
|
|
}
|
|
.graph-modal-close:hover { color: var(--accent); border-color: var(--accent); }
|
|
.graph-modal-canvas {
|
|
flex: 1;
|
|
position: relative;
|
|
overflow: hidden;
|
|
touch-action: none; /* critical: prevent iOS Safari scroll-hijacking */
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
-webkit-tap-highlight-color: transparent;
|
|
min-height: 0; /* flex-child needs explicit min-height for sizing */
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.graph-modal-canvas canvas {
|
|
display: block;
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
cursor: grab;
|
|
touch-action: none; /* critical: same on canvas itself */
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
}
|
|
.graph-modal-canvas canvas:active { cursor: grabbing; }
|
|
|
|
/* Modal body must not scroll on background */
|
|
.graph-modal {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: var(--bg-primary);
|
|
z-index: 200;
|
|
flex-direction: column;
|
|
padding-top: var(--sat);
|
|
padding-left: var(--sal);
|
|
padding-right: var(--sar);
|
|
padding-bottom: var(--sab);
|
|
touch-action: none;
|
|
overscroll-behavior: contain;
|
|
}
|
|
.graph-modal.open { display: flex; }
|
|
|
|
/* Graph legend (small floating panel) */
|
|
.graph-legend {
|
|
position: absolute;
|
|
bottom: 12px;
|
|
left: 12px;
|
|
background: rgba(14, 14, 26, 0.92);
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
padding: 8px 12px;
|
|
font-size: 11px;
|
|
color: var(--text-secondary);
|
|
z-index: 10;
|
|
}
|
|
.graph-legend-title {
|
|
color: var(--accent);
|
|
font-weight: 700;
|
|
font-size: 10px;
|
|
letter-spacing: 0.5px;
|
|
text-transform: uppercase;
|
|
margin-bottom: 4px;
|
|
}
|
|
.graph-legend-row { display: flex; align-items: center; gap: 6px; margin: 2px 0; }
|
|
.graph-legend-dot {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* ============================================================
|
|
* Bottom navigation (mobile only)
|
|
* ============================================================ */
|
|
.app-bottom-nav {
|
|
display: none;
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: var(--bg-secondary);
|
|
border-top: 1px solid var(--border);
|
|
z-index: 150;
|
|
padding-bottom: var(--sab);
|
|
}
|
|
.app-bottom-nav-inner {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
height: 56px;
|
|
}
|
|
.app-bottom-nav button {
|
|
flex: 1;
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--text-secondary);
|
|
font-size: 11px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 2px;
|
|
cursor: pointer;
|
|
min-height: var(--tap-min);
|
|
padding: 4px 0;
|
|
}
|
|
.app-bottom-nav button:hover, .app-bottom-nav button.active { color: var(--accent); }
|
|
.app-bottom-nav button span.icon { font-size: 18px; line-height: 1; }
|
|
|
|
/* ============================================================
|
|
* Tablet (768px-1023px) — 2-panel + bottom graph
|
|
* ============================================================ */
|
|
@media (max-width: 1023px) {
|
|
.app-shell {
|
|
grid-template-columns: 220px 1fr;
|
|
grid-template-rows: 48px 1fr 240px;
|
|
}
|
|
.app-tree {
|
|
grid-column: 1;
|
|
grid-row: 2 / 4;
|
|
border-right: 1px solid var(--border);
|
|
}
|
|
.app-content {
|
|
grid-column: 2;
|
|
grid-row: 2;
|
|
padding: 24px 32px 32px;
|
|
}
|
|
.app-graph {
|
|
grid-column: 1 / -1;
|
|
grid-row: 3;
|
|
border-left: none;
|
|
border-top: 1px solid var(--border);
|
|
height: 240px;
|
|
}
|
|
}
|
|
|
|
/* ============================================================
|
|
* Mobile (<768px) — single column + bottom-nav
|
|
* ============================================================ */
|
|
@media (max-width: 767px) {
|
|
.app-shell {
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: 48px 1fr;
|
|
}
|
|
.app-header { padding: 0 12px; gap: 8px; }
|
|
.app-header .icon-btn[data-action="toggle-tree"],
|
|
.app-header .icon-btn[data-action="toggle-graph"] {
|
|
display: none; /* hide redundant buttons, use bottom-nav */
|
|
}
|
|
.search-wrap { max-width: none; }
|
|
|
|
.app-tree {
|
|
position: fixed;
|
|
top: 48px;
|
|
top: calc(48px + var(--sat));
|
|
left: 0;
|
|
bottom: 56px;
|
|
bottom: calc(56px + var(--sab));
|
|
width: 85vw;
|
|
max-width: 320px;
|
|
transform: translateX(-100%);
|
|
transition: transform 0.25s ease-in-out;
|
|
z-index: 250;
|
|
background: var(--bg-secondary);
|
|
border-right: 1px solid var(--border);
|
|
display: block;
|
|
}
|
|
.app-tree.open { transform: translateX(0); }
|
|
|
|
.app-content {
|
|
grid-column: 1;
|
|
grid-row: 2;
|
|
padding: 16px 20px 72px; /* bottom-nav space + safe area */
|
|
}
|
|
|
|
.app-graph { display: none; }
|
|
|
|
.app-bottom-nav { display: block; }
|
|
}
|
|
|
|
/* Backdrop for mobile tree/graph overlay */
|
|
.backdrop {
|
|
display: none;
|
|
position: fixed;
|
|
top: 48px;
|
|
top: calc(48px + var(--sat));
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 56px;
|
|
bottom: calc(56px + var(--sab));
|
|
background: rgba(0, 0, 0, 0.6);
|
|
z-index: 200;
|
|
}
|
|
.backdrop.open { display: block; }
|
|
|
|
/* ============================================================
|
|
* Inline highlight for hash anchors
|
|
* ============================================================ */
|
|
:target { scroll-margin-top: 60px; }
|
|
:target h1, :target h2, :target h3 {
|
|
background: rgba(255, 215, 0, 0.08);
|
|
transition: background 0.6s ease-out;
|
|
} |