css: Improve toolbar icon positionning

src/static/css/pad/icons.css

@@ -10,11 +10,7 @@
 
 }
 
-.buttonicon{
-  width: 16px;
-  height: 16px;
-  display: inline-block;
-  vertical-align: middle;
+.buttonicon {
   border: none;
   padding: 0;
   background: none;
@@ -25,10 +21,8 @@
   font-weight: normal;
   color: #666;
   cursor: pointer;
-
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
-  display: inline-block;
   font-style: normal;
   font-variant: normal;
   text-rendering: auto;
@@ -43,7 +37,7 @@
   display: inline-block;
   text-decoration: inherit;
   width: 1em;
-  margin-right: .2em;
+  margin: 0;
   text-align: center;
 
   /* For safety - reset parent styles, that can break glyph codes*/
@@ -178,10 +172,10 @@
   -webkit-animation: spinAnimation 2s infinite linear;
   animation: spinAnimation 2s infinite linear;
   font-family: "fontawesome-etherpad";
-  font-size:22px;
-  z-index:150;
-  width:22px;
-  height:22px;
+  font-size: 22px;
+  z-index: 150;
+  width: 22px;
+  height: 22px;
 }
 
 @-webkit-keyframes spinAnimation {

src/static/css/pad/toolbar.css

@@ -32,18 +32,18 @@
   width: 10px;
 }
 .toolbar ul li a {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 28px;
+  height: 26px;
   border: 1px solid #ccc;
-  cursor: pointer;
   border-radius: 3px;
   background: #fff;
   color: #ccc;
   cursor: pointer;
-  min-height: 18px;
   overflow: hidden;
-  padding: 4px 5px;
-  text-align: center;
   text-decoration: none;
-  min-width: 18px;
   transition: background-color .1s;
 }
 .toolbar ul li button:active, .toolbar ul li button:focus {
@@ -133,7 +133,8 @@
     margin: 0;
   }
   .toolbar ul.menu_right > li[data-key="showusers"] a {
-    padding-top: 10px;
+    height: 100%;
+    width: 40px;
     border-radius: 0;
   }
 }