feat: 刷新任务看板 UI 并改进无障碍体验
- 用 CSS 变量为状态列着色，并新增计数徽章样式 - 迁移至 Font Awesome 6，优化工具栏与卡片布局 - 通过 focus-within 显示操作按钮，并支持减少动画偏好 - 通过 data-key-aria / data-key-title 实现 aria-label 与 title 的国际化
This commit is contained in:
eddy
+230
-18
@@ -21,6 +21,21 @@
|
||||
--shadow-subtle: #00000012;
|
||||
--shadow-hover: #0002;
|
||||
--shadow-pinned: #ffc10744;
|
||||
--shadow-header: #764ba240;
|
||||
/* Tint/ink pairs per status: tint backs the count pill, ink keeps text readable on it. */
|
||||
--todo-tint: #6c757d1f;
|
||||
--todo-ink: #5c636a;
|
||||
--progress-tint: #ffc1072e;
|
||||
--progress-ink: #7a5c03;
|
||||
--complete-tint: #1987541f;
|
||||
--complete-ink: #146c43;
|
||||
/* Status-agnostic ink for neutral count pills; dark enough to clear AA on --timeline. */
|
||||
--count-ink: #495057;
|
||||
/* Fallbacks so a .status-column without data-status degrades to neutral instead of
|
||||
dropping the declaration entirely at computed-value time. */
|
||||
--status-accent: var(--primary);
|
||||
--status-tint: var(--todo-tint);
|
||||
--status-ink: var(--todo-ink);
|
||||
}
|
||||
body {
|
||||
background: var(--background);
|
||||
@@ -29,14 +44,32 @@ body {
|
||||
.task-header {
|
||||
background: linear-gradient(135deg, var(--header-start), var(--header-end));
|
||||
color: var(--surface);
|
||||
padding: 1.25rem;
|
||||
border-radius: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
padding: 0.85rem 1rem;
|
||||
border-radius: 0.65rem;
|
||||
margin-bottom: 0.75rem;
|
||||
box-shadow: 0 4px 14px var(--shadow-header);
|
||||
}
|
||||
.task-header h1 {
|
||||
font-size: 1.8rem;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.02em;
|
||||
margin: 0;
|
||||
}
|
||||
.toolbar {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
.toolbar .btn,
|
||||
.toolbar .form-control {
|
||||
font-size: 0.875rem;
|
||||
padding-block: 0.4rem;
|
||||
}
|
||||
.toolbar .btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
/* Status columns */
|
||||
.status-column {
|
||||
background: var(--surface);
|
||||
border-radius: 1rem;
|
||||
@@ -44,6 +77,22 @@ body {
|
||||
box-shadow: 0 2px 12px var(--shadow-subtle);
|
||||
min-height: 12rem;
|
||||
}
|
||||
/* Each column publishes its palette so descendants can theme themselves. */
|
||||
.status-column[data-status='todo'] {
|
||||
--status-accent: var(--todo);
|
||||
--status-tint: var(--todo-tint);
|
||||
--status-ink: var(--todo-ink);
|
||||
}
|
||||
.status-column[data-status='inProgress'] {
|
||||
--status-accent: var(--progress);
|
||||
--status-tint: var(--progress-tint);
|
||||
--status-ink: var(--progress-ink);
|
||||
}
|
||||
.status-column[data-status='completed'] {
|
||||
--status-accent: var(--complete);
|
||||
--status-tint: var(--complete-tint);
|
||||
--status-ink: var(--complete-ink);
|
||||
}
|
||||
.status-column-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -52,15 +101,49 @@ body {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.status-column-header h4 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.4rem;
|
||||
min-width: 0;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
}
|
||||
/* Direct child only, so the visibility toggle's own icon keeps its muted colour. */
|
||||
.status-column-header h4 > i {
|
||||
color: var(--status-ink);
|
||||
}
|
||||
.status-count {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 1.6rem;
|
||||
padding: 0.1rem 0.45rem;
|
||||
border-radius: 1rem;
|
||||
background: var(--status-tint);
|
||||
color: var(--status-ink);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.sort-selector {
|
||||
font-size: 0.72rem;
|
||||
padding: 0.25rem;
|
||||
padding: 0.25rem 0.4rem;
|
||||
border: 1px solid var(--timeline);
|
||||
border-radius: 0.35rem;
|
||||
max-width: 45%;
|
||||
background: var(--surface);
|
||||
color: var(--muted);
|
||||
cursor: pointer;
|
||||
transition: border-color 0.15s ease;
|
||||
}
|
||||
.sort-selector:hover {
|
||||
border-color: var(--status-accent);
|
||||
}
|
||||
.sort-selector:focus-visible {
|
||||
outline: 2px solid var(--primary);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
/* Task cards */
|
||||
@@ -68,7 +151,10 @@ body {
|
||||
position: relative;
|
||||
border-left: 4px solid var(--primary);
|
||||
margin-bottom: 1rem;
|
||||
transition: 0.2s;
|
||||
/* Named properties only: `transition: 0.2s` also animated the overdue/due-soon colour flip. */
|
||||
transition:
|
||||
transform 0.2s ease,
|
||||
box-shadow 0.2s ease;
|
||||
}
|
||||
.task-card:hover {
|
||||
transform: translateY(-2px);
|
||||
@@ -100,24 +186,71 @@ body {
|
||||
}
|
||||
.task-actions {
|
||||
position: absolute;
|
||||
right: 0.35rem;
|
||||
top: 0.35rem;
|
||||
z-index: 2;
|
||||
right: 0.5rem;
|
||||
top: 0.5rem;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* flex discards the inter-tag whitespace the original leaned on, so the gap has to be
|
||||
declared rather than inherited from the markup's `ms-1` + collapsed space. */
|
||||
gap: 0.5rem;
|
||||
padding: 0.125rem;
|
||||
background: var(--surface-raised);
|
||||
border-radius: 0.4rem;
|
||||
border-radius: 0.375rem;
|
||||
-webkit-backdrop-filter: blur(5px);
|
||||
backdrop-filter: blur(5px);
|
||||
opacity: 0;
|
||||
transition: opacity 0.15s ease;
|
||||
}
|
||||
.task-card:hover .task-actions {
|
||||
/* focus-within keeps the buttons reachable by keyboard, which hover alone never allowed. */
|
||||
.task-card:hover .task-actions,
|
||||
.task-card:focus-within .task-actions {
|
||||
opacity: 1;
|
||||
}
|
||||
/* The action bar sits over the title row, so these keep the compact proportions the
|
||||
original shipped with: a 0.8rem icon inside 6px/8px of padding. */
|
||||
.task-actions .btn {
|
||||
padding: 0.25rem 0.4rem;
|
||||
flex: 0 0 auto;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.task-actions .task-action-button {
|
||||
padding: 0.375rem 0.5rem;
|
||||
}
|
||||
.pin-button {
|
||||
color: var(--muted);
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
transition: color 0.15s ease;
|
||||
}
|
||||
.pin-button:hover,
|
||||
.pin-button:focus-visible,
|
||||
.pin-button.pinned {
|
||||
color: var(--progress);
|
||||
}
|
||||
/* The original tinted this button by letting the card's `.pinned` rule leak onto it, which
|
||||
also gave it a 3px top border and left it standing taller than its neighbours. Keeping the
|
||||
tint as a background reproduces the look without disturbing the row. */
|
||||
.pin-button.pinned {
|
||||
background: var(--progress-tint);
|
||||
}
|
||||
.priority-badge {
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
flex: 0 0 auto;
|
||||
font-size: 0.7rem;
|
||||
border-radius: 1rem;
|
||||
padding: 0.2rem 0.5rem;
|
||||
padding: 0.125rem 0.375rem;
|
||||
color: var(--surface);
|
||||
transition:
|
||||
opacity 0.15s ease,
|
||||
transform 0.15s ease;
|
||||
}
|
||||
/* The action bar overlaps the badge once it fades in, so the badge steps well back
|
||||
instead of competing with the buttons stacked on top of it. */
|
||||
.task-card:hover .priority-badge,
|
||||
.task-card:focus-within .priority-badge {
|
||||
opacity: 0.3;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.priority-low-badge {
|
||||
background: var(--priority-low);
|
||||
@@ -143,6 +276,25 @@ body {
|
||||
/* Timeline */
|
||||
.timeline-toggle {
|
||||
cursor: pointer;
|
||||
color: var(--muted);
|
||||
transition: color 0.15s ease;
|
||||
}
|
||||
.timeline-toggle:hover {
|
||||
color: var(--primary);
|
||||
}
|
||||
.timeline-count {
|
||||
display: inline-block;
|
||||
min-width: 1.25rem;
|
||||
padding: 0 0.35rem;
|
||||
border-radius: 1rem;
|
||||
background: var(--timeline);
|
||||
color: var(--count-ink);
|
||||
font-size: 0.7rem;
|
||||
font-variant-numeric: tabular-nums;
|
||||
text-align: center;
|
||||
}
|
||||
.timeline-caret {
|
||||
margin-left: 0.15rem;
|
||||
}
|
||||
.timeline {
|
||||
position: relative;
|
||||
@@ -187,8 +339,10 @@ body {
|
||||
.timeline-item-actions {
|
||||
float: right;
|
||||
opacity: 0;
|
||||
transition: opacity 0.15s ease;
|
||||
}
|
||||
.timeline-item:hover .timeline-item-actions {
|
||||
.timeline-item:hover .timeline-item-actions,
|
||||
.timeline-item:focus-within .timeline-item-actions {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@@ -202,6 +356,11 @@ body {
|
||||
}
|
||||
.visibility-toggle {
|
||||
padding: 0.1rem;
|
||||
color: var(--muted);
|
||||
text-decoration: none;
|
||||
}
|
||||
.visibility-toggle:hover {
|
||||
color: var(--status-ink);
|
||||
}
|
||||
.empty-state {
|
||||
color: var(--muted);
|
||||
@@ -211,7 +370,24 @@ body {
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.task-actions,
|
||||
/* Flows inline above the card body, so the raised-surface treatment it needs while
|
||||
floating would just paint a white block over overdue/due-soon card tints. */
|
||||
.task-actions {
|
||||
position: static;
|
||||
width: fit-content;
|
||||
margin: 0.5rem 0.5rem 0 auto;
|
||||
background: transparent;
|
||||
-webkit-backdrop-filter: none;
|
||||
backdrop-filter: none;
|
||||
opacity: 0.9;
|
||||
}
|
||||
/* Nothing covers the badge once the action bar flows inline, and a sticky touch :hover
|
||||
would otherwise leave it stuck at 30% long after the tap. */
|
||||
.task-card:hover .priority-badge,
|
||||
.task-card:focus-within .priority-badge {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
.timeline-item-actions {
|
||||
opacity: 0.9;
|
||||
}
|
||||
@@ -224,7 +400,7 @@ body {
|
||||
}
|
||||
@media (max-width: 576px) {
|
||||
.task-header h1 {
|
||||
font-size: 1.35rem;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.status-column-header {
|
||||
align-items: flex-start;
|
||||
@@ -232,11 +408,47 @@ body {
|
||||
.sort-selector {
|
||||
max-width: 50%;
|
||||
}
|
||||
/* Flex centring only here: the enlarged touch target is taller than the icon's line box,
|
||||
so normal flow would strand the glyph against the top padding. */
|
||||
.task-actions .btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 2.25rem;
|
||||
min-height: 2.25rem;
|
||||
}
|
||||
.toolbar .btn span:not(#langBtn) {
|
||||
display: none;
|
||||
.toolbar .btn {
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
}
|
||||
/* Collapse to icon-only, but keep the label readable to screen readers —
|
||||
`display: none` would strip these buttons of their accessible name. */
|
||||
.toolbar .btn .toolbar-btn-label {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
overflow: hidden;
|
||||
clip-path: inset(50%);
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.task-card,
|
||||
.task-actions,
|
||||
.timeline-item-actions,
|
||||
.priority-badge,
|
||||
.pin-button,
|
||||
.timeline-toggle,
|
||||
.sort-selector {
|
||||
transition: none;
|
||||
}
|
||||
.task-card:hover {
|
||||
transform: none;
|
||||
}
|
||||
.task-card:hover .priority-badge,
|
||||
.task-card:focus-within .priority-badge {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user