realaravinth/forgejo-federation
1
0
Fork 0
Code Issues Pull requests 6 Projects Releases Packages Wiki Activity

Improve basic button and label styles (#14119)

Browse source 
* 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
This commit is contained in:
silverwind 2020-12-27 11:53:53 +01:00 committed by GitHub
parent dd08853b10
commit fe403725f4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 70 additions and 103 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
templates/repo/header.tmpl
View file

@ -45,7 +45,7 @@
<form method="post" action="{{$.RepoLink}}/action/{{if $.IsWatchingRepo}}un{{end}}watch?redirect_to={{$.Link}}"> <form method="post" action="{{$.RepoLink}}/action/{{if $.IsWatchingRepo}}un{{end}}watch?redirect_to={{$.Link}}">
{{$.CsrfTokenHtml}} {{$.CsrfTokenHtml}}
<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}}> <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}}>
<button type="submit" class="ui compact basic button"{{if not $.IsSigned}} disabled{{end}}> <button type="submit" class="ui compact small basic button"{{if not $.IsSigned}} disabled{{end}}>
{{if $.IsWatchingRepo}}{{svg "octicon-eye-closed" 16}}{{$.i18n.Tr "repo.unwatch"}}{{else}}{{svg "octicon-eye"}}{{$.i18n.Tr "repo.watch"}}{{end}} {{if $.IsWatchingRepo}}{{svg "octicon-eye-closed" 16}}{{$.i18n.Tr "repo.unwatch"}}{{else}}{{svg "octicon-eye"}}{{$.i18n.Tr "repo.watch"}}{{end}}
</button> </button>
<a class="ui basic label" href="{{.Link}}/watchers"> <a class="ui basic label" href="{{.Link}}/watchers">
@ -56,7 +56,7 @@
<form method="post" action="{{$.RepoLink}}/action/{{if $.IsStaringRepo}}un{{end}}star?redirect_to={{$.Link}}"> <form method="post" action="{{$.RepoLink}}/action/{{if $.IsStaringRepo}}un{{end}}star?redirect_to={{$.Link}}">
{{$.CsrfTokenHtml}} {{$.CsrfTokenHtml}}
<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}}> <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}}>
<button type="submit" class="ui compact basic button"{{if not $.IsSigned}} disabled{{end}}> <button type="submit" class="ui compact small basic button"{{if not $.IsSigned}} disabled{{end}}>
{{if $.IsStaringRepo}}{{svg "octicon-star-fill"}}{{$.i18n.Tr "repo.unstar"}}{{else}}{{svg "octicon-star"}}{{$.i18n.Tr "repo.star"}}{{end}} {{if $.IsStaringRepo}}{{svg "octicon-star-fill"}}{{$.i18n.Tr "repo.unstar"}}{{else}}{{svg "octicon-star"}}{{$.i18n.Tr "repo.star"}}{{end}}
</button> </button>
<a class="ui basic label" href="{{.Link}}/stars"> <a class="ui basic label" href="{{.Link}}/stars">
@ -65,8 +65,8 @@
</div> </div>
</form> </form>
{{if and (not .IsEmpty) ($.Permission.CanRead $.UnitTypeCode)}} {{if and (not .IsEmpty) ($.Permission.CanRead $.UnitTypeCode)}}
<div class="ui labeled button {{if and ($.IsSigned) (not $.CanSignedUserFork)}}disabled-repo-button{{end}}" tabindex="0"> <div class="ui labeled button" tabindex="0">
<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"> <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">
{{svg "octicon-repo-forked"}}{{$.i18n.Tr "repo.fork"}} {{svg "octicon-repo-forked"}}{{$.i18n.Tr "repo.fork"}}
</a> </a>
<a class="ui basic label" href="{{.Link}}/forks"> <a class="ui basic label" href="{{.Link}}/forks">

1
web_src/fomantic/_site/globals/site.variables
View file

@ -4,3 +4,4 @@
@pageFont: var(--fonts-regular); @pageFont: var(--fonts-regular);
@bold: 500; @bold: 500;
@useCustomScrollbars: false; @useCustomScrollbars: false;
@disabledOpacity: var(--opacity-disabled);

24
web_src/fomantic/build/semantic.css
View file

@ -578,7 +578,7 @@
.ui.disabled.button:hover, .ui.disabled.button:hover,
.ui.disabled.active.button { .ui.disabled.active.button {
cursor: default; cursor: default;
opacity: 0.45 !important; opacity: var(--opacity-disabled) !important;
background-image: none; background-image: none;
box-shadow: none; box-shadow: none;
pointer-events: none !important; pointer-events: none !important;
@ -9202,7 +9202,7 @@ select.ui.dropdown {
.ui.active.search.dropdown input.search:focus + .text i.icon, .ui.active.search.dropdown input.search:focus + .text i.icon,
.ui.active.search.dropdown input.search:focus + .text .flag { .ui.active.search.dropdown input.search:focus + .text .flag {
opacity: 0.45; opacity: var(--opacity-disabled);
} }
.ui.active.search.dropdown input.search:focus + .text { .ui.active.search.dropdown input.search:focus + .text {
@ -9734,7 +9734,7 @@ select.ui.dropdown {
.ui.dropdown .menu > .disabled.item { .ui.dropdown .menu > .disabled.item {
cursor: default; cursor: default;
pointer-events: none; pointer-events: none;
opacity: 0.45; opacity: var(--opacity-disabled);
} }
/******************************* /*******************************
@ -12013,12 +12013,12 @@ select.ui.dropdown {
.ui.form .disabled.field, .ui.form .disabled.field,
.ui.form .field :disabled { .ui.form .field :disabled {
pointer-events: none; pointer-events: none;
opacity: 0.45; opacity: var(--opacity-disabled);
} }
.ui.form .field.disabled > label, .ui.form .field.disabled > label,
.ui.form .fields.disabled > label { .ui.form .fields.disabled > label {
opacity: 0.45; opacity: var(--opacity-disabled);
} }
.ui.form .field.disabled :disabled { .ui.form .field.disabled :disabled {
@ -15101,7 +15101,7 @@ h6.ui.header .sub.header {
*******************************/ *******************************/
.ui.disabled.header { .ui.disabled.header {
opacity: 0.45; opacity: var(--opacity-disabled);
} }
/******************************* /*******************************
@ -15768,7 +15768,7 @@ i.emphasized.icons:not(.disabled) {
i.disabled.icon, i.disabled.icon,
i.disabled.icons { i.disabled.icons {
opacity: 0.45; opacity: var(--opacity-disabled);
cursor: default; cursor: default;
pointer-events: none; pointer-events: none;
} }
@ -24650,7 +24650,7 @@ img.ui.image {
.ui.disabled.images, .ui.disabled.images,
.ui.disabled.image { .ui.disabled.image {
cursor: default; cursor: default;
opacity: 0.45; opacity: var(--opacity-disabled);
} }
/******************************* /*******************************
@ -25008,7 +25008,7 @@ img.ui.bordered.image {
.ui.disabled.input, .ui.disabled.input,
.ui.input:not(.disabled) input[disabled] { .ui.input:not(.disabled) input[disabled] {
opacity: 0.45; opacity: var(--opacity-disabled);
} }
.ui.disabled.input > input, .ui.disabled.input > input,
@ -37183,7 +37183,7 @@ template {
.ui.disabled.search { .ui.disabled.search {
cursor: default; cursor: default;
pointer-events: none; pointer-events: none;
opacity: 0.45; opacity: var(--opacity-disabled);
} }
/******************************* /*******************************
@ -37984,7 +37984,7 @@ template {
---------------*/ ---------------*/
.ui.disabled.segment { .ui.disabled.segment {
opacity: 0.45; opacity: var(--opacity-disabled);
color: rgba(40, 40, 40, 0.3); color: rgba(40, 40, 40, 0.3);
} }
@ -41783,7 +41783,7 @@ span.ui.warning.text {
} }
span.ui.disabled.text { span.ui.disabled.text {
opacity: 0.45; opacity: var(--opacity-disabled);
} }
/* Sizes */ /* Sizes */

56
web_src/less/_base.less
View file

@ -6,6 +6,7 @@
/* other variables */ /* other variables */
--fonts-regular: var(--fonts-proportional), var(--fonts-emoji); --fonts-regular: var(--fonts-proportional), var(--fonts-emoji);
--border-radius: .28571429rem; --border-radius: .28571429rem;
--opacity-disabled: .55;
--color-primary: #4183c4; --color-primary: #4183c4;
--color-primary-dark-1: #3876b3; --color-primary-dark-1: #3876b3;
--color-primary-dark-2: #31699f; --color-primary-dark-2: #31699f;
@ -96,13 +97,10 @@
--color-input-border: #dedede; --color-input-border: #dedede;
--color-input-border-hover: #cecece; --color-input-border-hover: #cecece;
--color-navbar: #f8f8f8; --color-navbar: #f8f8f8;
--color-label: #00000010; --color-light: #00000004;
--color-label-hover: #00000015; --color-light-border: #0000001d;
--color-label-basic: #00000008; --color-hover: #0000000d;
--color-label-basic-hover: #00000015; --color-active: #00000012;
--color-label-border: #00000018;
--color-hover: #0000000a;
--color-active: #00000010;
--color-menu: #ffffff; --color-menu: #ffffff;
--color-card: #ffffff; --color-card: #ffffff;
--color-markdown-table-row: #00000008; --color-markdown-table-row: #00000008;
@ -1382,13 +1380,13 @@ i.icon.centerlock {
.ui.label { .ui.label {
padding: .3em .5em; padding: .3em .5em;
background: var(--color-label); background: var(--color-light);
color: var(--color-text-light); color: var(--color-text-light);
} }
.ui.labels a.label:hover, .ui.labels a.label:hover,
a.ui.label:hover { a.ui.label:hover {
background: var(--color-label-hover); background: var(--color-hover);
color: var(--color-text); color: var(--color-text);
} }
@ -1556,7 +1554,7 @@ a.ui.label:hover {
.ui.button { .ui.button {
background: var(--color-button); background: var(--color-button);
border: 1px solid var(--color-secondary); border: 1px solid var(--color-light-border);
box-shadow: none !important; box-shadow: none !important;
color: var(--color-text); color: var(--color-text);
} }
@ -1578,6 +1576,34 @@ a.ui.label:hover {
border-left: none; border-left: none;
} }
.ui.basic.buttons .button,
.ui.basic.button {
color: var(--color-text-light);
background: var(--color-light);
}
.ui.basic.buttons .button:hover,
.ui.basic.button:hover {
color: var(--color-text);
background: var(--color-hover);
}
.ui.basic.buttons .button:focus,
.ui.basic.button:focus,
.ui.basic.buttons .button:active,
.ui.basic.button:active,
.ui.basic.buttons .active.button,
.ui.basic.active.button,
.ui.basic.buttons .active.button:hover,
.ui.basic.active.button:hover {
color: var(--color-text);
background: var(--color-active);
}
.ui.labeled.button > .label {
border-color: var(--color-light-border);
}
.ui.blue.button, .ui.blue.button,
.ui.blue.buttons .button, .ui.blue.buttons .button,
.ui.primary.button, .ui.primary.button,
@ -1640,16 +1666,16 @@ a.ui.label:hover {
.ui.basic.labels .label, .ui.basic.labels .label,
.ui.basic.label { .ui.basic.label {
background: var(--color-label-basic); background: var(--color-light);
border-color: var(--color-label-border); border-color: var(--color-light-border);
color: var(--color-text); color: var(--color-text-light);
} }
.ui.basic.labels a.label:hover, .ui.basic.labels a.label:hover,
a.ui.basic.label:hover { a.ui.basic.label:hover {
color: var(--color-text); color: var(--color-text);
border-color: var(--color-label-border); border-color: var(--color-light-border);
background: var(--color-label-basic-hover); background: var(--color-hover);
} }
.ui.label > img { .ui.label > img {

26
web_src/less/_repository.less
View file

@ -861,7 +861,7 @@
.shabox { .shabox {
.sha.label { .sha.label {
margin: 0; margin: 0;
border: 1px solid #bbbbbb; border: 1px solid var(--color-light-border);
&.isSigned.isWarning { &.isSigned.isWarning {
border: 1px solid #db2828; border: 1px solid #db2828;
@ -1301,7 +1301,7 @@
#repo-files-table .sha.label, #repo-files-table .sha.label,
#rev-list .sha.label, #rev-list .sha.label,
.timeline-item.commits-list .singular-commit .sha.label { .timeline-item.commits-list .singular-commit .sha.label {
border: 1px solid #bbbbbb; border: 1px solid var(--color-light-border);
.ui.signature.avatar { .ui.signature.avatar {
height: 16px; height: 16px;
@ -1310,10 +1310,10 @@
} }
.detail.icon { .detail.icon {
background: #fafafa; background: var(--color-light);
margin: -6px -10px -4px 0; margin: -6px -10px -4px 0;
padding: 5px 4px 5px 6px; padding: 5px 4px 5px 6px;
border-left: 1px solid #bbbbbb; border-left: 1px solid var(--color-light-border);
border-top: 0; border-top: 0;
border-right: 0; border-right: 0;
border-bottom: 0; border-bottom: 0;
@ -2780,24 +2780,14 @@ tbody.commit-list {
word-break: break-all; word-break: break-all;
} }
.repo-header .repo-buttons { .repo-buttons {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.repo-buttons .disabled-repo-button .label { .repo-buttons button[disabled],
opacity: .5; .repo-buttons button[disabled] ~ .label {
} opacity: var(--opacity-disabled);
.repo-buttons .disabled-repo-button a.button {
opacity: .5;
cursor: not-allowed;
}
.repo-buttons .disabled-repo-button a.button:hover {
background: none !important;
color: rgba(0, 0, 0, .6) !important;
box-shadow: 0 0 0 1px var(--color-secondary) inset !important;
} }
.repo-buttons .ui.labeled.button > .label { .repo-buttons .ui.labeled.button > .label {

58
web_src/less/themes/theme-arc-green.less
View file

@ -91,13 +91,10 @@
--color-input-border: #454a57; --color-input-border: #454a57;
--color-input-border-hover: #505667; --color-input-border-hover: #505667;
--color-navbar: #2a2e3a; --color-navbar: #2a2e3a;
--color-label: #ffffff0d; --color-light: #00000028;
--color-label-hover: #ffffff20; --color-light-border: #ffffff28;
--color-label-basic: #00000030; --color-hover: #60606020;
--color-label-basic-hover: #40404030; --color-active: #60606040;
--color-label-border: #ffffff28;
--color-hover: #ffffff0d;
--color-active: #ffffff14;
--color-menu: #2e323e; --color-menu: #2e323e;
--color-card: #2e323e; --color-card: #2e323e;
--color-markdown-table-row: #ffffff06; --color-markdown-table-row: #ffffff06;
@ -271,34 +268,6 @@ a.ui.basic.green.label:hover {
background-color: #a0cc75; background-color: #a0cc75;
} }
.ui.basic.button,
.ui.basic.buttons .button {
color: var(--color-secondary-dark-6);
background: rgba(0, 0, 0, .1);
box-shadow: none;
}
.ui.basic.button:focus,
.ui.basic.button:hover,
.ui.basic.buttons .button:focus,
.ui.basic.buttons .button:hover {
color: #dbdbdb;
background: rgba(255, 255, 255, .08);
box-shadow: none;
}
.ui.labeled.button:not([class*="left labeled"]) > .label,
.ui[class*="left labeled"].button > .button {
background: var(--color-secondary);
border: 1px solid var(--color-secondary);
color: #87ab63;
}
.ui.button:hover {
background-color: var(--color-secondary);
color: #dbdbdb;
}
.ui.search > .results { .ui.search > .results {
background: #383c4a; background: #383c4a;
border-color: var(--color-secondary); border-color: var(--color-secondary);
@ -521,25 +490,6 @@ td.blob-excerpt {
color: #dbdbdb; color: #dbdbdb;
} }
.sha.label,
.repository #repo-files-table .sha.label,
.repository #commits-table td.sha .sha.label,
#rev-list .sha.label,
.repository .timeline-item.commits-list .singular-commit .sha.label,
.repository.view.issue .comment-list .timeline-item.commits-list .singular-commit .shabox .sha.label {
border-color: #505667;
}
.sha.label.isSigned .detail.icon,
.repository #commits-table td.sha .sha.label.isSigned .detail.icon,
#rev-list .sha.label.isSigned .detail.icon,
.repository #repo-files-table .sha.label.isSigned .detail.icon,
.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned .detail.icon,
.repository.view.issue .comment-list .timeline-item.commits-list .singular-commit .shabox .sha.label.isSigned .detail.icon {
background: none;
border-left-color: #888;
}
.repository .ui.attached.message.isSigned.isVerified { .repository .ui.attached.message.isSigned.isVerified {
background-color: #394829; background-color: #394829;
color: var(--color-secondary-dark-6); color: var(--color-secondary-dark-6);