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:
parent
8662ff68da
commit
9296baf65a
6 changed files with 27 additions and 29 deletions
|
@ -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}}
|
||||||
|
|
|
@ -6,3 +6,4 @@
|
||||||
@useCustomScrollbars: false;
|
@useCustomScrollbars: false;
|
||||||
@disabledOpacity: var(--opacity-disabled);
|
@disabledOpacity: var(--opacity-disabled);
|
||||||
@variationPopupTooltip: false;
|
@variationPopupTooltip: false;
|
||||||
|
@linkHoverUnderline: underline;
|
||||||
|
|
2
web_src/fomantic/build/semantic.css
generated
2
web_src/fomantic/build/semantic.css
generated
|
@ -37826,7 +37826,7 @@ a {
|
||||||
|
|
||||||
a:hover {
|
a:hover {
|
||||||
color: #1e70bf;
|
color: #1e70bf;
|
||||||
text-decoration: none;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*******************************
|
/*******************************
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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; }
|
||||||
|
|
Reference in a new issue