diff --git a/src/client/app/common/views/components/reactions-viewer.vue b/src/client/app/common/views/components/reactions-viewer.vue index 9212a84b31..8e06b79d19 100644 --- a/src/client/app/common/views/components/reactions-viewer.vue +++ b/src/client/app/common/views/components/reactions-viewer.vue @@ -40,18 +40,24 @@ export default Vue.extend({ <style lang="stylus" scoped> .mk-reactions-viewer - border-top dashed 1px var(--reactionViewerBorder) - border-bottom dashed 1px var(--reactionViewerBorder) - margin 4px 0 + margin 6px 0 &:empty display none > span - margin-right 8px + margin-right 6px + padding 6px 6px 6px 4px + border-radius 3px &.notReacted cursor pointer + border solid 1px var(--reactionViewerButtonBorder) + background-color var(--reactionViewerButtonBg) + + &:hover + border solid 1px var(--reactionViewerButtonHoverBorder) + background-color var(--reactionViewerButtonHoverBg) > .mk-reaction-icon font-size 1.4em diff --git a/src/client/theme/dark.json5 b/src/client/theme/dark.json5 index cfec563201..1ac5554a83 100644 --- a/src/client/theme/dark.json5 +++ b/src/client/theme/dark.json5 @@ -84,7 +84,10 @@ reactionPickerButtonHoverBg: 'rgba(255, 255, 255, 0.18)', - reactionViewerBorder: 'rgba(255, 255, 255, 0.1)', + reactionViewerButtonBg: 'rgba(0, 0, 0, 0)', + reactionViewerButtonHoverBg: 'rgba(0, 0, 0, 0)', + reactionViewerButtonBorder: 'rgba(255, 255, 255, 0.1)', + reactionViewerButtonHoverBorder: 'rgba(255, 255, 255, 0.2)', pollEditorInputBg: 'rgba(0, 0, 0, 0.25)', diff --git a/src/client/theme/light.json5 b/src/client/theme/light.json5 index b770aa182b..0caea33480 100644 --- a/src/client/theme/light.json5 +++ b/src/client/theme/light.json5 @@ -84,7 +84,10 @@ reactionPickerButtonHoverBg: '#eee', - reactionViewerBorder: 'rgba(0, 0, 0, 0.1)', + reactionViewerButtonBg: 'rgba(0, 0, 0, 0)', + reactionViewerButtonHoverBg: 'rgba(0, 0, 0, 0)', + reactionViewerButtonBorder: 'rgba(0, 0, 0, 0.1)', + reactionViewerButtonHoverBorder: 'rgba(0, 0, 0, 0.2)', pollEditorInputBg: '#fff',