Merge 74b956da79fe642f5ea1336e6003e4d8cb3e2853 into fca915500912709c587cf0e32e3242fda73ffbcd
1 file · +13 -2
M internal/adapters/web/static/css/30-list.css +13 -2
| @@ -15,8 +15,19 @@ | |||
| 15 | 15 | & td { height: 40px; padding: 0 var(--s3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-top: 1px solid var(--border); } | |
| 16 | 16 | & tbody tr:first-child td { border-top: 0; } | |
| 17 | 17 | & tbody tr:hover { background: var(--bg-raised); } | |
| 18 | - | /* the cursor: the row raised, framed by one even line */ | |
| 19 | - | & tbody tr[data-cursor] { background: var(--bg-raised); outline: 1px solid var(--accent); outline-offset: -1px; } | |
| 18 | + | /* the cursor: the row raised, framed by one even line. The frame is drawn | |
| 19 | + | on the cells (a row takes no radius), so it can follow the card's | |
| 20 | + | curve when the row sits at a corner. */ | |
| 21 | + | & tbody tr[data-cursor] > td { | |
| 22 | + | background: var(--bg-raised); border-top-color: transparent; | |
| 23 | + | box-shadow: inset 0 1px var(--accent), inset 0 -1px var(--accent); | |
| 24 | + | } | |
| 25 | + | & tbody tr[data-cursor] > td:first-child { box-shadow: inset 1px 0 var(--accent), inset 0 1px var(--accent), inset 0 -1px var(--accent); } | |
| 26 | + | & tbody tr[data-cursor] > td:last-child { box-shadow: inset -1px 0 var(--accent), inset 0 1px var(--accent), inset 0 -1px var(--accent); } | |
| 27 | + | & > tbody:first-child > tr[data-cursor]:first-child > td:first-child { border-top-left-radius: calc(var(--r) - 1px); } | |
| 28 | + | & > tbody:first-child > tr[data-cursor]:first-child > td:last-child { border-top-right-radius: calc(var(--r) - 1px); } | |
| 29 | + | & > tbody:last-child > tr[data-cursor]:last-child > td:first-child { border-bottom-left-radius: calc(var(--r) - 1px); } | |
| 30 | + | & > tbody:last-child > tr[data-cursor]:last-child > td:last-child { border-bottom-right-radius: calc(var(--r) - 1px); } | |
| 20 | 31 | & tbody tr[hidden] { display: none; } | |
| 21 | 32 | & td > a { text-decoration: none; } | |
| 22 | 33 | & td > a:first-child { color: var(--ink-hi); } | |
| @@ -15,8 +15,19 @@ | |||||
| 15 | & td { height: 40px; padding: 0 var(--s3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-top: 1px solid var(--border); } | 15 | & td { height: 40px; padding: 0 var(--s3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-top: 1px solid var(--border); } | ||
| 16 | & tbody tr:first-child td { border-top: 0; } | 16 | & tbody tr:first-child td { border-top: 0; } | ||
| 17 | & tbody tr:hover { background: var(--bg-raised); } | 17 | & tbody tr:hover { background: var(--bg-raised); } | ||
| 18 | - | /* the cursor: the row raised, framed by one even line */ | 18 | + | /* the cursor: the row raised, framed by one even line. The frame is drawn |
| 19 | - | & tbody tr[data-cursor] { background: var(--bg-raised); outline: 1px solid var(--accent); outline-offset: -1px; } | 19 | + | on the cells (a row takes no radius), so it can follow the card's |
| 20 | + | curve when the row sits at a corner. */ | |||
| 21 | + | & tbody tr[data-cursor] > td { | |||
| 22 | + | background: var(--bg-raised); border-top-color: transparent; | |||
| 23 | + | box-shadow: inset 0 1px var(--accent), inset 0 -1px var(--accent); | |||
| 24 | + | } | |||
| 25 | + | & tbody tr[data-cursor] > td:first-child { box-shadow: inset 1px 0 var(--accent), inset 0 1px var(--accent), inset 0 -1px var(--accent); } | |||
| 26 | + | & tbody tr[data-cursor] > td:last-child { box-shadow: inset -1px 0 var(--accent), inset 0 1px var(--accent), inset 0 -1px var(--accent); } | |||
| 27 | + | & > tbody:first-child > tr[data-cursor]:first-child > td:first-child { border-top-left-radius: calc(var(--r) - 1px); } | |||
| 28 | + | & > tbody:first-child > tr[data-cursor]:first-child > td:last-child { border-top-right-radius: calc(var(--r) - 1px); } | |||
| 29 | + | & > tbody:last-child > tr[data-cursor]:last-child > td:first-child { border-bottom-left-radius: calc(var(--r) - 1px); } | |||
| 30 | + | & > tbody:last-child > tr[data-cursor]:last-child > td:last-child { border-bottom-right-radius: calc(var(--r) - 1px); } | |||
| 20 | & tbody tr[hidden] { display: none; } | 31 | & tbody tr[hidden] { display: none; } | ||
| 21 | & td > a { text-decoration: none; } | 32 | & td > a { text-decoration: none; } | ||
| 22 | & td > a:first-child { color: var(--ink-hi); } | 33 | & td > a:first-child { color: var(--ink-hi); } | ||