iqbal/learning-lab-express
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fit the knowledge graph in the viewport on short screens

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Iqbal
2026-10-29 12:21:33 +07:00
parent bcd747721d
commit 8d745ad96e
1 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/styles/theme.css
View File

@@ -305,7 +305,7 @@ dialog::backdrop{background:rgba(16,24,40,.45);backdrop-filter:blur(4px)}
@keyframes live-pulse{70%{box-shadow:0 0 0 8px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}} @keyframes live-pulse{70%{box-shadow:0 0 0 8px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}
.graph-stage{--g-sources:#6ce9a6;--g-made:#fde272;--g-working:#c3b5fd; .graph-stage{--g-sources:#6ce9a6;--g-made:#fde272;--g-working:#c3b5fd;
position:relative;min-height:640px;border-radius:22px;overflow:hidden;color:#e4e7ec; position:relative;height:640px;max-height:calc(100vh - 260px);max-height:calc(100dvh - 260px);min-height:440px;border-radius:22px;overflow:hidden;color:#e4e7ec;
background:radial-gradient(ellipse at 45% 50%,#0f2a4d 0%,#0a1628 55%,#060d1a 100%);box-shadow:0 24px 60px -28px rgba(16,24,40,.6)} background:radial-gradient(ellipse at 45% 50%,#0f2a4d 0%,#0a1628 55%,#060d1a 100%);box-shadow:0 24px 60px -28px rgba(16,24,40,.6)}
.graph-svg{position:absolute;inset:0;width:calc(100% - 300px);height:100%;display:block} .graph-svg{position:absolute;inset:0;width:calc(100% - 300px);height:100%;display:block}
.graph-loading{position:absolute;inset:0 300px 0 0;display:grid;place-items:center;color:#98a2b3;font-size:13px} .graph-loading{position:absolute;inset:0 300px 0 0;display:grid;place-items:center;color:#98a2b3;font-size:13px}
@@ -378,10 +378,10 @@ dialog::backdrop{background:rgba(16,24,40,.45);backdrop-filter:blur(4px)}
.graph-fullscreen{position:absolute;top:16px;right:316px;z-index:3;display:grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid rgba(255,255,255,.14);border-radius:10px;background:rgba(10,22,40,.6);backdrop-filter:blur(8px);color:#d0d5dd;cursor:pointer;transition:background .15s,color .15s} .graph-fullscreen{position:absolute;top:16px;right:316px;z-index:3;display:grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid rgba(255,255,255,.14);border-radius:10px;background:rgba(10,22,40,.6);backdrop-filter:blur(8px);color:#d0d5dd;cursor:pointer;transition:background .15s,color .15s}
.graph-fullscreen:hover{background:rgba(46,144,250,.25);color:#fff} .graph-fullscreen:hover{background:rgba(46,144,250,.25);color:#fff}
.graph-fullscreen svg{width:16px;height:16px} .graph-fullscreen svg{width:16px;height:16px}
.graph-stage.full{border-radius:0;min-height:0;height:100vh;height:100dvh;box-shadow:none} .graph-stage.full{border-radius:0;min-height:0;max-height:none;height:100vh;height:100dvh;box-shadow:none}
.graph-stage.pinned{position:fixed;inset:0;z-index:50} .graph-stage.pinned{position:fixed;inset:0;z-index:50}
@media(max-width:900px){ @media(max-width:900px){
.graph-stage{min-height:0;display:flex;flex-direction:column} .graph-stage{height:auto;max-height:none;min-height:0;display:flex;flex-direction:column}
.graph-stage.full{overflow:auto} .graph-stage.full{overflow:auto}
.graph-fullscreen{right:16px} .graph-fullscreen{right:16px}
.graph-svg{position:relative;width:100%;height:auto;aspect-ratio:1000/640} .graph-svg{position:relative;width:100%;height:auto;aspect-ratio:1000/640}