From 9296baf65a73ccdda329b45770d22390ead7905f Mon Sep 17 00:00:00 2001 From: silverwind Date: Fri, 17 Dec 2021 21:29:00 -0800 Subject: [PATCH] Change 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. --- templates/shared/issuelist.tmpl | 16 +++++++------- web_src/fomantic/_site/globals/site.variables | 1 + web_src/fomantic/build/semantic.css | 2 +- web_src/less/_base.less | 15 ++++++++++++- web_src/less/_repository.less | 21 +++---------------- web_src/less/helpers.less | 1 + 6 files changed, 27 insertions(+), 29 deletions(-) diff --git a/templates/shared/issuelist.tmpl b/templates/shared/issuelist.tmpl index d0ac4b9507..0b68a03414 100644 --- a/templates/shared/issuelist.tmpl +++ b/templates/shared/issuelist.tmpl @@ -31,14 +31,12 @@
- - {{RenderEmoji .Title}} - {{if .IsPull }} - {{if (index $.CommitStatus .PullRequest.ID)}} - {{template "repo/commit_status" (index $.CommitStatus .PullRequest.ID)}} - {{end}} + {{RenderEmoji .Title}} + {{if .IsPull}} + {{if (index $.CommitStatus .PullRequest.ID)}} + {{template "repo/commit_status" (index $.CommitStatus .PullRequest.ID)}} {{end}} - + {{end}} {{range .Labels}} {{.Name | RenderEmoji}} @@ -126,14 +124,14 @@
{{range .Assignees}} - + {{avatar .}} {{end}}
{{if .NumComments}} - + {{svg "octicon-comment" 16 "mr-2"}}{{.NumComments}} {{end}} diff --git a/web_src/fomantic/_site/globals/site.variables b/web_src/fomantic/_site/globals/site.variables index e7e0b82918..dcd9c2f08c 100644 --- 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 457c3e93bd..56134e4c0d 100644 --- 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 1d6b65e945..300323b2e8 100644 --- 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 94ab67ef47..bf8722690c 100644 --- 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 f35412fd0e..6904083da8 100644 --- 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; }