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.

diff --git a/templates/shared/issuelist.tmpl b/templates/shared/issuelist.tmpl
index d0ac4b95071a62916576d566aa6ab8bff3b8af51..0b68a03414b10a865f9f8ff99d253055a2621aab 100644 (file)
--- a/templates/shared/issuelist.tmpl
+++ b/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}}

diff --git a/web_src/fomantic/_site/globals/site.variables b/web_src/fomantic/_site/globals/site.variables
index e7e0b829187e8eb64540cb4e5b709ae231919b7c..dcd9c2f08cc82123cafbe94137419918463b69ba 100644 (file)
--- a/web_src/fomantic/_site/globals/site.variables
+++ b/web_src/fomantic/_site/globals/site.variables
@@ -6,3 +6,4 @@
 @useCustomScrollbars: false;
 @disabledOpacity: var(--opacity-disabled);
 @variationPopupTooltip: false;
+@linkHoverUnderline: underline;

diff --git a/web_src/fomantic/build/semantic.css b/web_src/fomantic/build/semantic.css
index 457c3e93bd10414eb1984e94d84dba22ee9e4dfa..56134e4c0d8a03207fe0c8a7ac43206fa745b839 100644 (file)
--- a/web_src/fomantic/build/semantic.css
+++ b/web_src/fomantic/build/semantic.css
@@ -37826,7 +37826,7 @@ a {
 
 a:hover {
   color: #1e70bf;
-  text-decoration: none;
+  text-decoration: underline;
 }
 
 /*******************************

diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index 1d6b65e945c536aae87489e2c51521f3a794ae32..300323b2e8b9e042261837e098cd94ab215bc8bb 100644 (file)
--- a/web_src/less/_base.less
+++ b/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 {

diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index 94ab67ef476421f2b64c1c1da4573f8f408f81a3..bf8722690c8e44af0a836be94387313954612613 100644 (file)
--- a/web_src/less/_repository.less
+++ b/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 {

diff --git a/web_src/less/helpers.less b/web_src/less/helpers.less
index f35412fd0e2204312db8364a576836cb1ab3f849..6904083da8b910853a00c03d7f1f993eff78d951 100644 (file)
--- a/web_src/less/helpers.less
+++ b/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; }