From 8411cb567a5e0fc807376ab09915378baefbc78f Mon Sep 17 00:00:00 2001 From: silverwind Date: Sun, 8 Nov 2020 17:29:18 +0100 Subject: [PATCH] Fix colors and triangles in issues (#13463) - Fix misaligned triangles - Fix triangle and header background colors - Adjust timeline color --- web_src/less/_base.less | 24 ++++++++++++++- web_src/less/_form.less | 9 ------ web_src/less/_repository.less | 23 +++++++------- web_src/less/themes/theme-arc-green.less | 39 +++--------------------- 4 files changed, 40 insertions(+), 55 deletions(-) diff --git a/web_src/less/_base.less b/web_src/less/_base.less index 8fbedcf6a..7a757fd92 100644 --- a/web_src/less/_base.less +++ b/web_src/less/_base.less @@ -57,7 +57,11 @@ --color-secondary-alpha-70: #dededeb3; --color-secondary-alpha-80: #dededecc; --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) { @@ -1336,6 +1340,24 @@ i.icon.centerlock { 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 */ .ui.attached.segment ~ .ui.top.attached.header { margin-top: 1rem; diff --git a/web_src/less/_form.less b/web_src/less/_form.less index 4c0d1efe0..666e7fa99 100644 --- a/web_src/less/_form.less +++ b/web_src/less/_form.less @@ -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 { form { diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less index 9b4383c14..0a2772a79 100644 --- a/web_src/less/_repository.less +++ b/web_src/less/_repository.less @@ -781,7 +781,7 @@ bottom: 0; left: 96px; width: 2px; - background-color: #f3f3f3; + background-color: var(--color-timeline); z-index: -1; } @@ -801,7 +801,7 @@ bottom: 0; left: 30px; width: 2px; - background-color: #f3f3f3; + background-color: var(--color-timeline); z-index: -1; } } @@ -848,14 +848,14 @@ .badge.badge-commit { border-color: transparent; - background: radial-gradient(white 40%, transparent 40%) no-repeat; + background: radial-gradient(var(--color-body) 40%, transparent 40%) no-repeat; } .badge { width: 32px; height: 32px; - background-color: #eee; - border: 2px solid #eee; + background-color: var(--color-timeline); + border: 2px solid var(--color-timeline); border-radius: 50%; display: flex; float: left; @@ -1002,7 +1002,7 @@ border-radius: var(--border-radius); > .merge-section { - background-color: #f7f7f7; + background-color: var(--color-box-body); .item { padding: .25rem 0; @@ -1677,7 +1677,7 @@ .diff-file-box { .header { - background-color: #f7f7f7; + background-color: var(--color-box-header); } .file-body.file-code { @@ -2727,7 +2727,7 @@ > .header, .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 { .header.item { font-size: 1.1em; - background: #f0f0f0; + background: var(--color-box-header); } } @@ -2820,7 +2820,8 @@ margin: 0 !important; position: relative; color: #767676; - background-color: #f7f7f7; + min-height: 41px; + background-color: var(--color-box-header); display: flex; justify-content: space-between; align-items: center; @@ -2932,7 +2933,7 @@ } &:after { - border-right-color: #f7f7f7; + border-right-color: var(--color-box-header); border-width: 8px; margin-top: -8px; } diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less index f1dec8467..c7fd7e4a2 100644 --- a/web_src/less/themes/theme-arc-green.less +++ b/web_src/less/themes/theme-arc-green.less @@ -51,6 +51,10 @@ --color-secondary-alpha-80: #454a57cc; --color-secondary-alpha-90: #454a57e1; --color-body: #383c4a; + --color-box-header: #454a57; + --color-box-body: #353945; + --color-text: #9aa0af; + --color-timeline: #454a57; } /* Background */ @@ -561,12 +565,6 @@ body { color: #fff; } -.ui.attached.header { - background: var(--color-secondary); - border-color: var(--color-secondary); - color: #dbdbdb; -} - .ui.attached.table { border: 1px solid #304251; } @@ -749,7 +747,7 @@ a.ui.basic.green.label:hover { } .ui.menu .item > .label { - background: #565454; + background: #505667; } .ui.form input:not([type]), @@ -1049,17 +1047,6 @@ a.ui.basic.green.label:hover { 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 { color: var(--color-secondary-dark-6) !important; } @@ -1118,11 +1105,6 @@ a.ui.basic.green.label:hover { border-color: var(--color-secondary); } - .merge-section { - background-color: var(--color-secondary); - border-color: #505667; - } - .header:after { border-right-color: var(--color-secondary); } @@ -1148,21 +1130,10 @@ a.ui.basic.green.label:hover { 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 { - background-color: var(--color-secondary); - border-color: var(--color-secondary); 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 { color: var(--color-secondary-dark-6); }