From 0c0f049d09dfcdaaf43029ff853a838c02efc79e Mon Sep 17 00:00:00 2001 From: silverwind Date: Mon, 24 Aug 2020 00:45:21 +0200 Subject: [PATCH] Reaction picker display improvements (#12576) - Remove overly thin font-width on counter - Add hover effect on reaction picker - Change colors on arc-green to green to match the theme Co-authored-by: Lunny Xiao Co-authored-by: zeripath --- web_src/less/_repository.less | 25 +++++++++++++++++------- web_src/less/themes/theme-arc-green.less | 10 ++++++++++ 2 files changed, 28 insertions(+), 7 deletions(-) diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less index eb316ee71..0d994c565 100644 --- a/web_src/less/_repository.less +++ b/web_src/less/_repository.less @@ -2345,9 +2345,10 @@ > .item { float: left; - padding: .5rem !important; + padding: .25rem !important; + margin: .25rem; font-size: 1.5em; - width: 45px; + width: 39px; left: 13px; img.emoji { @@ -2361,10 +2362,9 @@ padding: 0; display: flex; - .ui.label, - .ui.label.visible { + .ui.label { max-height: 40px; - padding: .4rem .8rem; + padding: 7px 18px; display: flex !important; align-items: center; border: 0; @@ -2372,7 +2372,7 @@ border-radius: 0; margin: 0; font-size: 14px; - font-weight: 100; + font-weight: normal; border-color: inherit !important; &.disabled { @@ -2393,11 +2393,22 @@ .select-reaction { display: flex; align-items: center; - padding: 0 .5rem; + padding: 0 14px; &:not(.active) a { display: none; } + + .item { + border-radius: 6px; + display: flex; + justify-content: center; + align-items: center; + } + + .item:hover { + background: #4183c4; + } } &:hover .select-reaction a { diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less index f9b643e96..bf7d2e116 100644 --- a/web_src/less/themes/theme-arc-green.less +++ b/web_src/less/themes/theme-arc-green.less @@ -704,6 +704,16 @@ a.ui.basic.green.label:hover { border-color: #26577b !important; } +.repository .segment.reactions .ui.label.basic.blue { + color: #a0cc75 !important; + background: #305020 !important; + border-color: #404552 !important; +} + +.repository .segment.reactions .select-reaction .item:hover { + background: #305020; +} + .ui.menu .item > .label { background: #565454; }