Tweak reaction buttons (#11496) (#11516)

- Vertical centering using flexbox
- Very slightly decreased size of the boxes

Co-authored-by: zeripath <art27@cantab.net>
Co-authored-by: techknowlogick <techknowlogick@gitea.io>
Co-authored-by: zeripath <art27@cantab.net>
Co-authored-by: techknowlogick <techknowlogick@gitea.io>

diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index 148d65e717d7645f10c94d7e31506eaa905c0441..38f9e115c8f7b83575e70d91a806d90cb9b0df4e 100644 (file)
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -2197,9 +2197,12 @@
         padding: 0;
         display: flex;
 
-        .ui.label {
+        .ui.label,
+        .ui.label.visible {
             max-height: 40px;
-            padding: 9px 15px 7px;
+            padding: .4rem .8rem;
+            display: flex !important;
+            align-items: center;
             border: 0;
             border-right: 1px solid;
             border-radius: 0;
@@ -2220,20 +2223,17 @@
         }
 
         .reaction-count {
-            margin-left: 4px;
+            margin-left: .5rem;
         }
 
         .select-reaction {
-            float: left;
-            padding: .6em;
-            line-height: 21px;
+            display: flex;
+            align-items: center;
+            padding: .5rem;
 
             &:not(.active) a {
                 display: none;
             }
-            > svg {
-                vertical-align: middle;
-            }
         }
 
         &:hover .select-reaction a {