eddy
f014e37325
- 用 CSS 变量为状态列着色，并新增计数徽章样式 - 迁移至 Font Awesome 6，优化工具栏与卡片布局 - 通过 focus-within 显示操作按钮，并支持减少动画偏好 - 通过 data-key-aria / data-key-title 实现 aria-label 与 title 的国际化
455 lines
11 KiB
CSS
455 lines
11 KiB
CSS
/* Base */
|
|
:root {
|
|
--primary: #0d6efd;
|
|
--todo: #6c757d;
|
|
--progress: #ffc107;
|
|
--complete: #198754;
|
|
--priority-low: #198754;
|
|
--priority-medium: #fd7e14;
|
|
--priority-high: #dc3545;
|
|
--danger: #dc3545;
|
|
--warning: #fd7e14;
|
|
--surface: #fff;
|
|
--surface-raised: #fffffff0;
|
|
--background: #f4f6fa;
|
|
--overdue-background: #fff5f5;
|
|
--due-soon-background: #fff8f0;
|
|
--muted: #6c757d;
|
|
--timeline: #dee2e6;
|
|
--header-start: #667eea;
|
|
--header-end: #764ba2;
|
|
--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);
|
|
font-family: 'Microsoft YaHei', system-ui, sans-serif;
|
|
}
|
|
.task-header {
|
|
background: linear-gradient(135deg, var(--header-start), var(--header-end));
|
|
color: var(--surface);
|
|
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.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;
|
|
padding: 1rem;
|
|
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;
|
|
justify-content: space-between;
|
|
gap: 0.5rem;
|
|
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 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 */
|
|
.task-card {
|
|
position: relative;
|
|
border-left: 4px solid var(--primary);
|
|
margin-bottom: 1rem;
|
|
/* 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);
|
|
box-shadow: 0 5px 14px var(--shadow-hover);
|
|
}
|
|
.task-card.todo {
|
|
border-left-color: var(--todo);
|
|
}
|
|
.task-card.inProgress {
|
|
border-left-color: var(--progress);
|
|
}
|
|
.task-card.completed {
|
|
border-left-color: var(--complete);
|
|
}
|
|
.task-card.overdue {
|
|
border-left-color: var(--danger) !important;
|
|
background: var(--overdue-background);
|
|
}
|
|
.task-card.due-soon {
|
|
border-left-color: var(--warning) !important;
|
|
background: var(--due-soon-background);
|
|
}
|
|
.task-card.hidden-task {
|
|
opacity: 0.6;
|
|
}
|
|
.task-card.pinned {
|
|
border-top: 3px solid var(--progress);
|
|
box-shadow: 0 4px 12px var(--shadow-pinned);
|
|
}
|
|
.task-actions {
|
|
position: absolute;
|
|
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.375rem;
|
|
-webkit-backdrop-filter: blur(5px);
|
|
backdrop-filter: blur(5px);
|
|
opacity: 0;
|
|
transition: opacity 0.15s ease;
|
|
}
|
|
/* 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 {
|
|
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.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);
|
|
}
|
|
.priority-medium-badge {
|
|
background: var(--priority-medium);
|
|
}
|
|
.priority-high-badge {
|
|
background: var(--priority-high);
|
|
}
|
|
.progress-custom {
|
|
height: 0.45rem;
|
|
}
|
|
.person-badge {
|
|
font-size: 0.75rem;
|
|
margin: 0.1rem;
|
|
}
|
|
.task-description-display {
|
|
white-space: pre-wrap;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
/* 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;
|
|
padding-left: 1.25rem;
|
|
margin-top: 0.75rem;
|
|
}
|
|
.timeline:before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0.5rem;
|
|
inset-block: 0;
|
|
width: 2px;
|
|
background: var(--timeline);
|
|
}
|
|
.timeline-item {
|
|
position: relative;
|
|
padding-bottom: 0.75rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
.timeline-item:before {
|
|
content: '';
|
|
position: absolute;
|
|
left: -0.72rem;
|
|
top: 0.35rem;
|
|
width: 0.5rem;
|
|
height: 0.5rem;
|
|
border-radius: 50%;
|
|
background: var(--primary);
|
|
}
|
|
.timeline-content,
|
|
.timeline-form,
|
|
.timeline-edit-form {
|
|
background: var(--background);
|
|
padding: 0.65rem;
|
|
border-radius: 0.5rem;
|
|
font-size: 0.85rem;
|
|
}
|
|
.timeline-date {
|
|
font-size: 0.75rem;
|
|
color: var(--muted);
|
|
}
|
|
.timeline-item-actions {
|
|
float: right;
|
|
opacity: 0;
|
|
transition: opacity 0.15s ease;
|
|
}
|
|
.timeline-item:hover .timeline-item-actions,
|
|
.timeline-item:focus-within .timeline-item-actions {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Overlays and controls */
|
|
.notification {
|
|
position: fixed;
|
|
right: 1rem;
|
|
top: 1rem;
|
|
z-index: 2000;
|
|
max-width: min(28rem, 90vw);
|
|
}
|
|
.visibility-toggle {
|
|
padding: 0.1rem;
|
|
color: var(--muted);
|
|
text-decoration: none;
|
|
}
|
|
.visibility-toggle:hover {
|
|
color: var(--status-ink);
|
|
}
|
|
.empty-state {
|
|
color: var(--muted);
|
|
text-align: center;
|
|
padding: 1rem;
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 768px) {
|
|
/* 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;
|
|
}
|
|
.toolbar .btn {
|
|
flex: 1;
|
|
}
|
|
.status-column {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
}
|
|
@media (max-width: 576px) {
|
|
.task-header h1 {
|
|
font-size: 1.2rem;
|
|
}
|
|
.status-column-header {
|
|
align-items: flex-start;
|
|
}
|
|
.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 {
|
|
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;
|
|
}
|
|
}
|