Sync style of volume slider with seekbar

acri-jp · Feb 27, 2020 · dbf7561 · dbf7561
1 parent f5b3736
commit dbf7561
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 6 deletions.
diff --git a/build/ableplayer.dist.js b/build/ableplayer.dist.js
@@ -630,6 +630,7 @@ var AblePlayerInstances = [];
 			}
 			$('body').append($el);
 			bgColor = $el.css('background-color');
+
 			// bgColor is a string in the form 'rgb(R, G, B)', perhaps with a 4th item for alpha;
 			// split the 3 or 4 channels into an array
 			rgb = bgColor.replace(/[^\d,]/g, '').split(',');
@@ -644,6 +645,7 @@ var AblePlayerInstances = [];
 			else { // background is light
 				iconColor = 'black';
 			}
+
 			if ($elements[i] === 'controller') {
 				this.iconColor = iconColor;
 			}

diff --git a/build/ableplayer.js b/build/ableplayer.js
@@ -630,6 +630,7 @@ var AblePlayerInstances = [];
 			}
 			$('body').append($el);
 			bgColor = $el.css('background-color');
+console.log('bgColor is ' + bgColor);
 			// bgColor is a string in the form 'rgb(R, G, B)', perhaps with a 4th item for alpha;
 			// split the 3 or 4 channels into an array
 			rgb = bgColor.replace(/[^\d,]/g, '').split(',');
@@ -644,6 +645,7 @@ var AblePlayerInstances = [];
 			else { // background is light
 				iconColor = 'black';
 			}
+console.log('iconColor: ' + iconColor);
 			if ($elements[i] === 'controller') {
 				this.iconColor = iconColor;
 			}

diff --git a/build/ableplayer.min.css b/build/ableplayer.min.css
diff --git a/build/ableplayer.min.js b/build/ableplayer.min.js
diff --git a/styles/ableplayer.css b/styles/ableplayer.css
@@ -142,15 +142,15 @@
   color: #000 !important;
 }
 .able-black-controls .able-seekbar {
-  border: 2px solid #000;
+  border: 1px solid #000;
 }
 .able-white-controls,
 .able-white-controls button,
 .able-black-controls label {
   color: #FFF !important;
 }
 .able-white-controls .able-seekbar {
-  border: 2px solid #FFF;
+  border: 1px solid #FFF;
 }
 .able-controller button {
   background: none;
@@ -265,16 +265,20 @@
   display: block;
   position: relative;
   height: 100%; /* = 50px after padding */
-  width: 5px;
+  width: 7px;
   margin: 0 auto;
-  background-color: #999;
+  background-color: #000;
 }
 .able-volume-track.able-volume-track-on {
   background-color: #dadada;
   position: absolute;
   height: 20px; /* change dynamically; 5px per volume tick */
   top: 30px;  /* change dynamically; 50px - height */
 }
+.able-volume-slider > .able-volume-track {
+  /* add border only to the outer track */
+  border: 1px solid #FFF;
+}
 .able-volume-head {
   display: inline-block;
   background-color: #fdfdfd;