Fix colors and triangles in issues (#13463)

- Fix misaligned triangles
- Fix triangle and header background colors
- Adjust timeline color
This commit is contained in:
silverwind 2020-11-08 17:29:18 +01:00 committed by GitHub
parent f719e2e806
commit 8411cb567a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 40 additions and 55 deletions

View File

@ -57,7 +57,11 @@
--color-secondary-alpha-70: #dededeb3; --color-secondary-alpha-70: #dededeb3;
--color-secondary-alpha-80: #dededecc; --color-secondary-alpha-80: #dededecc;
--color-secondary-alpha-90: #dededee1; --color-secondary-alpha-90: #dededee1;
--color-body: #fff; --color-body: #ffffff;
--color-text: #212121;
--color-box-header: #f7f7f7;
--color-box-body: #ffffff;
--color-timeline: #ececec;
} }
:root:lang(ja) { :root:lang(ja) {
@ -1336,6 +1340,24 @@ i.icon.centerlock {
visibility: hidden; visibility: hidden;
} }
.ui.segment,
.ui.segments,
.ui.attached.segment {
background: var(--color-box-body);
color: var(--color-text);
border-color: var(--color-secondary);
}
.ui.attached.header {
background: var(--color-box-header);
border-color: var(--color-secondary);
.right .button {
padding: 8px 10px;
font-weight: normal;
}
}
/* https://github.com/go-gitea/gitea/issues/10210 */ /* https://github.com/go-gitea/gitea/issues/10210 */
.ui.attached.segment ~ .ui.top.attached.header { .ui.attached.segment ~ .ui.top.attached.header {
margin-top: 1rem; margin-top: 1rem;

View File

@ -7,15 +7,6 @@
} }
} }
.ui.attached.header {
background: #f0f0f0;
.right .button {
padding: 8px 10px;
font-weight: normal;
}
}
@create-page-form-input-padding: 250px !important; @create-page-form-input-padding: 250px !important;
#create-page-form { #create-page-form {
form { form {

View File

@ -781,7 +781,7 @@
bottom: 0; bottom: 0;
left: 96px; left: 96px;
width: 2px; width: 2px;
background-color: #f3f3f3; background-color: var(--color-timeline);
z-index: -1; z-index: -1;
} }
@ -801,7 +801,7 @@
bottom: 0; bottom: 0;
left: 30px; left: 30px;
width: 2px; width: 2px;
background-color: #f3f3f3; background-color: var(--color-timeline);
z-index: -1; z-index: -1;
} }
} }
@ -848,14 +848,14 @@
.badge.badge-commit { .badge.badge-commit {
border-color: transparent; border-color: transparent;
background: radial-gradient(white 40%, transparent 40%) no-repeat; background: radial-gradient(var(--color-body) 40%, transparent 40%) no-repeat;
} }
.badge { .badge {
width: 32px; width: 32px;
height: 32px; height: 32px;
background-color: #eee; background-color: var(--color-timeline);
border: 2px solid #eee; border: 2px solid var(--color-timeline);
border-radius: 50%; border-radius: 50%;
display: flex; display: flex;
float: left; float: left;
@ -1002,7 +1002,7 @@
border-radius: var(--border-radius); border-radius: var(--border-radius);
> .merge-section { > .merge-section {
background-color: #f7f7f7; background-color: var(--color-box-body);
.item { .item {
padding: .25rem 0; padding: .25rem 0;
@ -1677,7 +1677,7 @@
.diff-file-box { .diff-file-box {
.header { .header {
background-color: #f7f7f7; background-color: var(--color-box-header);
} }
.file-body.file-code { .file-body.file-code {
@ -2727,7 +2727,7 @@
> .header, > .header,
.segment { .segment {
box-shadow: 0 1px 2px 0 var(--color-secondary); box-shadow: 0 1px 2px 0 var(--color-box-header);
} }
} }
@ -2787,7 +2787,7 @@
.ui.vertical.menu { .ui.vertical.menu {
.header.item { .header.item {
font-size: 1.1em; font-size: 1.1em;
background: #f0f0f0; background: var(--color-box-header);
} }
} }
@ -2820,7 +2820,8 @@
margin: 0 !important; margin: 0 !important;
position: relative; position: relative;
color: #767676; color: #767676;
background-color: #f7f7f7; min-height: 41px;
background-color: var(--color-box-header);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
@ -2932,7 +2933,7 @@
} }
&:after { &:after {
border-right-color: #f7f7f7; border-right-color: var(--color-box-header);
border-width: 8px; border-width: 8px;
margin-top: -8px; margin-top: -8px;
} }

View File

@ -51,6 +51,10 @@
--color-secondary-alpha-80: #454a57cc; --color-secondary-alpha-80: #454a57cc;
--color-secondary-alpha-90: #454a57e1; --color-secondary-alpha-90: #454a57e1;
--color-body: #383c4a; --color-body: #383c4a;
--color-box-header: #454a57;
--color-box-body: #353945;
--color-text: #9aa0af;
--color-timeline: #454a57;
} }
/* Background */ /* Background */
@ -561,12 +565,6 @@ body {
color: #fff; color: #fff;
} }
.ui.attached.header {
background: var(--color-secondary);
border-color: var(--color-secondary);
color: #dbdbdb;
}
.ui.attached.table { .ui.attached.table {
border: 1px solid #304251; border: 1px solid #304251;
} }
@ -749,7 +747,7 @@ a.ui.basic.green.label:hover {
} }
.ui.menu .item > .label { .ui.menu .item > .label {
background: #565454; background: #505667;
} }
.ui.form input:not([type]), .ui.form input:not([type]),
@ -1049,17 +1047,6 @@ a.ui.basic.green.label:hover {
color: #dbdbdb; color: #dbdbdb;
} }
.ui.segment {
background: #353945;
color: var(--color-secondary-dark-6) !important;
}
.ui.segment,
.ui.segments,
.ui.attached.segment {
border-color: var(--color-secondary);
}
.ui.list > .item > .content { .ui.list > .item > .content {
color: var(--color-secondary-dark-6) !important; color: var(--color-secondary-dark-6) !important;
} }
@ -1118,11 +1105,6 @@ a.ui.basic.green.label:hover {
border-color: var(--color-secondary); border-color: var(--color-secondary);
} }
.merge-section {
background-color: var(--color-secondary);
border-color: #505667;
}
.header:after { .header:after {
border-right-color: var(--color-secondary); border-right-color: var(--color-secondary);
} }
@ -1148,21 +1130,10 @@ a.ui.basic.green.label:hover {
border-right-color: #353945; border-right-color: #353945;
} }
.repository.view.issue .comment-list:not(.prevent-before-timeline):before,
.repository.view.issue .comment-list .timeline:before {
background-color: var(--color-secondary);
}
.repository.view.issue .comment-list .timeline-item .badge { .repository.view.issue .comment-list .timeline-item .badge {
background-color: var(--color-secondary);
border-color: var(--color-secondary);
color: #ccc; color: #ccc;
} }
.repository.view.issue .comment-list .timeline-item .badge.badge-commit {
background: radial-gradient(var(--color-body) 40%, transparent 40%) no-repeat;
}
.comment-header-right a { .comment-header-right a {
color: var(--color-secondary-dark-6); color: var(--color-secondary-dark-6);
} }