web: left-align table headers, and keep the avatar out of the hover underline !85
2 files changed, +11 −6
Layout: unified · split
internal/web/static/style.css +10 −5
| @@ -279,8 +279,10 @@ ul.raillist.wide .owner { font-size: var(--fs-0); } | |||
| 279 | } | 279 | } |
| 280 | .railfoot a { color: var(--shell-fg); } | 280 | .railfoot a { color: var(--shell-fg); } |
| 281 | a.railuser { display: inline-flex; align-items: center; gap: var(--sp-2); } | 281 | a.railuser { display: inline-flex; align-items: center; gap: var(--sp-2); } |
| 282 | /* the square is a graphic, not text: the link's hover underline stops at it */ | 282 | /* a descendant cannot cancel an ancestor's underline, so the link carries |
| 283 | a.railuser:hover .avatar { text-decoration: none; } | 283 | none and the name draws its own — the avatar square stays undecorated */ |
| 284 | a.railuser:hover { text-decoration: none; } | ||
| 285 | a.railuser:hover .uname { text-decoration: underline; } | ||
| 284 | .railfoot .railsettings { color: var(--shell-muted); display: inline-flex; } | 286 | .railfoot .railsettings { color: var(--shell-muted); display: inline-flex; } |
| 285 | .railfoot .railsettings:hover { color: var(--shell-fg); } | 287 | .railfoot .railsettings:hover { color: var(--shell-fg); } |
| 286 | .railfoot form { margin-left: auto; } | 288 | .railfoot form { margin-left: auto; } |
| @@ -494,7 +496,7 @@ table.tree td, table.refs td { | |||
| 494 | } | 496 | } |
| 495 | table.tree tr:last-child td, table.refs tr:last-child td { border-bottom: none; } | 497 | table.tree tr:last-child td, table.refs tr:last-child td { border-bottom: none; } |
| 496 | table.tree tr:hover td, table.refs tr:hover td { background: var(--hover); } | 498 | table.tree tr:hover td, table.refs tr:hover td { background: var(--hover); } |
| 497 | table.tree tr.cols th { | 499 | tr.cols th { |
| 498 | text-align: left; | 500 | text-align: left; |
| 499 | font-weight: 500; | 501 | font-weight: 500; |
| 500 | font-size: var(--fs-1); | 502 | font-size: var(--fs-1); |
| @@ -503,10 +505,10 @@ table.tree tr.cols th { | |||
| 503 | border-bottom: 1px solid var(--line); | 505 | border-bottom: 1px solid var(--line); |
| 504 | background: var(--bg); | 506 | background: var(--bg); |
| 505 | } | 507 | } |
| 506 | table.tree tr.cols:hover th { background: var(--bg); } | 508 | tr.cols:hover th { background: var(--bg); } |
| 507 | /* right-aligned columns keep their header with their values; this needs to | 509 | /* right-aligned columns keep their header with their values; this needs to |
| 508 | outrank the tr.cols th rule above, which is why it names both */ | 510 | outrank the tr.cols th rule above, which is why it names both */ |
| 509 | table.tree tr.cols th.age, table.tree tr.cols th.size { text-align: right; } | 511 | tr.cols th.age, tr.cols th.size { text-align: right; } |
| 510 | table.tree th.size { text-align: right; } | 512 | table.tree th.size { text-align: right; } |
| 511 | table.tree td.name { width: 100%; } | 513 | table.tree td.name { width: 100%; } |
| 512 | table.tree td.name a { color: var(--fg); } | 514 | table.tree td.name a { color: var(--fg); } |
| @@ -825,6 +827,9 @@ form.logfilter input { flex: 1; min-width: 12rem; max-width: 28rem; } | |||
| 825 | 827 | ||
| 826 | /* account settings */ | 828 | /* account settings */ |
| 827 | table.keys td { padding: var(--sp-2) var(--sp-4) var(--sp-2) 0; } | 829 | table.keys td { padding: var(--sp-2) var(--sp-4) var(--sp-2) 0; } |
| 830 | /* these tables sit flush with the page text, so the header row drops the | ||
| 831 | left padding the card-style listings use */ | ||
| 832 | table.keys tr.cols th { padding-left: 0; background: transparent; } | ||
| 828 | table.keys td.mono, .mono { font-family: var(--mono); font-size: var(--fs-1); overflow-wrap: anywhere; } | 833 | table.keys td.mono, .mono { font-family: var(--mono); font-size: var(--fs-1); overflow-wrap: anywhere; } |
| 829 | table.keys td.act { text-align: right; } | 834 | table.keys td.act { text-align: right; } |
| 830 | ul.plain { list-style: none; margin: 0 0 var(--sp-3); padding: 0; } | 835 | ul.plain { list-style: none; margin: 0 0 var(--sp-3); padding: 0; } |
internal/web/templates/layout.html +1 −1
| @@ -43,7 +43,7 @@ | |||
| 43 | {{if .Viewer}}<li><a {{if eq (str . "Tab") "account"}}aria-current="page" {{end}}href="/settings">Settings</a></li>{{end}} | 43 | {{if .Viewer}}<li><a {{if eq (str . "Tab") "account"}}aria-current="page" {{end}}href="/settings">Settings</a></li>{{end}} |
| 44 | </ul> | 44 | </ul> |
| 45 | <div class="railfoot"> | 45 | <div class="railfoot"> |
| 46 | {{if .Viewer}}<a class="railuser" href="/{{.Viewer}}"><span class="avatar">{{initial .Viewer}}</span>{{.Viewer}}</a> | 46 | {{if .Viewer}}<a class="railuser" href="/{{.Viewer}}"><span class="avatar">{{initial .Viewer}}</span><span class="uname">{{.Viewer}}</span></a> |
| 47 | <form method="post" action="/logout"><button type="submit" class="linklike">Log out</button></form> | 47 | <form method="post" action="/logout"><button type="submit" class="linklike">Log out</button></form> |
| 48 | {{else}}<a href="/login">Sign in</a>{{end}} | 48 | {{else}}<a href="/login">Sign in</a>{{end}} |
| 49 | </div> | 49 | </div> |