* 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 ruletags/v1.15.0-dev
@@ -45,7 +45,7 @@ | |||
<form method="post" action="{{$.RepoLink}}/action/{{if $.IsWatchingRepo}}un{{end}}watch?redirect_to={{$.Link}}"> | |||
{{$.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}}> | |||
<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}} | |||
</button> | |||
<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}}"> | |||
{{$.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}}> | |||
<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}} | |||
</button> | |||
<a class="ui basic label" href="{{.Link}}/stars"> | |||
@@ -65,8 +65,8 @@ | |||
</div> | |||
</form> | |||
{{if and (not .IsEmpty) ($.Permission.CanRead $.UnitTypeCode)}} | |||
<div class="ui labeled button {{if and ($.IsSigned) (not $.CanSignedUserFork)}}disabled-repo-button{{end}}" 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"> | |||
<div class="ui labeled button" tabindex="0"> | |||
<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"}} | |||
</a> | |||
<a class="ui basic label" href="{{.Link}}/forks"> |
@@ -4,3 +4,4 @@ | |||
@pageFont: var(--fonts-regular); | |||
@bold: 500; | |||
@useCustomScrollbars: false; | |||
@disabledOpacity: var(--opacity-disabled); |
@@ -578,7 +578,7 @@ | |||
.ui.disabled.button:hover, | |||
.ui.disabled.active.button { | |||
cursor: default; | |||
opacity: 0.45 !important; | |||
opacity: var(--opacity-disabled) !important; | |||
background-image: none; | |||
box-shadow: none; | |||
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 .flag { | |||
opacity: 0.45; | |||
opacity: var(--opacity-disabled); | |||
} | |||
.ui.active.search.dropdown input.search:focus + .text { | |||
@@ -9734,7 +9734,7 @@ select.ui.dropdown { | |||
.ui.dropdown .menu > .disabled.item { | |||
cursor: default; | |||
pointer-events: none; | |||
opacity: 0.45; | |||
opacity: var(--opacity-disabled); | |||
} | |||
/******************************* | |||
@@ -12013,12 +12013,12 @@ select.ui.dropdown { | |||
.ui.form .disabled.field, | |||
.ui.form .field :disabled { | |||
pointer-events: none; | |||
opacity: 0.45; | |||
opacity: var(--opacity-disabled); | |||
} | |||
.ui.form .field.disabled > label, | |||
.ui.form .fields.disabled > label { | |||
opacity: 0.45; | |||
opacity: var(--opacity-disabled); | |||
} | |||
.ui.form .field.disabled :disabled { | |||
@@ -15101,7 +15101,7 @@ h6.ui.header .sub.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.icons { | |||
opacity: 0.45; | |||
opacity: var(--opacity-disabled); | |||
cursor: default; | |||
pointer-events: none; | |||
} | |||
@@ -24650,7 +24650,7 @@ img.ui.image { | |||
.ui.disabled.images, | |||
.ui.disabled.image { | |||
cursor: default; | |||
opacity: 0.45; | |||
opacity: var(--opacity-disabled); | |||
} | |||
/******************************* | |||
@@ -25008,7 +25008,7 @@ img.ui.bordered.image { | |||
.ui.disabled.input, | |||
.ui.input:not(.disabled) input[disabled] { | |||
opacity: 0.45; | |||
opacity: var(--opacity-disabled); | |||
} | |||
.ui.disabled.input > input, | |||
@@ -37183,7 +37183,7 @@ template { | |||
.ui.disabled.search { | |||
cursor: default; | |||
pointer-events: none; | |||
opacity: 0.45; | |||
opacity: var(--opacity-disabled); | |||
} | |||
/******************************* | |||
@@ -37984,7 +37984,7 @@ template { | |||
---------------*/ | |||
.ui.disabled.segment { | |||
opacity: 0.45; | |||
opacity: var(--opacity-disabled); | |||
color: rgba(40, 40, 40, 0.3); | |||
} | |||
@@ -41783,7 +41783,7 @@ span.ui.warning.text { | |||
} | |||
span.ui.disabled.text { | |||
opacity: 0.45; | |||
opacity: var(--opacity-disabled); | |||
} | |||
/* Sizes */ |
@@ -6,6 +6,7 @@ | |||
/* other variables */ | |||
--fonts-regular: var(--fonts-proportional), var(--fonts-emoji); | |||
--border-radius: .28571429rem; | |||
--opacity-disabled: .55; | |||
--color-primary: #4183c4; | |||
--color-primary-dark-1: #3876b3; | |||
--color-primary-dark-2: #31699f; | |||
@@ -96,13 +97,10 @@ | |||
--color-input-border: #dedede; | |||
--color-input-border-hover: #cecece; | |||
--color-navbar: #f8f8f8; | |||
--color-label: #00000010; | |||
--color-label-hover: #00000015; | |||
--color-label-basic: #00000008; | |||
--color-label-basic-hover: #00000015; | |||
--color-label-border: #00000018; | |||
--color-hover: #0000000a; | |||
--color-active: #00000010; | |||
--color-light: #00000004; | |||
--color-light-border: #0000001d; | |||
--color-hover: #0000000d; | |||
--color-active: #00000012; | |||
--color-menu: #ffffff; | |||
--color-card: #ffffff; | |||
--color-markdown-table-row: #00000008; | |||
@@ -1382,13 +1380,13 @@ i.icon.centerlock { | |||
.ui.label { | |||
padding: .3em .5em; | |||
background: var(--color-label); | |||
background: var(--color-light); | |||
color: var(--color-text-light); | |||
} | |||
.ui.labels a.label:hover, | |||
a.ui.label:hover { | |||
background: var(--color-label-hover); | |||
background: var(--color-hover); | |||
color: var(--color-text); | |||
} | |||
@@ -1556,7 +1554,7 @@ a.ui.label:hover { | |||
.ui.button { | |||
background: var(--color-button); | |||
border: 1px solid var(--color-secondary); | |||
border: 1px solid var(--color-light-border); | |||
box-shadow: none !important; | |||
color: var(--color-text); | |||
} | |||
@@ -1578,6 +1576,34 @@ a.ui.label:hover { | |||
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.buttons .button, | |||
.ui.primary.button, | |||
@@ -1640,16 +1666,16 @@ a.ui.label:hover { | |||
.ui.basic.labels .label, | |||
.ui.basic.label { | |||
background: var(--color-label-basic); | |||
border-color: var(--color-label-border); | |||
color: var(--color-text); | |||
background: var(--color-light); | |||
border-color: var(--color-light-border); | |||
color: var(--color-text-light); | |||
} | |||
.ui.basic.labels a.label:hover, | |||
a.ui.basic.label:hover { | |||
color: var(--color-text); | |||
border-color: var(--color-label-border); | |||
background: var(--color-label-basic-hover); | |||
border-color: var(--color-light-border); | |||
background: var(--color-hover); | |||
} | |||
.ui.label > img { |
@@ -861,7 +861,7 @@ | |||
.shabox { | |||
.sha.label { | |||
margin: 0; | |||
border: 1px solid #bbbbbb; | |||
border: 1px solid var(--color-light-border); | |||
&.isSigned.isWarning { | |||
border: 1px solid #db2828; | |||
@@ -1301,7 +1301,7 @@ | |||
#repo-files-table .sha.label, | |||
#rev-list .sha.label, | |||
.timeline-item.commits-list .singular-commit .sha.label { | |||
border: 1px solid #bbbbbb; | |||
border: 1px solid var(--color-light-border); | |||
.ui.signature.avatar { | |||
height: 16px; | |||
@@ -1310,10 +1310,10 @@ | |||
} | |||
.detail.icon { | |||
background: #fafafa; | |||
background: var(--color-light); | |||
margin: -6px -10px -4px 0; | |||
padding: 5px 4px 5px 6px; | |||
border-left: 1px solid #bbbbbb; | |||
border-left: 1px solid var(--color-light-border); | |||
border-top: 0; | |||
border-right: 0; | |||
border-bottom: 0; | |||
@@ -2780,24 +2780,14 @@ tbody.commit-list { | |||
word-break: break-all; | |||
} | |||
.repo-header .repo-buttons { | |||
.repo-buttons { | |||
display: flex; | |||
align-items: center; | |||
} | |||
.repo-buttons .disabled-repo-button .label { | |||
opacity: .5; | |||
} | |||
.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 button[disabled], | |||
.repo-buttons button[disabled] ~ .label { | |||
opacity: var(--opacity-disabled); | |||
} | |||
.repo-buttons .ui.labeled.button > .label { |
@@ -91,13 +91,10 @@ | |||
--color-input-border: #454a57; | |||
--color-input-border-hover: #505667; | |||
--color-navbar: #2a2e3a; | |||
--color-label: #ffffff0d; | |||
--color-label-hover: #ffffff20; | |||
--color-label-basic: #00000030; | |||
--color-label-basic-hover: #40404030; | |||
--color-label-border: #ffffff28; | |||
--color-hover: #ffffff0d; | |||
--color-active: #ffffff14; | |||
--color-light: #00000028; | |||
--color-light-border: #ffffff28; | |||
--color-hover: #60606020; | |||
--color-active: #60606040; | |||
--color-menu: #2e323e; | |||
--color-card: #2e323e; | |||
--color-markdown-table-row: #ffffff06; | |||
@@ -271,34 +268,6 @@ a.ui.basic.green.label:hover { | |||
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 { | |||
background: #383c4a; | |||
border-color: var(--color-secondary); | |||
@@ -521,25 +490,6 @@ td.blob-excerpt { | |||
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 { | |||
background-color: #394829; | |||
color: var(--color-secondary-dark-6); |