From 05efb335950c53a22415856aab3a970be0893113 Mon Sep 17 00:00:00 2001 From: silverwind Date: Thu, 5 Nov 2020 02:51:17 +0100 Subject: [PATCH] Various style tweaks (#13418) - Change code review '+' to SVG and increase size slightly - Set placeholder color in both themes - Set proper font for textareas - Fix black code in arc-green - Various arc-green fixes --- templates/repo/diff/box.tmpl | 4 +- templates/repo/diff/section_unified.tmpl | 2 +- web_src/less/_base.less | 8 +++ web_src/less/_review.less | 21 ++---- web_src/less/themes/theme-arc-green.less | 86 +++++++++++------------- 5 files changed, 57 insertions(+), 64 deletions(-) diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl index e45f3db593..05f056feb8 100644 --- a/templates/repo/diff/box.tmpl +++ b/templates/repo/diff/box.tmpl @@ -158,10 +158,10 @@ {{else}} {{if $line.LeftIdx}}{{end}} - {{if and $.SignedUserID $line.CanComment $.PageIsPullFiles (not (eq .GetType 2))}}{{end}}{{if $line.LeftIdx}}{{$section.GetComputedInlineDiffFor $line}}{{end}} + {{if and $.SignedUserID $line.CanComment $.PageIsPullFiles (not (eq .GetType 2))}}{{svg "octicon-plus"}}{{end}}{{if $line.LeftIdx}}{{$section.GetComputedInlineDiffFor $line}}{{end}} {{if $line.RightIdx}}{{end}} - {{if and $.SignedUserID $line.CanComment $.PageIsPullFiles (not (eq .GetType 3))}}{{end}}{{if $line.RightIdx}}{{$section.GetComputedInlineDiffFor $line}}{{end}} + {{if and $.SignedUserID $line.CanComment $.PageIsPullFiles (not (eq .GetType 3))}}{{svg "octicon-plus"}}{{end}}{{if $line.RightIdx}}{{$section.GetComputedInlineDiffFor $line}}{{end}} {{end}} {{if gt (len $line.Comments) 0}} diff --git a/templates/repo/diff/section_unified.tmpl b/templates/repo/diff/section_unified.tmpl index 129a14c1b2..b9bdc86cc5 100644 --- a/templates/repo/diff/section_unified.tmpl +++ b/templates/repo/diff/section_unified.tmpl @@ -29,7 +29,7 @@ {{if eq .GetType 4}} {{$section.GetComputedInlineDiffFor $line}} {{else}} - {{if and $.root.SignedUserID $line.CanComment $.root.PageIsPullFiles}}{{end}}{{$section.GetComputedInlineDiffFor $line}} + {{if and $.root.SignedUserID $line.CanComment $.root.PageIsPullFiles}}{{svg "octicon-plus"}}{{end}}{{$section.GetComputedInlineDiffFor $line}} {{end}} {{if gt (len $line.Comments) 0}} diff --git a/web_src/less/_base.less b/web_src/less/_base.less index 09e796ac5e..4dc831c63a 100644 --- a/web_src/less/_base.less +++ b/web_src/less/_base.less @@ -99,6 +99,8 @@ h5, .ui.form input[type="text"], .ui.form input[type="time"], .ui.form input[type="url"], +.ui.input textarea, +.ui.form textarea, .ui.header, .ui.items > .item > .content > .header, .ui.list .list > .item .header, @@ -166,6 +168,12 @@ table { color: #fff !important; } +::placeholder, +.CodeMirror-placeholder { + color: #aaa !important; + opacity: 1 !important; +} + a, .ui.breadcrumb a { color: var(--color-primary); diff --git a/web_src/less/_review.less b/web_src/less/_review.less index 1163b831ce..eb216970ee 100644 --- a/web_src/less/_review.less +++ b/web_src/less/_review.less @@ -1,19 +1,16 @@ .ui.button.add-code-comment { - font-size: 14px; - height: 16px; - line-height: 12px !important; - padding: 0; - position: relative; - width: 16px; + padding: 2px; + position: absolute; + margin-left: -22px; z-index: 5; - float: left; - margin: 2px -10px 2px -20px; opacity: 0; transition: transform .1s ease-in-out; - transform: scale(1, 1); + transform: scale(1); + box-shadow: none !important; + border: none !important; &:hover { - transform: scale(1.2, 1.2); + transform: scale(1.1); } } @@ -71,10 +68,6 @@ cursor: pointer; } - .ui.form textarea { - border: 0; - } - .ui.active.tab { padding: .5em; diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less index 2a556dd28e..5ca6a331d9 100644 --- a/web_src/less/themes/theme-arc-green.less +++ b/web_src/less/themes/theme-arc-green.less @@ -351,7 +351,7 @@ /* GenericEmph */ .chroma .ge { - font-style: italic; + color: #ef5; } /* GenericError */ @@ -441,8 +441,9 @@ body { color: #a5a5a8; } -::placeholder { - color: #7f7f7f !important; +::placeholder, +.CodeMirror-placeholder { + color: #6a737d !important; } [data-tooltip]::before, @@ -746,7 +747,7 @@ a.ui.basic.green.label:hover { .ui.form input[type="url"], .ui.selection.dropdown { color: #a5a5a8; - background: var(--color-secondary); + background: #2e323e; border: 1px solid var(--color-secondary); } @@ -764,8 +765,8 @@ a.ui.basic.green.label:hover { .ui.form input[type="time"]:hover, .ui.form input[type="url"]:hover, .ui.selection.dropdown:hover { - background: var(--color-secondary); - border: 1px solid var(--color-secondary); + background: #2e323e; + border: 1px solid #505667; color: #dbdbdb; } @@ -783,7 +784,7 @@ a.ui.basic.green.label:hover { .ui.form input[type="time"]:focus, .ui.form input[type="url"]:focus, .ui.selection.dropdown:focus { - background: var(--color-secondary); + background: #2e323e; border: 1px solid #6a737d; color: #dbdbdb; } @@ -1449,6 +1450,28 @@ input { color: #dbdbdb !important; } +.ui.checkbox .box:before, +.ui.checkbox label:before { + background: #2e323e; + border: 1px solid var(--color-secondary); +} + +.ui.checkbox .box:hover:before, +.ui.checkbox label:hover:before, +.ui.checkbox .box:active:before, +.ui.checkbox label:active:before { + background: #2e323e; + border-color: #6a737d; +} + +.ui.checkbox input:focus ~ .box:before, +.ui.checkbox input:focus ~ label:before, +.ui.checkbox input:checked:focus ~ .box:before, +.ui.checkbox input:checked:focus ~ label:before { + background: #2e323e; + border-color: #6a737d; +} + .ui.checkbox input:checked ~ .box:after, .ui.checkbox input:checked ~ label:after { color: #dbdbdb; @@ -1456,48 +1479,25 @@ input { .ui.checkbox input:checked ~ .box:before, .ui.checkbox input:checked ~ label:before { - background: var(--color-secondary); + background: #2e323e; opacity: 1; color: #dbdbdb; border-color: #505667; } -.ui.checkbox .box:before, -.ui.checkbox label:before { - background: var(--color-secondary); - border: 1px solid #505667; -} - -.ui.checkbox .box:hover::before, -.ui.checkbox label:hover::before { - background: var(--color-secondary); - border-color: #505667; -} - -.ui.checkbox .box:active::before, -.ui.checkbox label:active::before { - background: var(--color-secondary); - border-color: #6a737d; -} - -.ui.checkbox input:focus ~ .box:before, -.ui.checkbox input:focus ~ label:before { - background: var(--color-secondary); - border-color: #6a737d; -} - .ui.checkbox input:checked:focus ~ .box:before, .ui.checkbox input:checked:focus ~ label:before, .ui.checkbox input:not([type="radio"]):indeterminate:focus ~ .box:before, .ui.checkbox input:not([type="radio"]):indeterminate:focus ~ label:before { + background: #2e323e; border-color: #6a737d; - background: var(--color-secondary); } .ui.checkbox input:checked:focus ~ .box:after, .ui.checkbox input:checked:focus ~ label:after, .ui.checkbox input:not([type="radio"]):indeterminate:focus ~ .box:after, .ui.checkbox input:not([type="radio"]):indeterminate:focus ~ label:after { + background: #2e323e; color: #dbdbdb; } @@ -1838,20 +1838,8 @@ a.ui.labels .label:hover { border: 0; } - .ui.active.tab { - &:not(.markdown) { - textarea:focus { - border: none; - } - - background: var(--color-secondary); - } - - border-color: var(--color-secondary); - } - .footer { - border-top-color: #5a5a5a; + border-top-color: var(--color-secondary); .markdown-info { color: inherit; @@ -1861,7 +1849,7 @@ a.ui.labels .label:hover { } .add-comment-left.add-comment-right .ui.attached.header { - border-color: #5d5c5c; + border-color: var(--color-secondary); border-right: none; } @@ -2039,6 +2027,10 @@ a.ui.labels .label:hover { border-color: var(--color-secondary); } +.ui.popup:before { + box-shadow: 1px 1px 0 0 var(--color-secondary); +} + .ui.popup.top:before, .ui.popup.bottom:before { background-color: #383c4a;