IDK man, changes I guess

This commit is contained in:
2026-11-06 17:57:01 +00:00
parent f6ac9c2f34
commit 8e9bc500fa
15 changed files with 785 additions and 61 deletions

View File

@@ -129,7 +129,7 @@ kbd {
.src-thumb .audio-only { position: absolute; inset: 0; display: grid; place-items: center; color: var(--dim); font-size: 22px; }
.src-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 18px; }
.src-meta { color: var(--dim); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.src-actions { display: flex; gap: 4px; margin-top: 3px; align-items: center; }
.src-actions { display: flex; flex-wrap: wrap; gap: 3px 4px; margin-top: 3px; align-items: center; }
.chip-btn {
font-size: 11.5px; height: 22px; padding: 0 7px; border-radius: 5px;
border: 1px solid var(--line2); background: var(--panel3); color: var(--dim); cursor: pointer;
@@ -137,6 +137,10 @@ kbd {
}
.chip-btn:hover { color: var(--text); border-color: #4a5364; }
.chip-btn .ic { width: 13px; height: 13px; }
.chip-btn.on { background: #1c2b48; border-color: #3a62ad; color: #cfe0ff; }
.chip-btn .chip-x { display: inline-flex; margin-right: -3px; padding: 1px; border-radius: 3px; opacity: .7; }
.chip-btn .chip-x:hover { opacity: 1; background: rgba(255,255,255,.12); }
.chip-btn .chip-x .ic { width: 11px; height: 11px; }
.src-x { position: absolute; top: 5px; right: 5px; opacity: 0; }
.src:hover .src-x, .src.cur .src-x { opacity: 1; }
.src-status { font-size: 11px; color: var(--dim2); }
@@ -145,6 +149,22 @@ kbd {
.viewer { grid-row: 1; grid-column: 2; overflow: hidden; }
.screen { flex: 1; min-height: 120px; position: relative; background: #000; border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; }
.screen video, .screen .still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
/* Positioned and sized by layoutCaptions() in app.js to match the export. */
.captions {
position: absolute; display: flex; flex-direction: column-reverse; align-items: center;
font-family: Arial, "Liberation Sans", Helvetica, sans-serif; color: #fff; text-align: center;
white-space: pre-line; text-wrap: balance; overflow-wrap: anywhere; pointer-events: none;
--o: calc(var(--u, 1px) * 1.3);
--d: calc(var(--o) * .71);
}
.captions > div > span {
text-shadow: var(--o) 0 #000, calc(-1 * var(--o)) 0 #000, 0 var(--o) #000, 0 calc(-1 * var(--o)) #000,
var(--d) var(--d) #000, calc(-1 * var(--d)) var(--d) #000, var(--d) calc(-1 * var(--d)) #000, calc(-1 * var(--d)) calc(-1 * var(--d)) #000;
}
.captions.box > div > span {
text-shadow: none; background: #000; padding: 0 calc(var(--u, 1px) * 1.5);
-webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.screen-empty, .screen-msg {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
color: var(--dim); text-align: center; padding: 20px; pointer-events: none;