noe/arthur
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Version static URLs by mtime; flatter tabs

Browse source 
The stylesheet and bundle were served with Last-Modified only, so a browser
could pair new JavaScript with a stale app.css and render the tab strip and
thumbnails unstyled. Their URLs now carry the file's mtime. Tabs are flat on
the chrome with the open one underlined; the close button shows on hover.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Olive Vaughn 2026-09-29 13:08:38 -04:00
parent f590ff19cf
commit 270c5a4369
3 changed files with 48 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

40
static/arthur/app.css
View file

@ -336,31 +336,47 @@ input[type="range"] { width: 100%; accent-color: var(--sel); }
overflow: hidden;
}
/* One tab per open symbol. Flat, like the pane heads, with the open one lifted
to the palette bar's colour so it reads as the thing the bar below belongs to. */
/* One tab per open symbol: flat, on the chrome, with the open one marked by the
selection colour underneath rather than by a raised shape. */
.tabs {
display: flex;
gap: 1px;
padding: 3px 6px 0;
background: var(--line);
align-items: stretch;
height: 24px;
flex: 0 0 24px;
padding: 0 4px;
background: var(--chrome);
border-bottom: 1px solid var(--line);
overflow-x: auto;
}
.tab {
display: flex;
align-items: center;
gap: 6px;
padding: 2px 8px;
background: var(--sunk);
gap: 4px;
padding: 0 6px 0 10px;
color: var(--dim);
border-radius: 3px 3px 0 0;
border-right: 1px solid var(--hair);
cursor: pointer;
white-space: nowrap;
}
.tab.on { background: var(--chrome); color: var(--fg); }
.tab .close { padding: 0 3px; border: 0; background: none; color: var(--dim); line-height: 1; }
.tab .close:hover { color: var(--fg); }
.tab:hover { color: var(--fg); background: var(--sunk); }
.tab.on { color: var(--fg); background: var(--pane); box-shadow: inset 0 -2px 0 var(--sel); }
.tab .close {
width: 16px;
height: 16px;
padding: 0;
border: 0;
border-radius: 2px;
background: none;
color: var(--dim);
line-height: 16px;
visibility: hidden;
}
.tab:hover .close, .tab.on .close { visibility: visible; }
.tab .close:hover { background: var(--hair); color: var(--fg); }
.palette-bar {
display: flex;