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
This commit is contained in:
silverwind
GitHub
parent
dd08853b10
commit
fe403725f4
6 changed files with 70 additions and 103 deletions
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue