From dd81c290529eb5692b46553b2fac120820872a1c Mon Sep 17 00:00:00 2001 From: silverwind Date: Wed, 12 May 2021 08:16:22 +0200 Subject: [PATCH] Reaction improvements (#15836) - Add some spacing to inline reactions - Adjust colors and add variables --- web_src/less/_base.less | 4 +++- web_src/less/_repository.less | 14 ++++++++++++-- web_src/less/themes/theme-arc-green.less | 6 ++---- 3 files changed, 17 insertions(+), 7 deletions(-) diff --git a/web_src/less/_base.less b/web_src/less/_base.less index 0499547291..e356c01cc0 100644 --- a/web_src/less/_base.less +++ b/web_src/less/_base.less @@ -96,7 +96,7 @@ --color-input-border: #dedede; --color-input-border-hover: #cecece; --color-navbar: #f8f8f8; - --color-light: #00000004; + --color-light: #00000006; --color-light-border: #0000001d; --color-hover: #0000000f; --color-active: #00000014; @@ -113,6 +113,8 @@ --color-editor-line-highlight: var(--color-primary-light-6); --color-project-board-bg: var(--color-secondary-light-4); --color-caret: var(--color-text-dark); + --color-reaction-bg: #0000000a; + --color-reaction-active-bg: var(--color-primary-alpha-20); /* backgrounds */ --checkbox-mask-checked: url('data:image/svg+xml;utf8,'); --checkbox-mask-indeterminate: url('data:image/svg+xml;utf8,'); diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less index c0b91451c6..a79634dd8f 100644 --- a/web_src/less/_repository.less +++ b/web_src/less/_repository.less @@ -1088,12 +1088,21 @@ .comment-code-cloud { .segment.reactions { + margin-top: 16px !important; + margin-bottom: -8px !important; border-top: none !important; .ui.label { border: 1px solid; - padding: 6px !important; + padding: 6px 10px !important; + margin: 0 2px; border-radius: var(--border-radius); + border-color: var(--color-secondary-dark-1) !important; + } + + .ui.label.basic.blue { + background-color: var(--color-reaction-active-bg) !important; + border-color: var(--color-primary-alpha-80) !important; } } @@ -2316,6 +2325,7 @@ font-size: 14px; font-weight: normal; border-color: var(--color-secondary) !important; + background: var(--color-reaction-bg); &.disabled { cursor: default; @@ -2328,7 +2338,7 @@ } .ui.label.basic.blue { - background-color: var(--color-primary-alpha-20) !important; + background-color: var(--color-reaction-active-bg) !important; border-color: var(--color-secondary) !important; } diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less index 9e39c4bec4..93f317a371 100644 --- a/web_src/less/themes/theme-arc-green.less +++ b/web_src/less/themes/theme-arc-green.less @@ -109,6 +109,8 @@ --color-editor-line-highlight: var(--color-primary-light-5); --color-project-board-bg: var(--color-secondary-light-2); --color-caret: var(--color-text); /* should ideally be --color-text-dark, see #15651 */ + --color-reaction-bg: #ffffff12; + --color-reaction-active-bg: var(--color-primary-alpha-40); } ::-webkit-calendar-picker-indicator { @@ -119,10 +121,6 @@ background-color: #383c4a; } -.repository .segment.reactions .ui.label.basic.blue { - background: var(--color-primary-alpha-20) !important; -} - [data-tooltip]::before, [data-tooltip]::after { background: #1b1c1d !important; /* .ui.inverted.popup */