From b310ca09799a5468677e13b8dae4c24b173b7b11 Mon Sep 17 00:00:00 2001
From: Robert Kaiser <kairo@kairo.at>
Date: Fri, 30 Jan 2009 23:52:14 +0100
Subject: [PATCH] update for toolkit winstripe changes until 2009-01-30: video
 controls now include progress bar(s)

---
 EarlyBlue/global/media/muteButton.png         | Bin 237 -> 239 bytes
 EarlyBlue/global/media/pauseButton.png        | Bin 209 -> 209 bytes
 EarlyBlue/global/media/playButton.png         | Bin 227 -> 231 bytes
 EarlyBlue/global/media/scrubberThumb.png      | Bin 0 -> 170 bytes
 EarlyBlue/global/media/unmuteButton.png       | Bin 228 -> 229 bytes
 EarlyBlue/global/media/videocontrols.css      |  69 ++++++++++++++++--
 EarlyBlue/global/scale.css                    |   1 +
 LCARStrek/global/media/muteButton-hover.png   | Bin 237 -> 239 bytes
 LCARStrek/global/media/muteButton.png         | Bin 237 -> 239 bytes
 LCARStrek/global/media/pauseButton-hover.png  | Bin 209 -> 209 bytes
 LCARStrek/global/media/pauseButton.png        | Bin 209 -> 209 bytes
 LCARStrek/global/media/playButton-hover.png   | Bin 227 -> 231 bytes
 LCARStrek/global/media/playButton.png         | Bin 227 -> 231 bytes
 .../global/media/scrubberThumb-hover.png      | Bin 0 -> 196 bytes
 LCARStrek/global/media/scrubberThumb.png      | Bin 0 -> 196 bytes
 LCARStrek/global/media/unmuteButton-hover.png | Bin 228 -> 229 bytes
 LCARStrek/global/media/unmuteButton.png       | Bin 228 -> 229 bytes
 LCARStrek/global/media/videocontrols.css      |  65 ++++++++++++++++-
 LCARStrek/global/scale.css                    |   1 +
 19 files changed, 126 insertions(+), 10 deletions(-)
 create mode 100644 EarlyBlue/global/media/scrubberThumb.png
 create mode 100644 LCARStrek/global/media/scrubberThumb-hover.png
 create mode 100644 LCARStrek/global/media/scrubberThumb.png

diff --git a/EarlyBlue/global/media/muteButton.png b/EarlyBlue/global/media/muteButton.png
index 082ebba032363c16b7c2413702eaca0596cb6e33..3ad97273083a962523164af28ffb03f5bdbee41e 100644
GIT binary patch
delta 137
zcmaFM_?}U*Gr-TCmrII^fq{Y7)59eQNGk%d3?nm;yn4<hexjl%S7pGm|NsBreC~B@
zqJtHOoR|{J8S~8xCN^of8hE-mhHzX@PEg=7Y2a`(IBCP|vgthI#6PtPpX#k=<Q#L{
nrX1o_;^@;bgUxWJ0RzJ$Ccd+;e(3!Mn$F<q>gTe~DWM4fR4Fa@

delta 135
zcmaFQ_?A(zGr-TCmrII^fq{Y7)59eQNK1e)BQub^wR8RMiHf3J+fT6k|NsAsU`Omk
z2P+Oqem%|AwG8toHfcEPdAc};a9mGLaA22l&|y3>jhBaKD!YV4olU}n|A7og*fMr7
k=&*+|2Wc~2?dD>5F@t~pZ`WIwfMzpzy85}Sb4q9e09uSG;Q#;t

diff --git a/EarlyBlue/global/media/pauseButton.png b/EarlyBlue/global/media/pauseButton.png
index 5d3bd664da434ca8fb00cb23ebe4342f41f896c0..c71622072fef2fbc320b63768f8bec618f43cc89 100644
GIT binary patch
delta 98
zcmcb}c#%=DGr-TCmrII^fq{Y7)59eQNXvjQBQucnIP80UqM|6*n+;3<|Np;EcPaZs
x2P+OaF(v(kZm$Oun+)X?m}+Vqc$*X$7`_%t<{MvowE?J&!PC{xWt~$(695?u9X|j7

delta 98
zcmcb}c#%=DGr-TCmrII^fq{Y7)59eQNK1e)BQub^wR8RMiHf3J+Y2uK|NsA}PLuLP
x2P+OqepRDGZv=KsY%-KPz$n3QKB1+Mf#Gr&zag*shtoi944$rjF6*2UngB_o9lQVl

diff --git a/EarlyBlue/global/media/playButton.png b/EarlyBlue/global/media/playButton.png
index 3ecb4fe4c47f74a4dd4ace6bb77654d748781fa5..d6f8d345708bdd5d8f5ec3e4456c5fe2e35b58f7 100644
GIT binary patch
delta 129
zcmaFN_?%I(Gr-TCmrII^fq{Y7)59eQNXvjQBQucnIP80UqM|5QZv)5w|No1ZGAx_u
zV8tOPrp#qDW&N{>O&Ycuo-U3d9M_W*6qqy`IG6<z8I^JzT4XymunY4RFzF>ShvzVu
cHz+VLNX}+qY<O|V6KE=fr>mdKI;Vst0F&Ax+W-In

delta 125
zcmaFP_?S_#Gr-TCmrII^fq{Y7)59eQNK1e)BQub^wR8RMiHf3J+fOw8|Nq}cIdRuS
z2P+OqK6T01B@cZkHfdO@c)B=-a9mGLIKV2?V8PhI-LQkHBfDV-Usv{mB-Q{^J_}z)
ZhK~xYtjwm9-T_Ty@O1TaS?83{1OV<RCBy&#

diff --git a/EarlyBlue/global/media/scrubberThumb.png b/EarlyBlue/global/media/scrubberThumb.png
new file mode 100644
index 0000000000000000000000000000000000000000..bac1b1ae8fd56b1d875943100d973d3807a31bde
GIT binary patch
literal 170
zcmeAS@N?(olHy`uVBq!ia0vp^+(0bC#0(_Wob-PKDaPU;cPEB*=VV?2Ih+ALA+BdG
z+yydc&OCFG%WxA&MUuC>3quF1tOrO%fk$L9&=_G5W@MN(M*=9wUgGKN%6^kkPE1$&
z*z!fQfI?E9E{-7_*OMc*X0bXmGqXE)H?X@(q_ADkVfd0HbdsNO<qx1L22WQ%mvv4F
FO#mylD69Yg

literal 0
HcmV?d00001

diff --git a/EarlyBlue/global/media/unmuteButton.png b/EarlyBlue/global/media/unmuteButton.png
index a2b1a337324bf983acb0fc273df1155c0036018a..d4d4c0bf8cf53a467c81cd4fdffd8f147fdb69f2 100644
GIT binary patch
delta 127
zcmaFD_>@txGr-TCmrII^fq{Y7)59eQNGk%d3?nm;yn4<hexjl%*VYru{{R0UxBJJ9
zi4ImAa$-u-j`sUPCpKwVt9iOOhHzX@PEg=7Y2a`(ILV`S^Pr0Tj6eP?C;OLlOP)08
cIN8F;uuh9lpT)@e6wpitPgg&ebxsLQ0ETHOng9R*

delta 126
zcmaFL_=HihGr-TCmrII^fq{Y7)59eQNK1e)BQub^wR8RMiHf3J+Y284|Nq~Vy{c)V
zgB6D)zrMwdYl1oxn>4IcJzX3_IIbrrIIzn&=rA4;bBJL)VlN@_qcCBDOhhkh2tRvU
aCd1{GoV#6SYor5>WbkzLb6Mw<&;$VCASK2C

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 3e7bf84a8ff2b24f724ee6aac25394f1403b90e0..ce4161832b81c106f15fbfbadaf0ba3a3a4da535 100644
GIT binary patch
delta 137
zcmaFM_?}U*Gr-TCmrII^fq{Y7)59eQNGk%d3?nm;yn4<hexjl%*X9=>F-ze&ffF69
zIOIglw7vPBf1TK*;cDRN;uyklJvl*v%cOzB&ETXBv&*LQj1&LVDtxN9o{@9Rahr08
kQ;DNb!wfdVnFb6DkC^z*zWSl}8)zPbr>mdKI;Vst0NcbV$p8QV

delta 135
zcmaFQ_?A(zGr-TCmrII^fq{Y7)59eQNK1e)BQub^wR8RMiHf3J+Zh%DdExa>k|sJ>
zaY*tTb4XOw+@08@;jHKB;uyklJvqUFUB*F&@yIk@9-gV}5)ySb2@n1UG8|#c*ukK~
i9>yG`&3Lt&i{Zr#{`tRMZ(RbK#^CAd=d#Wzp$Py`J|^)1

diff --git a/LCARStrek/global/media/muteButton.png b/LCARStrek/global/media/muteButton.png
index bef18ea33db13c577c9260a0e68ffb3b46ed2e47..ffbdceaeb083ce2085dd380b94ed20c29f68714f 100644
GIT binary patch
delta 137
zcmaFM_?}U*Gr-TCmrII^fq{Y7)59eQNGk%d3?nm;yn4<hexjl%*ZYdV|K}OF=IGc?
zbg<%(6E#pu>G*MdVv~lefv1aO2*>s01O+aW1`aoalQzsQo6a*%{8Ov&sor`<&N0Vr
m${|iAjy?@D*bHYHFfcq~;ye55hu&|X=?tE(elF{r5}E*&4J+UP

delta 135
zcmaFQ_?A(zGr-TCmrII^fq{Y7)59eQNK1e)BQub^wR8RMiHf3J+bf#>pJ%wYV8exp
z4ptnJ{Dw*&zh3X0*regC=jq}Y!f`!0!GT@IL5K0kG+rK_sq7LGbv6kP{s%G~VawRT
kpu--<9Hh;7wVR9K#SH%Wzg=%#0-DX>>FVdQ&MBb@0Lu0&ZvX%Q

diff --git a/LCARStrek/global/media/pauseButton-hover.png b/LCARStrek/global/media/pauseButton-hover.png
index 0b2db5010afd691d54fd9cad72a6eb742ae607e2..bc894e2284275cc0548dccd2232a64000f8346a4 100644
GIT binary patch
delta 98
zcmcb}c#%=DGr-TCmrII^fq{Y7)59eQNXvjQBQucnIP80UqM|4l?}nv7UU9d#(L@I;
v4mnXX=DOYf{1clD<rJ7|Y8-f*6c`x37E0zDUwgFysF1<a)z4*}Q$iB}HWnDb

delta 98
zcmcb}c#%=DGr-TCmrII^fq{Y7)59eQNK1e)BQub^wR8RMiHf3J+Y@YoJj>f>jVC%-
waY*tTs~uTaC^WIjQ0@Su1i$%&mO=)G%U%42yy_oL0~IoOy85}Sb4q9e0FhG~8UO$Q

diff --git a/LCARStrek/global/media/pauseButton.png b/LCARStrek/global/media/pauseButton.png
index d41bd69072b3dd2333ed91ca03bdcd64d9652570..8f2d6feeb2684ae1bc9d93cfc8ee9d6e9ef89ad5 100644
GIT binary patch
delta 98
zcmcb}c#%=DGr-TCmrII^fq{Y7)59eQNXvjQBQucnIP80UqM|5QcR}O-^9=oWCu>f0
xu;P#tHBor?D(3&hCPO&|rkWZD-X;YGhOdQ^`Nr2?Z2)Rx@O1TaS?83{1OWO{9Si^f

delta 98
zcmcb}c#%=DGr-TCmrII^fq{Y7)59eQNK1e)BQub^wR8RMiHf3J+b=l%KhN-DS6Aai
x2P+Oqek1v&4JV=}HW|ttV3goDpU_gsz;L;X-;h`R!)c&422WQ%mvv4FO#m`-9ZmoM

diff --git a/LCARStrek/global/media/playButton-hover.png b/LCARStrek/global/media/playButton-hover.png
index 112a21467f53ec9dc758e5cbebff04a27f15408c..f31d4efd6c57349ea4642df3509f5d92e8b78fae 100644
GIT binary patch
delta 129
zcmaFN_?%I(Gr-TCmrII^fq{Y7)59eQNXvjQBQucnIP80UqM|6*))UKsyg1f-rzSdB
zamb0935js$|DD*RVXNWk;uyklJvl*vNuz;-Ss;;7DaWBjwqpakFmC~qULtdN4ug4v
b0t18OY!=3b7l%B7<}i4=`njxgN@xNA+_)fv

delta 125
zcmaFP_?S_#Gr-TCmrII^fq{Y7)59eQNK1e)BQub^wR8RMiHf3J+ck87JVwV(m5B~k
z9FqLTGE9qBEST7&VX5Nj;uyklJvre3t4xChV+VJ`4yKOmh8=ue*$a|b15EiWd>I)&
XDzLILn@)NMG=ss@)z4*}Q$iB}eheWL

diff --git a/LCARStrek/global/media/playButton.png b/LCARStrek/global/media/playButton.png
index 168e886c3fb7697834685c42a22dacefc588471a..2197f165114b012adcced9bb989f05ba9fc4351a 100644
GIT binary patch
delta 129
zcmaFN_?%I(Gr-TCmrII^fq{Y7)59eQNXvjQBQucnIP80UqM|5QcY)yl^9)9Fi+U$I
zSaHaS8f&aCaN?TSq+zS!>Eal|aXmRffk~r*gIOSvQ7OlvMYdxDyD)D7lU^cocn*Vk
cg8~DC<ZKqkh8KrCfu=Hey85}Sb4q9e00T%M@Bjb+

delta 125
zcmaFP_?S_#Gr-TCmrII^fq{Y7)59eQNK1e)BQub^wR8RMiHf3J+h^$gKhN;-<i$-B
z9jrJc`Hh6T*;)!FHfdO@c)B=-a9mGLIKV2?V8PhI-LQkHBfDV-Usv{mB-Q{^J_}z)
ZhK~xYtjwm9-T_Ty@O1TaS?83{1OUZJB`^R0

diff --git a/LCARStrek/global/media/scrubberThumb-hover.png b/LCARStrek/global/media/scrubberThumb-hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..82c9c01dc7561677c8d6f00be3ded8609c0d0f83
GIT binary patch
literal 196
zcmeAS@N?(olHy`uVBq!ia0vp^+(0bC#0(_Wob-PKDaPU;cPEB*=VV?2Ih+ALA+DP_
z1pc1~au`k;xT%6vlmz(&GdMiEkp|)<dAqwXbg;^L06Clm9+AaBGlfBzkzv*x37{Z*
ziKnkC`%OkUF-Cz57lA!MA$3m|#}JO|$q5k$4;<LKs?jm~8dKZUh1wF++R`SpI954S
eIi@k3Wnxe?l1hCmc<%{N3xlVtpUXO@geCwlSTT+O

literal 0
HcmV?d00001

diff --git a/LCARStrek/global/media/scrubberThumb.png b/LCARStrek/global/media/scrubberThumb.png
new file mode 100644
index 0000000000000000000000000000000000000000..052d7c545b4f9a07281dc803998abde6c9745c5e
GIT binary patch
literal 196
zcmeAS@N?(olHy`uVBq!ia0vp^+(0bC#0(_Wob-PKDaPU;cPEB*=VV?2Ih+ALA+Eg~
z0t_uJ|Iag&JazmCQc)7*7tG-B>_!@hljQC0!qCAg>j6?;;1O92G*cLa85w5HkpK#^
zmw5WRvfpHs6SZQ##K!=#O5M}NF@)oKazezx0|&OQYIMxL#?&@-p|-@dwzLT?j#Um-
ej%f^MnHUs}q*C7s-g^Sn!r<xZ=d#Wzp$PyW4l^wP

literal 0
HcmV?d00001

diff --git a/LCARStrek/global/media/unmuteButton-hover.png b/LCARStrek/global/media/unmuteButton-hover.png
index 4e0da1fad220e0ba16d7c98fa42f2d2fa2464db3..5038e27f7366abf8f1f7f7c06fd2f2b37fc9f7e7 100644
GIT binary patch
delta 127
zcmaFD_>@txGr-TCmrII^fq{Y7)59eQNGk%d3?nm;yn4<hexjl%*X9=>F-ze&ffF69
zIOIgl<g<1OJ4|fSuvYVQaSY+Oo}8e-WzxXmW^j^6?dCxh`x$@ySx)vZ>6Scc(s8nd
Zkzt({pFWF`^C_Sy44$rjF6*2UngH;QBY^+_

delta 126
zcmaFL_=HihGr-TCmrII^fq{Y7)59eQNK1e)BQub^wR8RMiHf3J+be{DJk4b%YbQEb
zaY*tTi||w`Oq$rFVWsNn;uyklJvqUFUB*F&@ram14C4`d35g$t2@_-@dRasG+1oN1
YF0bU=?J`><9cT!Hr>mdKI;Vst0KE<(3;+NC

diff --git a/LCARStrek/global/media/unmuteButton.png b/LCARStrek/global/media/unmuteButton.png
index 5d5c9e0f607606cbb666f95f3186c51824d157d4..d5bb7859d07c9d01bc7c0692ea1f9ae024abbda9 100644
GIT binary patch
delta 127
zcmaFD_>@txGr-TCmrII^fq{Y7)59eQNGk%d3?nm;yn4<hexjl%mr+6D|MLtf=@ZsW
zbg<%(6E$RWoS^GIu}Q;P&C|s(gyVX0f&!OG1BaWzNglPE2UYB6{PAZw*}tS)@}x<}
c$reV2by|G-EJn_!fMzmyy85}Sb4q9e0B>j|6aWAK

delta 126
zcmaFL_=HihGr-TCmrII^fq{Y7)59eQNK1e)BQub^wR8RMiHf3J+cz})KhLoC%x%Ys
z4ptnJ{D$UpG>nrbHfdO?db&7<a9mGLaA22l&|y3x<`Bbp#9l(;M`6MQnTTH25PtTy
aOoq!VId{9v)<_2$$>8bg=d#Wzp$P!J7$rgg

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"]
-- 
2.43.0