diff --git a/frontend/e2e/task-row-rhythm.spec.ts b/frontend/e2e/task-row-rhythm.spec.ts index 24e376e..b1561c8 100644 --- a/frontend/e2e/task-row-rhythm.spec.ts +++ b/frontend/e2e/task-row-rhythm.spec.ts @@ -96,9 +96,55 @@ test('task rows keep approved rhythm without clipping across desktop and mobile' await expect(row).toHaveCount(1) await expectTaskRowGeometry(row) } + const ordinaryRow = page.locator('.task-row').filter({ hasText: ordinaryTitle }) const completedRow = page.locator('.task-row').filter({ hasText: completedTitle }) + const rowState = async (row: Locator) => row.evaluate((element: HTMLElement) => { + const style = getComputedStyle(element) + const marker = getComputedStyle(element, '::before') + const title = getComputedStyle(element.querySelector('.task-main strong') as HTMLElement) + return { + background: style.backgroundColor, + markerWidth: marker.width, + markerBackground: marker.backgroundColor, + titleColor: title.color, + titleDecoration: title.textDecorationLine, + } + }) + + expect((await rowState(ordinaryRow)).background).toBe('rgba(0, 0, 0, 0)') + const hasFinePointer = await page.evaluate(() => matchMedia('(hover:hover) and (pointer:fine)').matches) + if (hasFinePointer) { + await ordinaryRow.hover() + await expect(ordinaryRow).toHaveCSS('background-color', 'rgb(255, 248, 238)') + } + await ordinaryRow.locator('.task-main').click() + await expect(ordinaryRow).toHaveCSS('background-color', 'rgb(255, 244, 229)') + const selectedState = await rowState(ordinaryRow) + expect(selectedState.markerWidth).toBe('2px') + expect(selectedState.markerBackground).toBe('rgb(241, 90, 41)') + const ordinaryBox = await ordinaryRow.boundingBox() + expect(ordinaryBox).toBeTruthy() + await page.mouse.move(ordinaryBox!.x + ordinaryBox!.width / 2, ordinaryBox!.y + ordinaryBox!.height / 2) + await page.mouse.down() + expect((await rowState(ordinaryRow)).background).toBe('rgb(255, 244, 229)') + await page.mouse.up() + await ordinaryRow.evaluate(element => element.classList.add('done', 'overdue-task')) + expect((await rowState(ordinaryRow)).background).toBe('rgb(255, 244, 229)') + await ordinaryRow.evaluate(element => { + element.classList.remove('selected', 'done', 'overdue-task') + element.classList.add('task-row--trash') + }) + await ordinaryRow.hover() + const trashState = await rowState(ordinaryRow) + expect(trashState.background).toBe('rgba(0, 0, 0, 0)') + expect(trashState.markerBackground).toBe('rgba(0, 0, 0, 0)') + await completedRow.getByRole('button', { name: `完成${completedTitle}` }).click() await expect(completedRow).toHaveClass(/done/) + await expect(completedRow).toHaveCSS('background-color', 'rgb(251, 247, 240)') + await expect(completedRow.locator('.task-main strong')).toHaveCSS('color', 'rgb(112, 104, 95)') + const completedState = await rowState(completedRow) + expect(completedState.titleDecoration).toContain('line-through') await expectTaskRowGeometry(completedRow) await expect(page.locator('.task-row').filter({ hasText: dueTitle }).locator('.task-tail')).toBeVisible() await expect(page.locator('.task-row').filter({ hasText: parentTitle })).toContainText('0/1') diff --git a/frontend/src/style.css b/frontend/src/style.css index 3f55c4f..4b1613a 100644 --- a/frontend/src/style.css +++ b/frontend/src/style.css @@ -5,7 +5,7 @@ *{box-sizing:border-box}html{-webkit-text-size-adjust:100%;text-size-adjust:100%}body{margin:0;background:#f8f3e8}button,input,textarea,select{font:inherit;color:inherit}@media(max-width:800px){input,textarea,select{font-size:16px}}button{cursor:pointer}svg{width:18px;height:18px;stroke-width:1.8}.center,.auth-shell{min-height:100vh;display:grid;place-items:center}.center{gap:12px;align-content:center;color:var(--muted)}.loading-brand{grid-template-columns:auto;justify-items:center;gap:13px}.loading-logo{width:40px;height:40px;display:block;margin-bottom:3px}.loading-brand>span:last-child{font-size:13px}.loader{width:24px;height:24px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}} .auth-shell{background:var(--surface-canvas)}.auth-card{width:min(390px,90vw);padding:38px;background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);display:grid;gap:16px}.brand{display:inline-flex;align-items:center;gap:11px;font-size:40px;font-weight:850;letter-spacing:-3px}.brand-wordmark{color:var(--text-primary)}.brand-logo{width:42px;height:42px;flex:0 0 auto;display:block}.brand.small{font-size:29px;gap:9px}.brand.small .brand-logo{width:32px;height:32px}.auth-card p{margin:0 0 8px;color:var(--muted)}.auth-card label,.detail-form>label{display:grid;gap:7px;font-size:12px;font-weight:650;color:#756d61}.auth-card input,.detail-form input,.detail-form select{width:100%;border:1px solid var(--line);background:#fff;padding:11px;border-radius:9px;outline:none}.auth-card input:focus,.detail-form input:focus,.detail-form select:focus,.detail-form textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(241,90,41,.1)}.primary{border:0;background:var(--accent);color:#fff;padding:12px;border-radius:9px;font-weight:700;box-shadow:0 5px 12px rgba(241,90,41,.2)}.auth-card small{color:var(--danger)} .shell{height:100vh;display:grid;grid-template-columns:236px minmax(430px,1fr) 0;background:var(--paper);overflow:hidden;transition:grid-template-columns .22s ease}.shell.detail-open{grid-template-columns:236px minmax(430px,1fr) 350px}.shell.sidebar-collapsed{grid-template-columns:0 minmax(430px,1fr) 0}.shell.sidebar-collapsed.detail-open{grid-template-columns:0 minmax(430px,1fr) 350px}.shell.sidebar-collapsed .sidebar{width:0;min-width:0;overflow:hidden;border-right:0;padding:0}.sidebar{border-right:1px solid #e4d5c3;background:#f7efe3;display:flex;flex-direction:column;min-height:0;overflow:hidden}.brand-row{height:68px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(222,205,185,.75)}.primary-nav{display:grid;padding:10px 11px 8px;gap:2px}.primary-nav button,.sidebar-management button{position:relative;display:flex;align-items:center;gap:10px;border:0;background:transparent;padding:0 12px;min-height:44px;border-radius:11px;color:#655b50;text-align:left}.primary-nav button:hover,.sidebar-management button:hover,.list-row:hover,.folder-row>button:hover{background:rgba(255,255,255,.68)}.primary-nav button.active{background:#f9e2d5;color:#b63c1b;font-weight:750}.list-row.active{background:#fff8ef;color:#bc431f;box-shadow:inset 0 0 0 1px #ead5c4}.sidebar-management button.active{background:#f9e2d5;color:#b63c1b;font-weight:750}.primary-nav button.active::before,.list-row.active::before,.sidebar-management button.active::before{content:"";position:absolute;left:2px;top:50%;width:3px;height:18px;border-radius:999px;background:var(--accent);transform:translateY(-50%)}.section-title{padding:14px 15px 5px 20px;display:flex;justify-content:space-between;align-items:center;color:#958b7d;text-transform:uppercase;letter-spacing:.08em;font-size:11px;font-weight:750}.section-title>span:last-child{display:flex}.mini-icon,.row-actions button{min-width:44px;min-height:44px;border:0;background:transparent;padding:4px;color:#8e8477}.mini-icon svg,.row-actions svg{width:14px;height:14px}.folders{flex:1;min-height:0;padding:0 10px;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none}.folders::-webkit-scrollbar{display:none}.folder-row,.list-row{position:relative;display:flex;align-items:center;border-radius:8px}.folder-row>button,.list-row-main{flex:1;min-width:0;min-height:44px;border:0;background:transparent;padding:0 8px;display:flex;align-items:center;gap:7px;color:#6d6559;text-align:left}.folder-row>button>span,.list-row-main>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.folder-row>button svg{width:14px}.row-actions{display:flex;position:absolute;right:0;opacity:0;pointer-events:none;transition:opacity .15s}.folder-row:hover .row-actions,.folder-row:focus-within .row-actions,.list-row:hover .row-actions,.list-row:focus-within .row-actions{opacity:1;pointer-events:auto}.list-row-main{width:100%;min-height:44px;padding:8px 7px 8px 31px;color:#665f55}.draggable-list-row-main{padding-left:0}.list-row.active .list-row-main{color:inherit}.sidebar-create-wrap{position:relative}.sidebar-popover{position:absolute;z-index:12;display:grid;min-width:148px;padding:6px;background:#fffdf8;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 28px rgba(78,58,34,.14);text-transform:none;letter-spacing:0}.sidebar-create-menu{top:40px;right:0}.sidebar-popover button{min-height:38px;border:0;background:transparent;border-radius:8px;padding:7px 10px;display:flex;align-items:center;gap:8px;color:#665e52;text-align:left;white-space:nowrap;font-size:12px}.sidebar-popover button:hover{background:#fbf0e8}.sidebar-popover svg{width:15px;height:15px}.sidebar-action-mask{position:fixed;z-index:70;inset:0;display:flex;align-items:flex-end}.sidebar-management{display:grid;gap:2px;margin:8px 12px max(12px,env(safe-area-inset-bottom));padding-top:8px;border-top:1px solid rgba(218,207,190,.82)}.mobile-only,.bottom{display:none}.scrim{display:none} -main{container-type:inline-size;min-width:0;padding:27px 34px 50px;overflow:auto;background:var(--surface-base)}@media(min-width:931px){main{scrollbar-width:none}main::-webkit-scrollbar{display:none}}.topbar{display:grid;grid-template-columns:44px minmax(0,1fr) auto;grid-template-areas:"menu title filter" "search search search";align-items:center;column-gap:14px;row-gap:12px;margin-bottom:18px}.topbar>.icon{grid-area:menu}.topbar-title{grid-area:title;min-width:0;width:100%}.topbar p{margin:0;color:var(--muted);font-size:12px}.topbar h1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:27px;margin:0;letter-spacing:-.03em}.search-reveal{grid-area:search;width:100%;min-width:0}.search-pull-hint{display:none}.topbar .search{width:100%;margin:0}.topbar-actions{grid-area:filter;justify-self:end;display:flex;align-items:center;gap:8px}.topbar-filter{justify-self:end;flex:none}.topbar-refresh{width:44px;height:44px;min-width:44px;border-radius:50%;color:var(--text-secondary)}.topbar-refresh:hover:not(:disabled){background:var(--surface-raised);color:var(--text-primary)}.topbar-refresh:disabled{opacity:.5;cursor:not-allowed}.topbar-refresh.spinning svg{animation:topbar-refresh-spin .7s linear infinite}@keyframes topbar-refresh-spin{to{transform:rotate(360deg)}}.completed-filter-pill{min-width:132px;height:36px;padding:0 8px 0 12px;display:inline-flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid var(--border-cream);border-radius:999px;background:var(--surface-raised);box-shadow:var(--highlight-inner);color:#675f54;font-size:12px;font-weight:650;white-space:nowrap}.completed-filter-pill:hover:not(:disabled){background:#fff7eb;border-color:#d8c6ae}.completed-filter-pill:active:not(:disabled){transform:scale(.985)}.completed-filter-pill:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}.completed-filter-pill:disabled{opacity:.55;cursor:not-allowed}.completed-filter-pill__track{width:32px;height:18px;flex:0 0 auto;padding:2px;border-radius:999px;background:#d8cbb9;transition:background .15s ease}.completed-filter-pill__thumb{display:block;width:14px;height:14px;border-radius:50%;background:#fffdf8;transform:translateX(0);transition:transform .15s ease}.completed-filter-pill[aria-checked="true"] .completed-filter-pill__track{background:var(--accent)}.completed-filter-pill[aria-checked="true"] .completed-filter-pill__thumb{transform:translateX(14px)}main.today-main{padding-left:max(44px,calc((100% - 1080px)/2));padding-right:max(44px,calc((100% - 1080px)/2))}.today-context{margin:0 0 14px;border-bottom:0}.today-page-title{margin:28px 0 8px;font-size:34px;font-weight:700;line-height:1.15;letter-spacing:-.04em}.today-remaining{margin:0 0 24px;color:var(--muted);font-size:13px}.today-inline-filter{margin:0 0 14px auto}.today-context .completed-filter-pill{min-width:0;width:87px;height:36px;padding:0;justify-content:flex-end;gap:7px;border:0;border-radius:0;background:transparent;box-shadow:none;color:#8a8178;font-weight:400}.today-context .completed-filter-pill__track{width:30px;height:18px}.today-section-anchor{scroll-margin-top:16px}.search{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;background:#faf7f0;border:1px solid var(--line);border-radius:9px;color:var(--muted)}.search input{min-width:0;width:100%;border:0;outline:0;background:transparent}.search kbd{font-size:10px;white-space:nowrap;border:1px solid var(--line);padding:2px 4px;border-radius:4px}.list-toolbar{min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:14px;color:var(--muted);font-size:12px}.list-toolbar-actions,.habit-reorder-toolbar{display:flex;align-items:center;justify-content:flex-end;gap:10px}.reorder-mode-toggle{min-height:44px}.link{border:0;background:transparent;color:var(--accent);padding:3px;display:inline-flex;gap:3px;align-items:center}.link svg{width:14px}.task-list{transition:opacity .2s}.task-list.loading{opacity:.45}.task-row{border-left:0;--swipe-x:0px;min-height:53px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line);padding:4px 8px;transition:background .15s,transform .18s ease;position:relative;overflow:hidden;isolation:isolate}.task-row.swipeable{touch-action:pan-y;transform:translate(var(--swipe-x),var(--reorder-y,0px))}.task-row.swipeable:not([style*="0px"]){transition:none}.task-row:hover,.task-row.selected{background:rgba(250,240,229,.75)}.task-row:hover:not(.reordering){transform:translate(calc(var(--swipe-x) + 2px),var(--reorder-y,0px))}.check{width:19px;height:19px;flex:0 0 19px;border:1.6px solid #c6baa8;background:#fff;border-radius:5px;padding:0;display:grid;place-items:center}.check svg{width:13px}.task-check{width:44px;height:44px;flex:0 0 44px;border:0;background:transparent;padding:0;display:grid;place-items:center;border-radius:9px}.task-check-mark{width:19px;height:19px;border:1.6px solid #c6baa8;background:#fff;border-radius:50%;display:grid;place-items:center;transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease}.task-check-mark svg{width:13px}.task-check:hover .task-check-mark{transform:scale(1.06);border-color:#9d8f7b}.task-check:focus-visible{outline:2px solid rgba(241,90,41,.32);outline-offset:1px}.task-check[aria-pressed="true"] .task-check-mark{background:#71856b;border-color:#71856b;color:#fff}.task-check-mark.p1{border-color:#4b93d1}.task-check-mark.p2{border-color:#d79b25}.task-check-mark.p3{border-color:#dc4b30}.check.p1{border-color:#4b93d1}.check.p2{border-color:#d79b25}.check.p3{border-color:#dc4b30}.done .check{background:#afa595;color:white}.task-main{border:0;background:transparent;flex:1;min-width:0;text-align:left;padding:8px 0}.task-main strong{display:block;font-size:14px;font-weight:590;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.done .task-main strong{text-decoration:line-through;color:#9b9388}.meta{display:inline-flex;align-items:center;gap:9px;color:#9b9286;font-size:11px;margin-top:3px}.meta-item{display:flex;align-items:center;gap:3px}.meta svg{width:12px}.priority{display:inline-flex;margin:3px 0 0 7px;font-size:10px;font-weight:750;padding:3px 6px;border-radius:5px}.priority.p1{color:#3f80ba;background:#e5f2fc}.priority.p2{color:#a56b05;background:#fff1cb}.priority.p3{color:#bd3827;background:#fde2dc}.icon,.ghost{min-width:44px;min-height:44px;border:0;background:transparent;display:grid;place-items:center;padding:5px;border-radius:6px}.mobile-only{display:none}.ghost{opacity:0;color:#9d9387}.task-row:hover .ghost{opacity:1}.ghost:hover{color:var(--danger);background:#fce7e2}.restore{display:flex;align-items:center;gap:5px;min-height:44px;border:1px solid var(--line);background:#fff;border-radius:7px;padding:6px 8px;font-size:12px}.restore svg{width:14px}.subtask{padding-left:53px;min-height:42px;color:#6d655b}.subtask>svg{width:13px;color:#bbb0a2}.empty{min-height:300px;display:grid;place-items:center;align-content:center;gap:8px;color:#aaa094;text-align:center}.empty>svg{width:38px;height:38px;color:#d8cabb}.empty b{color:#6f675c}.empty span{font-size:13px}.today-filtered-empty-note{min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 6px 2px 14px;border:1px solid var(--line);border-radius:10px;background:#fffaf4;color:var(--muted);font-size:13px}.today-filtered-empty-note .link{min-width:44px;min-height:44px;padding:0 10px} +main{container-type:inline-size;min-width:0;padding:27px 34px 50px;overflow:auto;background:var(--surface-base)}@media(min-width:931px){main{scrollbar-width:none}main::-webkit-scrollbar{display:none}}.topbar{display:grid;grid-template-columns:44px minmax(0,1fr) auto;grid-template-areas:"menu title filter" "search search search";align-items:center;column-gap:14px;row-gap:12px;margin-bottom:18px}.topbar>.icon{grid-area:menu}.topbar-title{grid-area:title;min-width:0;width:100%}.topbar p{margin:0;color:var(--muted);font-size:12px}.topbar h1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:27px;margin:0;letter-spacing:-.03em}.search-reveal{grid-area:search;width:100%;min-width:0}.search-pull-hint{display:none}.topbar .search{width:100%;margin:0}.topbar-actions{grid-area:filter;justify-self:end;display:flex;align-items:center;gap:8px}.topbar-filter{justify-self:end;flex:none}.topbar-refresh{width:44px;height:44px;min-width:44px;border-radius:50%;color:var(--text-secondary)}.topbar-refresh:hover:not(:disabled){background:var(--surface-raised);color:var(--text-primary)}.topbar-refresh:disabled{opacity:.5;cursor:not-allowed}.topbar-refresh.spinning svg{animation:topbar-refresh-spin .7s linear infinite}@keyframes topbar-refresh-spin{to{transform:rotate(360deg)}}.completed-filter-pill{min-width:132px;height:36px;padding:0 8px 0 12px;display:inline-flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid var(--border-cream);border-radius:999px;background:var(--surface-raised);box-shadow:var(--highlight-inner);color:#675f54;font-size:12px;font-weight:650;white-space:nowrap}.completed-filter-pill:hover:not(:disabled){background:#fff7eb;border-color:#d8c6ae}.completed-filter-pill:active:not(:disabled){transform:scale(.985)}.completed-filter-pill:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}.completed-filter-pill:disabled{opacity:.55;cursor:not-allowed}.completed-filter-pill__track{width:32px;height:18px;flex:0 0 auto;padding:2px;border-radius:999px;background:#d8cbb9;transition:background .15s ease}.completed-filter-pill__thumb{display:block;width:14px;height:14px;border-radius:50%;background:#fffdf8;transform:translateX(0);transition:transform .15s ease}.completed-filter-pill[aria-checked="true"] .completed-filter-pill__track{background:var(--accent)}.completed-filter-pill[aria-checked="true"] .completed-filter-pill__thumb{transform:translateX(14px)}main.today-main{padding-left:max(44px,calc((100% - 1080px)/2));padding-right:max(44px,calc((100% - 1080px)/2))}.today-context{margin:0 0 14px;border-bottom:0}.today-page-title{margin:28px 0 8px;font-size:34px;font-weight:700;line-height:1.15;letter-spacing:-.04em}.today-remaining{margin:0 0 24px;color:var(--muted);font-size:13px}.today-inline-filter{margin:0 0 14px auto}.today-context .completed-filter-pill{min-width:0;width:87px;height:36px;padding:0;justify-content:flex-end;gap:7px;border:0;border-radius:0;background:transparent;box-shadow:none;color:#8a8178;font-weight:400}.today-context .completed-filter-pill__track{width:30px;height:18px}.today-section-anchor{scroll-margin-top:16px}.search{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;background:#faf7f0;border:1px solid var(--line);border-radius:9px;color:var(--muted)}.search input{min-width:0;width:100%;border:0;outline:0;background:transparent}.search kbd{font-size:10px;white-space:nowrap;border:1px solid var(--line);padding:2px 4px;border-radius:4px}.list-toolbar{min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:14px;color:var(--muted);font-size:12px}.list-toolbar-actions,.habit-reorder-toolbar{display:flex;align-items:center;justify-content:flex-end;gap:10px}.reorder-mode-toggle{min-height:44px}.link{border:0;background:transparent;color:var(--accent);padding:3px;display:inline-flex;gap:3px;align-items:center}.link svg{width:14px}.task-list{transition:opacity .2s}.task-list.loading{opacity:.45}.task-row{border-left:0;--swipe-x:0px;min-height:53px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line);padding:4px 8px;transition:background .15s,transform .18s ease;position:relative;overflow:hidden;isolation:isolate}.task-row.swipeable{touch-action:pan-y;transform:translate(var(--swipe-x),var(--reorder-y,0px))}.task-row.swipeable:not([style*="0px"]){transition:none}.task-row:hover,.task-row.selected{background:rgba(250,240,229,.75)}@media(hover:hover) and (pointer:fine){.task-row:hover:not(.reordering):not(.task-row--trash){transform:translate(calc(var(--swipe-x) + 2px),var(--reorder-y,0px))}}.check{width:19px;height:19px;flex:0 0 19px;border:1.6px solid #c6baa8;background:#fff;border-radius:5px;padding:0;display:grid;place-items:center}.check svg{width:13px}.task-check{width:44px;height:44px;flex:0 0 44px;border:0;background:transparent;padding:0;display:grid;place-items:center;border-radius:9px}.task-check-mark{width:19px;height:19px;border:1.6px solid #c6baa8;background:#fff;border-radius:50%;display:grid;place-items:center;transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease}.task-check-mark svg{width:13px}.task-check:hover .task-check-mark{transform:scale(1.06);border-color:#9d8f7b}.task-check:focus-visible{outline:2px solid rgba(241,90,41,.32);outline-offset:1px}.task-check[aria-pressed="true"] .task-check-mark{background:#71856b;border-color:#71856b;color:#fff}.task-check-mark.p1{border-color:#4b93d1}.task-check-mark.p2{border-color:#d79b25}.task-check-mark.p3{border-color:#dc4b30}.check.p1{border-color:#4b93d1}.check.p2{border-color:#d79b25}.check.p3{border-color:#dc4b30}.done .check{background:#afa595;color:white}.task-main{border:0;background:transparent;flex:1;min-width:0;text-align:left;padding:8px 0}.task-main strong{display:block;font-size:14px;font-weight:590;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.done .task-main strong{text-decoration:line-through;color:#9b9388}.meta{display:inline-flex;align-items:center;gap:9px;color:#9b9286;font-size:11px;margin-top:3px}.meta-item{display:flex;align-items:center;gap:3px}.meta svg{width:12px}.priority{display:inline-flex;margin:3px 0 0 7px;font-size:10px;font-weight:750;padding:3px 6px;border-radius:5px}.priority.p1{color:#3f80ba;background:#e5f2fc}.priority.p2{color:#a56b05;background:#fff1cb}.priority.p3{color:#bd3827;background:#fde2dc}.icon,.ghost{min-width:44px;min-height:44px;border:0;background:transparent;display:grid;place-items:center;padding:5px;border-radius:6px}.mobile-only{display:none}.ghost{opacity:0;color:#9d9387}.task-row:hover .ghost{opacity:1}.ghost:hover{color:var(--danger);background:#fce7e2}.restore{display:flex;align-items:center;gap:5px;min-height:44px;border:1px solid var(--line);background:#fff;border-radius:7px;padding:6px 8px;font-size:12px}.restore svg{width:14px}.subtask{padding-left:53px;min-height:42px;color:#6d655b}.subtask>svg{width:13px;color:#bbb0a2}.empty{min-height:300px;display:grid;place-items:center;align-content:center;gap:8px;color:#aaa094;text-align:center}.empty>svg{width:38px;height:38px;color:#d8cabb}.empty b{color:#6f675c}.empty span{font-size:13px}.today-filtered-empty-note{min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 6px 2px 14px;border:1px solid var(--line);border-radius:10px;background:#fffaf4;color:var(--muted);font-size:13px}.today-filtered-empty-note .link{min-width:44px;min-height:44px;padding:0 10px} .drag-handle{width:44px;min-width:44px;height:44px;flex:0 0 44px;display:grid;place-items:center;border:0;background:transparent;color:#b3a795;cursor:grab;touch-action:none;border-radius:8px}.drag-handle:active{cursor:grabbing}.drag-handle:disabled{opacity:.3;cursor:not-allowed}.drag-handle svg{width:17px;height:17px}.reordering{opacity:.78;z-index:4;box-shadow:0 12px 28px rgba(78,58,34,.18)!important;transition:none!important;pointer-events:none}.reorder-target{box-shadow:inset 0 2px 0 var(--accent)} .list-drag-handle{width:44px;min-width:44px;height:44px;display:grid;place-items:center;border:0;background:transparent;color:#ad9f8c;cursor:grab;touch-action:none;border-radius:8px}.list-drag-handle svg{width:15px;height:15px}.list-row{touch-action:pan-y}.list-row.list-dragging{position:relative;z-index:8;opacity:.8;box-shadow:0 10px 24px rgba(78,58,34,.2);transform:translateY(var(--list-drag-y));transition:none;pointer-events:none;background:#fffaf4}.folder-row.list-drop-target{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent)}.list-root-drop.list-drop-target{background:var(--accent-soft);color:#b7421e;border-radius:9px}.list-row.list-reorder-target{box-shadow:inset 0 2px 0 var(--accent)}.list-move-menu{display:grid;gap:2px;padding:0}.list-move-menu button{min-height:44px}.list-move-menu button:disabled,.sidebar-action-sheet .app-sheet__body button:disabled{opacity:.55;cursor:default}.sidebar-action-sheet{width:min(320px,calc(100vw - 24px));margin:12px;border:1px solid var(--border-cream);border-radius:18px;box-shadow:var(--highlight-inner),var(--shadow-raised);overflow:hidden}.sidebar-action-header.app-sheet__header,.sidebar-action-move-view.app-sheet__header{align-items:flex-start;min-height:64px;padding:13px 14px 12px}.sidebar-action-header>div,.sidebar-action-move-view>div{min-width:0;display:grid;gap:2px}.sidebar-action-header b,.sidebar-action-move-view b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px}.sidebar-action-kind,.sidebar-action-group-title{font-size:11px;font-weight:750;letter-spacing:.04em;color:var(--muted)}.sidebar-action-body.app-sheet__body{gap:8px;padding:10px}.sidebar-action-group{display:grid;gap:2px;padding:6px;border:1px solid var(--border-cream);border-radius:14px;background:#fffaf4}.sidebar-action-group button,.sidebar-action-danger button,.list-move-menu button{width:100%;min-height:44px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;border:0;border-radius:11px;background:transparent;padding:0 10px;text-align:left}.sidebar-action-group button:hover:not(:disabled),.list-move-menu button:hover:not(:disabled){background:#fff3e6}.sidebar-action-group button span,.sidebar-action-danger button span,.list-move-menu button span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sidebar-action-chevron{color:#b3a795}.sidebar-action-up{transform:rotate(180deg)}.sidebar-action-danger{border-top:1px solid #efd6cf;padding:9px 6px 6px;display:grid;gap:7px}.sidebar-action-danger>span{font-size:11px;line-height:1.4;color:#9a6a5f;padding:0 4px}.sidebar-action-danger button.danger{color:var(--danger);background:#fff6f2}.sidebar-action-move-back{min-height:44px;width:44px;border:0;border-radius:12px;background:transparent;color:#8a7e70;display:grid;place-items:center}.sidebar-action-move-back svg{transform:rotate(180deg)}.list-move-current{background:#fbe6dc!important;color:#7b351e;font-weight:750} .archived-lists{position:relative;margin-top:4px}.archived-lists-toggle{min-height:44px;width:100%;display:flex;align-items:center;gap:8px;border:0;border-radius:9px;background:transparent;padding:0 12px;color:#81786c;text-align:left;font-size:12px;font-weight:650}.archived-lists-toggle:hover:not(:disabled){background:rgba(255,255,255,.52)}.archived-lists-toggle:focus-visible,.archived-row-menu-trigger:focus-visible,.archived-row-actions button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.archived-lists-toggle:disabled{cursor:default;color:#aaa196}.archived-lists-toggle svg{width:15px;height:15px;transition:transform .16s ease}.archived-lists-toggle svg.expanded{transform:rotate(90deg)}.archived-list-items{display:grid;transition:opacity .16s ease}.archived-row{min-height:44px;display:grid;grid-template-columns:minmax(0,1fr) 44px;align-items:center;padding-left:35px;color:#746c61}.archived-row-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.archived-row-menu{display:grid;place-items:center}.archived-row-menu-trigger{width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:9px;background:transparent;color:#8e8477}.archived-row-menu-trigger svg{width:15px;height:15px}.archived-action-mask{display:contents}.archived-row-actions{position:fixed;z-index:70;width:164px;display:grid;gap:2px;padding:6px;background:#fffdf8;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}.archived-row-actions button{min-height:44px;display:flex;align-items:center;gap:9px;border:0;border-radius:8px;background:transparent;padding:8px 10px;text-align:left;font-size:12px}.archived-row-actions button:hover{background:#f8f1e8}.archived-row-actions svg{width:15px;height:15px}@media(max-width:930px){.archived-action-mask{display:block;position:fixed;z-index:60;inset:0;background:rgba(45,38,31,.3)}.archived-row-actions{position:fixed;z-index:61;left:0;right:0;top:auto;bottom:0;width:100%;padding:12px 16px calc(16px + env(safe-area-inset-bottom));border-radius:22px 22px 0 0}.archived-row-actions button{font-size:14px}}@media(prefers-reduced-motion:reduce){.archived-lists-toggle svg,.archived-list-items{transition:none}} @@ -104,6 +104,16 @@ input,select,textarea,.search{background:var(--surface-raised);border-color:var( .plain-list{display:grid;gap:0;background:transparent;border:0;border-radius:0;box-shadow:none;overflow:visible} .plain-list-row,.plain-list>.task-row,.plain-list>.habit-row{height:58px;min-height:58px;max-height:58px;background:transparent;border:0;border-bottom:1px solid #e8e0d5;border-radius:0;box-shadow:none} .plain-list>.task-row,.plain-list>.habit-row{align-items:center;padding:0;gap:0;overflow:hidden} +.plain-list>.task-row:not(.task-row--trash){transition:background-color .14s ease,transform .12s ease} +.plain-list>.task-row:not(.task-row--trash)::before{content:"";position:absolute;z-index:2;left:0;top:10px;bottom:10px;width:2px;border-radius:0 2px 2px 0;background:transparent;pointer-events:none} +@media(hover:hover) and (pointer:fine){.plain-list>.task-row:not(.task-row--trash):hover{background:#fff8ee}} +.plain-list>.task-row:not(.task-row--trash):active:not(.selected){background:#fff1df} +.plain-list>.task-row:not(.task-row--trash).done{background:#fbf7f0} +.plain-list>.task-row:not(.task-row--trash).done .task-main strong{color:#70685f;text-decoration-color:#a99e92} +.plain-list>.task-row:not(.task-row--trash).done .task-tail{color:#81786e} +.plain-list>.task-row:not(.task-row--trash).overdue-task{background:#fff7f4} +.plain-list>.task-row:not(.task-row--trash).selected,.plain-list>.task-row:not(.task-row--trash).selected.done,.plain-list>.task-row:not(.task-row--trash).selected.overdue-task{background:#fff4e5} +.plain-list>.task-row:not(.task-row--trash).selected::before{background:var(--accent)} .plain-list .habit-check{margin-left:0} .task-row{grid-template-columns:44px minmax(0,1fr) auto} .habit-row{grid-template-columns:44px minmax(0,1fr) auto} @@ -113,7 +123,7 @@ input,select,textarea,.search{background:var(--surface-raised);border-color:var( .task-main strong,.habit-name{display:block;min-width:0;font-size:15px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .task-tail,.habit-row-meta{min-width:0;max-width:132px;padding-left:12px;font-size:12px;font-weight:400;white-space:nowrap;text-align:right;overflow:hidden;text-overflow:ellipsis} .plain-list .task-due--timed .task-due__text{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}.plain-list .task-due--timed .task-due__separator{display:inline}.plain-list>.task-row:has(>.task-tail .task-due--timed){height:58px;min-height:58px;max-height:58px} -.plain-list>.task-row:hover,.plain-list>.task-row.selected,.plain-list>.task-row.done,.plain-list>.habit-row:hover,.plain-list>.habit-row.done,.plain-list>.overdue-task{background:transparent} +.plain-list>.habit-row:hover,.plain-list>.habit-row.done{background:transparent} .task-row--trash{grid-template-columns:minmax(0,1fr) auto;padding-left:12px!important} .task-row--trash .task-main{cursor:default}.task-row--trash .task-actions{min-width:0} @@ -153,7 +163,7 @@ main.today-main .topbar{margin-bottom:18px} .today-environment__weather strong,.today-environment__gold strong,.today-environment__gold-primary{margin-top:0;font-size:13px;font-weight:650} .today-environment__item small{margin-top:2px;font-size:10.5px} .today-main :is(.task-row,.habit-row){height:58px;min-height:58px;max-height:58px;padding:0;background:transparent;border:0;border-bottom:1px solid #e8e0d5;border-radius:0;box-shadow:none} -.today-main .task-row:hover,.today-main .task-row.selected,.today-main .task-row.done,.today-main .habit-row:hover,.today-main .habit-row.done,.today-main .overdue-task{background:transparent} +.today-main .habit-row:hover,.today-main .habit-row.done{background:transparent} .today-main .task-row{gap:0}.today-main .task-main{padding:0}.today-main .task-main strong,.today-main .habit-name{font-size:15px;font-weight:400} .today-main .task-tail{padding-left:12px;font-size:12px}.today-main .habit-row{gap:0}.today-main .habit-main{display:flex;align-items:center;min-width:0;padding:0} .shell.today-active .unified-fab{box-shadow:0 8px 18px rgba(174,65,29,.22)}.shell.today-active .unified-fab>svg{width:30px;height:30px;stroke-width:1.5} diff --git a/frontend/src/visual-polish.test.ts b/frontend/src/visual-polish.test.ts index 44dd1d4..96e4600 100644 --- a/frontend/src/visual-polish.test.ts +++ b/frontend/src/visual-polish.test.ts @@ -153,8 +153,14 @@ describe('approved five-detail polish', () => { } }) - it('keeps plain-list task and habit rows transparent in all persistent states', () => { - expect(css).toContain('.plain-list>.task-row:hover,.plain-list>.task-row.selected,.plain-list>.task-row.done,.plain-list>.habit-row:hover,.plain-list>.habit-row.done,.plain-list>.overdue-task{background:transparent}') + it('gives task rows distinct hover, selected, completed, and overdue feedback while habits stay quiet', () => { + expect(css).toContain('@media(hover:hover) and (pointer:fine){.plain-list>.task-row:not(.task-row--trash):hover{background:#fff8ee}}') + expect(css).toContain('@media(hover:hover) and (pointer:fine){.task-row:hover:not(.reordering):not(.task-row--trash){transform:translate(calc(var(--swipe-x) + 2px),var(--reorder-y,0px))}}') + expect(css).toContain('.plain-list>.task-row:not(.task-row--trash).selected,.plain-list>.task-row:not(.task-row--trash).selected.done,.plain-list>.task-row:not(.task-row--trash).selected.overdue-task{background:#fff4e5}') + expect(css).toContain('.plain-list>.task-row:not(.task-row--trash).selected::before{background:var(--accent)}') + expect(css).toContain('.plain-list>.task-row:not(.task-row--trash).done{background:#fbf7f0}') + expect(css).toContain('.plain-list>.task-row:not(.task-row--trash).overdue-task{background:#fff7f4}') + expect(css).toContain('.plain-list>.habit-row:hover,.plain-list>.habit-row.done{background:transparent}') }) it('renders memo rows with title and time only at a fixed compact height', () => {