diff --git a/docs/artist-order.html b/docs/artist-order.html index 79845b4..c0fb5c3 100644 --- a/docs/artist-order.html +++ b/docs/artist-order.html @@ -66,7 +66,10 @@ document.documentElement.setAttribute("data-theme",t);})(); input[type=text]:focus, input[type=number]:focus, select:focus { outline: none; border-color: var(--accent); } input.err { border-color: var(--bad); } input[type=range] { accent-color: var(--accent); } - input[type=color] { width: 38px; height: 28px; padding: 0 2px; border: 1px solid var(--stroke); border-radius: 4px; background: var(--input); vertical-align: middle; } + input[type=color] { width: 38px; height: 28px; padding: 0 2px; border: 1px solid var(--stroke); border-radius: 4px; background: var(--input); vertical-align: middle; cursor: pointer; } + input[type=color]:disabled { opacity: 0.25; cursor: not-allowed; } + .row.off > .lbl { color: var(--mute); } + [hidden] { display: none !important; } .wide { width: 100%; } .hint, small { color: var(--mute); font-size: 12.5px; } .checks2 { display: flex; flex-wrap: wrap; gap: 6px 16px; } @@ -645,10 +648,15 @@ function curveSVG(){ function syncSegs(){ $$(".seg[data-k]").forEach(g=>{const k=g.dataset.k;g.querySelectorAll("button").forEach(b=>b.classList.toggle("on",String(S[k])===b.dataset.v));}); $("#bGate").disabled=S.size!=="12"; - $("#rowWeight").hidden=S.size!=="12"; - $("#rowColours").hidden=S.colour==="black"; - $("#c2").hidden=!(S.colour==="marbled"||S.colour==="splatter"); - $("#colHint").textContent=S.colour==="solid"?"vinyl colour":"base and second colour"; + /* weight only for 12"; colour pickers only for colour vinyl, the second only for marbled and splatter */ + const w12=S.size==="12",blk=S.colour==="black",two=S.colour==="marbled"||S.colour==="splatter"; + $$("#rowWeight button").forEach(x=>{x.disabled=!w12;x.title=w12?"":"Only 12\" records come in 140 or 180 g";}); + $("#rowWeight").classList.toggle("off",!w12); + $("#c1").disabled=blk;$("#c2").disabled=!two; + $("#rowColours").classList.toggle("off",blk); + $("#c1").title=blk?"Black vinyl: no colour to choose":"Vinyl colour"; + $("#c2").title=two?"Second colour":"Only for marbled and splatter"; + $("#colHint").textContent=blk?"black vinyl, no colour to choose":S.colour==="solid"?"vinyl colour":"base and second colour"; } function renderNav(){ const done={1:!!S.visited[2],2:S.gate1,3:!!S.mode,4:S.launched,5:false};