agentandClaude
7be4656106
Drei Probleme mit der JS-Injection: 1. CSS kommt NACH First Paint → User sieht kurze obv-Layout, dann 'springt' zu responsive Layout (FOUC = Flash of Unstyled Content) 2. JS-Injection kann fehlschlagen (head nicht ready, Browser-Inkonsistenzen) 3. Inline <style>-Tag wird nicht gecacht, lädt bei jedem Reload Fix: hermes-custom.css als separate Datei, geladen via <link rel='stylesheet'> im HEAD. Server liefert sie automatisch. Außerdem: Mobile-Mode zeigt Graph als Bottom-Panel (140px), nicht mehr display:none. User behält Wiki-Beziehungen auch auf Phone. vault-custom.js.js behält injectResponsiveCSS als no-op für Backward-Compat. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
147 lines
4.8 KiB
CSS
147 lines
4.8 KiB
CSS
/* HermesCustom CSS — Lukas' responsive-layout additions for obsidian-web-viewer.
|
|
*
|
|
* Loaded via <link rel="stylesheet"> in vault.html (one-line patch)
|
|
* BEFORE obv's main <style>, so that our rules apply at first paint
|
|
* (no FOUC, no layout shift).
|
|
*
|
|
* Layout classes (toggled by vault-custom.js):
|
|
* .hermes-rc — base marker (added once)
|
|
* .hermes-mobile — <768px viewport (tree=hamburger, graph=bottom-panel)
|
|
* .hermes-tablet — 768-1023px (tree=visible, graph=bottom-panel)
|
|
* .hermes-desktop — >=1024px (3-panel layout, no overrides)
|
|
*
|
|
* Sidebar state:
|
|
* .hermes-sidebar-open — hamburger toggled (mobile only)
|
|
*
|
|
* Strategy: every selector starts with `.vault-app.hermes-rc` to win
|
|
* specificity against obv's `.vault-app` only.
|
|
*/
|
|
|
|
/* === Always-on (no media query) === */
|
|
.vault-app.hermes-rc {
|
|
box-sizing: border-box !important;
|
|
width: 100% !important;
|
|
max-width: 100vw !important;
|
|
overflow-x: hidden !important;
|
|
}
|
|
.vault-app.hermes-rc .vault-content {
|
|
overflow-x: hidden !important;
|
|
overflow-y: auto !important;
|
|
max-width: 100% !important;
|
|
word-wrap: break-word !important;
|
|
overflow-wrap: break-word !important;
|
|
hyphens: auto !important;
|
|
}
|
|
.vault-app.hermes-rc .vault-sidebar {
|
|
overflow-x: hidden !important;
|
|
overflow-y: auto !important;
|
|
}
|
|
.vault-app.hermes-rc .vault-graph {
|
|
position: relative !important;
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
/* Hamburger button (hidden by default, shown only in mobile) */
|
|
.hermes-mobile-toggle {
|
|
display: none;
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border);
|
|
color: var(--text-secondary);
|
|
padding: 6px 12px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
margin-right: 8px;
|
|
line-height: 1;
|
|
}
|
|
.hermes-mobile-toggle:hover {
|
|
color: var(--accent);
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
/* === Mobile (<768px) — tree hamburger + graph bottom-panel === */
|
|
@media (max-width: 767px) {
|
|
.vault-app.hermes-rc.hermes-mobile {
|
|
grid-template-columns: 1fr !important;
|
|
grid-template-rows: 48px 1fr 140px !important;
|
|
height: 100vh !important;
|
|
}
|
|
.vault-app.hermes-rc.hermes-mobile .vault-sidebar {
|
|
position: fixed !important;
|
|
top: 48px !important;
|
|
left: 0 !important;
|
|
bottom: 0 !important;
|
|
width: 280px !important;
|
|
max-width: 85vw !important;
|
|
transform: translateX(-100%) !important;
|
|
transition: transform 0.25s ease-in-out !important;
|
|
z-index: 1000 !important;
|
|
background: var(--bg-secondary) !important;
|
|
border-right: 1px solid var(--border) !important;
|
|
display: block !important;
|
|
height: calc(100vh - 48px) !important;
|
|
}
|
|
.vault-app.hermes-rc.hermes-mobile .vault-sidebar.hermes-sidebar-open {
|
|
transform: translateX(0) !important;
|
|
}
|
|
.vault-app.hermes-rc.hermes-mobile .vault-graph {
|
|
grid-column: 1 / -1 !important;
|
|
grid-row: 3 !important;
|
|
height: 140px !important;
|
|
border-left: none !important;
|
|
border-top: 1px solid var(--border) !important;
|
|
display: block !important; /* keep visible, just at bottom */
|
|
}
|
|
.vault-app.hermes-rc.hermes-mobile .vault-content {
|
|
grid-column: 1 !important;
|
|
grid-row: 2 !important;
|
|
padding: 16px 20px !important;
|
|
max-width: 100% !important;
|
|
}
|
|
.vault-app.hermes-rc.hermes-mobile .hermes-mobile-toggle {
|
|
display: inline-block !important;
|
|
}
|
|
/* Backdrop for open hamburger */
|
|
.hermes-sidebar-backdrop {
|
|
display: none;
|
|
position: fixed;
|
|
top: 48px;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
z-index: 999;
|
|
}
|
|
.vault-app.hermes-rc.hermes-mobile .hermes-sidebar-backdrop.hermes-backdrop-visible {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
/* === Tablet (768px-1023px) — tree visible, graph bottom-panel === */
|
|
@media (min-width: 768px) and (max-width: 1023px) {
|
|
.vault-app.hermes-rc.hermes-tablet {
|
|
grid-template-columns: 200px 1fr !important;
|
|
grid-template-rows: 48px 1fr 200px !important;
|
|
height: 100vh !important;
|
|
}
|
|
.vault-app.hermes-rc.hermes-tablet .vault-sidebar {
|
|
width: 200px !important;
|
|
max-width: 200px !important;
|
|
}
|
|
.vault-app.hermes-rc.hermes-tablet .vault-graph {
|
|
grid-column: 1 / -1 !important;
|
|
grid-row: 3 !important;
|
|
height: 200px !important;
|
|
border-left: none !important;
|
|
border-top: 1px solid var(--border) !important;
|
|
}
|
|
.vault-app.hermes-rc.hermes-tablet .vault-content {
|
|
grid-column: 2 !important;
|
|
grid-row: 2 !important;
|
|
padding: 20px 28px !important;
|
|
}
|
|
}
|
|
|
|
/* === Desktop (≥1024px) — leave obv default layout === */
|
|
/* No overrides needed; we just mark .hermes-desktop class so JS knows */
|