FLUID-4813: Added theming for the volume slider.

michelled · Oct 30, 2012 · bd53e8a · bd53e8a
1 parent d567784
commit bd53e8a
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 2 deletions.
diff --git a/css/VideoPlayer.css b/css/VideoPlayer.css
@@ -330,8 +330,9 @@ a.fl-videoPlayer-button-wrapper {
     border-radius: 0px 0px 0px 0px;
 }
 .fl-videoPlayer-volumeControl .ui-slider-handle {
-    height: 10%;
-    left: -75%;
+    height: 0.5em;
+    left: -0.4em;
+    width: 1em;
     margin-bottom: 0;
 }
 
@@ -340,6 +341,90 @@ a.fl-videoPlayer-button-wrapper {
     display: inline;
 }
 
+/* Volume slider theming */
+
+/* reset */
+.fl-theme-uio-yb .fl-videoPlayer-volumeControl, 
+.fl-theme-uio-wb .fl-videoPlayer-volumeControl,
+.fl-theme-uio-by .fl-videoPlayer-volumeControl,
+.fl-theme-uio-bw .fl-videoPlayer-volumeControl {
+	background: none !important;
+	border-collapse: separate; /* IE9 */
+}
+
+.fl-theme-uio-yb .fl-videoPlayer-volumeControl .ui-slider-range-min,
+.fl-theme-uio-wb .fl-videoPlayer-volumeControl .ui-slider-range-min,
+.fl-theme-uio-by .fl-videoPlayer-volumeControl .ui-slider-range-min,
+.fl-theme-uio-bw .fl-videoPlayer-volumeControl .ui-slider-range-min {
+	background: none !important;
+}
+
+.fl-theme-uio-yb .fl-videoPlayer-volumeControl .ui-slider-handle,
+.fl-theme-uio-wb .fl-videoPlayer-volumeControl .ui-slider-handle,
+.fl-theme-uio-by .fl-videoPlayer-volumeControl .ui-slider-handle,
+.fl-theme-uio-bw .fl-videoPlayer-volumeControl .ui-slider-handle {
+	background: none !important;
+}
+
+/* add theme colours */
+.fl-theme-uio-yb .fl-videoPlayer-volumeControl, 
+.fl-theme-uio-wb .fl-videoPlayer-volumeControl {
+	box-shadow: inset 0 0 0 2px #000000;
+	outline: 1px solid #000000;
+}	
+.fl-theme-uio-yb .fl-videoPlayer-volumeControl {
+	background-image: url('../images/yellow/sliderbg_yellowonblack.jpg') !important;
+}
+.fl-theme-uio-wb .fl-videoPlayer-volumeControl {
+	background-image: url('../images/white/sliderbg_whiteonblack.jpg') !important;
+}
+.fl-theme-uio-yb .fl-videoPlayer-volumeControl .ui-slider-handle,
+.fl-theme-uio-wb .fl-videoPlayer-volumeControl .ui-slider-handle {
+	border: 2px solid #000000 !important;
+}
+.fl-theme-uio-yb .fl-videoPlayer-volumeControl .ui-slider-handle {
+	background-color: #FFFF00 !important;
+}
+.fl-theme-uio-wb .fl-videoPlayer-volumeControl .ui-slider-handle {
+	background-color: #FFFFFF !important;
+}
+.fl-theme-uio-yb .fl-videoPlayer-volumeControl .ui-slider-range-min,
+.fl-theme-uio-wb .fl-videoPlayer-volumeControl .ui-slider-range-min {
+	background-color: #000000 !important;	
+}
+
+.fl-theme-uio-by .fl-videoPlayer-volumeControl {
+	box-shadow: inset 0 0 0 2px #FFFF00;
+	outline: 1px solid #FFFF00;
+}
+.fl-theme-uio-bw .fl-videoPlayer-volumeControl {
+	box-shadow: inset 0 0 0 2px #FFFFFF;
+	outline: 1px solid #FFFFFF;
+}
+.fl-theme-uio-by .fl-videoPlayer-volumeControl {
+	background-image: url('../images/black/sliderbg_blackonyellow.jpg') !important;
+}
+.fl-theme-uio-bw .fl-videoPlayer-volumeControl {
+	background-image: url('../images/black/sliderbg_blackonwhite.jpg') !important;
+}
+.fl-theme-uio-by .fl-videoPlayer-volumeControl .ui-slider-handle, 
+.fl-theme-uio-bw .fl-videoPlayer-volumeControl .ui-slider-handle {
+	background-color: #000000 !important;
+}
+.fl-theme-uio-by .fl-videoPlayer-volumeControl .ui-slider-handle {
+	border: 2px solid #FFFF00 !important;
+} 
+.fl-theme-uio-bw .fl-videoPlayer-volumeControl .ui-slider-handle {
+	border: 2px solid #FFFFFF !important;
+}
+.fl-theme-uio-by .fl-videoPlayer-volumeControl .ui-slider-range-min {
+	background-color: #FFFF00 !important;	
+}
+.fl-theme-uio-bw .fl-videoPlayer-volumeControl .ui-slider-range-min {
+	background-color: #FFFFFF !important;	
+}
+
+
 /**********************************
  * Captions and Transcripts Menus *
  **********************************/

diff --git a/images/black/sliderbg_blackonwhite.jpg b/images/black/sliderbg_blackonwhite.jpg
diff --git a/images/black/sliderbg_blackonyellow.jpg b/images/black/sliderbg_blackonyellow.jpg
diff --git a/images/white/sliderbg_whiteonblack.jpg b/images/white/sliderbg_whiteonblack.jpg
diff --git a/images/yellow/sliderbg_yellowonblack.jpg b/images/yellow/sliderbg_yellowonblack.jpg