fix: checkbox alignment, wording, and Dan Mode drag handle contrast

This commit is contained in:
Falkan
2026-03-18 19:13:48 -04:00
parent d088e61006
commit b1a5586c25
2 changed files with 31 additions and 13 deletions

View File

@@ -1,13 +1,5 @@
{ {
"units": [ "units": [
{
"id": "dickload",
"label": "Dickload",
"labelPlural": "Dickloads",
"symbol": "dl",
"group": "dickloads",
"toBase": 1
},
{ {
"id": "pound", "id": "pound",
"label": "Pound", "label": "Pound",
@@ -16,6 +8,14 @@
"group": "dickloads", "group": "dickloads",
"toBase": 0.038 "toBase": 0.038
}, },
{
"id": "dickload",
"label": "Dickload",
"labelPlural": "Dickloads",
"symbol": "dl",
"group": "dickloads",
"toBase": 1
},
{ {
"id": "barrel", "id": "barrel",
"label": "Barrel", "label": "Barrel",

View File

@@ -863,7 +863,7 @@
</label> </label>
<label class="checkbox-label"> <label class="checkbox-label">
<input type="checkbox" bind:checked={unitForm.hidden} /> <input type="checkbox" bind:checked={unitForm.hidden} />
Hidden <small class="muted">— exclude from converter rendering</small> <span>Don't show on front end</span>
</label> </label>
<div class="form-actions"> <div class="form-actions">
<button onclick={saveUnit}>{unitFormNew ? 'Create' : 'Save'}</button> <button onclick={saveUnit}>{unitFormNew ? 'Create' : 'Save'}</button>
@@ -912,7 +912,7 @@
</label> </label>
<label class="checkbox-label"> <label class="checkbox-label">
<input type="checkbox" bind:checked={groupForm.hidden} /> <input type="checkbox" bind:checked={groupForm.hidden} />
Hidden <small class="muted">— exclude group and all its units from converter rendering</small> <span>Don't show on front end</span>
</label> </label>
<div class="form-actions"> <div class="form-actions">
<button onclick={saveGroup}>{groupFormNew ? 'Create' : 'Save'}</button> <button onclick={saveGroup}>{groupFormNew ? 'Create' : 'Save'}</button>
@@ -1239,6 +1239,9 @@
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
margin: 0; margin: 0;
/* Pico adds margin-top to checkboxes — override so flex centering works */
margin-top: 0 !important;
margin-bottom: 0 !important;
} }
.form-msg { .form-msg {
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
@@ -1300,21 +1303,36 @@
} }
.drag-handle { .drag-handle {
cursor: grab; cursor: grab;
color: var(--pico-muted-color); color: var(--pico-color);
opacity: 0.35;
font-size: 0.9rem; font-size: 0.9rem;
padding: 0 0.1rem; padding: 0 0.1rem;
flex-shrink: 0; flex-shrink: 0;
user-select: none; user-select: none;
line-height: 1; line-height: 1;
} }
.drag-handle:hover {
opacity: 0.7;
}
.drag-handle:active { .drag-handle:active {
cursor: grabbing; cursor: grabbing;
opacity: 1;
} }
/* When the row has a primary-colored background, muted grey/orange disappears. /* On selected/drag-over rows the background changes — boost opacity so dots stay visible. */
Force the handle to the primary inverse (white in normal themes, black in Dan). */
.tree-unit-row.selected .drag-handle, .tree-unit-row.selected .drag-handle,
.tree-unit-row.drag-over-unit .drag-handle { .tree-unit-row.drag-over-unit .drag-handle {
color: var(--pico-primary-inverse); color: var(--pico-primary-inverse);
opacity: 0.6;
}
/* Dan Mode: handle is magenta at full blast; black on yellow selected rows. */
:global([data-theme=dan]) .drag-handle {
color: #ff00ff;
opacity: 1;
}
:global([data-theme=dan]) .tree-unit-row.selected .drag-handle,
:global([data-theme=dan]) .tree-unit-row.drag-over-unit .drag-handle {
color: #000000;
opacity: 1;
} }
.drag-over-unit { .drag-over-unit {
border-top: 2px solid var(--pico-primary); border-top: 2px solid var(--pico-primary);