From: Robert Kaiser <kairo@kairo.at>
Date: Fri, 30 Jan 2009 22:52:14 +0000 (+0100)
Subject: update for toolkit winstripe changes until 2009-01-30: video controls now include... 
X-Git-Tag: LCARStrek-2.0a3~15
X-Git-Url: https://git-public.kairo.at/?p=themes.git;a=commitdiff_plain;h=b310ca09799a5468677e13b8dae4c24b173b7b11

update for toolkit winstripe changes until 2009-01-30: video controls now include progress bar(s)
---

diff --git a/EarlyBlue/global/media/muteButton.png b/EarlyBlue/global/media/muteButton.png
index 082ebba0..3ad97273 100644
Binary files a/EarlyBlue/global/media/muteButton.png and b/EarlyBlue/global/media/muteButton.png differ
diff --git a/EarlyBlue/global/media/pauseButton.png b/EarlyBlue/global/media/pauseButton.png
index 5d3bd664..c7162207 100644
Binary files a/EarlyBlue/global/media/pauseButton.png and b/EarlyBlue/global/media/pauseButton.png differ
diff --git a/EarlyBlue/global/media/playButton.png b/EarlyBlue/global/media/playButton.png
index 3ecb4fe4..d6f8d345 100644
Binary files a/EarlyBlue/global/media/playButton.png and b/EarlyBlue/global/media/playButton.png differ
diff --git a/EarlyBlue/global/media/scrubberThumb.png b/EarlyBlue/global/media/scrubberThumb.png
new file mode 100644
index 00000000..bac1b1ae
Binary files /dev/null and b/EarlyBlue/global/media/scrubberThumb.png differ
diff --git a/EarlyBlue/global/media/unmuteButton.png b/EarlyBlue/global/media/unmuteButton.png
index a2b1a337..d4d4c0bf 100644
Binary files a/EarlyBlue/global/media/unmuteButton.png and b/EarlyBlue/global/media/unmuteButton.png differ
diff --git a/EarlyBlue/global/media/videocontrols.css b/EarlyBlue/global/media/videocontrols.css
index 23cd9ff9..371a98e3 100644
--- a/EarlyBlue/global/media/videocontrols.css
+++ b/EarlyBlue/global/media/videocontrols.css
@@ -1,7 +1,7 @@
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
 .controlBar {
-  height: 24px;
+  height: 28px;
   background-color: rgba(102,102,153,0.75);
 }
 
@@ -10,20 +10,75 @@
   margin: 0px;
   padding: 0px;
   border: none;
-  min-height: 24px;
-  min-width: 24px;
+  min-height: 28px;
+  background-color: transparent;
+  background-repeat: no-repeat;
+  background-position: center center;
+}
+.playButton {
+  min-width: 28px;
+}
+.muteButton {
+  min-width: 33px;
 }
 
 .playButton {
-  background: url("chrome://global/skin/media/pauseButton.png") no-repeat center;
+  background-image: url("chrome://global/skin/media/pauseButton.png");
 }
 .playButton[paused="true"] {
-  background: url("chrome://global/skin/media/playButton.png") no-repeat center;
+  background-image: url("chrome://global/skin/media/playButton.png");
 }
 
 .muteButton {
-  background: url("chrome://global/skin/media/muteButton.png") no-repeat center;
+  background-image: url("chrome://global/skin/media/muteButton.png");
 }
 .muteButton[muted="true"] {
-  background: url("chrome://global/skin/media/unmuteButton.png") no-repeat center;
+  background-image: url("chrome://global/skin/media/unmuteButton.png");
+}
+
+.backgroundBar {
+  /* make bar 8px tall (control height = 28, minus 2 * 10 margin) */
+  margin: 10px 2px;
+  background-color: rgba(0,0,0,0.75);
+}
+
+.bufferBar, .progressBar {
+  /* make bar 8px tall (control height = 28, minus 2 * 10 margin) */
+  margin: 10px 2px;
+  border: none;
+  background-color: transparent;
+  min-width: 0px;
+  min-height: 0px;
+}
+
+/* .progress-bar is an element inside the <progressmeter> implementation. */
+.bufferBar .progress-bar {
+  /*
+   * Note that this is drawn on top of the .backgroundBar. So although this
+   * has the same background-color specified, the semitransparent
+   * compositing gives it a different visual appearance.
+   */
+  background-color: rgba(204,208,221,0.75);
+  -moz-appearance: none;
+}
+
+.progressBar .progress-bar {
+  background-color: #336699;
+  -moz-appearance: none;
+}
+
+/* .scale-slider is an element inside the <scale> implementation. */
+.scale-slider {
+  /* Hide the default horizontal bar. */
+  background: none;
+  margin: 0 2px;
+}
+
+/* .scale-thumb is an element inside the <scale> implementation. */
+.scale-thumb {
+  /* Override the default thumb appearance with a custom image. */
+  background: url("chrome://global/skin/media/scrubberThumb.png") no-repeat center;
+  border: none !important;
+  min-width: 11px;
+  min-height: 20px;
 }
diff --git a/EarlyBlue/global/scale.css b/EarlyBlue/global/scale.css
index 589df2c4..8520b42d 100644
--- a/EarlyBlue/global/scale.css
+++ b/EarlyBlue/global/scale.css
@@ -49,6 +49,7 @@
   background: url("chrome://global/skin/scale/scale-tray-horiz.gif") 0% 50% repeat-x;
   margin: 2px 4px;
   width: 100px;
+  height: auto;
 }
 
 .scale-slider[orient="vertical"]
diff --git a/LCARStrek/global/media/muteButton-hover.png b/LCARStrek/global/media/muteButton-hover.png
index 3e7bf84a..ce416183 100644
Binary files a/LCARStrek/global/media/muteButton-hover.png and b/LCARStrek/global/media/muteButton-hover.png differ
diff --git a/LCARStrek/global/media/muteButton.png b/LCARStrek/global/media/muteButton.png
index bef18ea3..ffbdceae 100644
Binary files a/LCARStrek/global/media/muteButton.png and b/LCARStrek/global/media/muteButton.png differ
diff --git a/LCARStrek/global/media/pauseButton-hover.png b/LCARStrek/global/media/pauseButton-hover.png
index 0b2db501..bc894e22 100644
Binary files a/LCARStrek/global/media/pauseButton-hover.png and b/LCARStrek/global/media/pauseButton-hover.png differ
diff --git a/LCARStrek/global/media/pauseButton.png b/LCARStrek/global/media/pauseButton.png
index d41bd690..8f2d6fee 100644
Binary files a/LCARStrek/global/media/pauseButton.png and b/LCARStrek/global/media/pauseButton.png differ
diff --git a/LCARStrek/global/media/playButton-hover.png b/LCARStrek/global/media/playButton-hover.png
index 112a2146..f31d4efd 100644
Binary files a/LCARStrek/global/media/playButton-hover.png and b/LCARStrek/global/media/playButton-hover.png differ
diff --git a/LCARStrek/global/media/playButton.png b/LCARStrek/global/media/playButton.png
index 168e886c..2197f165 100644
Binary files a/LCARStrek/global/media/playButton.png and b/LCARStrek/global/media/playButton.png differ
diff --git a/LCARStrek/global/media/scrubberThumb-hover.png b/LCARStrek/global/media/scrubberThumb-hover.png
new file mode 100644
index 00000000..82c9c01d
Binary files /dev/null and b/LCARStrek/global/media/scrubberThumb-hover.png differ
diff --git a/LCARStrek/global/media/scrubberThumb.png b/LCARStrek/global/media/scrubberThumb.png
new file mode 100644
index 00000000..052d7c54
Binary files /dev/null and b/LCARStrek/global/media/scrubberThumb.png differ
diff --git a/LCARStrek/global/media/unmuteButton-hover.png b/LCARStrek/global/media/unmuteButton-hover.png
index 4e0da1fa..5038e27f 100644
Binary files a/LCARStrek/global/media/unmuteButton-hover.png and b/LCARStrek/global/media/unmuteButton-hover.png differ
diff --git a/LCARStrek/global/media/unmuteButton.png b/LCARStrek/global/media/unmuteButton.png
index 5d5c9e0f..d5bb7859 100644
Binary files a/LCARStrek/global/media/unmuteButton.png and b/LCARStrek/global/media/unmuteButton.png differ
diff --git a/LCARStrek/global/media/videocontrols.css b/LCARStrek/global/media/videocontrols.css
index 678ded51..149c0dee 100644
--- a/LCARStrek/global/media/videocontrols.css
+++ b/LCARStrek/global/media/videocontrols.css
@@ -1,7 +1,7 @@
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
 .controlBar {
-  height: 24px;
+  height: 28px;
   background-color: rgba(156,156,255,0.75);
 }
 
@@ -10,12 +10,17 @@
   margin: 0px;
   padding: 0px;
   border: none;
-  min-height: 24px;
-  min-width: 24px;
+  min-height: 28px;
   background-color: transparent;
   background-repeat: no-repeat;
   background-position: center center;
 }
+.playButton {
+  min-width: 28px;
+}
+.muteButton {
+  min-width: 33px;
+}
 .playButton:hover, .muteButton:hover {
   background-color: rgba(255,207,0,0.75);
 }
@@ -49,3 +54,57 @@
 .muteButton[muted="true"]:hover {
   background-image: url("chrome://global/skin/media/unmuteButton-hover.png");
 }
+
+.backgroundBar {
+  /* make bar 8px tall (control height = 28, minus 2 * 10 margin) */
+  margin: 10px 2px;
+  background-color: rgba(0,0,0,0.75);
+  -moz-border-radius: 3px 3px;
+}
+
+.bufferBar, .progressBar {
+  /* make bar 8px tall (control height = 28, minus 2 * 10 margin) */
+  margin: 10px 2px;
+  border: none;
+  background-color: transparent;
+  min-width: 0px;
+  min-height: 0px;
+}
+
+/* .progress-bar is an element inside the <progressmeter> implementation. */
+.bufferBar .progress-bar {
+  /*
+   * Note that this is drawn on top of the .backgroundBar. So although this
+   * has the same background-color specified, the semitransparent
+   * compositing gives it a different visual appearance.
+   */
+  background-color: rgba(255,159,0,0.75);
+  -moz-border-radius: 3px 3px;
+  -moz-appearance: none;
+}
+
+.progressBar .progress-bar {
+  background-color: #008484;
+  -moz-border-radius: 3px 3px;
+  -moz-appearance: none;
+}
+
+/* .scale-slider is an element inside the <scale> implementation. */
+.scale-slider {
+  /* Hide the default horizontal bar. */
+  background: none;
+  margin: 0 2px;
+}
+
+/* .scale-thumb is an element inside the <scale> implementation. */
+.scale-thumb {
+  /* Override the default thumb appearance with a custom image. */
+  background: url("chrome://global/skin/media/scrubberThumb.png") no-repeat center;
+  border: none !important;
+  min-width: 11px;
+  min-height: 20px;
+}
+
+.scale-thumb:hover, .scale-thumb:active {
+  background-image: url("chrome://global/skin/media/scrubberThumb-hover.png");
+}
diff --git a/LCARStrek/global/scale.css b/LCARStrek/global/scale.css
index f2a4b06d..f13eba11 100644
--- a/LCARStrek/global/scale.css
+++ b/LCARStrek/global/scale.css
@@ -49,6 +49,7 @@
   background: url("chrome://global/skin/scale/scale-tray-horiz.gif") 0% 50% repeat-x;
   margin: 2px 4px;
   width: 100px;
+  height: auto;
 }
 
 .scale-slider[orient="vertical"]