From 5626811e5298fa45a8a9b4af76fd5644ac3d3b3b Mon Sep 17 00:00:00 2001 From: silverwind Date: Tue, 20 Oct 2020 07:22:10 +0200 Subject: [PATCH] Various arc-green fixes (#13214) - Style search dropdown - Fix radio buttons and tweak checkboxes - Add styling for error form elements - Make borders brighter and focus more apparent - Adjust comment box border color to match Fixes: https://github.com/go-gitea/gitea/pull/12491 Co-authored-by: zeripath Co-authored-by: techknowlogick --- web_src/less/themes/theme-arc-green.less | 171 +++++++++++++++++------ 1 file changed, 126 insertions(+), 45 deletions(-) diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less index 4e657d376e..2bd9bf6a4f 100644 --- a/web_src/less/themes/theme-arc-green.less +++ b/web_src/less/themes/theme-arc-green.less @@ -600,14 +600,14 @@ footer { .ui.input input { background: #404552; - border: 2px solid #353945; + border: 1px solid #4b505f; color: #dbdbdb; } .ui.input input:focus, .ui.input.focus input { background: #404552; - border: 2px solid #353945; + border: 1px solid #6a737d; color: #dbdbdb; } @@ -618,7 +618,7 @@ footer { .ui.label, .ui.label.basic { color: #dbdbdb; - background-color: #404552; + background-color: #2a2e39; } .issue.list > .item .title { @@ -734,6 +734,7 @@ a.ui.basic.green.label:hover { } .ui.form input:not([type]), +.ui.form textarea, .ui.form input[type="date"], .ui.form input[type="datetime-local"], .ui.form input[type="email"], @@ -744,13 +745,34 @@ a.ui.basic.green.label:hover { .ui.form input[type="tel"], .ui.form input[type="text"], .ui.form input[type="time"], -.ui.form input[type="url"] { +.ui.form input[type="url"], +.ui.selection.dropdown { color: #9e9e9e; background: #404552; - border: 2px solid #353945; + border: 1px solid #4b505f; +} + +.ui.form input:not([type]):hover, +.ui.form textarea:hover, +.ui.form input[type="date"]:hover, +.ui.form input[type="datetime-local"]:hover, +.ui.form input[type="email"]:hover, +.ui.form input[type="file"]:hover, +.ui.form input[type="number"]:hover, +.ui.form input[type="password"]:hover, +.ui.form input[type="search"]:hover, +.ui.form input[type="tel"]:hover, +.ui.form input[type="text"]:hover, +.ui.form input[type="time"]:hover, +.ui.form input[type="url"]:hover, +.ui.selection.dropdown:hover { + background: #404552; + border: 1px solid #4b505f; + color: #dbdbdb; } .ui.form input:not([type]):focus, +.ui.form textarea:focus, .ui.form input[type="date"]:focus, .ui.form input[type="datetime-local"]:focus, .ui.form input[type="email"]:focus, @@ -761,14 +783,66 @@ a.ui.basic.green.label:hover { .ui.form input[type="tel"]:focus, .ui.form input[type="text"]:focus, .ui.form input[type="time"]:focus, -.ui.form input[type="url"]:focus { +.ui.form input[type="url"]:focus, +.ui.selection.dropdown:focus { background: #404552; - border: 2px solid #4b505f; + border: 1px solid #6a737d; color: #dbdbdb; } +.ui.form .fields.error .field textarea, +.ui.form .fields.error .field select, +.ui.form .fields.error .field input:not([type]), +.ui.form .fields.error .field input[type="date"], +.ui.form .fields.error .field input[type="datetime-local"], +.ui.form .fields.error .field input[type="email"], +.ui.form .fields.error .field input[type="number"], +.ui.form .fields.error .field input[type="password"], +.ui.form .fields.error .field input[type="search"], +.ui.form .fields.error .field input[type="tel"], +.ui.form .fields.error .field input[type="time"], +.ui.form .fields.error .field input[type="text"], +.ui.form .fields.error .field input[type="file"], +.ui.form .fields.error .field input[type="url"], +.ui.form .field.error textarea, +.ui.form .field.error select, +.ui.form .field.error input:not([type]), +.ui.form .field.error input[type="date"], +.ui.form .field.error input[type="datetime-local"], +.ui.form .field.error input[type="email"], +.ui.form .field.error input[type="number"], +.ui.form .field.error input[type="password"], +.ui.form .field.error input[type="search"], +.ui.form .field.error input[type="tel"], +.ui.form .field.error input[type="time"], +.ui.form .field.error input[type="text"], +.ui.form .field.error input[type="file"], +.ui.form .field.error input[type="url"] { + background-color: #522; + border: 1px solid #7d3434; + color: #f9cbcb; +} + +.ui.form .field.error select:focus, +.ui.form .field.error input:not([type]):focus, +.ui.form .field.error input[type="date"]:focus, +.ui.form .field.error input[type="datetime-local"]:focus, +.ui.form .field.error input[type="email"]:focus, +.ui.form .field.error input[type="number"]:focus, +.ui.form .field.error input[type="password"]:focus, +.ui.form .field.error input[type="search"]:focus, +.ui.form .field.error input[type="tel"]:focus, +.ui.form .field.error input[type="time"]:focus, +.ui.form .field.error input[type="text"]:focus, +.ui.form .field.error input[type="file"]:focus, +.ui.form .field.error input[type="url"]:focus { + background-color: #522; + border: 1px solid #a04141; + color: #f9cbcb; +} + .ui.action.input:not([class*="left action"]) input:focus { - border-right-color: #4b505f !important; + border-right-color: #6a737d !important; } .ui.green.button, @@ -799,6 +873,20 @@ a.ui.basic.green.label:hover { color: #dbdbdb; } +.ui.search > .results { + background: #383c4a; + border-color: #4c505c; +} + +.ui.search > .results .result:hover, +.ui.category.search > .results .category .result:hover { + background: #404552; +} + +.ui.search > .results .result .title { + color: #dbdbdb; +} + .ui.table thead th, .ui.table > thead > tr > th { background: #404552; @@ -1060,17 +1148,6 @@ a.ui.basic.green.label:hover { box-shadow: 0 0 0 1px #13ae38 inset !important; } -.ui.form textarea, -.ui.form textarea:focus { - color: #dbdbdb; - background: #404552; - border: 2px solid #353945; -} - -.ui.form textarea:focus { - border: 1px solid #456580; -} - .ui .info.segment.top { background-color: #404552 !important; } @@ -1152,12 +1229,6 @@ td.blob-hunk { box-shadow: 0 2px 3px 0 rgba(34, 36, 38, .15); } -.ui.selection.dropdown { - background: #404552; - border: 1px solid #404552; - color: #9e9e9e; -} - .ui.menu .ui.dropdown .menu > .active.item { color: #dbdbdb !important; } @@ -1325,57 +1396,58 @@ input { .ui.checkbox input:checked ~ .box:after, .ui.checkbox input:checked ~ label:after { - color: #7f98ad; + color: #dbdbdb; } .ui.checkbox input:checked ~ .box:before, .ui.checkbox input:checked ~ label:before { - background: #304251; + background: #404552; opacity: 1; - color: #7f98ad; - border-color: #304251; + color: #dbdbdb; + border-color: #4b505f; } .ui.checkbox .box:hover::before, .ui.checkbox label:hover::before { - background: #304251; + background: #404552; + border-color: #4b505f; } .ui.checkbox .box:before, .ui.checkbox label:before { - background: #304251; - border: 1px solid #304251; + background: #404552; + border: 1px solid #4b505f; } .ui.checkbox label:before { - border-color: #476075; + border-color: #4b505f; } .ui.checkbox .box:active::before, .ui.checkbox label:active::before { - background: #304251; - border-color: rgba(34, 36, 38, .35); + background: #404552; + border-color: #6a737d; } .ui.checkbox input:focus ~ .box:before, .ui.checkbox input:focus ~ label:before { - border-color: #304251; - background: #304251; + border-color: #6a737d; + background: #404552; } .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 { - border-color: #304251; - background: #304251; + border-color: #6a737d; + background: #404552; } .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 { - color: #7f98ad; + color: #dbdbdb; } .ui.checkbox input:focus ~ .box:after, @@ -1384,8 +1456,17 @@ input { color: #9a9a9a; } -.ui.selection.dropdown:hover { - border: 1px solid #456580; +.ui.radio.checkbox label::after, +.ui.radio.checkbox input:checked ~ label::after, +.ui.radio.checkbox input:focus ~ label::after, +.ui.radio.checkbox input:focus:checked ~ label::after, { + background: #dbdbdb; +} + +.ui.radio.checkbox input:checked ~ label::before, +.ui.radio.checkbox input:focus ~ label::before, +.ui.radio.checkbox input:focus:checked ~ label::before { + background: none; } .ui.selection.dropdown .menu > .item { @@ -1413,7 +1494,7 @@ input { } .ui.form .dropzone { - border: 2px dashed #7f98ad; + border: 1px dashed #7f98ad; background-color: #2e323e; .dz-button { @@ -1670,7 +1751,7 @@ a.ui.labels .label:hover { .editor-toolbar { background-color: #404552; - border-color: #7f98ad; + border-color: #4b505f; } .edit-diff > div > .ui.table { @@ -1801,7 +1882,7 @@ a.ui.labels .label:hover { .CodeMirror { color: #9daccc; background-color: #2e323e; - border-color: #7f98ad; + border-color: #4b505f; border-top: 0; div.CodeMirror-cursor {