Merge claude/1
This commit is contained in:
librelad
commit
8a14683065
@ -383,25 +383,16 @@
|
||||
}
|
||||
|
||||
/* Multi-select checkbox sat to the right of the row's Delete button.
|
||||
Sized + framed to match the surrounding .task-btn buttons so the row
|
||||
reads as a single action group. Hides the native input and renders
|
||||
a custom box; `cursor: pointer` on the wrapping label keeps the
|
||||
whole 24×24 hit target clickable. */
|
||||
Mirrors the .setup-app checkbox from the setup wizard: accent fill +
|
||||
white SVG check + pop-in, no separate frame. The label wrapper is just
|
||||
a hit-target — visible chrome is all on .task-select-box. Sized down
|
||||
to 18px so it sits inline with the 22px-tall .task-btn buttons. */
|
||||
.task-select {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid rgba(var(--text-rgb), 0.12);
|
||||
background: rgba(var(--text-rgb), 0.04);
|
||||
cursor: pointer;
|
||||
transition: background 0.18s ease, border-color 0.18s ease;
|
||||
}
|
||||
.task-select:hover {
|
||||
background: var(--surface-hover);
|
||||
border-color: var(--status-success);
|
||||
padding: 2px;
|
||||
}
|
||||
.task-select input[type="checkbox"] {
|
||||
position: absolute;
|
||||
@ -410,43 +401,54 @@
|
||||
width: 0; height: 0;
|
||||
}
|
||||
.task-select-box {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 3px;
|
||||
border: 1.5px solid rgba(var(--text-rgb), 0.45);
|
||||
background: transparent;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
flex-shrink: 0;
|
||||
border-radius: 5px;
|
||||
background: rgba(var(--text-rgb), 0.04);
|
||||
border: 1.5px solid rgba(var(--text-rgb), 0.18);
|
||||
box-shadow: inset 0 0 0 1px rgba(var(--text-rgb), 0.02);
|
||||
position: relative;
|
||||
transition: background 0.12s ease, border-color 0.12s ease;
|
||||
transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
|
||||
}
|
||||
.task-select:hover .task-select-box {
|
||||
border-color: rgba(var(--accent-rgb), 0.55);
|
||||
box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.08);
|
||||
}
|
||||
.task-select input[type="checkbox"]:focus-visible + .task-select-box {
|
||||
outline: none;
|
||||
border-color: rgba(var(--accent-rgb), 0.85);
|
||||
box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.20);
|
||||
}
|
||||
.task-select input[type="checkbox"]:checked + .task-select-box {
|
||||
background: var(--status-success);
|
||||
border-color: var(--status-success);
|
||||
background: linear-gradient(135deg, var(--accent), var(--accent));
|
||||
border-color: rgba(var(--accent-rgb), 0.9);
|
||||
box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.35);
|
||||
}
|
||||
.task-select input[type="checkbox"]:checked + .task-select-box::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 4px;
|
||||
width: 3px;
|
||||
height: 7px;
|
||||
border: solid var(--text-on-accent, #fff);
|
||||
border-width: 0 2px 2px 0;
|
||||
transform: rotate(45deg);
|
||||
inset: 0;
|
||||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: 12px 12px;
|
||||
animation: taskCheckPop 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
.task-select input[type="checkbox"]:focus-visible + .task-select-box {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 2px;
|
||||
@keyframes taskCheckPop {
|
||||
0% { transform: scale(0.4); opacity: 0; }
|
||||
100% { transform: scale(1); opacity: 1; }
|
||||
}
|
||||
|
||||
/* Master "Select all" toggle in the status/action bar (left of Clear All).
|
||||
Uses the same custom-box visual as the row checkbox so the two reinforce
|
||||
each other; the label sits inline with the button text style. */
|
||||
/* Master "Select all" toggle in the action bar (right of Clear All).
|
||||
Reuses .task-select-box so the two checkboxes are visually identical.
|
||||
The wrapping label adds the inline "Select all" text + a hover lift. */
|
||||
.task-select-all {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
padding: 4px 8px;
|
||||
padding: 4px 10px;
|
||||
border-radius: 6px;
|
||||
font-size: 11px;
|
||||
color: var(--text-secondary);
|
||||
@ -463,22 +465,40 @@
|
||||
pointer-events: none;
|
||||
width: 0; height: 0;
|
||||
}
|
||||
/* The indeterminate state (some-but-not-all visible rows ticked) shows
|
||||
a horizontal dash instead of a check. */
|
||||
.task-select-all:hover .task-select-box {
|
||||
border-color: rgba(var(--accent-rgb), 0.55);
|
||||
box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.08);
|
||||
}
|
||||
.task-select-all input[type="checkbox"]:checked + .task-select-box {
|
||||
background: linear-gradient(135deg, var(--accent), var(--accent));
|
||||
border-color: rgba(var(--accent-rgb), 0.9);
|
||||
box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.35);
|
||||
}
|
||||
.task-select-all input[type="checkbox"]:checked + .task-select-box::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: 12px 12px;
|
||||
animation: taskCheckPop 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
/* Indeterminate state — some-but-not-all visible rows ticked. Swap the
|
||||
check SVG for a horizontal dash, still white on accent. */
|
||||
.task-select-all input[type="checkbox"]:indeterminate + .task-select-box {
|
||||
background: var(--status-success);
|
||||
border-color: var(--status-success);
|
||||
background: linear-gradient(135deg, var(--accent), var(--accent));
|
||||
border-color: rgba(var(--accent-rgb), 0.9);
|
||||
box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.35);
|
||||
}
|
||||
.task-select-all input[type="checkbox"]:indeterminate + .task-select-box::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 1px;
|
||||
width: 8px;
|
||||
height: 2px;
|
||||
background: var(--text-on-accent, #fff);
|
||||
border: none;
|
||||
transform: none;
|
||||
inset: 0;
|
||||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><line x1='5' y1='12' x2='19' y2='12'/></svg>");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: 12px 12px;
|
||||
}
|
||||
.task-select-all-label {
|
||||
font-weight: 500;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user