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.

Changes

6 changed files (+27/-29)

• templates/shared/issuelist.tmpl
  • @@ -31,14 +31,12 @@
    </div> <div class="issue-item-main f1 fc df"> <div class="issue-item-top-row"> - <a class="title" href="{{if .HTMLURL}}{{.HTMLURL}}{{else}}{{$.Link}}/{{.Index}}{{end}}"> - {{RenderEmoji .Title}} - {{if .IsPull }} - {{if (index $.CommitStatus .PullRequest.ID)}} - {{template "repo/commit_status" (index $.CommitStatus .PullRequest.ID)}} - {{end}} + <a class="title tdn" href="{{if .HTMLURL}}{{.HTMLURL}}{{else}}{{$.Link}}/{{.Index}}{{end}}">{{RenderEmoji .Title}}</a> + {{if .IsPull}} + {{if (index $.CommitStatus .PullRequest.ID)}} + {{template "repo/commit_status" (index $.CommitStatus .PullRequest.ID)}} {{end}} - </a> + {{end}} <span class="labels-list ml-2"> {{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>
  • @@ -126,14 +124,14 @@
    </div> <div class="issue-item-icon-right text grey"> {{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 .}} </a> {{end}} </div> <div class="issue-item-icon-right text grey"> {{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}} </a> {{end}}
• web_src/fomantic/_site/globals/site.variables
  • @@ -6,3 +6,4 @@
    @useCustomScrollbars: false; @disabledOpacity: var(--opacity-disabled); @variationPopupTooltip: false; + @linkHoverUnderline: underline;
• web_src/fomantic/build/semantic.css
  • @@ -37826,7 +37826,7 @@ a {
    a:hover { color: #1e70bf; - text-decoration: none; + text-decoration: underline; } /*******************************
• web_src/less/_base.less
  • @@ -236,6 +236,7 @@ a,
    .ui.breadcrumb a { color: var(--color-primary); cursor: pointer; + text-decoration-skip-ink: all; } a.muted {
  • @@ -245,7 +246,19 @@ a.muted {
    a:hover, a.muted: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 {
• web_src/less/_repository.less
  • @@ -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 { display: inline-block; vertical-align: middle;
  • @@ -3012,13 +2998,12 @@ td.blob-excerpt {
    background-color: #fafafa; } - .issue-keyword, - .commit-body .issue-keyword:hover { - border-bottom: 1px dotted var(--color-text-light-2); + .issue-keyword { + border-bottom: 1px dotted var(--color-text-light-3) !important; } .issue-keyword:hover { - border-bottom: none; + border-bottom: none !important; } .file-header {
• web_src/less/helpers.less
  • @@ -6,6 +6,7 @@
    .ac { align-items: center !important; } .tc { text-align: center !important; } .tl { text-align: left !important; } + .tdn { text-decoration: none !important; } .jc { justify-content: center !important; } .js { justify-content: flex-start !important; } .je { justify-content: flex-end !important; }