Skip to content

Commit fe40372

Browse files
silverwindsilverwind
authored
Improve basic button and label styles (#14119)
* Improve disabled styles for repo buttons - Simplify disabled styling of label by matching for the disabled attribute. - Raise fomantic disabled opacity from .45 to .55 to for more contrast. - Use CSS vars for basic button styles. * restore clickability on label * color tweaks and remove arc-green style * slightly reduce button size * consolidate vars * also cover active class * slightly more distinct active class * remove useless rule
1 parent dd08853 commit fe40372

File tree

6 files changed

+70
-103
lines changed

6 files changed

+70
-103
lines changed

‎templates/repo/header.tmpl

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@
4545
<form method="post" action="{{$.RepoLink}}/action/{{if $.IsWatchingRepo}}un{{end}}watch?redirect_to={{$.Link}}">
4646
{{$.CsrfTokenHtml}}
4747
<div class="ui labeled button{{if not $.IsSigned}} poping up{{end}}" tabindex="0"{{if not $.IsSigned}} data-content="{{$.i18n.Tr "repo.watch_guest_user" }}" data-position="top center" data-variation="tiny"{{end}}>
48-
<button type="submit" class="ui compact basic button"{{if not $.IsSigned}} disabled{{end}}>
48+
<button type="submit" class="ui compact small basic button"{{if not $.IsSigned}} disabled{{end}}>
4949
{{if $.IsWatchingRepo}}{{svg "octicon-eye-closed" 16}}{{$.i18n.Tr "repo.unwatch"}}{{else}}{{svg "octicon-eye"}}{{$.i18n.Tr "repo.watch"}}{{end}}
5050
</button>
5151
<a class="ui basic label" href="{{.Link}}/watchers">
@@ -56,7 +56,7 @@
5656
<form method="post" action="{{$.RepoLink}}/action/{{if $.IsStaringRepo}}un{{end}}star?redirect_to={{$.Link}}">
5757
{{$.CsrfTokenHtml}}
5858
<div class="ui labeled button{{if not $.IsSigned}} poping up{{end}}" tabindex="0"{{if not $.IsSigned}} data-content="{{$.i18n.Tr "repo.star_guest_user" }}" data-position="top center" data-variation="tiny"{{end}}>
59-
<button type="submit" class="ui compact basic button"{{if not $.IsSigned}} disabled{{end}}>
59+
<button type="submit" class="ui compact small basic button"{{if not $.IsSigned}} disabled{{end}}>
6060
{{if $.IsStaringRepo}}{{svg "octicon-star-fill"}}{{$.i18n.Tr "repo.unstar"}}{{else}}{{svg "octicon-star"}}{{$.i18n.Tr "repo.star"}}{{end}}
6161
</button>
6262
<a class="ui basic label" href="{{.Link}}/stars">
@@ -65,8 +65,8 @@
6565
</div>
6666
</form>
6767
{{if and (not .IsEmpty) ($.Permission.CanRead $.UnitTypeCode)}}
68-
<div class="ui labeled button {{if and ($.IsSigned) (not $.CanSignedUserFork)}}disabled-repo-button{{end}}" tabindex="0">
69-
<a class="ui compact basic button {{if or (not $.IsSigned) (not $.CanSignedUserFork)}}poping up{{end}}" {{if $.CanSignedUserFork}}href="{{AppSubUrl}}/repo/fork/{{.ID}}"{{else if $.IsSigned}} data-content="{{$.i18n.Tr "repo.fork_from_self"}}" {{ else }} data-content="{{$.i18n.Tr "repo.fork_guest_user" }}" rel="nofollow" href="{{AppSubUrl}}/user/login?redirect_to={{AppSubUrl}}/repo/fork/{{.ID}}" {{end}} data-position="top center" data-variation="tiny">
68+
<div class="ui labeled button" tabindex="0">
69+
<a class="ui compact small basic button {{if or (not $.IsSigned) (not $.CanSignedUserFork)}}poping up{{end}}" {{if $.CanSignedUserFork}}href="{{AppSubUrl}}/repo/fork/{{.ID}}"{{else if $.IsSigned}} data-content="{{$.i18n.Tr "repo.fork_from_self"}}" {{ else }} data-content="{{$.i18n.Tr "repo.fork_guest_user" }}" rel="nofollow" href="{{AppSubUrl}}/user/login?redirect_to={{AppSubUrl}}/repo/fork/{{.ID}}" {{end}} data-position="top center" data-variation="tiny">
7070
{{svg "octicon-repo-forked"}}{{$.i18n.Tr "repo.fork"}}
7171
</a>
7272
<a class="ui basic label" href="{{.Link}}/forks">

‎web_src/fomantic/_site/globals/site.variables

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,4 @@
44
@pageFont: var(--fonts-regular);
55
@bold: 500;
66
@useCustomScrollbars: false;
7+
@disabledOpacity: var(--opacity-disabled);

‎web_src/fomantic/build/semantic.css

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -578,7 +578,7 @@
578578
.ui.disabled.button:hover,
579579
.ui.disabled.active.button {
580580
cursor: default;
581-
opacity: 0.45 !important;
581+
opacity: var(--opacity-disabled) !important;
582582
background-image: none;
583583
box-shadow: none;
584584
pointer-events: none !important;
@@ -9202,7 +9202,7 @@ select.ui.dropdown {
92029202

92039203
.ui.active.search.dropdown input.search:focus + .text i.icon,
92049204
.ui.active.search.dropdown input.search:focus + .text .flag {
9205-
opacity: 0.45;
9205+
opacity: var(--opacity-disabled);
92069206
}
92079207

92089208
.ui.active.search.dropdown input.search:focus + .text {
@@ -9734,7 +9734,7 @@ select.ui.dropdown {
97349734
.ui.dropdown .menu > .disabled.item {
97359735
cursor: default;
97369736
pointer-events: none;
9737-
opacity: 0.45;
9737+
opacity: var(--opacity-disabled);
97389738
}
97399739

97409740
/*******************************
@@ -12013,12 +12013,12 @@ select.ui.dropdown {
1201312013
.ui.form .disabled.field,
1201412014
.ui.form .field :disabled {
1201512015
pointer-events: none;
12016-
opacity: 0.45;
12016+
opacity: var(--opacity-disabled);
1201712017
}
1201812018

1201912019
.ui.form .field.disabled > label,
1202012020
.ui.form .fields.disabled > label {
12021-
opacity: 0.45;
12021+
opacity: var(--opacity-disabled);
1202212022
}
1202312023

1202412024
.ui.form .field.disabled :disabled {
@@ -15101,7 +15101,7 @@ h6.ui.header .sub.header {
1510115101
*******************************/
1510215102

1510315103
.ui.disabled.header {
15104-
opacity: 0.45;
15104+
opacity: var(--opacity-disabled);
1510515105
}
1510615106

1510715107
/*******************************
@@ -15768,7 +15768,7 @@ i.emphasized.icons:not(.disabled) {
1576815768

1576915769
i.disabled.icon,
1577015770
i.disabled.icons {
15771-
opacity: 0.45;
15771+
opacity: var(--opacity-disabled);
1577215772
cursor: default;
1577315773
pointer-events: none;
1577415774
}
@@ -24650,7 +24650,7 @@ img.ui.image {
2465024650
.ui.disabled.images,
2465124651
.ui.disabled.image {
2465224652
cursor: default;
24653-
opacity: 0.45;
24653+
opacity: var(--opacity-disabled);
2465424654
}
2465524655

2465624656
/*******************************
@@ -25008,7 +25008,7 @@ img.ui.bordered.image {
2500825008

2500925009
.ui.disabled.input,
2501025010
.ui.input:not(.disabled) input[disabled] {
25011-
opacity: 0.45;
25011+
opacity: var(--opacity-disabled);
2501225012
}
2501325013

2501425014
.ui.disabled.input > input,
@@ -37183,7 +37183,7 @@ template {
3718337183
.ui.disabled.search {
3718437184
cursor: default;
3718537185
pointer-events: none;
37186-
opacity: 0.45;
37186+
opacity: var(--opacity-disabled);
3718737187
}
3718837188

3718937189
/*******************************
@@ -37984,7 +37984,7 @@ template {
3798437984
---------------*/
3798537985

3798637986
.ui.disabled.segment {
37987-
opacity: 0.45;
37987+
opacity: var(--opacity-disabled);
3798837988
color: rgba(40, 40, 40, 0.3);
3798937989
}
3799037990

@@ -41783,7 +41783,7 @@ span.ui.warning.text {
4178341783
}
4178441784

4178541785
span.ui.disabled.text {
41786-
opacity: 0.45;
41786+
opacity: var(--opacity-disabled);
4178741787
}
4178841788

4178941789
/* Sizes */

‎web_src/less/_base.less

Lines changed: 41 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
/* other variables */
77
--fonts-regular: var(--fonts-proportional), var(--fonts-emoji);
88
--border-radius: .28571429rem;
9+
--opacity-disabled: .55;
910
--color-primary: #4183c4;
1011
--color-primary-dark-1: #3876b3;
1112
--color-primary-dark-2: #31699f;
@@ -96,13 +97,10 @@
9697
--color-input-border: #dedede;
9798
--color-input-border-hover: #cecece;
9899
--color-navbar: #f8f8f8;
99-
--color-label: #00000010;
100-
--color-label-hover: #00000015;
101-
--color-label-basic: #00000008;
102-
--color-label-basic-hover: #00000015;
103-
--color-label-border: #00000018;
104-
--color-hover: #0000000a;
105-
--color-active: #00000010;
100+
--color-light: #00000004;
101+
--color-light-border: #0000001d;
102+
--color-hover: #0000000d;
103+
--color-active: #00000012;
106104
--color-menu: #ffffff;
107105
--color-card: #ffffff;
108106
--color-markdown-table-row: #00000008;
@@ -1382,13 +1380,13 @@ i.icon.centerlock {
13821380

13831381
.ui.label {
13841382
padding: .3em .5em;
1385-
background: var(--color-label);
1383+
background: var(--color-light);
13861384
color: var(--color-text-light);
13871385
}
13881386

13891387
.ui.labels a.label:hover,
13901388
a.ui.label:hover {
1391-
background: var(--color-label-hover);
1389+
background: var(--color-hover);
13921390
color: var(--color-text);
13931391
}
13941392

@@ -1556,7 +1554,7 @@ a.ui.label:hover {
15561554

15571555
.ui.button {
15581556
background: var(--color-button);
1559-
border: 1px solid var(--color-secondary);
1557+
border: 1px solid var(--color-light-border);
15601558
box-shadow: none !important;
15611559
color: var(--color-text);
15621560
}
@@ -1578,6 +1576,34 @@ a.ui.label:hover {
15781576
border-left: none;
15791577
}
15801578

1579+
.ui.basic.buttons .button,
1580+
.ui.basic.button {
1581+
color: var(--color-text-light);
1582+
background: var(--color-light);
1583+
}
1584+
1585+
.ui.basic.buttons .button:hover,
1586+
.ui.basic.button:hover {
1587+
color: var(--color-text);
1588+
background: var(--color-hover);
1589+
}
1590+
1591+
.ui.basic.buttons .button:focus,
1592+
.ui.basic.button:focus,
1593+
.ui.basic.buttons .button:active,
1594+
.ui.basic.button:active,
1595+
.ui.basic.buttons .active.button,
1596+
.ui.basic.active.button,
1597+
.ui.basic.buttons .active.button:hover,
1598+
.ui.basic.active.button:hover {
1599+
color: var(--color-text);
1600+
background: var(--color-active);
1601+
}
1602+
1603+
.ui.labeled.button > .label {
1604+
border-color: var(--color-light-border);
1605+
}
1606+
15811607
.ui.blue.button,
15821608
.ui.blue.buttons .button,
15831609
.ui.primary.button,
@@ -1640,16 +1666,16 @@ a.ui.label:hover {
16401666

16411667
.ui.basic.labels .label,
16421668
.ui.basic.label {
1643-
background: var(--color-label-basic);
1644-
border-color: var(--color-label-border);
1645-
color: var(--color-text);
1669+
background: var(--color-light);
1670+
border-color: var(--color-light-border);
1671+
color: var(--color-text-light);
16461672
}
16471673

16481674
.ui.basic.labels a.label:hover,
16491675
a.ui.basic.label:hover {
16501676
color: var(--color-text);
1651-
border-color: var(--color-label-border);
1652-
background: var(--color-label-basic-hover);
1677+
border-color: var(--color-light-border);
1678+
background: var(--color-hover);
16531679
}
16541680

16551681
.ui.label > img {

‎web_src/less/_repository.less

Lines changed: 8 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -861,7 +861,7 @@
861861
.shabox {
862862
.sha.label {
863863
margin: 0;
864-
border: 1px solid #bbbbbb;
864+
border: 1px solid var(--color-light-border);
865865

866866
&.isSigned.isWarning {
867867
border: 1px solid #db2828;
@@ -1301,7 +1301,7 @@
13011301
#repo-files-table .sha.label,
13021302
#rev-list .sha.label,
13031303
.timeline-item.commits-list .singular-commit .sha.label {
1304-
border: 1px solid #bbbbbb;
1304+
border: 1px solid var(--color-light-border);
13051305

13061306
.ui.signature.avatar {
13071307
height: 16px;
@@ -1310,10 +1310,10 @@
13101310
}
13111311

13121312
.detail.icon {
1313-
background: #fafafa;
1313+
background: var(--color-light);
13141314
margin: -6px -10px -4px 0;
13151315
padding: 5px 4px 5px 6px;
1316-
border-left: 1px solid #bbbbbb;
1316+
border-left: 1px solid var(--color-light-border);
13171317
border-top: 0;
13181318
border-right: 0;
13191319
border-bottom: 0;
@@ -2780,24 +2780,14 @@ tbody.commit-list {
27802780
word-break: break-all;
27812781
}
27822782

2783-
.repo-header .repo-buttons {
2783+
.repo-buttons {
27842784
display: flex;
27852785
align-items: center;
27862786
}
27872787

2788-
.repo-buttons .disabled-repo-button .label {
2789-
opacity: .5;
2790-
}
2791-
2792-
.repo-buttons .disabled-repo-button a.button {
2793-
opacity: .5;
2794-
cursor: not-allowed;
2795-
}
2796-
2797-
.repo-buttons .disabled-repo-button a.button:hover {
2798-
background: none !important;
2799-
color: rgba(0, 0, 0, .6) !important;
2800-
box-shadow: 0 0 0 1px var(--color-secondary) inset !important;
2788+
.repo-buttons button[disabled],
2789+
.repo-buttons button[disabled] ~ .label {
2790+
opacity: var(--opacity-disabled);
28012791
}
28022792

28032793
.repo-buttons .ui.labeled.button > .label {

‎web_src/less/themes/theme-arc-green.less

Lines changed: 4 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -91,13 +91,10 @@
9191
--color-input-border: #454a57;
9292
--color-input-border-hover: #505667;
9393
--color-navbar: #2a2e3a;
94-
--color-label: #ffffff0d;
95-
--color-label-hover: #ffffff20;
96-
--color-label-basic: #00000030;
97-
--color-label-basic-hover: #40404030;
98-
--color-label-border: #ffffff28;
99-
--color-hover: #ffffff0d;
100-
--color-active: #ffffff14;
94+
--color-light: #00000028;
95+
--color-light-border: #ffffff28;
96+
--color-hover: #60606020;
97+
--color-active: #60606040;
10198
--color-menu: #2e323e;
10299
--color-card: #2e323e;
103100
--color-markdown-table-row: #ffffff06;
@@ -271,34 +268,6 @@ a.ui.basic.green.label:hover {
271268
background-color: #a0cc75;
272269
}
273270

274-
.ui.basic.button,
275-
.ui.basic.buttons .button {
276-
color: var(--color-secondary-dark-6);
277-
background: rgba(0, 0, 0, .1);
278-
box-shadow: none;
279-
}
280-
281-
.ui.basic.button:focus,
282-
.ui.basic.button:hover,
283-
.ui.basic.buttons .button:focus,
284-
.ui.basic.buttons .button:hover {
285-
color: #dbdbdb;
286-
background: rgba(255, 255, 255, .08);
287-
box-shadow: none;
288-
}
289-
290-
.ui.labeled.button:not([class*="left labeled"]) > .label,
291-
.ui[class*="left labeled"].button > .button {
292-
background: var(--color-secondary);
293-
border: 1px solid var(--color-secondary);
294-
color: #87ab63;
295-
}
296-
297-
.ui.button:hover {
298-
background-color: var(--color-secondary);
299-
color: #dbdbdb;
300-
}
301-
302271
.ui.search > .results {
303272
background: #383c4a;
304273
border-color: var(--color-secondary);
@@ -521,25 +490,6 @@ td.blob-excerpt {
521490
color: #dbdbdb;
522491
}
523492

524-
.sha.label,
525-
.repository #repo-files-table .sha.label,
526-
.repository #commits-table td.sha .sha.label,
527-
#rev-list .sha.label,
528-
.repository .timeline-item.commits-list .singular-commit .sha.label,
529-
.repository.view.issue .comment-list .timeline-item.commits-list .singular-commit .shabox .sha.label {
530-
border-color: #505667;
531-
}
532-
533-
.sha.label.isSigned .detail.icon,
534-
.repository #commits-table td.sha .sha.label.isSigned .detail.icon,
535-
#rev-list .sha.label.isSigned .detail.icon,
536-
.repository #repo-files-table .sha.label.isSigned .detail.icon,
537-
.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned .detail.icon,
538-
.repository.view.issue .comment-list .timeline-item.commits-list .singular-commit .shabox .sha.label.isSigned .detail.icon {
539-
background: none;
540-
border-left-color: #888;
541-
}
542-
543493
.repository .ui.attached.message.isSigned.isVerified {
544494
background-color: #394829;
545495
color: var(--color-secondary-dark-6);

0 commit comments

Comments
 (0)