Change <a> elements to underline on hover (#17898)

Fomantic brings a opinionated style that removed underline on mouse
hover which I think is important UX to have.

This re-enables the underline in the Fomantic config and fixes a few
cases where underline was deemed disruptive.
This commit is contained in:
silverwind 2021-12-17 21:29:00 -08:00 committed by GitHub
parent 8662ff68da
commit 9296baf65a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 27 additions and 29 deletions

View file

@ -31,14 +31,12 @@
</div> </div>
<div class="issue-item-main f1 fc df"> <div class="issue-item-main f1 fc df">
<div class="issue-item-top-row"> <div class="issue-item-top-row">
<a class="title" href="{{if .HTMLURL}}{{.HTMLURL}}{{else}}{{$.Link}}/{{.Index}}{{end}}"> <a class="title tdn" href="{{if .HTMLURL}}{{.HTMLURL}}{{else}}{{$.Link}}/{{.Index}}{{end}}">{{RenderEmoji .Title}}</a>
{{RenderEmoji .Title}}
{{if .IsPull}} {{if .IsPull}}
{{if (index $.CommitStatus .PullRequest.ID)}} {{if (index $.CommitStatus .PullRequest.ID)}}
{{template "repo/commit_status" (index $.CommitStatus .PullRequest.ID)}} {{template "repo/commit_status" (index $.CommitStatus .PullRequest.ID)}}
{{end}} {{end}}
{{end}} {{end}}
</a>
<span class="labels-list ml-2"> <span class="labels-list ml-2">
{{range .Labels}} {{range .Labels}}
<a class="ui label" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&state={{$.State}}&labels={{.ID}}{{if ne $.listType "milestone"}}&milestone={{$.MilestoneID}}{{end}}&assignee={{$.AssigneeID}}" style="color: {{.ForegroundColor}}; background-color: {{.Color}}" title="{{.Description | RenderEmojiPlain}}">{{.Name | RenderEmoji}}</a> <a class="ui label" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&state={{$.State}}&labels={{.ID}}{{if ne $.listType "milestone"}}&milestone={{$.MilestoneID}}{{end}}&assignee={{$.AssigneeID}}" style="color: {{.ForegroundColor}}; background-color: {{.Color}}" title="{{.Description | RenderEmojiPlain}}">{{.Name | RenderEmoji}}</a>
@ -126,14 +124,14 @@
</div> </div>
<div class="issue-item-icon-right text grey"> <div class="issue-item-icon-right text grey">
{{range .Assignees}} {{range .Assignees}}
<a class="ui assignee tooltip" href="{{.HomeLink}}" data-content="{{.GetDisplayName}}" data-position="left center"> <a class="ui assignee tooltip tdn" href="{{.HomeLink}}" data-content="{{.GetDisplayName}}" data-position="left center">
{{avatar .}} {{avatar .}}
</a> </a>
{{end}} {{end}}
</div> </div>
<div class="issue-item-icon-right text grey"> <div class="issue-item-icon-right text grey">
{{if .NumComments}} {{if .NumComments}}
<a href="{{if .HTMLURL}}{{.HTMLURL}}{{else}}{{$.Link}}/{{.Index}}{{end}}"> <a class="tdn" href="{{if .HTMLURL}}{{.HTMLURL}}{{else}}{{$.Link}}/{{.Index}}{{end}}">
{{svg "octicon-comment" 16 "mr-2"}}{{.NumComments}} {{svg "octicon-comment" 16 "mr-2"}}{{.NumComments}}
</a> </a>
{{end}} {{end}}

View file

@ -6,3 +6,4 @@
@useCustomScrollbars: false; @useCustomScrollbars: false;
@disabledOpacity: var(--opacity-disabled); @disabledOpacity: var(--opacity-disabled);
@variationPopupTooltip: false; @variationPopupTooltip: false;
@linkHoverUnderline: underline;

View file

@ -37826,7 +37826,7 @@ a {
a:hover { a:hover {
color: #1e70bf; color: #1e70bf;
text-decoration: none; text-decoration: underline;
} }
/******************************* /*******************************

View file

@ -236,6 +236,7 @@ a,
.ui.breadcrumb a { .ui.breadcrumb a {
color: var(--color-primary); color: var(--color-primary);
cursor: pointer; cursor: pointer;
text-decoration-skip-ink: all;
} }
a.muted { a.muted {
@ -245,7 +246,19 @@ a.muted {
a:hover, a:hover,
a.muted:hover, a.muted:hover,
.ui.breadcrumb a:hover { .ui.breadcrumb a:hover {
color: var(--color-primary-dark-2); color: var(--color-primary);
}
a.label,
.repository-menu a,
.ui.search .results a,
.ui .menu a,
.issue-keyword a {
text-decoration: none !important;
}
.ui.breadcrumb a:hover {
text-decoration: underline !important;
} }
.ui.breadcrumb .divider { .ui.breadcrumb .divider {

View file

@ -2837,20 +2837,6 @@ tbody.commit-list {
} }
} }
.commit-summary a {
&:hover {
text-decoration: underline solid;
}
&.default-link {
text-decoration: none;
&:hover {
text-decoration: underline solid;
}
}
}
.commit-list .commit-status-link { .commit-list .commit-status-link {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
@ -3012,13 +2998,12 @@ td.blob-excerpt {
background-color: #fafafa; background-color: #fafafa;
} }
.issue-keyword, .issue-keyword {
.commit-body .issue-keyword:hover { border-bottom: 1px dotted var(--color-text-light-3) !important;
border-bottom: 1px dotted var(--color-text-light-2);
} }
.issue-keyword:hover { .issue-keyword:hover {
border-bottom: none; border-bottom: none !important;
} }
.file-header { .file-header {

View file

@ -6,6 +6,7 @@
.ac { align-items: center !important; } .ac { align-items: center !important; }
.tc { text-align: center !important; } .tc { text-align: center !important; }
.tl { text-align: left !important; } .tl { text-align: left !important; }
.tdn { text-decoration: none !important; }
.jc { justify-content: center !important; } .jc { justify-content: center !important; }
.js { justify-content: flex-start !important; } .js { justify-content: flex-start !important; }
.je { justify-content: flex-end !important; } .je { justify-content: flex-end !important; }