megaproxy/claude-usage-widget
1
0
Fork 0
Code Issues Pull requests Projects Releases 3 Packages Wiki Activity Actions

Layout: resizable window, fluid SVG ring, no scrollbars unless overflow, opaque bg

Browse source 
tauri.conf: resizable=true, min 220x240, default 300x320.
BlockRing: SVG scales via viewBox, claims remaining vertical space.
#app uses flex column with sections flex:0 0 auto — content reflows when window resized.
Bumped --bg opacity from 0.78 to 0.93 so files behind the widget don't bleed through.
Themed scrollbars subtle when they do appear.
This commit is contained in:
megaproxy 2026-05-09 01:56:59 +01:00
parent 75049903e7
commit f90bb3b0d5
4 changed files with 49 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

17
src/styles.css
View file

@ -1,7 +1,7 @@
/* Glass / always-on-top widget look. */
:root {
--bg: rgba(18, 20, 26, 0.78);
--bg: rgba(18, 20, 26, 0.93);
--bg-card: rgba(255, 255, 255, 0.04);
--border: rgba(255, 255, 255, 0.08);
--fg: #e8eaf0;
@ -38,12 +38,22 @@ html, body {
background: var(--bg);
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
overflow: hidden; /* the window itself never scrolls */
display: flex;
flex-direction: column;
backdrop-filter: blur(14px);
}
/* Each child of #app gets a sensible flex behavior so resizing reflows
instead of overflowing. TitleBar and section panels are flex:0 (size
to content); the BlockRing wrap is flex:1 (claims remaining space). */
/* Hide scrollbars unless content really overflows; when they do appear,
make them subtle. */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 3px; }
::-webkit-scrollbar-track { background: transparent; }
button {
font: inherit;
color: inherit;
@ -78,7 +88,8 @@ input[type="number"], input[type="text"], select {
}
.section {
padding: 8px var(--pad);
flex: 0 0 auto;
padding: 6px var(--pad) 8px;
border-top: 1px solid var(--border);
}
.section:first-child { border-top: none; }