Change the color of video player controls

diff --git a/app/static/src/sass/vendors/_videojs.scss b/app/static/src/sass/vendors/_videojs.scss
index df11bae7985d60efd112242319c892d0a6910f06..f3b18e63a27f39aec69673e3470ec01b7cabf36e 100644 (file)
--- a/app/static/src/sass/vendors/_videojs.scss
+++ b/app/static/src/sass/vendors/_videojs.scss
@@ -129,7 +129,7 @@ $slider-bg-color: lighten($primary-background-color, 33%);
     background: #fff;
 }
 .vjs-ircam-skin .vjs-fullscreen-control {
-  border: 3px solid #fff;
+  border: 3px solid $color-main;
   box-sizing: border-box;
   cursor: pointer;
   margin-top: -7px;
@@ -192,7 +192,7 @@ $slider-bg-color: lighten($primary-background-color, 33%);
     content: ''; //Remove Circle from Progress Bar
 }
 .vjs-ircam-skin .vjs-volume-bar {
-    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcCAQAAACw95UnAAAAMElEQVRIx2NgoBL4n4YKGUYNHkEG4zJg1OCRYDCpBowaPJwMppbLRg0eNXjUYBLEAXWNUA6QNm1lAAAAAElFTkSuQmCC);
+    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcCAYAAAAa/l2sAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyppVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTMyIDc5LjE1OTI4NCwgMjAxNi8wNC8xOS0xMzoxMzo0MCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUuNSAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoxMzU4NkFCRTZFMDExMUU2ODQyMjg1MjAwM0FFNjlBMyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoxMzU4NkFCRjZFMDExMUU2ODQyMjg1MjAwM0FFNjlBMyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjAwNDYyQUZGNkUwMTExRTY4NDIyODUyMDAzQUU2OUEzIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjAwNDYyQjAwNkUwMTExRTY4NDIyODUyMDAzQUU2OUEzIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+/U1vZAAAAFxJREFUeNpi/PWCYUABq/h/FP7vl4y++NQzMQwxMOrgUQcPdQez0MEOXwLym0eTxKiDRx08zEoJqub60SQx6uBRBw+BUmJAc/1okhh18KiDRx086uBRB9MUAAQYAFK9CG1Nh9VWAAAAAElFTkSuQmCC');
     background-size: 22px 14px;
     background-repeat: no-repeat;
     height: 100%;
@@ -203,7 +203,7 @@ $slider-bg-color: lighten($primary-background-color, 33%);
     border-radius: 0;
 }
 .vjs-ircam-skin .vjs-volume-level {
-    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcAQAAAAAyhWABAAAAAnRSTlMAAHaTzTgAAAAZSURBVHgBYwAB/g9EUv+JokCqiaT+U4MCAPKPS7WUUOc1AAAAAElFTkSuQmCC);
+    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcCAYAAAAa/l2sAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyppVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTMyIDc5LjE1OTI4NCwgMjAxNi8wNC8xOS0xMzoxMzo0MCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUuNSAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowMDQ2MkFGOTZFMDExMUU2ODQyMjg1MjAwM0FFNjlBMyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDowMDQ2MkFGQTZFMDExMUU2ODQyMjg1MjAwM0FFNjlBMyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjAwNDYyQUY3NkUwMTExRTY4NDIyODUyMDAzQUU2OUEzIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjAwNDYyQUY4NkUwMTExRTY4NDIyODUyMDAzQUU2OUEzIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+L58+xQAAAFtJREFUeNrs1DsOABAQRVEjrMH+d8cWKEatofHJyH2dkDjFm5Ga3dPEpMO5FdHZe++MBTBg6+Bw4Q9d3AuVAAz4sy2xdeqpBGDABrbE06mnEoABAwYM+Gi6AAMApVAJH04fDl8AAAAASUVORK5CYII=');
     background-size: 22px 14px;
     background-repeat: no-repeat;
     max-width: 22px;