@khanglvm/relay 0.12.2 → 0.13.0

package/src/ui/style.css

@@ -198,6 +198,73 @@ h1 {
 .scale button { width: 44px; height: 44px; padding: 0; }
 .scale .slabel { color: var(--muted); font-size: 0.8rem; }
 
+/* ranking — reorderable priority list (drag, or the ↑/↓ buttons for
+   keyboard/touch). Top = highest priority; the rank badge reflects position. */
+.rank { display: flex; flex-direction: column; gap: 8px; }
+.rank-item {
+  display: flex; align-items: center; gap: 12px;
+  padding: 10px 12px;
+  border: 1px solid var(--border-strong); border-radius: 10px;
+  background: var(--card); cursor: grab;
+  transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease), opacity 150ms var(--ease);
+}
+.rank-item:active { cursor: grabbing; }
+.rank-item.dragging { opacity: 0.5; }
+.rank-item.drop-into { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
+.rank-badge {
+  flex: none; width: 26px; height: 26px; border-radius: 50%;
+  display: grid; place-items: center;
+  background: var(--accent); color: var(--accent-fg);
+  font-weight: 600; font-size: 0.85rem;
+}
+.rank-body { flex: 1; min-width: 0; }
+.rank-ctrls { flex: none; display: flex; gap: 4px; }
+.rank-btn {
+  width: 30px; height: 30px; padding: 0;
+  border: 1px solid var(--border-strong); border-radius: 8px;
+  background: var(--bg-sunken); color: var(--fg);
+  cursor: pointer; font-size: 14px; line-height: 1;
+  transition: border-color 150ms var(--ease);
+}
+.rank-btn:hover:not(:disabled) { border-color: var(--accent); }
+.rank-btn:disabled { opacity: 0.35; cursor: default; }
+
+/* checklist — one row per item with a Pass/Fail/N·A segmented status control */
+.checklist { display: flex; flex-direction: column; gap: 8px; }
+.chk-row {
+  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
+  padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--card);
+}
+.chk-body { flex: 1; min-width: 140px; }
+.chk-seg { display: flex; gap: 6px; flex: none; }
+.chk-status {
+  padding: 6px 14px; font: inherit; font-size: 0.85rem; cursor: pointer;
+  background: var(--bg-sunken); color: var(--fg-2);
+  border: 1px solid var(--border-strong); border-radius: 8px;
+  transition: border-color 150ms var(--ease), background 150ms var(--ease), color 150ms var(--ease);
+}
+.chk-status:hover { border-color: var(--accent); }
+.chk-status.sel { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
+.chk-status.tone-ok.sel { background: var(--ok); border-color: var(--ok); color: #fff; }
+.chk-status.tone-bad.sel { background: var(--danger); border-color: var(--danger); color: var(--danger-fg); }
+.chk-status.tone-warn.sel { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
+.chk-status.tone-muted.sel { background: var(--muted); border-color: var(--muted); color: #fff; }
+
+/* allocate — distribute a budget across options with sliders + a live total */
+.allocate { display: flex; flex-direction: column; gap: 14px; }
+.alloc-row { display: flex; flex-direction: column; gap: 6px; }
+.alloc-rowhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
+.alloc-num { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--fg); }
+.alloc-range { width: 100%; accent-color: var(--accent); }
+.alloc-total { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 4px; border-top: 1px solid var(--border); }
+.alloc-bar { flex: 1; min-width: 120px; height: 8px; background: var(--bg-sunken); border-radius: 999px; overflow: hidden; }
+.alloc-bar-fill { height: 100%; width: 0; background: var(--accent); transition: width 120ms var(--ease); }
+.alloc-bar-fill.over { background: var(--danger); }
+.alloc-sumwrap { color: var(--muted); font-size: 0.85rem; flex: none; }
+.alloc-sum { font-weight: 600; color: var(--fg-2); font-variant-numeric: tabular-nums; }
+.alloc-sum.exact { color: var(--ok); }
+.alloc-sum.over { color: var(--danger); }
+
 input[type="text"], textarea {
   width: 100%;
   background: var(--bg-sunken); color: var(--fg);
@@ -328,3 +395,26 @@ textarea { min-height: 90px; resize: vertical; }
 .colorpresets { display: flex; flex-wrap: wrap; gap: 8px; }
 .colorpreset { width: 26px; height: 26px; border-radius: 7px; border: 1px solid rgba(0,0,0,.14); cursor: pointer; padding: 0; transition: transform .12s var(--ease); }
 .colorpreset:hover { transform: scale(1.12); }
+
+/* "pick from a palette" — labeled swatch cards, click to select, each commentable */
+.colorpalette { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
+.colorpal-sw {
+  position: relative; height: 64px; padding: 0; cursor: pointer;
+  border: 1px solid rgba(0,0,0,.14); border-radius: 10px;
+  display: flex; align-items: flex-end;
+  transition: transform .12s var(--ease), box-shadow .15s var(--ease);
+}
+.colorpal-sw:hover { transform: translateY(-1px); }
+.colorpal-sw.sel { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }
+.colorpal-sw.sel::after {
+  content: '✓'; position: absolute; top: 4px; right: 6px;
+  font-size: 0.8rem; font-weight: 700; color: #fff;
+  text-shadow: 0 1px 2px rgba(0,0,0,.5);
+}
+.colorpal-label {
+  width: 100%; padding: 3px 7px;
+  font-size: 0.72rem; color: #fff;
+  background: linear-gradient(transparent, rgba(0,0,0,.42));
+  border-radius: 0 0 9px 9px;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}