Webstar/LibrePortal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge claude/1

Browse Source
This commit is contained in:
librelad 2026-05-27 18:30:12 +01:00
commit 8a14683065
1 changed files with 68 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

116
containers/libreportal/frontend/css/tasks.css
View File

@ -383,25 +383,16 @@
} }
/* Multi-select checkbox sat to the right of the row's Delete button. /* 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 Mirrors the .setup-app checkbox from the setup wizard: accent fill +
reads as a single action group. Hides the native input and renders white SVG check + pop-in, no separate frame. The label wrapper is just
a custom box; `cursor: pointer` on the wrapping label keeps the a hit-target — visible chrome is all on .task-select-box. Sized down
whole 24×24 hit target clickable. */ to 18px so it sits inline with the 22px-tall .task-btn buttons. */
.task-select { .task-select {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: 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; cursor: pointer;
transition: background 0.18s ease, border-color 0.18s ease; padding: 2px;
}
.task-select:hover {
background: var(--surface-hover);
border-color: var(--status-success);
} }
.task-select input[type="checkbox"] { .task-select input[type="checkbox"] {
position: absolute; position: absolute;
@ -410,43 +401,54 @@
width: 0; height: 0; width: 0; height: 0;
} }
.task-select-box { .task-select-box {
width: 12px; width: 18px;
height: 12px; height: 18px;
border-radius: 3px; flex-shrink: 0;
border: 1.5px solid rgba(var(--text-rgb), 0.45); border-radius: 5px;
background: transparent; 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; 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 { .task-select input[type="checkbox"]:checked + .task-select-box {
background: var(--status-success); background: linear-gradient(135deg, var(--accent), var(--accent));
border-color: var(--status-success); 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 { .task-select input[type="checkbox"]:checked + .task-select-box::after {
content: ""; content: "";
position: absolute; position: absolute;
top: 1px; inset: 0;
left: 4px; 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>");
width: 3px; background-repeat: no-repeat;
height: 7px; background-position: center;
border: solid var(--text-on-accent, #fff); background-size: 12px 12px;
border-width: 0 2px 2px 0; animation: taskCheckPop 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
transform: rotate(45deg);
} }
.task-select input[type="checkbox"]:focus-visible + .task-select-box { @keyframes taskCheckPop {
outline: 2px solid var(--accent); 0% { transform: scale(0.4); opacity: 0; }
outline-offset: 2px; 100% { transform: scale(1); opacity: 1; }
} }
/* Master "Select all" toggle in the status/action bar (left of Clear All). /* Master "Select all" toggle in the action bar (right of Clear All).
Uses the same custom-box visual as the row checkbox so the two reinforce Reuses .task-select-box so the two checkboxes are visually identical.
each other; the label sits inline with the button text style. */ The wrapping label adds the inline "Select all" text + a hover lift. */
.task-select-all { .task-select-all {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 6px; gap: 8px;
cursor: pointer; cursor: pointer;
padding: 4px 8px; padding: 4px 10px;
border-radius: 6px; border-radius: 6px;
font-size: 11px; font-size: 11px;
color: var(--text-secondary); color: var(--text-secondary);
@ -463,22 +465,40 @@
pointer-events: none; pointer-events: none;
width: 0; height: 0; width: 0; height: 0;
} }
/* The indeterminate state (some-but-not-all visible rows ticked) shows .task-select-all:hover .task-select-box {
a horizontal dash instead of a check. */ 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 { .task-select-all input[type="checkbox"]:indeterminate + .task-select-box {
background: var(--status-success); background: linear-gradient(135deg, var(--accent), var(--accent));
border-color: var(--status-success); 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 { .task-select-all input[type="checkbox"]:indeterminate + .task-select-box::after {
content: ""; content: "";
position: absolute; position: absolute;
top: 4px; inset: 0;
left: 1px; 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>");
width: 8px; background-repeat: no-repeat;
height: 2px; background-position: center;
background: var(--text-on-accent, #fff); background-size: 12px 12px;
border: none;
transform: none;
} }
.task-select-all-label { .task-select-all-label {
font-weight: 500; font-weight: 500;