Fix icons layout issues

cjpillsbury · Feb 2, 2022 · 598bd33 · 598bd33
1 parent fbd9c43
commit 598bd33
Showing 1 changed file with 6 additions and 8 deletions.
diff --git a/src/js/media-chrome-button.js b/src/js/media-chrome-button.js
@@ -10,10 +10,11 @@ const template = document.createElement('template');
 template.innerHTML = `
 <style>
   :host {
-    display: inline-block;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
     width: auto;
     height: auto;
-    vertical-align: middle;
     box-sizing: border-box;
     background-color: var(--media-control-background, rgba(20,20,30, 0.7));
 
@@ -22,15 +23,13 @@ template.innerHTML = `
     /* Vertically center any text */
     font-size: 14px;
     font-weight: bold;
-    color: #ffffff;
-    text-align: center;
+    color: #fff;
 
     transition: background-color 0.15s linear;
 
     pointer-events: auto;
     cursor: pointer;
     font-family: Arial, sans-serif;
-    vertical-align: middle;
   }
 
   /*
@@ -47,16 +46,15 @@ template.innerHTML = `
   }
 
   svg, img, ::slotted(svg), ::slotted(img) {
-    width: var(--media-button-icon-width, 24px);
-    height: var(--media-button-icon-height);
+    width: var(--media-button-icon-width);
+    height: var(--media-button-icon-height, 18px);
     transform: var(--media-button-icon-transform);
     transition: var(--media-button-icon-transition);
     fill: var(--media-icon-color, #eee);
     vertical-align: middle;
     max-width: 100%;
     max-height: 100%;
     min-width: 100%;
-    min-height: 100%;
   }
 
   ::slotted(div), ::slotted(span) {