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

Compare commits

base: Webstar:8a14683065e03269c3168561e9f4cc4bc78a3fb9
Branches Tags
Webstar:main
Webstar:claude/2
Webstar:v0.1.0
..
compare: Webstar:42244fe14aea2a3e56d76fe54aaf929c089eff2d
Branches Tags
Webstar:main
Webstar:claude/2
Webstar:v0.1.0

No commits in common. "8a14683065e03269c3168561e9f4cc4bc78a3fb9" and "42244fe14aea2a3e56d76fe54aaf929c089eff2d" have entirely different histories.
8a14683065 ... 42244fe14a

1 changed files with 48 additions and 68 deletions
Show Stats Expand all files Collapse all files

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

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