31 lines
9.9 KiB
JavaScript
31 lines
9.9 KiB
JavaScript
const STYLE_ID = 'majoor-h3-guidemaster-styles';
|
|
|
|
export function ensureStyles() {
|
|
if (document.getElementById(STYLE_ID)) return;
|
|
const style = document.createElement('style');
|
|
style.id = STYLE_ID;
|
|
style.textContent = `
|
|
.majoor-h3-root{box-sizing:border-box;width:100%;min-width:420px;padding:10px;color:var(--fg-color,#ddd);font:12px/1.35 Inter,system-ui,sans-serif;background:rgba(18,18,21,.94);border:1px solid rgba(255,255,255,.08);border-radius:8px}
|
|
.majoor-h3-root *{box-sizing:border-box}
|
|
.majoor-h3-head,.majoor-h3-toolbar,.majoor-h3-section-head,.majoor-h3-row,.majoor-h3-thumb-meta{display:flex;align-items:center;gap:7px}
|
|
.majoor-h3-head{justify-content:space-between;margin-bottom:8px}.majoor-h3-title{font-size:13px;font-weight:700;letter-spacing:.02em}.majoor-h3-badge{padding:2px 6px;border-radius:9px;background:rgba(255,255,255,.07);color:#aaa;font-size:10px}
|
|
.majoor-h3-toolbar{flex-wrap:wrap;margin:7px 0}
|
|
.majoor-h3-root button,.majoor-h3-root select,.majoor-h3-root input{font:inherit;color:inherit;background:#242428;border:1px solid #3a3a40;border-radius:5px;min-height:26px}
|
|
.majoor-h3-root button{padding:3px 8px;cursor:pointer}.majoor-h3-root button:hover{border-color:#666}.majoor-h3-root button:focus-visible,.majoor-h3-root select:focus-visible,.majoor-h3-root input:focus-visible{outline:2px solid #888;outline-offset:1px}
|
|
.majoor-h3-root input[type=number]{width:67px;padding:2px 5px}.majoor-h3-root select{padding:2px 5px;max-width:110px}
|
|
.majoor-h3-section{margin-top:9px;padding-top:8px;border-top:1px solid rgba(255,255,255,.08)}.majoor-h3-section-head{justify-content:space-between;margin-bottom:5px;font-weight:650}.majoor-h3-list{display:grid;gap:5px}
|
|
.majoor-h3-row{min-height:32px;padding:6px;border-radius:6px;background:rgba(255,255,255,.035);flex-wrap:wrap;border:1px solid transparent;cursor:pointer}.majoor-h3-guide-number{min-width:18px;text-align:center;color:#c5c5c8;font-weight:650;border-left:3px solid var(--guide-color,#777);padding-left:5px}
|
|
.majoor-h3-row:hover{border-color:rgba(255,255,255,.08)}.majoor-h3-row[data-selected=true]{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.06)}.majoor-h3-row[data-disabled=true]{opacity:.55}
|
|
.majoor-h3-label{color:#aaa}.majoor-h3-grow{flex:1 1 auto}.majoor-h3-delete{padding:2px 7px!important;color:#aaa;margin-left:auto}.majoor-h3-empty{padding:8px;color:#888;text-align:center;border:1px dashed #3a3a40;border-radius:5px}
|
|
.majoor-h3-timeline{position:relative;height:92px;margin:7px 0 3px;border-radius:6px;background:#17171a;border:1px solid #333;overflow:hidden;touch-action:none}.majoor-h3-timeline-track{position:absolute;inset:0 8px;cursor:pointer;outline:none}.majoor-h3-timeline-track.is-scrubbing{cursor:ew-resize}.majoor-h3-timeline-track:focus-visible{box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}.majoor-h3-ruler{position:absolute;left:0;right:0;top:24px;height:1px;background:#4a4a50}.majoor-h3-tick{position:absolute;top:22px;width:1px;height:5px;background:rgba(180,180,185,.24)}.majoor-h3-tick.is-major{top:18px;height:12px;background:#65656c}.majoor-h3-tick-label{position:absolute;top:2px;transform:translateX(-50%);font-size:9px;color:#777;white-space:nowrap}.majoor-h3-tick-label[data-edge=start]{transform:none}.majoor-h3-tick-label[data-edge=end]{transform:translateX(-100%)}
|
|
.majoor-h3-marker{position:absolute;top:40px;transform:translateX(-50%);width:16px;height:16px;border:0!important;border-radius:3px!important;padding:0!important;background:var(--guide-color,#777)!important;cursor:grab!important;z-index:3;box-shadow:0 0 0 1px rgba(255,255,255,.14)}.majoor-h3-marker[data-kind=av]{border-radius:50%!important}.majoor-h3-marker[data-kind=audio]{width:16px;height:8px;top:62px;background:var(--guide-color,#777)!important}.majoor-h3-marker:active{cursor:grabbing!important}.majoor-h3-marker-image{position:absolute;left:50%;bottom:18px;width:34px;height:28px;transform:translateX(-50%);object-fit:cover;border:1px solid var(--guide-color,#777);border-radius:3px;background:#111;pointer-events:none}
|
|
.majoor-h3-waveform{position:absolute;left:0;top:54px;width:100%;height:30px;z-index:0;opacity:.55;pointer-events:none}.majoor-h3-reference-cursor{position:absolute;top:14px;bottom:8px;width:2px;transform:translateX(-50%);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.8),rgba(255,255,255,.05));z-index:2}
|
|
.majoor-h3-help{font-size:10px;color:#777;margin-top:4px}.majoor-h3-loading{color:#aaa;font-style:italic}.majoor-h3-status{font-size:10px;color:#999}.majoor-h3-root .majoor-h3-danger{border-color:#694b4b;color:#d4a3a3}
|
|
.majoor-h3-guide-thumb{width:38px;height:38px;border-radius:4px;overflow:hidden;flex:0 0 auto;background:#111;border:1px solid rgba(255,255,255,.08)}.majoor-h3-guide-thumb img{width:100%;height:100%;object-fit:cover;display:block}.majoor-h3-guide-thumb.is-empty{display:flex;align-items:center;justify-content:center;color:#666;font-size:10px}
|
|
.majoor-h3-filmstrip-wrap{overflow-x:auto;padding:7px 6px 5px;border:1px solid transparent;border-radius:7px;transition:border-color .12s ease,background .12s ease}.majoor-h3-dropzone{min-height:96px}.majoor-h3-dropzone.is-dragover{border-color:#6d6d75;background:rgba(255,255,255,.045)}.majoor-h3-filmstrip{display:flex;gap:6px;min-height:86px}.majoor-h3-frame-thumb{display:flex;flex-direction:column;gap:4px;flex:0 0 58px;padding:4px;border-radius:6px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);cursor:pointer}.majoor-h3-frame-thumb:hover{border-color:rgba(255,255,255,.18)}.majoor-h3-frame-thumb[data-selected=true]{border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.08)}.majoor-h3-frame-thumb[data-has-guide=true]{border-color:var(--frame-guide-color,#888);background:color-mix(in srgb,var(--frame-guide-color,#888) 14%,rgba(255,255,255,.03));box-shadow:inset 0 0 0 1px var(--frame-guide-color,#888)}.majoor-h3-filmstrip-wrap.is-compact{overflow-x:hidden}.majoor-h3-filmstrip-wrap.is-compact .majoor-h3-filmstrip{display:grid;grid-template-columns:repeat(auto-fit,minmax(34px,1fr));gap:3px;min-height:0}.majoor-h3-filmstrip-wrap.is-compact .majoor-h3-frame-thumb{min-width:0;width:auto;padding:2px;gap:2px}.majoor-h3-filmstrip-wrap.is-compact .majoor-h3-frame-image{height:28px}.majoor-h3-filmstrip-wrap.is-compact .majoor-h3-thumb-meta{font-size:8px}.majoor-h3-compact-toggle{margin-left:auto}
|
|
.majoor-h3-frame-image{position:relative;width:100%;height:40px;border-radius:4px;background:#111;overflow:hidden;display:flex;align-items:center;justify-content:center;color:#555;font-size:10px;text-align:center}.majoor-h3-endpoint-badge{position:absolute;left:2px;top:2px;z-index:4;padding:1px 3px;border-radius:3px;background:rgba(12,12,14,.88);border:1px solid rgba(255,255,255,.28);color:#e1e1e4;font-size:7px;font-weight:750;line-height:1.2;letter-spacing:.06em}.majoor-h3-endpoint-overlay{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;opacity:.86}.majoor-h3-endpoint-marker{position:absolute;top:34px;transform:translateX(-50%);z-index:4;width:22px;height:30px;padding:0!important;border:1px solid rgba(255,255,255,.34)!important;border-radius:4px!important;background:#202025!important;color:#e5e5e8!important;font-size:8px;font-weight:750;letter-spacing:.04em;overflow:visible}.majoor-h3-endpoint-marker[data-kind=in]{transform:none}.majoor-h3-endpoint-marker[data-kind=out]{transform:translateX(-100%)}.majoor-h3-endpoint-marker img{position:absolute;left:50%;bottom:31px;transform:translateX(-50%);width:36px;height:28px;object-fit:cover;border-radius:3px;border:1px solid rgba(255,255,255,.3);background:#111;pointer-events:none}.majoor-h3-frame-image img{width:100%;height:100%;object-fit:cover;display:block}.majoor-h3-frame-image .majoor-h3-guide-overlay{position:absolute;right:var(--guide-right,1px);bottom:1px;width:10px;height:10px;border:1px solid #ddd;border-radius:2px;box-shadow:0 0 0 1px #111;z-index:2}.majoor-h3-filmstrip-wrap.is-compact .majoor-h3-guide-overlay{right:var(--guide-right-compact,1px);width:6px;height:6px}.majoor-h3-thumb-meta{justify-content:space-between;font-size:10px;color:#999}.majoor-h3-frame-guide-dot{width:6px;height:6px;border-radius:50%;background:#b8b8b8;display:inline-block}.majoor-h3-frame-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:6px}.majoor-h3-root button.majoor-h3-round{width:26px;height:26px;min-height:26px;padding:0!important;border-radius:50%!important;display:inline-flex;align-items:center;justify-content:center;font-size:13px;line-height:1;color:#cfcfd4;flex:0 0 auto}.majoor-h3-root button.majoor-h3-round:hover:not(:disabled){border-color:#8a8a94;color:#fff;background:rgba(255,255,255,.08)}.majoor-h3-root button.majoor-h3-round:disabled{opacity:.4;cursor:not-allowed}.majoor-h3-root button.majoor-h3-round[data-state=partial]{border-color:#8a6f42;color:#cfa964}.majoor-h3-root button.majoor-h3-round[data-state=ready]{border-color:#44666d;color:#8fc0c8}.majoor-h3-root button.majoor-h3-round[data-state=error]{border-color:#694b4b;color:#d4a3a3}.majoor-h3-root button.majoor-h3-round[data-state=busy]{animation:majoor-h3-blink .75s steps(1,end) infinite}.majoor-h3-root button.majoor-h3-round[data-state=busy]:disabled{opacity:1;cursor:progress}@keyframes majoor-h3-blink{0%{background:#3a2f1c;border-color:#c79a4e;color:#f0cf92;box-shadow:0 0 0 2px rgba(199,154,78,.22)}50%{background:#242428;border-color:#5b4b30;color:#8a7a54;box-shadow:0 0 0 0 rgba(199,154,78,0)}100%{background:#3a2f1c;border-color:#c79a4e;color:#f0cf92;box-shadow:0 0 0 2px rgba(199,154,78,.22)}}@media(prefers-reduced-motion:reduce){.majoor-h3-root button.majoor-h3-round[data-state=busy]{animation:none;background:#3a2f1c;border-color:#c79a4e;color:#f0cf92}}.majoor-h3-file-input{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;padding:0!important;border:0!important;opacity:0;overflow:hidden;clip:rect(0 0 0 0);pointer-events:none}
|
|
@media(max-width:520px){.majoor-h3-root{min-width:300px}.majoor-h3-row{align-items:flex-start}.majoor-h3-toolbar,.majoor-h3-frame-actions{align-items:flex-start}}
|
|
`;
|
|
document.head.appendChild(style);
|
|
}
|