tboudreaux/cex
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

struct graph

Browse Source
This commit is contained in:
Emily Boudreaux
2026-09-07 15:52:46 -04:00
parent 30ed3351b5
commit 93521c53fb
15 changed files with 1061 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
frontend/style.css
View File

@@ -260,3 +260,40 @@ dialog { background: var(--surface); border-color: var(--border); box-shadow: va
#graph-warnings { padding-top: 8px; }
#graph-zoom { margin-left: auto; font-variant-numeric: tabular-nums; }
#explanation-pane.graph-expanded { position: fixed; z-index: 15; right: 0; top: 58px; bottom: 29px; width: min(1050px, 94vw); box-shadow: var(--shadow); }
#graph-progress { display: flex; align-items: center; gap: 9px; padding: 9px 11px; background: var(--selected); color: var(--accent-text); border-radius: 7px; font-size: 12px; flex-shrink: 0; }
#graph-progress progress { width: 64px; height: 4px; margin-left: auto; accent-color: var(--accent); }
.graph-spinner { width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: graph-spin .8s linear infinite; }
@keyframes graph-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .graph-spinner { animation: none; } }
#file-menu { position: relative; font-size: 12px; }
#file-menu > summary { padding: 7px 8px; cursor: pointer; border-radius: 5px; list-style: none; }
#file-menu > summary::-webkit-details-marker { display: none; }
#file-menu[open] > summary, #file-menu > summary:hover { background: var(--hover); }
.file-dropdown { position: absolute; top: calc(100% + 8px); left: 0; width: min(350px, 85vw); z-index: 30; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 6px; box-shadow: var(--shadow); }
.file-dropdown > button, #file-recents > summary { display: block; width: 100%; text-align: left; background: transparent; border: 0; padding: 9px 10px; cursor: pointer; border-radius: 5px; }
.file-dropdown button:hover, #file-recents > summary:hover { background: var(--hover); }
#file-welcome { border-top: 1px solid var(--border); margin-top: 5px; }
#file-recent-list { max-height: 320px; overflow: auto; padding: 4px 8px; color: var(--muted); }
.file-recent { display: block; width: 100%; background: transparent; border: 0; text-align: left; padding: 8px; }
.file-recent strong, .file-recent small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-recent small { color: var(--muted); margin-top: 4px; }
main { grid-template-columns: minmax(180px, var(--left-sidebar-width, clamp(230px, 22vw, 320px))) minmax(280px, 1fr); }
main.explaining { grid-template-columns: minmax(180px, var(--left-sidebar-width, 19vw)) minmax(280px, 1fr) minmax(300px, var(--right-sidebar-width, 33vw)); }
main > aside, #explanation-pane { position: relative; }
.sidebar-resizer { position: absolute; top: 0; bottom: 0; width: 8px; z-index: 20; cursor: col-resize; touch-action: none; }
.left-resizer { right: -4px; }
.right-resizer { left: -4px; }
.sidebar-resizer:hover, .sidebar-resizer:focus-visible { background: var(--accent); opacity: .6; outline: none; }
body.resizing-sidebars, body.resizing-sidebars * { cursor: col-resize !important; user-select: none !important; }
.graph-node.type rect { fill: var(--node-operator); }
.graph-node.field rect, .graph-node.alias rect { fill: var(--node); }
.graph-node.parameter rect, .graph-node.template-parameter rect { fill: var(--node-requires); }
@media (max-width: 1100px) {
main.explaining { grid-template-columns: minmax(180px, var(--left-sidebar-width, clamp(230px, 22vw, 320px))) minmax(280px, 1fr); }
#explanation-pane { position: fixed; width: min(var(--right-sidebar-width, 520px), 94vw); }
}
#explanation-pane.graph-expanded { width: min(var(--expanded-sidebar-width, 1050px), 94vw); }
main > aside > nav { overflow-x: auto; flex-shrink: 0; }