third_party
/
gitea
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 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
tokarchuk/v1.17
silverwind 4 years ago 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 all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 8
      templates/repo/header.tmpl
  2. 1
      web_src/fomantic/_site/globals/site.variables
  3. 24
      web_src/fomantic/build/semantic.css
  4. 56
      web_src/less/_base.less
  5. 26
      web_src/less/_repository.less
  6. 58
      web_src/less/themes/theme-arc-green.less

8
templates/repo/header.tmpl
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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);

Write Preview
Loading…
Cancel
Save