Various style fixes (#13372)

- Add alpha variants for primary color
- Make timeline items solid background color
- Fix reaction styles recently regressed
- Fix diff header and make it flexbox
- Numerous smaller fixes for arc green
This commit is contained in:
silverwind 2020-10-31 13:17:32 +01:00 committed by GitHub
parent 47dd1cb7ae
commit de871f7c93
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 138 additions and 84 deletions

View file

@ -17,9 +17,11 @@
<h4>{{.i18n.Tr "repo.diff.data_not_available"}}</h4> <h4>{{.i18n.Tr "repo.diff.data_not_available"}}</h4>
{{else}} {{else}}
<div> <div>
<div class="diff-detail-box diff-box sticky"> <div class="diff-detail-box diff-box sticky df sb ac">
{{svg "octicon-diff"}} {{.i18n.Tr "repo.diff.stats_desc" .Diff.NumFiles .Diff.TotalAddition .Diff.TotalDeletion | Str2html}} <div class="diff-detail-stats df ac">
<div class="ui right"> {{svg "octicon-diff" 16 "mr-2"}}{{.i18n.Tr "repo.diff.stats_desc" .Diff.NumFiles .Diff.TotalAddition .Diff.TotalDeletion | Str2html}}
</div>
<div class="diff-detail-actions df ac">
{{if .PageIsPullFiles}} {{if .PageIsPullFiles}}
{{template "repo/diff/whitespace_dropdown" .}} {{template "repo/diff/whitespace_dropdown" .}}
{{else}} {{else}}

View file

@ -21,6 +21,15 @@
--color-primary-light-5: #b3cde7; --color-primary-light-5: #b3cde7;
--color-primary-light-6: #d9e6f3; --color-primary-light-6: #d9e6f3;
--color-primary-light-7: #f4f8fb; --color-primary-light-7: #f4f8fb;
--color-primary-alpha-10: #4183c419;
--color-primary-alpha-20: #4183c433;
--color-primary-alpha-30: #4183c44b;
--color-primary-alpha-40: #4183c466;
--color-primary-alpha-50: #4183c480;
--color-primary-alpha-60: #4183c499;
--color-primary-alpha-70: #4183c4b3;
--color-primary-alpha-80: #4183c4cc;
--color-primary-alpha-90: #4183c4e1;
--color-body: #fff; --color-body: #fff;
} }
@ -280,6 +289,10 @@ code,
margin: 0; margin: 0;
} }
#navbar .dropdown .avatar {
margin-right: 0 !important;
}
@media only screen and (max-width: 767px) { @media only screen and (max-width: 767px) {
#navbar:not(.shown) > *:not(:first-child) { #navbar:not(.shown) > *:not(:first-child) {
display: none; display: none;
@ -752,11 +765,6 @@ code,
} }
} }
.file-comment {
font: 12px var(--fonts-monospace);
color: rgba(0, 0, 0, .87);
}
.ui.floating.dropdown { .ui.floating.dropdown {
.overflow.menu { .overflow.menu {
.scrolling.menu.items { .scrolling.menu.items {
@ -1235,12 +1243,18 @@ i.icon.centerlock {
} }
.ui.blue.label, .ui.blue.label,
.ui.blue.labels .label, .ui.blue.labels .label {
.repository .segment.reactions .ui.label.basic.blue {
background-color: var(--color-primary) !important; background-color: var(--color-primary) !important;
border-color: var(--color-primary-dark-2) !important; border-color: var(--color-primary-dark-2) !important;
} }
.ui.basic.labels .blue.label,
.ui.ui.ui.basic.blue.label {
background: transparent;
border-color: var(--color-primary);
color: var(--color-primary);
}
.ui.label > img { .ui.label > img {
width: auto !important; width: auto !important;
vertical-align: middle; vertical-align: middle;

View file

@ -871,14 +871,14 @@
.badge { .badge {
width: 32px; width: 32px;
height: 32px; height: 32px;
background-color: #fff; background-color: #eee;
border: 2px solid #eee; border: 2px solid #eee;
border-radius: 50%; border-radius: 50%;
display: flex; display: flex;
float: left; float: left;
margin-left: -32px; margin-left: -32px;
margin-right: 8px; margin-right: 8px;
color: #444; color: #666;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -1666,8 +1666,8 @@
z-index: 8; z-index: 8;
margin-bottom: 10px; margin-bottom: 10px;
border-bottom: 1px solid #d4d4d5; border-bottom: 1px solid #d4d4d5;
padding-left: 5px; padding-left: 2px;
padding-right: 5px; padding-right: 2px;
} }
> div:after { > div:after {
@ -1676,6 +1676,15 @@
display: block; display: block;
} }
.diff-detail-stats strong {
margin-left: .25rem;
margin-right: .25rem;
}
.diff-detail-actions .btn-review {
margin-right: 0 !important;
}
span.status { span.status {
display: inline-block; display: inline-block;
width: 12px; width: 12px;
@ -2447,7 +2456,7 @@
} }
> .item:hover { > .item:hover {
background: #4183c4; background: var(--color-primary);
} }
} }
} }
@ -2458,7 +2467,7 @@
.ui.label { .ui.label {
max-height: 40px; max-height: 40px;
padding: 7px 18px; padding: 10px 18px !important;
display: flex !important; display: flex !important;
align-items: center; align-items: center;
border: 0; border: 0;
@ -2476,7 +2485,7 @@
} }
.ui.label.basic.blue { .ui.label.basic.blue {
background-color: #f1f8ff !important; background-color: var(--color-primary-alpha-10) !important;
border-color: inherit !important; border-color: inherit !important;
} }

View file

@ -129,7 +129,6 @@
} }
.file-comment { .file-comment {
font: 12px var(--fonts-monospace);
color: rgba(0, 0, 0, .87); color: rgba(0, 0, 0, .87);
} }

View file

@ -1,6 +1,7 @@
.df { display: flex; } .df { display: flex; }
.ac { align-items: center; } .ac { align-items: center; }
.jc { justify-content: center; } .jc { justify-content: center; }
.sb { justify-content: space-between; }
.m-0 { margin: 0 !important; } .m-0 { margin: 0 !important; }
.m-1 { margin: .125rem !important; } .m-1 { margin: .125rem !important; }

View file

@ -14,6 +14,15 @@
--color-primary-light-5: #364626; --color-primary-light-5: #364626;
--color-primary-light-6: #1b2313; --color-primary-light-6: #1b2313;
--color-primary-light-7: #080b06; --color-primary-light-7: #080b06;
--color-primary-alpha-10: #87ab6319;
--color-primary-alpha-20: #87ab6333;
--color-primary-alpha-30: #87ab634b;
--color-primary-alpha-40: #87ab6366;
--color-primary-alpha-50: #87ab6380;
--color-primary-alpha-60: #87ab6399;
--color-primary-alpha-70: #87ab63b3;
--color-primary-alpha-80: #87ab63cc;
--color-primary-alpha-90: #87ab63e1;
--color-body: #383c4a; --color-body: #383c4a;
} }
@ -420,7 +429,7 @@
} }
body { body {
color: #9e9e9e; color: #a5a5a8;
} }
::placeholder { ::placeholder {
@ -456,6 +465,10 @@ body {
color: #a0cc75; color: #a0cc75;
} }
.repository .milestone.list > .item {
border-bottom-color: #4c505c;
}
.repository .milestone.list > .item > a { .repository .milestone.list > .item > a {
color: #87ab63; color: #87ab63;
} }
@ -465,7 +478,7 @@ body {
} }
.repository.release #release-list { .repository.release #release-list {
border-top: 1px solid #4c505c; border-top-color: #4c505c;
} }
.repository .milestone.list > .item .operate > a { .repository .milestone.list > .item .operate > a {
@ -494,7 +507,7 @@ body {
} }
.ui.secondary.menu .item { .ui.secondary.menu .item {
color: #9e9e9e; color: #a5a5a8;
} }
.following.bar .top.menu a.item:hover { .following.bar .top.menu a.item:hover {
@ -543,7 +556,7 @@ body {
} }
.ui.menu .ui.dropdown .menu > .item { .ui.menu .ui.dropdown .menu > .item {
color: #9e9e9e !important; color: #a5a5a8 !important;
} }
.ui.menu .ui.dropdown .menu > .item:hover, .ui.menu .ui.dropdown .menu > .item:hover,
@ -657,7 +670,7 @@ a.ui.basic.green.label:hover {
.ui.menu .item { .ui.menu .item {
background: #404552; background: #404552;
color: #9e9e9e; color: #a5a5a8;
} }
.ui.menu .item.disabled, .ui.menu .item.disabled,
@ -670,7 +683,7 @@ a.ui.basic.green.label:hover {
.ui.disabled.checkbox label, .ui.disabled.checkbox label,
.ui.checkbox input[disabled] ~ label { .ui.checkbox input[disabled] ~ label {
color: #9e9e9e; color: #a5a5a8;
} }
.ui.pagination.menu .active.item { .ui.pagination.menu .active.item {
@ -684,15 +697,12 @@ a.ui.basic.green.label:hover {
.ui.header, .ui.header,
.ui.breadcrumb .divider { .ui.breadcrumb .divider {
color: #9e9e9e; color: #a5a5a8;
} }
.repository .segment.reactions .ui.label.basic.blue { .ui.divider:not(.vertical):not(.horizontal) {
border-color: #404552 !important; border-bottom-color: #4b505f;
} border-top-color: transparent;
.repository .select-reaction .item:hover {
background: #305020 !important;
} }
.ui.menu .item > .label { .ui.menu .item > .label {
@ -713,7 +723,7 @@ a.ui.basic.green.label:hover {
.ui.form input[type="time"], .ui.form input[type="time"],
.ui.form input[type="url"], .ui.form input[type="url"],
.ui.selection.dropdown { .ui.selection.dropdown {
color: #9e9e9e; color: #a5a5a8;
background: #404552; background: #404552;
border: 1px solid #4b505f; border: 1px solid #4b505f;
} }
@ -829,7 +839,7 @@ a.ui.basic.green.label:hover {
.ui.basic.button, .ui.basic.button,
.ui.basic.buttons .button { .ui.basic.buttons .button {
color: #9e9e9e; color: #a5a5a8;
background: rgba(0, 0, 0, .06); background: rgba(0, 0, 0, .06);
box-shadow: none; box-shadow: none;
} }
@ -844,8 +854,7 @@ a.ui.basic.green.label:hover {
} }
.ui.blue.label, .ui.blue.label,
.ui.blue.labels .label, .ui.blue.labels .label {
.repository .segment.reactions .ui.label.basic.blue {
background-color: var(--color-primary-light-2) !important; background-color: var(--color-primary-light-2) !important;
border-color: var(--color-primary) !important; border-color: var(--color-primary) !important;
} }
@ -915,18 +924,18 @@ a.ui.basic.green.label:hover {
} }
.ui.tabular.menu { .ui.tabular.menu {
border-bottom-color: rgba(255, 255, 255, .1); border-bottom-color: #4c505c;
.item.active { .item.active {
border-top-color: #404552; border-top-color: #4c505c;
border-left-color: #404552; border-left-color: #4c505c;
border-right-color: #404552; border-right-color: #4c505c;
background: #353945; background: #383c4a;
color: #dbdbdb; color: #dbdbdb;
} }
.item { .item {
color: #9e9e9e; color: #a5a5a8;
} }
.item:hover { .item:hover {
@ -1001,12 +1010,12 @@ a.ui.basic.green.label:hover {
.ui.segment { .ui.segment {
background: #353945; background: #353945;
color: #9e9e9e !important; color: #a5a5a8 !important;
border: 1px solid #404552; border: 1px solid #404552;
} }
.ui.list > .item > .content { .ui.list > .item > .content {
color: #9e9e9e !important; color: #a5a5a8 !important;
} }
.ui.active.button:active, .ui.active.button:active,
@ -1033,7 +1042,7 @@ a.ui.basic.green.label:hover {
} }
.ui.dropdown .menu > .item { .ui.dropdown .menu > .item {
color: #9e9e9e; color: #a5a5a8;
} }
.ui.attached.segment { .ui.attached.segment {
@ -1053,7 +1062,7 @@ a.ui.basic.green.label:hover {
} }
.ui .comment .actions a { .ui .comment .actions a {
color: #9e9e9e !important; color: #a5a5a8 !important;
} }
.ui .comment .actions a.active, .ui .comment .actions a.active,
@ -1078,18 +1087,24 @@ a.ui.basic.green.label:hover {
.merge-section { .merge-section {
background-color: #404552; background-color: #404552;
border-top: 1px solid #353944; border-color: #505667;
} }
.header:after, .header:after {
> .merge-section.no-header:after {
border-right-color: #404552; border-right-color: #404552;
} }
.header:before, .merge-section.no-header:after {
> .merge-section.no-header:before {
border-right-color: #404552; border-right-color: #404552;
} }
.header:before {
border-right-color: #404552;
}
.merge-section.no-header:before {
border-right-color: #505667;
}
} }
.repository.new.issue .comment.form .content:after { .repository.new.issue .comment.form .content:after {
@ -1102,17 +1117,17 @@ a.ui.basic.green.label:hover {
.repository.view.issue .comment-list:not(.prevent-before-timeline):before, .repository.view.issue .comment-list:not(.prevent-before-timeline):before,
.repository.view.issue .comment-list .timeline:before { .repository.view.issue .comment-list .timeline:before {
background-color: #3b4954; background-color: #4c505c;
} }
.repository.view.issue .comment-list .timeline-item .badge { .repository.view.issue .comment-list .timeline-item .badge {
background-color: #383c4a; background-color: #4c505c;
border-color: #3b4954; border-color: #4c505c;
color: #9e9e9e; color: #a5a5a8;
} }
.repository.view.issue .comment-list .timeline-item .badge.badge-commit { .repository.view.issue .comment-list .timeline-item .badge.badge-commit {
background: radial-gradient(#383c4a 40%, transparent 40%) no-repeat; background: radial-gradient(var(--color-body) 40%, transparent 40%) no-repeat;
} }
.repository.file.editor .commit-form-wrapper .commit-form { .repository.file.editor .commit-form-wrapper .commit-form {
@ -1142,6 +1157,13 @@ a.ui.basic.green.label:hover {
box-shadow: 0 0 0 1px #13ae38 inset !important; box-shadow: 0 0 0 1px #13ae38 inset !important;
} }
.ui.green.buttons .active.button,
.ui.green.buttons .active.button:active,
.ui.green.active.button,
.ui.green.button .active.button:active {
background: #87ab63;
}
.ui .info.segment.top { .ui .info.segment.top {
background-color: #404552 !important; background-color: #404552 !important;
} }
@ -1245,7 +1267,7 @@ td.blob-hunk {
} }
.ui .text.black { .ui .text.black {
color: #9e9e9e; color: #a5a5a8;
} }
.ui .text.black:hover { .ui .text.black:hover {
@ -1285,7 +1307,7 @@ td.blob-hunk {
.ui.checkbox label, .ui.checkbox label,
.ui.checkbox + label, .ui.checkbox + label,
.ui.form .field > label { .ui.form .field > label {
color: #9e9e9e; color: #a5a5a8;
} }
.ui.form .inline.field > label, .ui.form .inline.field > label,
@ -1293,7 +1315,7 @@ td.blob-hunk {
.ui.form .inline.fields .field > label, .ui.form .inline.fields .field > label,
.ui.form .inline.fields .field > p, .ui.form .inline.fields .field > p,
.ui.form .inline.fields > label { .ui.form .inline.fields > label {
color: #9e9e9e; color: #a5a5a8;
} }
.user.settings .email.list .item:not(:first-child) { .user.settings .email.list .item:not(:first-child) {
@ -1469,7 +1491,7 @@ input {
} }
.ui.selection.visible.dropdown > .text:not(.default) { .ui.selection.visible.dropdown > .text:not(.default) {
color: #9e9e9e; color: #a5a5a8;
} }
.ui.positive.message { .ui.positive.message {
@ -1514,7 +1536,7 @@ input {
.ui.list .list > .item .description, .ui.list .list > .item .description,
.ui.list > .item .description { .ui.list > .item .description {
color: #9e9e9e; color: #a5a5a8;
} }
.ui.user.list .item .description a { .ui.user.list .item .description a {
@ -1541,7 +1563,7 @@ input {
} }
.lines-num { .lines-num {
color: #9e9e9e !important; color: #a5a5a8 !important;
border-color: #2d2d2d !important; border-color: #2d2d2d !important;
} }
@ -1574,9 +1596,10 @@ a.ui.labels .label:hover {
color: #dbdbdb !important; color: #dbdbdb !important;
} }
.repository #commits-table td.sha .sha.label, .sha.label,
.repository #repo-files-table .sha.label { .repository #repo-files-table .sha.label,
border-color: #888; .repository.view.issue .comment-list .timeline-item.commits-list .singular-commit .shabox .sha.label {
border-color: #4c505c;
} }
.repository #commits-table td.sha .sha.label.isSigned .detail.icon, .repository #commits-table td.sha .sha.label.isSigned .detail.icon,
@ -1588,12 +1611,12 @@ a.ui.labels .label:hover {
.repository .ui.attached.message.isSigned.isVerified { .repository .ui.attached.message.isSigned.isVerified {
background-color: #394829; background-color: #394829;
color: #9e9e9e; color: #a5a5a8;
&.message { &.message {
color: #87ab63; color: #87ab63;
.ui.text { .ui.text {
color: #9e9e9e; color: #a5a5a8;
} }
.pull-right { .pull-right {
color: #87ab63; color: #87ab63;
@ -1603,11 +1626,11 @@ a.ui.labels .label:hover {
.repository .ui.attached.message.isSigned.isVerifiedUntrusted { .repository .ui.attached.message.isSigned.isVerifiedUntrusted {
background-color: #4a3903; background-color: #4a3903;
color: #9e9e9e; color: #a5a5a8;
&.message { &.message {
color: #c2c193; color: #c2c193;
.ui.text { .ui.text {
color: #9e9e9e; color: #a5a5a8;
} }
.pull-right, .pull-right,
a { a {
@ -1618,11 +1641,11 @@ a.ui.labels .label:hover {
.repository .ui.attached.message.isSigned.isVerifiedUnmatched { .repository .ui.attached.message.isSigned.isVerifiedUnmatched {
background-color: #4e3321; background-color: #4e3321;
color: #9e9e9e; color: #a5a5a8;
&.message { &.message {
color: #c2a893; color: #c2a893;
.ui.text { .ui.text {
color: #9e9e9e; color: #a5a5a8;
} }
.pull-right, .pull-right,
a { a {
@ -1639,7 +1662,7 @@ a.ui.labels .label:hover {
color: #d07d7d; color: #d07d7d;
} }
.pull-right { .pull-right {
color: #9e9e9e; color: #a5a5a8;
} }
} }
} }
@ -1695,7 +1718,7 @@ a.ui.labels .label:hover {
.repository .labelspage .item a:hover, .repository .labelspage .item a:hover,
.organization.settings .labelspage .item a:hover { .organization.settings .labelspage .item a:hover {
color: #9e9e9e; color: #a5a5a8;
} }
#git-graph-container li a { #git-graph-container li a {
@ -1707,7 +1730,7 @@ a.ui.labels .label:hover {
} }
.ui.header .sub.header { .ui.header .sub.header {
color: #9e9e9e; color: #a5a5a8;
} }
.ui.dividing.header { .ui.dividing.header {
@ -1765,7 +1788,7 @@ a.ui.labels .label:hover {
} }
&.sticky { &.sticky {
border-bottom-color: rgba(255, 255, 255, .1); border-bottom-color: #4c505c;
} }
} }
@ -1809,7 +1832,7 @@ a.ui.labels .label:hover {
} }
.file-comment { .file-comment {
color: #888888; color: #a5a5a8;
} }
.ui.comments .comment { .ui.comments .comment {
@ -1822,7 +1845,7 @@ a.ui.labels .label:hover {
} }
.text { .text {
color: #9e9e9e; color: #a5a5a8;
} }
} }
@ -1858,7 +1881,7 @@ a.ui.labels .label:hover {
.activity-bar-graph { .activity-bar-graph {
background-color: #a0cc75; background-color: #a0cc75;
color: #9e9e9e; color: #a5a5a8;
} }
/* code mirror dark theme */ /* code mirror dark theme */
@ -1870,7 +1893,7 @@ a.ui.labels .label:hover {
border-top: 0; border-top: 0;
div.CodeMirror-cursor { div.CodeMirror-cursor {
border-left: 1px solid #9e9e9e; border-left: 1px solid #a5a5a8;
} }
.CodeMirror-gutters { .CodeMirror-gutters {
@ -1969,12 +1992,18 @@ a.ui.labels .label:hover {
.ui.popup { .ui.popup {
background-color: #383c4a; background-color: #383c4a;
color: #9e9e9e; color: #a5a5a8;
border-color: #9e9e9e; border-color: #4c505c;
}
&.top::before { .ui.popup.top:before,
.ui.popup.bottom:before {
background-color: #383c4a; background-color: #383c4a;
} }
.ui.bottom.left.popup:before,
.ui.bottom.right.popup:before {
box-shadow: -1px -1px 0 0 #4c505c;
} }
.markdown:not(code) h1 { .markdown:not(code) h1 {
@ -1995,7 +2024,7 @@ footer .container .links > * {
} }
.repository.file.list #repo-files-table tbody .svg { .repository.file.list #repo-files-table tbody .svg {
color: #9e9e9e; color: #a5a5a8;
} }
.repository.release #release-list > li .detail { .repository.release #release-list > li .detail {