will/baby-mobile
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

improved web ui, upload is sorta better, 5sec advertise btn

Browse Source
This commit is contained in:
zyphlar
2026-07-04 03:28:14 -07:00
parent 8cba579780
commit d3bd7b71b9
8 changed files with 458 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/styles.css
+47 -2
View File
@@ -55,8 +55,53 @@ select, input[type=number] {
}
input[type=number] { width: 4.5rem; }
label { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--muted); }
.trim { align-items: center; }
.trim .unit { color: var(--muted); margin-left: -4px; }
/* ---- graphical trim: waveform + dual-range slider ---- */
.trim { margin: 14px 0 4px; }
.wave-wrap { position: relative; height: 72px; margin-bottom: 8px; touch-action: none; }
.wave {
width: 100%; height: 100%; display: block;
background: #150d33; border: 1px solid var(--line); border-radius: 10px;
}
.trim-region {
position: absolute; top: 0; bottom: 0;
background: rgba(124, 77, 255, .20);
border-left: 2px solid var(--accent); border-right: 2px solid var(--accent);
pointer-events: none; border-radius: 4px;
}
/* Custom precision handles: a translucent 1px line with a chevron cap at top and
bottom. A wide transparent hit area keeps them easy to grab on touch. */
.handle {
position: absolute; top: 0; bottom: 0; width: 22px;
transform: translateX(-50%); cursor: ew-resize; touch-action: none; z-index: 3;
}
.handle .line {
position: absolute; left: 50%; top: 0; bottom: 0; width: 1px;
transform: translateX(-50%); background: rgba(183, 148, 255, .7);
}
.handle .chev {
position: absolute; left: 50%; transform: translateX(-50%);
width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent;
}
.handle .chev.top { top: -1px; border-top: 9px solid var(--accent); } /* points down */
.handle .chev.bot { bottom: -1px; border-bottom: 9px solid var(--accent); } /* points up */
.handle:focus { outline: none; }
.handle:focus .line, .handle.dragging .line { background: var(--accent); box-shadow: 0 0 6px var(--accent); }
.handle:focus .chev, .handle.dragging .chev { filter: drop-shadow(0 0 4px var(--accent)); }
.trim-readout { display: flex; align-items: center; gap: 12px; font-size: .85rem; color: var(--muted); }
.time-fields { display: inline-flex; align-items: center; gap: 6px; }
.time-fields .dash { color: var(--muted); }
.time-in {
width: 4.2rem; padding: 5px 7px; font-size: .85rem;
background: #1c123e; color: var(--text); border: 1px solid var(--line); border-radius: 7px;
}
.trim-readout .clip { color: var(--accent); font-weight: 600; }
.trim-readout button { margin-left: auto; }
.level { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 12px; font-size: .85rem; color: var(--muted); }
.level input[type=range] { flex: 1; min-width: 0; }
.level .unit { min-width: 3.2rem; text-align: right; color: var(--accent); font-weight: 600; }
input[type=range] { accent-color: var(--accent2); }
.vol-slider { width: 100%; }
.muted-val { color: var(--accent); font-weight: 600; font-size: .95rem; }
.drop {
border: 2px dashed var(--line); border-radius: 14px; padding: 26px 16px;