feat: Use font relative units in CSS instead of pixels. (#503)

Fixes #492
googleads · Feb 9, 2018 · aff9e5e · aff9e5e
1 parent 925e7ca
commit aff9e5e
Showing 1 changed file with 23 additions and 23 deletions.
diff --git a/src/css/videojs.ima.css b/src/css/videojs.ima.css
@@ -15,7 +15,7 @@
  */
 
 .ima-ad-container {
-  top: 0px;
+  top: 0em;
   position: absolute;
   display: none;
   width: 100%;
@@ -24,23 +24,23 @@
 
 /* Move overlay if user fast-clicks play button. */
 .video-js.vjs-playing .bumpable-ima-ad-container {
-  margin-top: -40px;
+  margin-top: -4em;
 }
 
 /* Move overlay when controls are active. */
 .video-js.vjs-user-inactive.vjs-playing .bumpable-ima-ad-container {
-  margin-top: 0px;
+  margin-top: 0em;
 }
 
 .video-js.vjs-paused .bumpable-ima-ad-container,
 .video-js.vjs-playing:hover .bumpable-ima-ad-container,
 .video-js.vjs-user-active.vjs-playing .bumpable-ima-ad-container {
-  margin-top: -40px;
+  margin-top: -4em;
 }
 
 .ima-controls-div {
-  bottom:0px;
-  height: 14px;
+  bottom: 0em;
+  height: 1.4em;
   position: absolute;
   overflow: hidden;
   display: none;
@@ -75,34 +75,34 @@
 }
 
 .ima-controls-div.ima-controls-div-showing {
-  height: 37px;
+  height: 3.7em;
 }
 
 .ima-countdown-div {
-  height: 10px;
+  height: 1em;
   color: #FFFFFF;
   text-shadow: 0 0 0.2em #000;
   cursor: default;
 }
 
 .ima-seek-bar-div {
-  top: 12px;
-  height: 3px;
+  top: 1.2em;
+  height: 0.3em;
   position: absolute;
   background: rgba(255, 255, 255, .4);
 }
 
 .ima-progress-div {
-  width: 0px;
-  height: 3px;
+  width: 0em;
+  height: 0.3em;
   background-color: #ECC546;
 }
 
 .ima-play-pause-div, .ima-mute-div, .ima-slider-div, .ima-fullscreen-div {
-  width: 35px;
-  height: 20px;
-  top: 11px;
-  left: 0px;
+  width: 2.33em;
+  height: 1.33em;
+  top: 0.733em;
+  left: 0em;
   position: absolute;
   color: #CCCCCC;
   font-size: 1.5em;
@@ -114,27 +114,27 @@
 
 .ima-mute-div {
   left: auto;
-  right: 85px;
+  right: 5.667em;
 }
 
 .ima-slider-div {
   left: auto;
-  right: 35px;
-  width: 50px;
-  height: 10px;
-  top: 20px;
+  right: 2.33em;
+  width: 3.33em;
+  height: 0.667em;
+  top: 1.33em;
   background-color: #555555;
 }
 
 .ima-slider-level-div {
   width: 100%;
-  height: 10px;
+  height: 0.667em;
   background-color: #ECC546;
 }
 
 .ima-fullscreen-div {
   left: auto;
-  right: 0px;
+  right: 0em;
 }
 
 .ima-playing:before {