diff --git a/src/public/index.html b/src/public/index.html index 75c1dd7..06435a4 100644 --- a/src/public/index.html +++ b/src/public/index.html @@ -519,6 +519,122 @@ body > footer p + p { margin-top: 4px; } .verify td, .verify th { text-align: left; } .verify td.subject-cell { white-space: normal; min-width: 260px; } +/* ---- settings ---- */ + +dialog { + width: calc(100% - 32px); + max-width: 640px; + max-height: calc(100vh - 48px); + padding: 0; + background: var(--card); + color: var(--ink); + border: 1px solid var(--rule); +} +dialog::backdrop { background: hsla(210, 18%, 4%, 0.7); } + +.settings-head { padding: 20px 24px 4px; } +.settings-head h2 { margin: 0; font-size: 17px; font-weight: 600; } +.settings-head p { margin: 6px 0 0; color: var(--muted); font-size: 14px; } + +.settings-body { padding: 4px 24px; } + +fieldset { + margin: 16px 0 0; + padding: 0; + border: none; +} +legend, .field > label { + display: block; + margin-bottom: 6px; + font-family: var(--mono); + font-size: 11px; + letter-spacing: 0.08em; + text-transform: uppercase; + color: var(--muted); +} +.field + .field { margin-top: 14px; } +.hint { margin-top: 4px; font-size: 12px; color: var(--faint); } + +.chips { + display: flex; + flex-wrap: wrap; + gap: 6px; + padding: 6px; + background: var(--ground); + border: 1px solid var(--rule); +} +.chips:focus-within { border-color: var(--signal); } +.chip { + display: inline-flex; + align-items: center; + gap: 4px; + padding: 2px 4px 2px 9px; + background: var(--card-raised); + border: 1px solid var(--rule); + font-size: 13px; +} +.chip button { + padding: 0 5px; + background: none; + color: var(--muted); + font-size: 15px; + line-height: 1; +} +.chip button:hover { background: none; color: var(--alert); } +.chips input { + flex: 1; + min-width: 160px; + padding: 4px; + background: none; + border: none; + color: var(--ink); + font: inherit; + font-size: 13px; + outline: none; +} + +.row { display: flex; flex-wrap: wrap; gap: 14px 24px; } +.row .field + .field { margin-top: 0; } + +input[type="number"], select { + padding: 7px 9px; + background: var(--ground); + border: 1px solid var(--rule); + color: var(--ink); + font: inherit; + font-size: 14px; +} +input[type="number"] { width: 90px; } +input[type="number"]:focus, select:focus { outline: none; border-color: var(--signal); } + +.checks { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; } +.checks label { display: flex; align-items: center; gap: 7px; cursor: pointer; } +.checks input { accent-color: var(--signal); } + +.settings-error { + margin: 16px 24px 0; + padding: 10px 14px; + border-left: 3px solid var(--alert); + background: var(--ground); + font-size: 14px; +} + +.settings-foot { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 12px; + margin-top: 20px; + padding: 16px 24px; + border-top: 1px solid var(--rule); +} +.settings-foot .spacer { flex: 1; } +button.secondary { background: var(--card-raised); color: var(--ink); border: 1px solid var(--rule); } +button.secondary:hover { background: var(--rule); } +button:disabled { opacity: 0.5; cursor: default; } + +.board.solo { grid-template-columns: minmax(0, 1fr); } + @media (max-width: 1040px) { .board { grid-template-columns: minmax(0, 1fr); } .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } @@ -552,6 +668,7 @@ body > footer p + p { margin-top: 4px; } Sound on close + @@ -562,6 +679,8 @@ body > footer p + p { margin-top: 4px; }
+ +