From f85fe3574d7932dc27e2d6e0373b0a31737186a9 Mon Sep 17 00:00:00 2001 From: silverwind Date: Thu, 10 Dec 2020 00:00:14 +0100 Subject: [PATCH 1/4] Diff CSS refactors and misc tweaks - Simplify Diff CSS styling - Add color variables for diff - Fix vertical centering of inline comment button - Slightly adjust text colors, e.g. in comment header --- web_src/less/_base.less | 26 +++- web_src/less/_repository.less | 158 ++++++----------------- web_src/less/themes/theme-arc-green.less | 120 ++--------------- 3 files changed, 72 insertions(+), 232 deletions(-) diff --git a/web_src/less/_base.less b/web_src/less/_base.less index bf3140b6b6d26..a02fff4b27c10 100644 --- a/web_src/less/_base.less +++ b/web_src/less/_base.less @@ -73,8 +73,17 @@ --color-black: #1b1c1d; --color-gold: #a1882b; --color-white: #ffffff; + --color-diff-removed-word-bg: #fdb8c0; + --color-diff-added-word-bg: #acf2bd; + --color-diff-removed-bg-linenum: #ffe5e4; + --color-diff-added-bg-linenum: #cdffd8; + --color-diff-removed-row-bg: #ffeef0; + --color-diff-added-row-bg: #e6ffed; + --color-diff-removed-row-border: #f1c0c0; + --color-diff-added-row-border: #e6ffed; /* target-based colors */ --color-body: #ffffff; + --color-text-dark: #080808; --color-text: #212121; --color-text-light: #555555; --color-text-light-2: #888888; @@ -264,6 +273,10 @@ a.muted:hover, color: var(--color-text); } +.ui.menu .item > .label { + background: var(--color-grey); +} + .ui.link.menu .item:hover, .ui.menu .dropdown.item:hover, .ui.menu .link.item:hover, @@ -711,7 +724,7 @@ a.ui.card:hover, color: var(--color-text); &:hover { - color: #000000; + color: var(--color-text-dark); } } @@ -719,7 +732,7 @@ a.ui.card:hover, color: var(--color-text-light) !important; a { - color: inherit !important; + color: var(--color-text) !important; &:hover { color: var(--color-primary) !important; @@ -1840,7 +1853,7 @@ table th[data-sortt-desc] { .ui.tabular.menu .item { padding: 11px 12px; - color: var(--color-secondary-dark-6); + color: var(--color-text-light-2); } .ui.tabular.menu .item:hover { @@ -1855,12 +1868,17 @@ table th[data-sortt-desc] { margin-top: 1px; /* offset fomantic's margin-bottom: -1px */ } +.ui.segment .ui.tabular.menu .active.item, +.ui.segment .ui.tabular.menu .active.item:hover { + background: var(--color-box-body); +} + .ui.secondary.pointing.menu { border-color: var(--color-secondary); } .ui.secondary.pointing.menu .item { - color: var(--color-secondary-dark-6); + color: var(--color-text-light-2); } .ui.secondary.pointing.menu .active.item, diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less index b35718c29d47b..301ee19d27210 100644 --- a/web_src/less/_repository.less +++ b/web_src/less/_repository.less @@ -831,7 +831,7 @@ float: left; margin-left: -33px; margin-right: 8px; - color: var(--color-text-light-2); + color: var(--color-text); align-items: center; justify-content: center; @@ -1012,7 +1012,7 @@ } .no-content { - color: #767676; + color: var(--color-text-light-2); font-style: italic; } @@ -1060,45 +1060,6 @@ .event { padding-left: 15px; - & > .svg:not(.issue-symbol) { - text-shadow: -2px 0 #fff, 0 2px #fff, 2px 0 #fff, 0 -2px #fff; - } - - & > .svg.issue-symbol { - font-size: 20px; - margin-left: -35px; - margin-right: -1px; - margin-top: 0 !important; - height: 28px; - width: 28px; - border-radius: 50%; - text-align: center; - line-height: 28px; - background: #eee; - - &::before { - width: 15px; - display: inline-block; - } - - &.octicon-key::before { - width: 18px; - } - - &.octicon-circle-slash::before { - width: 17px; - } - - &.octicon-comment { - font-size: 21px; - line-height: 33px; - - &::before { - width: 20px; - } - } - } - .detail { font-size: .9rem; margin-top: 5px; @@ -1529,7 +1490,6 @@ } .button { - margin: -5px 0 -5px 12px; padding: 8px 10px; flex: 0 0 auto; } @@ -1543,7 +1503,7 @@ .file-body.file-code { .lines-num { text-align: right; - color: #a6a6a6; + color: var(--color-text-light); width: 1%; min-width: 50px; user-select: none; @@ -1603,74 +1563,11 @@ } } - .code-diff-unified tbody tr { - &.del-code td { - background-color: #ffeef0; - border-color: #f1c0c0; - } - - &.add-code td { - background-color: #e6ffed; - border-color: #bef5cb; - } - - &.del-code td.lines-num { - background-color: #ffe5e4; - } - - &.add-code td.lines-num { - background-color: #cdffd8; - } - - } - .code-diff-split { - table, tbody { width: 100%; } - - tbody tr { - - // light gray for empty lines before / after commit - &.add-code td:nth-child(1), - &.add-code td:nth-child(2), - &.add-code td:nth-child(3), - &.del-code td:nth-child(4), - &.del-code td:nth-child(5), - &.del-code td:nth-child(6) { - background-color: #fafbfc; - border-right-color: #eaecef; - } - - &.del-code { - background-color: #ffeef0; - } - - &.del-code td.add-code { - background-color: #e6ffed; - } - &.del-code td.lines-num-new.add-code { - background-color: #cdffd8; - border-color: #bef5cb; - } - - &.add-code { - background-color: #e6ffed; - border-color: #bef5cb; - } - - &.add-code td.lines-num-new { - background-color: #cdffd8; - } - - td:nth-child(4) { - border-left-width: 1px; - border-left-style: solid; - border-left-color: #f6f8fa; - } - } } &.file-content { @@ -1704,7 +1601,7 @@ list-style: none; padding-bottom: 4px; margin-bottom: 4px; - border-bottom: 1px dashed #dddddd; + border-bottom: 1px dashed var(--color-secondary); padding-left: 6px; } } @@ -2564,7 +2461,7 @@ padding: .5rem 1rem !important; margin: 0 !important; position: relative; - color: #767676; + color: var(--color-text-light-2); min-height: 41px; background-color: var(--color-box-header); display: flex; @@ -2585,6 +2482,14 @@ top: -8px; left: 7px; } + + a { + color: var(--color-text); + } + + a:hover { + color: var(--color-primary); + } } .comment-header .actions a { @@ -2592,15 +2497,6 @@ 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; @@ -3101,11 +2997,35 @@ td.blob-excerpt { } .removed-code { - background-color: #fdb8c0; + background-color: var(--color-diff-removed-word-bg); } .added-code { - background-color: #acf2bd; + background-color: var(--color-diff-added-word-bg); +} + +td.del-code, +.del-code td { + background-color: var(--color-diff-removed-row-bg); + border-color: var(--color-diff-removed-row-border); +} + +td.add-code, +.add-code td { + background-color: var(--color-diff-added-row-bg); + border-color: var(--color-diff-added-row-border); +} + +.code-diff-unified .del-code .lines-num { + background-color: var(--color-diff-removed-bg-linenum); +} + +.code-diff-unified .add-code .lines-num { + background-color: var(--color-diff-added-bg-linenum); +} + +.code-diff-split tbody tr td:nth-child(4) { + border-left: 1px solid var(--color-secondary); } .repository .ui.menu.new-menu { diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less index 141b87068cab7..e658d26fad7ef 100644 --- a/web_src/less/themes/theme-arc-green.less +++ b/web_src/less/themes/theme-arc-green.less @@ -68,10 +68,19 @@ --color-black: #1e222e; --color-gold: #a1882b; --color-white: #ffffff; + --color-diff-removed-word-bg: #6f3333; + --color-diff-added-word-bg: #3c653c; + --color-diff-removed-bg-linenum: #4e2c2c; + --color-diff-added-bg-linenum: #2c4632; + --color-diff-removed-row-bg: #3c2626; + --color-diff-added-row-bg: #283e2d; + --color-diff-removed-row-border: #634343; + --color-diff-added-row-border: #314a37; /* target-based colors */ --color-body: #383c4a; - --color-box-header: #454a57; - --color-box-body: #353945; + --color-box-header: #404652; + --color-box-body: #303440; + --color-text-dark: #dbe0ea; --color-text: #bbc0ca; --color-text-light: #a6aab5; --color-text-light-2: #868a95; @@ -360,32 +369,6 @@ a.ui.basic.green.label:hover { color: #dbdbdb; } -.repository.view.issue .comment-list .event > .svg.issue-symbol { - background: #3b4954; -} - -.repository.view.issue .comment-list .event > .svg:not(.issue-symbol) { - text-shadow: -2px 0 #383c4a, 0 2px #383c4a, 2px 0 #383c4a, 0 -2px #383c4a; -} - -.repository.view.issue .comment-list .comment .content .header { - color: #dbdbdb; - background-color: var(--color-secondary); - border-color: var(--color-secondary); -} - -.repository.view.issue .comment-list .timeline-item .badge { - color: #ccc; -} - -.comment-header-right a { - color: var(--color-secondary-dark-6); -} - -.comment-header-right a:hover { - color: #dedede; -} - .repository .navbar .active.item, .repository .navbar .active.item:hover { border-color: transparent !important; @@ -395,36 +378,10 @@ a.ui.basic.green.label:hover { background-color: var(--color-secondary) !important; } -.repository .diff-file-box .code-diff-unified tbody tr.del-code td { - background-color: #3c2626 !important; - border-color: #634343 !important; -} - -.repository .diff-file-box .code-diff-unified tbody tr.del-code td.lines-num { - background-color: #4e2c2c !important; -} - -.repository .diff-file-box .code-diff-unified tbody tr.add-code td { - background-color: #283e2d !important; - border-color: #314a37 !important; -} - -.repository .diff-file-box .code-diff-unified tbody tr.add-code td.lines-num { - background-color: #2c4632 !important; -} - .repository .diff-stats li { border-color: var(--color-secondary); } -.removed-code { - background-color: #5f3737; -} - -.added-code { - background-color: #3a523a; -} - .tag-code, .tag-code td { background: #353945 !important; @@ -439,22 +396,6 @@ td.blob-hunk { color: #dbdbdb !important; } -.lines-type-marker { - background: #2a2e3a; -} - -.code-diff-split .same-code .lines-type-marker { - background: #353945; -} - -.ui .text.black { - color: var(--color-secondary-dark-6); -} - -.ui .text.black:hover { - color: #dbdbdb; -} - .ui.attached.info.message, .ui.info.message { box-shadow: 0 0 0 1px #4b5e71 inset, 0 0 0 0 transparent; @@ -666,36 +607,6 @@ a.blob-excerpt:hover { } } -.repository .label.list .item { - border-bottom: 1px dashed var(--color-secondary); -} - -.repository .diff-file-box .code-diff-split tbody tr.add-code td:nth-child(1), -.repository .diff-file-box .code-diff-split tbody tr.add-code td:nth-child(2), -.repository .diff-file-box .code-diff-split tbody tr.add-code td:nth-child(3), -.repository .diff-file-box .code-diff-split tbody tr.del-code td:nth-child(4), -.repository .diff-file-box .code-diff-split tbody tr.del-code td:nth-child(5), -.repository .diff-file-box .code-diff-split tbody tr.del-code td:nth-child(6) { - background-color: #2a2e3a; -} - -.repository .diff-file-box .code-diff-split tbody tr.add-code td:nth-child(4), -.repository .diff-file-box .code-diff-split tbody tr.add-code td:nth-child(5), -.repository .diff-file-box .code-diff-split tbody tr.add-code td:nth-child(6), -.repository .diff-file-box .code-diff-split tbody tr td.add-code, -.repository .diff-file-box .code-diff-split tbody tr td.lines-num-new.add-code { - background-color: #283e2d !important; - border-color: #314a37 !important; -} - -.repository .diff-file-box .code-diff-split tbody tr.del-code td:nth-child(1), -.repository .diff-file-box .code-diff-split tbody tr.del-code td:nth-child(2), -.repository .diff-file-box .code-diff-split tbody tr.del-code td:nth-child(3), -.repository .diff-file-box .code-diff-split tbody tr td.del-code { - background-color: #3c2626 !important; - border-color: #634343 !important; -} - .ui.header .sub.header { color: var(--color-secondary-dark-6); } @@ -795,15 +706,6 @@ a.blob-excerpt:hover { } } -.comment-header a { - color: var(--color-secondary-dark-6) !important; -} - -.comment-header .actions a:hover, -.comment-header .actions a.active { - color: #dedede !important; -} - /* code mirror dark theme */ .CodeMirror { From 1a8efba281d0f2ff9e4cdde16cc735d2d26c7ee9 Mon Sep 17 00:00:00 2001 From: silverwind Date: Tue, 15 Dec 2020 00:55:28 +0100 Subject: [PATCH 2/4] Code review improvments --- .../repo/issue/view_content/comments.tmpl | 11 ++---- web_src/less/_base.less | 28 +++++++++++++- web_src/less/_repository.less | 14 ++++++- web_src/less/_review.less | 2 +- web_src/less/themes/theme-arc-green.less | 37 +------------------ 5 files changed, 46 insertions(+), 46 deletions(-) diff --git a/templates/repo/issue/view_content/comments.tmpl b/templates/repo/issue/view_content/comments.tmpl index 2c413b3c46d9d..bc5d7dde12406 100644 --- a/templates/repo/issue/view_content/comments.tmpl +++ b/templates/repo/issue/view_content/comments.tmpl @@ -398,10 +398,7 @@ {{avatar .Poster}} {{end}} - {{svg (printf "octicon-%s" .Review.Type.Icon)}} + {{svg (printf "octicon-%s" .Review.Type.Icon)}} {{if .OriginalAuthor }} {{ .OriginalAuthor }} {{if $.Repository.OriginalURL}}({{$.i18n.Tr "repo.migrated_from" $.Repository.OriginalURL $.Repository.GetOriginalURLHostname | Safe }}){{end}} @@ -452,7 +449,7 @@ {{ range $filename, $lines := .Review.CodeComments}} {{range $line, $comms := $lines}}
-
+
{{$invalid := (index $comms 0).Invalidated}} {{$resolved := (index $comms 0).IsResolved}} {{$resolveDoer := (index $comms 0).ResolveDoer}} @@ -497,8 +494,8 @@
{{end}} -
-
+
+
{{range $comms}} {{ $createdSubStr:= TimeSinceUnix .CreatedUnix $.Lang }}
diff --git a/web_src/less/_base.less b/web_src/less/_base.less index a02fff4b27c10..742bd9767c842 100644 --- a/web_src/less/_base.less +++ b/web_src/less/_base.less @@ -446,6 +446,28 @@ a.ui.card:hover, background: var(--color-card); } +.ui.comments .comment .text, +.ui.comments .comment .author { + color: var(--color-text); +} + +.ui.comments .comment a.author:hover { + color: var(--color-primary); +} + +.ui.comments .comment .metadata { + color: var(--color-text-light-2); +} + +.ui.comments .comment .actions a { + color: var(--color-text-light); +} + +.ui.comments .comment .actions a.active, +.ui.comments .comment .actions a:hover { + color: var(--color-primary); +} + .ui.progress[data-percent="0"] .bar .progress { color: var(--color-text); } @@ -741,7 +763,7 @@ a.ui.card:hover, } &.light.grey { - color: var(--color-grey) !important; + color: var(--color-text-light-2) !important; } &.green { @@ -1701,6 +1723,10 @@ a.ui.basic.label:hover { border-color: var(--color-secondary); } +.ui.segments > .segment { + border-color: var(--color-secondary); +} + .ui.secondary.segment { background: var(--color-secondary-bg); color: var(--color-text-light); diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less index 301ee19d27210..b774e2d92a9dd 100644 --- a/web_src/less/_repository.less +++ b/web_src/less/_repository.less @@ -1050,11 +1050,17 @@ .code-comment { border: 1px solid transparent; - padding: 6px 6px 3px; + padding: .5rem 0; + margin: 0; .content { border: none !important; } + + .avatar.image { + width: 28px; + height: 28px; + } } .event { @@ -1500,6 +1506,10 @@ background-color: var(--color-box-header); } + .file-body { + background: var(--color-code-bg); + } + .file-body.file-code { .lines-num { text-align: right; @@ -2456,6 +2466,7 @@ .comment-header { #avatar-arrow; border: none !important; + background: var(--color-box-header); border-bottom: 1px solid var(--color-secondary) !important; font-weight: normal !important; padding: .5rem 1rem !important; @@ -2503,6 +2514,7 @@ } .comment-body { + background: var(--color-box-body); border: none !important; width: 100% !important; max-width: 100% !important; diff --git a/web_src/less/_review.less b/web_src/less/_review.less index 029c96fc5005c..8e2f7ede96845 100644 --- a/web_src/less/_review.less +++ b/web_src/less/_review.less @@ -119,7 +119,7 @@ } .file-comment { - color: rgba(0, 0, 0, .87); + color: var(--color-text); } a.fold-file { diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less index e658d26fad7ef..0e81e73e9c422 100644 --- a/web_src/less/themes/theme-arc-green.less +++ b/web_src/less/themes/theme-arc-green.less @@ -85,7 +85,7 @@ --color-text-light: #a6aab5; --color-text-light-2: #868a95; --color-footer: #2e323e; - --color-timeline: #4a505c; + --color-timeline: #4c525e; --color-input-text: #d5dbe6; --color-input-background: #2e323e; --color-input-border: #454a57; @@ -327,10 +327,6 @@ a.ui.basic.green.label:hover { background-color: #393d4a !important; } -.ui .text.grey { - color: var(--color-secondary-dark-6) !important; -} - .repository.file.editor.edit, .repository.wiki.new .CodeMirror { .editor-preview, @@ -675,37 +671,6 @@ a.blob-excerpt:hover { } } -.comment-code-cloud { - border-color: transparent; - - .ui.attached.top.header { - background: none transparent; - border: 0; - } - - .footer .markdown-info { - color: inherit; - } -} - -.file-comment { - color: var(--color-secondary-dark-6); -} - -.ui.comments .comment { - .author { - color: #dbdbdb; - } - - .metadata { - color: #808084; - } - - .text { - color: var(--color-secondary-dark-6); - } -} - /* code mirror dark theme */ .CodeMirror { From 0fe7de516bdcdd677d7d5c30580b0b39443da154 Mon Sep 17 00:00:00 2001 From: silverwind Date: Tue, 15 Dec 2020 01:14:53 +0100 Subject: [PATCH 3/4] selector tweak --- web_src/less/_repository.less | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less index b774e2d92a9dd..3641738a7e54e 100644 --- a/web_src/less/_repository.less +++ b/web_src/less/_repository.less @@ -1506,11 +1506,9 @@ background-color: var(--color-box-header); } - .file-body { + .file-body.file-code { background: var(--color-code-bg); - } - .file-body.file-code { .lines-num { text-align: right; color: var(--color-text-light); From 70a1c8b5c2651c73c086f5a527c39439cff77a8a Mon Sep 17 00:00:00 2001 From: silverwind Date: Wed, 16 Dec 2020 00:14:51 +0100 Subject: [PATCH 4/4] fix diff issues, add inactive bg color --- web_src/less/_base.less | 3 +- web_src/less/_repository.less | 38 +++++++++++++++--------- web_src/less/themes/theme-arc-green.less | 3 +- 3 files changed, 26 insertions(+), 18 deletions(-) diff --git a/web_src/less/_base.less b/web_src/less/_base.less index 742bd9767c842..d9888b824f6d7 100644 --- a/web_src/less/_base.less +++ b/web_src/less/_base.less @@ -75,12 +75,11 @@ --color-white: #ffffff; --color-diff-removed-word-bg: #fdb8c0; --color-diff-added-word-bg: #acf2bd; - --color-diff-removed-bg-linenum: #ffe5e4; - --color-diff-added-bg-linenum: #cdffd8; --color-diff-removed-row-bg: #ffeef0; --color-diff-added-row-bg: #e6ffed; --color-diff-removed-row-border: #f1c0c0; --color-diff-added-row-border: #e6ffed; + --color-diff-inactive: #f2f2f2; /* target-based colors */ --color-body: #ffffff; --color-text-dark: #080808; diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less index 3641738a7e54e..6fc5c4a161ac0 100644 --- a/web_src/less/_repository.less +++ b/web_src/less/_repository.less @@ -3007,31 +3007,41 @@ td.blob-excerpt { } .removed-code { - background-color: var(--color-diff-removed-word-bg); + background: var(--color-diff-removed-word-bg); } .added-code { - background-color: var(--color-diff-added-word-bg); + background: var(--color-diff-added-word-bg); } -td.del-code, -.del-code td { - background-color: var(--color-diff-removed-row-bg); +.code-diff-unified .del-code, +.code-diff-unified .del-code td, +.code-diff-split .del-code .lines-num-old, +.code-diff-split .del-code .lines-type-marker-old, +.code-diff-split .del-code .lines-code-old { + background: var(--color-diff-removed-row-bg); border-color: var(--color-diff-removed-row-border); } -td.add-code, -.add-code td { - background-color: var(--color-diff-added-row-bg); +.code-diff-unified .add-code, +.code-diff-unified .add-code td, +.code-diff-split .add-code .lines-num-new, +.code-diff-split .add-code .lines-type-marker-new, +.code-diff-split .add-code .lines-code-new, +.code-diff-split .del-code .add-code.lines-num-new, +.code-diff-split .del-code .add-code.lines-type-marker-new, +.code-diff-split .del-code .add-code.lines-code-new { + background: var(--color-diff-added-row-bg); border-color: var(--color-diff-added-row-border); } -.code-diff-unified .del-code .lines-num { - background-color: var(--color-diff-removed-bg-linenum); -} - -.code-diff-unified .add-code .lines-num { - background-color: var(--color-diff-added-bg-linenum); +.code-diff-split .del-code .lines-num-new, +.code-diff-split .del-code .lines-type-marker-new, +.code-diff-split .del-code .lines-code-new, +.code-diff-split .add-code .lines-num-old, +.code-diff-split .add-code .lines-type-marker-old, +.code-diff-split .add-code .lines-code-old { + background: var(--color-diff-inactive); } .code-diff-split tbody tr td:nth-child(4) { diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less index 0e81e73e9c422..871b5b00b81e1 100644 --- a/web_src/less/themes/theme-arc-green.less +++ b/web_src/less/themes/theme-arc-green.less @@ -70,12 +70,11 @@ --color-white: #ffffff; --color-diff-removed-word-bg: #6f3333; --color-diff-added-word-bg: #3c653c; - --color-diff-removed-bg-linenum: #4e2c2c; - --color-diff-added-bg-linenum: #2c4632; --color-diff-removed-row-bg: #3c2626; --color-diff-added-row-bg: #283e2d; --color-diff-removed-row-border: #634343; --color-diff-added-row-border: #314a37; + --color-diff-inactive: #353846; /* target-based colors */ --color-body: #383c4a; --color-box-header: #404652;