viewer.css

cad/viewer.css
:root {
--bg:#1e2227; --panel:#262b32; --line:#3a414a;
--txt:#d7dde3; --muted:#8b95a1; --accent:#4ea1ff;
}
* { box-sizing:border-box; }
html,body { margin:0; height:100%; font-family:-apple-system,Segoe UI,Roboto,sans-serif; color:var(--txt); background:var(--bg); overscroll-behavior:none; -webkit-tap-highlight-color:transparent; }
#app { display:flex; flex-direction:column; height:100vh; height:100dvh; }
header { display:flex; align-items:center; gap:12px; padding:8px 14px; background:var(--panel); border-bottom:1px solid var(--line); flex-wrap:nowrap; white-space:nowrap; overflow-x:auto; scrollbar-width:none; }
header::-webkit-scrollbar { display:none; }
header > * { flex-shrink:0; }
header h1 { font-size:14px; font-weight:600; margin:0 8px 0 0; }
.btn { background:#323841; color:var(--txt); border:1px solid var(--line); border-radius:6px; padding:6px 10px; font-size:0.875rem; cursor:pointer; }
.btn:hover { border-color:var(--accent); }
.btn.icon { display:flex; align-items:center; justify-content:center; padding:6px; width:38px; height:38px; }
.btn.dl { display:flex; align-items:center; gap:6px; }
.btn.dl[hidden] { display:none; }
.btn.info { display:flex; align-items:center; justify-content:center; padding:7px 8px; } /* same 30px height as the other toolbar buttons */
.btn.icon svg { width:24px; height:24px; }
.menu { position:relative; }
.menu-list { position:fixed; z-index:1000; min-width:180px; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:4px; box-shadow:0 8px 24px rgba(0,0,0,.4); }

Showing the first 20 lines.

Get full code

Support

Talk to the developers of this project to learn more

We have been building professional websites for big clients for over 15 years. Gallop templates and blocks is our best foundation for SEO websites and web apps.

© 2026 Web Plant Media, LLC