@bongos/core 1.17.3 → 1.18.0

package/modules/hall-ui/public/settings.css

@@ -0,0 +1,355 @@
+/* settings.css — page-local styles for Settings (task 2172; extracted from
+   settings.html's old inline <style> per the hall placement rules). Components
+   layered on the shared design system (style.css) — the rail (.section-rail /
+   .rail-link) and buttons derive from the shared tokens so instance theme
+   packs reskin this page too. */
+
+/* ---- grouped layout: left sub-nav rail + one visible group (task 1723) ---- */
+.settings-layout {
+  display: grid;
+  grid-template-columns: 180px minmax(0, 1fr);
+  gap: 20px;
+  align-items: start;
+}
+.settings-layout[hidden] { display: none !important; }
+/* Only the active group's sections render. Each grouped element is a direct
+   child of .settings-groups carrying data-group; a section's own [hidden]
+   attribute always wins (the !important rule below), so the per-section
+   reveal logic in settings.js is unchanged. */
+.settings-groups > [data-group] { display: none; }
+.settings-groups[data-active="account"] > [data-group="account"],
+.settings-groups[data-active="devbox"] > [data-group="devbox"],
+.settings-groups[data-active="access"] > [data-group="access"],
+.settings-groups[data-active="preferences"] > [data-group="preferences"],
+.settings-groups[data-active="sound"] > [data-group="sound"],
+.settings-groups[data-active="extensions"] > [data-group="extensions"] { display: block; }
+.settings-groups > [data-group][hidden] { display: none !important; }
+
+/* task 2172 density pass — standard panel anatomy (title → one-line purpose →
+   control → save-semantics note) in a tighter card: less padding + stacking
+   margin than the default .scroll, ledes clamped to one visual line's worth. */
+.settings-groups .scroll { padding: 16px 18px; margin: 0 0 12px; }
+.settings-groups .scroll__lede { font-size: 13px; margin-bottom: 10px; }
+
+@media (max-width: 768px) {
+  /* Collapse to one column; the shared .section-rail ≤768px rules turn the
+     rail into a sticky horizontal chip strip just under the top bar. */
+  .settings-layout { grid-template-columns: minmax(0, 1fr); }
+}
+
+.settings-status {
+  font-size: 13px;
+  color: var(--ink-soft);
+  min-height: 1.2em;
+  margin-top: 8px;
+}
+.section-note {
+  color: var(--ink-faint);
+  font-size: 12.5px;
+  margin-top: 10px;
+  margin-bottom: 0;
+}
+
+/* ---- Voices (per-skill model picker) ---- */
+.voices-scroll { /* keep many rows compact within a bounded, scrollable box */ }
+.voices-wrap {
+  max-height: 460px;
+  overflow-y: auto;
+  margin-top: 6px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+}
+table.voices {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+  color: var(--ink);
+}
+table.voices th, table.voices td {
+  padding: 7px 12px;
+  text-align: left;
+  border-bottom: 1px solid var(--rule-soft);
+  vertical-align: middle;
+}
+table.voices th {
+  /* sticks inside .voices-wrap's own scroller, not the window — top:0 is
+     relative to the wrap, so no --topbar-h offset needed here */
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background: var(--surface);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--ink-faint);
+  border-bottom: 1px solid var(--border-strong);
+}
+table.voices tr:last-child td { border-bottom: none; }
+table.voices tbody tr:hover td { background: var(--surface-2); }
+.voices__skill code {
+  font-size: 12.5px;
+  color: var(--info);
+}
+.voices__default {
+  font-size: 12.5px;
+  color: var(--ink-soft);
+}
+select.voices__select { min-width: 140px; }
+.voices-empty, .craft-empty {
+  color: var(--ink-faint);
+  font-style: italic;
+  font-size: 13px;
+  padding: 10px 0;
+}
+
+/* ---- Sounds (per-sound on/off toggles) ---- */
+.sound-rows { margin-top: 8px; }
+.sound-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 9px 0;
+  border-bottom: 1px solid var(--rule-soft);
+}
+.sound-row:last-child { border-bottom: none; }
+.sound-row__text { min-width: 0; }
+.sound-row__label {
+  font-size: 13.5px;
+  color: var(--ink);
+  font-weight: 600;
+}
+.sound-row__desc {
+  font-size: 12.5px;
+  color: var(--ink-soft);
+  margin-top: 2px;
+}
+button.sound-toggle {
+  font-family: var(--font-body);
+  font-size: 12.5px;
+  font-weight: 600;
+  padding: 5px 16px;
+  min-width: 72px;
+  border-radius: 999px;
+  border: 1px solid var(--border-strong);
+  background: var(--surface);
+  color: var(--ink-soft);
+  cursor: pointer;
+  flex-shrink: 0;
+}
+button.sound-toggle[data-on="1"] {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: #fff;
+}
+button.sound-toggle:disabled { opacity: 0.5; cursor: default; }
+.sound-volume {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 4px 0 12px;
+  border-bottom: 1px solid var(--border);
+  margin-bottom: 4px;
+}
+.sound-volume__label {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--ink-faint);
+  flex-shrink: 0;
+}
+.sound-volume input[type="range"] {
+  flex: 1;
+  accent-color: var(--accent);
+  cursor: pointer;
+}
+.sound-volume__pct {
+  font-size: 13px;
+  color: var(--ink);
+  min-width: 3.2em;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+/* ---- Event sounds (per-event variant dropdowns, task 582) ---- */
+.event-sound-rows { margin-top: 8px; }
+.event-sound-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 9px 0;
+  border-bottom: 1px solid var(--rule-soft);
+}
+.event-sound-row:last-child { border-bottom: none; }
+.event-sound-row__text { flex: 1; min-width: 0; }
+.event-sound-row__label {
+  font-size: 13.5px;
+  color: var(--ink);
+  font-weight: 600;
+}
+.event-sound-row__desc {
+  font-size: 12.5px;
+  color: var(--ink-soft);
+  margin-top: 2px;
+}
+.event-sound-row__controls {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+.event-sound-select { cursor: pointer; }
+.event-sound-preview {
+  font-family: var(--font-body);
+  font-size: 12px;
+  font-weight: 600;
+  padding: 5px 12px;
+  border-radius: 999px;
+  border: 1px solid var(--border-strong);
+  background: transparent;
+  color: var(--ink-soft);
+  cursor: pointer;
+}
+.event-sound-preview:active { opacity: 0.7; }
+
+/* ---- Disciplines (preference chips) ---- */
+.craft-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 8px;
+}
+.craft-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13.5px;
+  color: var(--ink);
+  background: var(--surface);
+  border: 1px solid var(--border-strong);
+  border-radius: 999px;
+  padding: 6px 14px;
+  cursor: pointer;
+  user-select: none;
+  text-transform: capitalize;
+}
+.craft-chip:hover { background: var(--surface-2); }
+.craft-chip input { cursor: pointer; }
+.craft-chip[data-on="1"] {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: #fff;
+}
+.craft-actions {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  margin-top: 14px;
+  flex-wrap: wrap;
+}
+
+/* ---- Buttons (Save / card actions) ---- */
+button.craft-save, .settings-btn {
+  font-family: var(--font-body);
+  font-size: 13px;
+  font-weight: 600;
+  padding: 7px 16px;
+  border: 1px solid var(--accent);
+  background: var(--surface);
+  color: var(--accent-text);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  display: inline-block;
+  text-decoration: none;
+}
+button.craft-save:hover:not(:disabled), .settings-btn:hover:not(:disabled) {
+  background: var(--accent);
+  color: #fff;
+  text-decoration: none;
+}
+button.craft-save:disabled, .settings-btn:disabled { opacity: 0.5; cursor: default; }
+/* Discord brand button — keeps its blurple so it's recognisable. */
+.settings-btn--discord {
+  background: #5865F2;
+  border-color: #4853c4;
+  color: #fff;
+}
+.settings-btn--discord:hover { background: #4853c4; color: #fff; }
+.settings-btn--quiet {
+  border-color: var(--border-strong);
+  color: var(--ink-soft);
+}
+.settings-btn--quiet:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); }
+
+/* ---- Display name (single editable field, task 1669) ---- */
+.display-name-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 12px;
+  margin-top: 8px;
+}
+input.display-name-input {
+  flex: 1 1 280px;
+  min-width: 0;
+}
+
+/* ---- Connections + CLI access cards ---- */
+.settings-card {
+  margin-top: 8px;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 12px;
+}
+.settings-card__hint { color: var(--ink-soft); font-size: 13px; }
+.settings-card__ok { font-weight: 600; color: var(--ok); }
+.cli-result { flex-basis: 100%; margin-top: 4px; }
+.cli-result pre {
+  background: var(--bg-deep);
+  color: var(--ink);
+  padding: 10px 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  overflow-x: auto;
+  font-size: 12.5px;
+  margin: 6px 0;
+}
+
+/* ---- Image key (task 1013) — the "we cover it" / "action needed" banner
+   uses the shared semantic status tokens. ---- */
+.artkey-banner {
+  border-radius: var(--radius-sm);
+  padding: 10px 14px;
+  font-size: 13px;
+  line-height: 1.45;
+  border: 1px solid var(--border);
+  margin-bottom: 10px;
+}
+.artkey-banner--covered {
+  background: var(--ok-weak);
+  border-color: color-mix(in srgb, var(--ok) 45%, var(--border));
+  color: var(--ok);
+}
+.artkey-banner--action {
+  background: var(--warn-weak);
+  border-color: color-mix(in srgb, var(--warn) 45%, var(--border));
+  color: var(--warn);
+}
+.artkey-entry-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; flex-basis: 100%; }
+.artkey-input {
+  flex: 1 1 280px;
+  min-width: 0;
+  padding: 7px 10px;
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius-sm);
+  background: var(--surface);
+  color: var(--ink);
+  font-family: ui-monospace, "SF Mono", Menlo, monospace;
+  font-size: 13px;
+}
+.artkey-actions { display: flex; gap: 10px; flex-wrap: wrap; }
+#artkey-entry { flex-basis: 100%; }