fix: restore underline affordance on chrome links
commit
9690a4bfix: restore underline affordance on chrome links
card-row, aside-row, crumbs, repo-path, page-title, and commit-subject links all set text-decoration:none (several also color:inherit), so at rest they were visually indistinguishable from plain text; only hovering revealed they were clickable. Each now carries a subtle underline at rest, matching the tone the base link style already uses, that solidifies on hover.
Assisted-by: Claude:claude-sonnet-5
Reviews
No reviews of this commit yet — record a verdict below.
Start a review
crates/git-ents-server/src/web/style.css
@@ -93,7 +93,7 @@
.page-header::after { content: ""; position: absolute; bottom: -1px; left: 0; width: 3rem; height: 2px; background: var(--color-accent); border-radius: 1px; }
.page-title { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; display: inline-flex; align-items: center; gap: .55rem; }
.page-title .icon { color: var(--color-accent); width: 20px; height: 20px; }
-.page-title a { color: inherit; text-decoration: none; }
+.page-title a { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 25%, transparent); }
.page-title a:hover { color: var(--color-accent); }
.count { margin-left: auto; font-family: var(--font-mono); font-size: .8rem; color: var(--color-text-muted); }
@@ -104,7 +104,7 @@
.repo-headline { flex: 1; min-width: 0; }
.repo-path { font-family: var(--font-mono); font-size: 1.18rem; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; word-break: break-all; }
.repo-path .icon { color: var(--color-accent); }
-.repo-path a { color: var(--color-text-muted); text-decoration: none; }
+.repo-path a { color: var(--color-text-muted); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 25%, transparent); }
.repo-path a:hover { color: var(--color-accent); }
.repo-path .here { color: var(--color-accent); font-weight: 600; }
.repo-path .sep { color: var(--color-text-muted); opacity: .55; }
@@ -129,7 +129,7 @@
.aside-row .icon { color: var(--color-text-muted); flex-shrink: 0; }
.aside-row .muted { color: var(--color-text-muted); }
.aside-row .count { margin-left: 0; font-family: var(--font-mono); font-weight: 600; color: var(--color-accent); }
-.aside-row a { text-decoration: none; }
+.aside-row a { text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 25%, transparent); }
.lang-dot, .swatch { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }
.dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.lang { padding: .8rem 1.1rem; }
@@ -182,13 +182,13 @@
.btn { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.25rem; font-size: .88rem; font-weight: 600; color: var(--color-accent); text-decoration: none; padding: .45rem 1rem; border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: var(--color-surface); box-shadow: var(--shadow-sm); transition: border-color .15s, box-shadow .15s; }
.btn:hover { text-decoration: none; border-color: var(--color-accent); box-shadow: var(--shadow-md); }
-.card-row a { color: inherit; text-decoration: none; flex: 1; min-width: 0; word-break: break-all; }
+.card-row a { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 25%, transparent); flex: 1; min-width: 0; word-break: break-all; }
.card-row a:hover { color: var(--color-accent); }
-.commit-subject a { color: inherit; text-decoration: none; }
+.commit-subject a { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 25%, transparent); }
.commit-subject a:hover { color: var(--color-accent); }
.crumbs { font-family: var(--font-mono); font-size: .92rem; margin-bottom: 1.25rem; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; word-break: break-all; }
-.crumbs a { text-decoration: none; }
+.crumbs a { text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 25%, transparent); }
.crumbs .sep { color: var(--color-text-muted); opacity: .55; }
.crumbs .here { color: var(--color-text-muted); }