some actual work on getting Firefox theming nearer to right
[themes.git] / EarlyBlue / global / media / videocontrols.css
CommitLineData
29465e59
RK
1@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
2
6f25e2c5 3.controlBar {
b310ca09 4 height: 28px;
6f25e2c5 5 background-color: rgba(102,102,153,0.75);
29465e59
RK
6}
7
6f25e2c5
RK
8.playButton, .muteButton {
9 /* Remove the usual button appearance and styling */
10 margin: 0px;
11 padding: 0px;
12 border: none;
b310ca09
RK
13 min-height: 28px;
14 background-color: transparent;
15 background-repeat: no-repeat;
16 background-position: center center;
17}
18.playButton {
19 min-width: 28px;
ca710c53
RK
20 margin-right: -22px; /* 1/2 of scrubber thumb width, for overhang. */
21 position: relative; /* Trick to work around negative margin interfering with clicking on the button. */
b310ca09
RK
22}
23.muteButton {
24 min-width: 33px;
29465e59
RK
25}
26
6f25e2c5 27.playButton {
b310ca09 28 background-image: url("chrome://global/skin/media/pauseButton.png");
29465e59 29}
6f25e2c5 30.playButton[paused="true"] {
b310ca09 31 background-image: url("chrome://global/skin/media/playButton.png");
29465e59
RK
32}
33
6f25e2c5 34.muteButton {
b310ca09 35 background-image: url("chrome://global/skin/media/muteButton.png");
6f25e2c5
RK
36}
37.muteButton[muted="true"] {
b310ca09
RK
38 background-image: url("chrome://global/skin/media/unmuteButton.png");
39}
40
ca710c53
RK
41.volumeStack {
42 width: 28px;
43 height: 70px;
44 background-color: rgba(102,102,153,0.74);
45 /* use negative margin to place stack over the mute button to its left. */
46 margin: -70px 3px 28px -31px;
47 overflow: hidden; /* crop it when sliding down, don't grow the control bar */
48 position: relative; /* Trick to work around negative margin interfering with dragging the thumb. */
49 padding-top: 6px;
50}
51
52.volumeControl {
53 min-height: 64px;
54}
55
56/* .scale-thumb is an element inside the <scale> implementation. */
57.volumeControl .scale-thumb {
58 /* Override the default thumb appearance with a custom image. */
59 -moz-appearance: none;
60 background: url("chrome://global/skin/media/volumeThumb.png") no-repeat center;
61 border: none !important;
62 min-width: 16px;
63 min-height: 11px;
64}
65
66.volumeBackgroundBar {
67 /* margin left/right: make bar 8px wide (control width = 28, minus 2 * 10 margin) */
68 margin: 0px 10px;
69 background-color: rgba(0,0,0,0.5);
70}
71
ca710c53
RK
72.durationBox {
73 -moz-box-pack: center;
74}
75
76.durationLabel {
77 margin-left: -22px; /* 1/2 of scrubber thumb width, for overhang. */
78 padding-left: 8px; /* don't bump into the scrubber bar */
79 padding-top: 0px; /* center vertically with scrubber bar */
80 color: rgba(204,208,221,0.75);
1e140ad9 81 font-size: 11px;
3327253e 82 font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
ca710c53
RK
83}
84
9162a092
RK
85.positionLabel {
86 display: none;
87}
88
b310ca09 89.backgroundBar {
ca710c53
RK
90 /* margin top/bottom: make bar 8px tall (control height = 28, minus 2 * 10 margin) */
91 /* margin left/right: 1/2 of scrubber thumb width, for overhang. */
92 margin: 10px 22px;
b310ca09
RK
93 background-color: rgba(0,0,0,0.75);
94}
95
96.bufferBar, .progressBar {
ca710c53
RK
97 /* margin top/bottom: make bar 8px tall (control height = 28, minus 2 * 10 margin) */
98 /* margin left/right: 1/2 of scrubber thumb width, for overhang. */
99 margin: 10px 22px;
b310ca09
RK
100 border: none;
101 background-color: transparent;
102 min-width: 0px;
103 min-height: 0px;
104}
105
106/* .progress-bar is an element inside the <progressmeter> implementation. */
107.bufferBar .progress-bar {
108 /*
109 * Note that this is drawn on top of the .backgroundBar. So although this
110 * has the same background-color specified, the semitransparent
111 * compositing gives it a different visual appearance.
112 */
113 background-color: rgba(204,208,221,0.75);
114 -moz-appearance: none;
115}
116
117.progressBar .progress-bar {
118 background-color: #336699;
119 -moz-appearance: none;
120}
121
122/* .scale-slider is an element inside the <scale> implementation. */
ca710c53 123.scrubber .scale-slider, .volumeControl .scale-slider {
b310ca09
RK
124 /* Hide the default horizontal bar. */
125 background: none;
ca710c53
RK
126 margin: 0;
127}
128
129.scrubber .scale-slider {
3327253e
RK
130 /* abs(margin-top) + margin-bottom + bar height == timeThumb height */
131 margin-top: -10px;
132 margin-bottom: 10px;
b310ca09
RK
133}
134
135/* .scale-thumb is an element inside the <scale> implementation. */
ca710c53 136.scrubber .scale-thumb {
b310ca09 137 /* Override the default thumb appearance with a custom image. */
ca710c53 138 background: transparent;
b310ca09 139 border: none !important;
ca710c53
RK
140}
141
142.timeThumb {
3327253e
RK
143 background: url("chrome://global/skin/media/scrubberThumb.png") no-repeat center;
144 min-width: 45px;
145 min-height: 28px;
146 -moz-box-pack: center;
ca710c53
RK
147}
148
149.timeThumb[showhours="true"] {
3327253e 150 background: url("chrome://global/skin/media/scrubberThumbWide.png") no-repeat center;
ca710c53
RK
151}
152
153/*
154.timeThumb:hover, .timeThumb:active {
155 background-image: url("chrome://global/skin/media/scrubberThumb-hover.png");
156}
157*/
158
159.timeLabel {
3327253e
RK
160 color: rgba(0,0,0,0.75);
161 font-size: 10px;
162 font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
163 text-shadow: rgba(102,102,153, 0.3) 0 1px;
164 padding-top: 2px;
ca710c53
RK
165}
166
ca710c53 167.statusOverlay {
3327253e
RK
168 -moz-box-align: center;
169 -moz-box-pack: center;
170 background-color: rgba(0,0,0,0.55);
ca710c53
RK
171}
172
173.statusIcon {
3327253e
RK
174 margin-bottom: 28px; /* same height as .controlBar, to keep icon centered above it */
175 width: 32px;
176 height: 32px;
ca710c53
RK
177}
178
179.statusIcon[type="throbber"] {
3327253e 180 background: url("chrome://communicator/skin/brand/throbber-anim.gif") no-repeat center;
ca710c53
RK
181}
182
183.statusIcon[type="error"] {
3327253e 184 background: url("chrome://global/skin/icons/alert-error.gif") no-repeat center;
6f25e2c5 185}
4b1ccdb4
RK
186
187/* CSS Transitions */
188.controlBar:not([immediate]) {
189 -moz-transition-property: opacity;
190 -moz-transition-duration: 200ms;
191}
192.controlBar[fadeout] {
193 opacity: 0;
194}
195.volumeStack:not([immediate]) {
196 -moz-transition-property: opacity, margin-top;
197 -moz-transition-duration: 200ms, 200ms;
198}
199.volumeStack[fadeout] {
200 opacity: 0;
201 margin-top: 0;
202}
203.statusOverlay:not([immediate]) {
204 -moz-transition-property: opacity;
205 -moz-transition-duration: 300ms;
206 -moz-transition-delay: 750ms;
207}
208.statusOverlay[fadeout] {
209 opacity: 0;
210}