diff options
author | silverwind <me@silverwind.io> | 2020-10-31 23:15:11 +0100 |
---|---|---|
committer | GitHub <noreply@github.com> | 2020-10-31 18:15:11 -0400 |
commit | 2ac112d84e7318a294b1e8cea5adae2dd50c89df (patch) | |
tree | ded99a4d4d7626c21332ffd10eb0b39ef23a98bf /web_src/less | |
parent | e4e85a3e51066f4987a87762c9c69acda093f6ca (diff) | |
download | gitea-2ac112d84e7318a294b1e8cea5adae2dd50c89df.tar.gz gitea-2ac112d84e7318a294b1e8cea5adae2dd50c89df.zip |
Comment box tweaks and SVG dropdown triangles (#13376)
* Comment box tweaks and SVG dropdown triangles
- Change all dropdown triangles to SVG
- Bring inline review comment box closer to regular comment boxes
- Enhance arc-green checkbox contrast
- Minor reaction tweaks
- Flexbox the diff file header
* remove a border
* fix type marker in arc-green
* add small code padding
* fix position regression and remove useless rules
Co-authored-by: Lauris BH <lauris@nix.lv>
Co-authored-by: techknowlogick <techknowlogick@gitea.io>
Diffstat (limited to 'web_src/less')
-rw-r--r-- | web_src/less/_base.less | 15 | ||||
-rw-r--r-- | web_src/less/_form.less | 15 | ||||
-rw-r--r-- | web_src/less/_repository.less | 71 | ||||
-rw-r--r-- | web_src/less/_review.less | 34 | ||||
-rw-r--r-- | web_src/less/themes/theme-arc-green.less | 80 |
5 files changed, 105 insertions, 110 deletions
diff --git a/web_src/less/_base.less b/web_src/less/_base.less index 59dd426360..93b4fa954f 100644 --- a/web_src/less/_base.less +++ b/web_src/less/_base.less @@ -310,6 +310,17 @@ code, flex-direction: inherit; } +.ui.dropdown:not(.labeled) > .dropdown.icon { + height: 14px; + vertical-align: bottom; + margin-bottom: -2px; + margin-left: .5rem; +} + +.ui.form .field > .selection.dropdown > .dropdown.icon { + height: auto; +} + .ui { &.left:not(.action) { float: left; @@ -1118,6 +1129,10 @@ i.icon.centerlock { } } +.lines-code { + padding-left: 5px; +} + .lines-code code { white-space: pre; } diff --git a/web_src/less/_form.less b/web_src/less/_form.less index 9ca6387bc3..4c0d1efe0b 100644 --- a/web_src/less/_form.less +++ b/web_src/less/_form.less @@ -158,19 +158,8 @@ #create-page-form; form { - .dropdown { - .dropdown.icon { - margin-top: -7px !important; - padding-bottom: 5px; - } - - .text { - margin-right: 0 !important; - - i { - margin-right: 0 !important; - } - } + .dropdown .text { + margin-right: 0 !important; } .header { diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less index 7fe8216571..0c4196cd85 100644 --- a/web_src/less/_repository.less +++ b/web_src/less/_repository.less @@ -162,16 +162,6 @@ padding: 0 8px; } - .svg { - float: left; - margin: 0 -7px 0 -5px; - width: 16px; - } - - &.labels .svg { - margin: -2px -7px 0 -5px; - } - &.labels { .label-filter .menu .info { display: inline-block; @@ -191,21 +181,12 @@ } } - .text { - margin-left: .9em; - } - .menu { max-height: 300px; overflow-x: auto; right: 0 !important; left: auto !important; } - - .dropdown.item { - margin: 1px; - padding-right: 0; - } } .select-label { @@ -883,8 +864,8 @@ justify-content: center; .svg { - width: 24px; - height: 24px; + width: 22px; + height: 22px; padding: 3px; &.octicon-circle-slash { @@ -1040,22 +1021,6 @@ top: -8px; left: 7px; } - - .header-left > * + *, - .header-right > * + * { - margin-left: .25rem; - } - - .actions { - a { - padding: .5rem; - color: rgba(0, 0, 0, .4); - - &:hover { - color: rgba(0, 0, 0, .8); - } - } - } } > .merge-section { @@ -2047,11 +2012,6 @@ margin-right: 5px; } - .dropdown.icon { - margin: 0; - padding-top: 3px; - } - .selection.dropdown { padding-top: 10px; padding-bottom: 10px; @@ -2458,12 +2418,16 @@ &.disabled { cursor: default; - opacity: .5; + opacity: 1; } } + .ui.label.basic { + color: var(--color-primary) !important; + } + .ui.label.basic.blue { - background-color: var(--color-primary-alpha-10) !important; + background-color: var(--color-primary-alpha-20) !important; border-color: inherit !important; } @@ -2829,6 +2793,25 @@ } } +.comment-header .actions a { + margin-right: 0 !important; + padding: .5rem !important; +} + +.comment-header a { + color: rgba(0, 0, 0, .4) !important; +} + +.comment-header .actions a:hover, +.comment-header .actions a.active { + color: rgba(0, 0, 0, .8) !important; +} + +.comment-header-left > * + *, +.comment-header-right > * + * { + margin-left: .25rem; +} + .edit-label.modal, .new-label.segment { .form { diff --git a/web_src/less/_review.less b/web_src/less/_review.less index e85d48c8e6..fb44eaa6e2 100644 --- a/web_src/less/_review.less +++ b/web_src/less/_review.less @@ -17,9 +17,17 @@ } } +.repository .diff-file-box .code-diff .add-comment-left, +.repository .diff-file-box .code-diff .add-comment-right, +.repository .diff-file-box .code-diff .add-code-comment .add-comment-left, +.repository .diff-file-box .code-diff .add-code-comment .add-comment-right, +.repository .diff-file-box .code-diff .add-code-comment .lines-type-marker { + padding-left: 0 !important; + padding-right: 0 !important; +} + .add-comment-left.add-comment-right .ui.attached.header { border: 1px solid #d4d4d5; - margin-top: .5em; &:not(.top) { margin-bottom: .5em; @@ -39,21 +47,9 @@ .comment-code-cloud { padding: 4px; + padding-left: 0; position: relative; - border: 1px solid #f1f1f1; - margin: 13px 10px 5px auto; - - &:before { - content: " "; - width: 0; - height: 0; - border-left: 13px solid transparent; - border-right: 13px solid transparent; - border-bottom: 13px solid #f1f1f1; - left: 20px; - position: absolute; - top: -13px; - } + margin: 0 auto; .attached { &.tab { @@ -94,7 +90,7 @@ } .comment-list { - padding-bottom: 10px; + padding-bottom: 5px; } .footer { @@ -153,9 +149,9 @@ a.blob-excerpt:hover { } .btn-review > .dropdown.icon { - width: auto; - font-size: .85714286em; - margin: 0 0 0 1em; + float: right; + height: 12px !important; + margin-left: .5rem; } @media only screen and (max-width: 768px) { diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less index 80e36cc49e..9d18dc2d29 100644 --- a/web_src/less/themes/theme-arc-green.less +++ b/web_src/less/themes/theme-arc-green.less @@ -428,6 +428,10 @@ background-color: #383c4a; } +.repository .segment.reactions .ui.label.basic.blue { + background: var(--color-primary-alpha-20) !important; +} + body { color: #a5a5a8; } @@ -511,7 +515,7 @@ body { } .following.bar .top.menu a.item:hover { - color: #ffffff; + color: #fff; } .ui.attached.header { @@ -629,7 +633,7 @@ footer { .ui.label.basic { color: #dbdbdb; border-color: #6a737d; - background-color: #353945; + background-color: #383c4a; } .issue.list > .item .title { @@ -655,7 +659,7 @@ footer { a.ui.basic.green.label:hover { background-color: #16ab39 !important; border-color: #16ab39 !important; - color: #ffffff !important; + color: #fff !important; } .issue.list > .item .comment { @@ -832,7 +836,7 @@ a.ui.basic.green.label:hover { } .ui.button { - background: #383c4a; + background: #353846; border: 1px solid #4c505c; color: #dbdbdb; } @@ -1061,15 +1065,6 @@ a.ui.basic.green.label:hover { color: #dbdbdb !important; } -.ui .comment .actions a { - color: #a5a5a8 !important; -} - -.ui .comment .actions a.active, -.ui .comment .actions a:hover { - color: #fff !important; -} - .repository.view.issue .comment-list .comment .content { > .bottom.segment { background: #353945; @@ -1123,13 +1118,21 @@ a.ui.basic.green.label:hover { .repository.view.issue .comment-list .timeline-item .badge { background-color: #4c505c; border-color: #4c505c; - color: #a5a5a8; + 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: #a5a5a8; +} + +.comment-header-right a:hover { + color: #dedede; +} + .repository.file.editor .commit-form-wrapper .commit-form { border-color: #505667; } @@ -1208,6 +1211,10 @@ td.blob-hunk { color: #dbdbdb !important; } +.lines-type-marker { + background: #2a2e3a; +} + .ui.vertical.menu .active.item { background: #4b5162; } @@ -1421,23 +1428,19 @@ input { background: #404552; opacity: 1; color: #dbdbdb; - border-color: #4b505f; -} - -.ui.checkbox .box:hover::before, -.ui.checkbox label:hover::before { - background: #404552; - border-color: #4b505f; + border-color: #505667; } .ui.checkbox .box:before, .ui.checkbox label:before { background: #404552; - border: 1px solid #4b505f; + border: 1px solid #505667; } -.ui.checkbox label:before { - border-color: #4b505f; +.ui.checkbox .box:hover::before, +.ui.checkbox label:hover::before { + background: #404552; + border-color: #505667; } .ui.checkbox .box:active::before, @@ -1448,8 +1451,8 @@ input { .ui.checkbox input:focus ~ .box:before, .ui.checkbox input:focus ~ label:before { - border-color: #6a737d; background: #404552; + border-color: #6a737d; } .ui.checkbox input:checked:focus ~ .box:before, @@ -1564,7 +1567,7 @@ input { .lines-num { color: #a5a5a8 !important; - border-color: #2d2d2d !important; + border-color: #4b505f !important; } td.blob-excerpt { @@ -1598,13 +1601,17 @@ a.ui.labels .label:hover { .sha.label, .repository #repo-files-table .sha.label, +.repository #commits-table td.sha .sha.label, +.repository .timeline-item.commits-list .singular-commit .sha.label, .repository.view.issue .comment-list .timeline-item.commits-list .singular-commit .shabox .sha.label { - border-color: #4c505c; + border-color: #505667; } +.sha.label.isSigned .detail.icon, .repository #commits-table td.sha .sha.label.isSigned .detail.icon, .repository #repo-files-table .sha.label.isSigned .detail.icon, -.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned .detail.icon { +.repository .timeline-item.commits-list .singular-commit .sha.label.isSigned .detail.icon, +.repository.view.issue .comment-list .timeline-item.commits-list .singular-commit .shabox .sha.label.isSigned .detail.icon { background: none; border-left-color: #888; } @@ -1793,11 +1800,7 @@ a.ui.labels .label:hover { } .comment-code-cloud { - border-color: #3a3a3a; - - &:before { - border-bottom: 13px solid #5a5a5a; - } + border-color: transparent; .ui.attached.top.header { background: none transparent; @@ -1813,7 +1816,7 @@ a.ui.labels .label:hover { background: #404552; } - border-color: rgba(255, 255, 255, .15); + border-color: #4c505c; } .footer { @@ -1849,6 +1852,15 @@ a.ui.labels .label:hover { } } +.comment-header a { + color: #a5a5a8 !important; +} + +.comment-header .actions a:hover, +.comment-header .actions a.active { + color: #dedede !important; +} + .heatmap(@heat) { @heatmap-cold: #2d303b; @heatmap-hot: #a0cc75; |