forks/forgejo
1
0
Fork 0
Code Releases Activity

Reaction picker display improvements (#12576)

Browse source 
- 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
Show stats Download patch file Download diff file Expand all files Collapse all files

25
web_src/less/_repository.less
View file

@ -2345,9 +2345,10 @@
> .item { > .item {
float: left; float: left;
padding: .5rem !important; padding: .25rem !important;
margin: .25rem;
font-size: 1.5em; font-size: 1.5em;
width: 45px; width: 39px;
left: 13px; left: 13px;
img.emoji { img.emoji {
@ -2361,10 +2362,9 @@
padding: 0; padding: 0;
display: flex; display: flex;
.ui.label, .ui.label {
.ui.label.visible {
max-height: 40px; max-height: 40px;
padding: .4rem .8rem; padding: 7px 18px;
display: flex !important; display: flex !important;
align-items: center; align-items: center;
border: 0; border: 0;
@ -2372,7 +2372,7 @@
border-radius: 0; border-radius: 0;
margin: 0; margin: 0;
font-size: 14px; font-size: 14px;
font-weight: 100; font-weight: normal;
border-color: inherit !important; border-color: inherit !important;
&.disabled { &.disabled {
@ -2393,11 +2393,22 @@
.select-reaction { .select-reaction {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 .5rem; padding: 0 14px;
&:not(.active) a { &:not(.active) a {
display: none; display: none;
} }
.item {
border-radius: 6px;
display: flex;
justify-content: center;
align-items: center;
}
.item:hover {
background: #4183c4;
}
} }
&:hover .select-reaction a { &:hover .select-reaction a {

10
web_src/less/themes/theme-arc-green.less
View file

@ -704,6 +704,16 @@ a.ui.basic.green.label:hover {
border-color: #26577b !important; 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 { .ui.menu .item > .label {
background: #565454; background: #565454;
} }