luna/catacomb
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(web): enhance layout and responsiveness of UI components

Browse source
This commit is contained in:
Luna 2026-07-04 02:51:41 -07:00
parent 3a55ff5b8a
commit 52c561b47b
1 changed files with 30 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

39
src/web_ui/index.html
View file

@ -18,8 +18,8 @@
.theme-emo-coffin{--bg:#0d0009;--panel:#110010;--card:#1a0018;--accent:#cc2222;--text:#c0c0c0;--muted:#666;--border:#3a0030}
.theme-emo-scene-queen{--bg:#080818;--panel:#0a0a1e;--card:#111128;--accent:#39ff14;--text:#c8c8ff;--muted:#666;--border:#222244}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font:14px/1.5 system-ui,sans-serif;display:flex;flex-direction:column;height:100vh;overflow:hidden}
header{background:var(--panel);padding:8px 12px;display:flex;gap:8px;align-items:center;border-bottom:1px solid var(--border);flex-shrink:0;flex-wrap:wrap}
body{background:var(--bg);color:var(--text);font:14px/1.5 system-ui,sans-serif;display:flex;flex-direction:column;height:100dvh;min-height:100dvh;overflow:hidden;overscroll-behavior:none}
header{background:var(--panel);padding:8px 12px;display:flex;gap:8px;align-items:center;border-bottom:1px solid var(--border);flex-shrink:0;flex-wrap:wrap;position:sticky;top:0;z-index:20}
header h1{font-size:1em;font-weight:700;white-space:nowrap}
#search{flex:1;min-width:100px;background:var(--bg);border:1px solid var(--border);color:var(--text);padding:5px 9px;border-radius:4px;font-size:13px}
#sort{background:var(--card);color:var(--text);border:1px solid var(--border);padding:4px 6px;border-radius:4px;font-size:12px}
@ -29,7 +29,7 @@
button:hover,button:active{background:var(--accent);border-color:var(--accent);color:#fff}
button.primary{background:var(--accent);border-color:var(--accent);color:#fff}
#menu-btn{display:none;font-size:18px;padding:3px 9px;line-height:1}
main{display:flex;flex:1;overflow:hidden;position:relative}
main{display:flex;flex:1;min-height:0;overflow:hidden;position:relative}
aside{width:210px;background:var(--panel);border-right:1px solid var(--border);overflow-y:auto;flex-shrink:0;padding:6px 0;transition:transform .2s}
#sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:49}
.sidebar-label{padding:2px 10px;font-size:10px;text-transform:uppercase;color:var(--muted);letter-spacing:.07em;margin-top:6px}
@ -39,7 +39,8 @@
.ch-sub{padding:4px 10px 4px 22px;font-size:12px;color:var(--muted);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-sub:hover{color:var(--text);background:rgba(128,128,128,.08)}
.ch-sub.active{color:var(--text)}
section#content{flex:1;overflow-y:auto;padding:10px;min-width:0}
section#content{flex:1;overflow-y:auto;padding:10px;min-width:0;min-height:0}
.card,.ch-card,.ch-item,.chip,.job,.settings-row,.det-actions,.vctrl{min-width:0}
.toolbar{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
/* Filter chip row above the grid. Each chip is a button that toggles
a single filter dimension; the active state inverts colors so it's
@ -167,6 +168,7 @@
.preview-thumb{width:100%;max-width:280px;aspect-ratio:16/9;object-fit:cover;border-radius:4px;background:#000;flex-shrink:0}
.empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:40px;font-size:13px}
@media(max-width:640px){
body{padding-bottom:calc(env(safe-area-inset-bottom) + 4px)}
#menu-btn{display:block}
aside{position:fixed;top:0;left:0;height:100%;z-index:50;transform:translateX(-100%);width:240px}
aside.open{transform:translateX(0)}
@ -176,28 +178,44 @@
are the ones users actually reach for. */
#hdr-stats,#sort,#agpl-notice{display:none}
header h1{display:none}
header{padding:6px 8px;gap:6px}
header{padding:6px 8px;gap:6px;position:sticky;top:0;z-index:20}
#search{order:3;flex-basis:100%;width:100%;min-width:0}
header button{min-width:34px;min-height:34px;padding:4px 7px;font-size:14px}
.filters{overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
.toolbar{gap:6px}
.toolbar > *{min-width:0}
/* Bigger tap targets on cards. The five-button card-foot reflows
to a comfortable height instead of cramming icons together. */
.grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.card-foot{padding:6px 6px 8px;gap:4px;flex-wrap:wrap}
.card-foot button{font-size:13px;padding:6px 8px;min-height:34px}
.card-foot button:not(.play){min-width:34px}
.card-meta{font-size:10px}
.card-title{min-height:0}
.card-meta{font-size:10px;line-height:1.3}
/* Modals go full-screen so the cramped 10px page-margin we use on
desktop doesn't eat the iPhone safe area. */
.modal-bg{padding:0}
.modal{max-width:100vw;max-height:100vh;border-radius:0;border:none}
.modal{max-width:100vw;max-height:100dvh;height:100dvh;border-radius:0;border:none;overflow-y:auto;padding:12px 12px calc(12px + env(safe-area-inset-bottom))}
.modal-body{flex-direction:column;gap:8px;overflow-y:auto}
.modal video{max-height:55vh}
#details{max-height:160px;padding:8px 10px}
.vctrl{padding:6px;gap:6px}
.vctrl .vseek{order:3;flex-basis:100%;min-width:0}
.vctrl .vtime{margin-left:auto}
.settings-row{flex-direction:column;align-items:flex-start;gap:4px}
.meta-grid{grid-template-columns:1fr}
.det-head{flex-direction:column;gap:4px}
.det-actions{width:100%}
.det-actions button{flex:1 1 calc(50% - 4px)}
#details{max-height:min(45vh,220px);padding:8px 10px}
.chapters-pane{display:none}
.transcript-pane{display:none !important}
section#content{padding:8px}
/* Modal "new download" form stacks vertically on small screens so
the URL + button + quality picker don't squeeze each other. */
.dl-new-row{flex-direction:column;align-items:stretch}
.dl-new-row input[type="url"]{width:100%}
.dl-new-row input[type="url"]{width:100%;min-width:0}
.dl-new-row select{width:100%}
/* Bulk-mode actions stack vertically when active. */
.toolbar{flex-wrap:wrap}
#bulk-actions{flex-wrap:wrap;gap:4px}
@ -210,6 +228,9 @@
@media(max-width:380px){
/* Single-column on very narrow phones. */
.grid{grid-template-columns:1fr;gap:6px}
.card-foot{flex-direction:column;align-items:stretch}
.card-foot button{width:100%;min-width:0}
.det-actions button{flex-basis:100%}
}
/* ───────────────────────────────────────────────────────────────────────