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 <xiaolunwen@gmail.com>
Co-authored-by: zeripath <art27@cantab.net>
This commit is contained in:
silverwind 2020-08-24 00:45:21 +02:00 committed by GitHub
parent 1bf7b8d7c1
commit 0c0f049d09
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 28 additions and 7 deletions

View file

@ -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 {

View file

@ -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;
}