aboutsummaryrefslogtreecommitdiff
path: root/node_modules/montage-user/ui/video-player.reel/video-player.css
diff options
context:
space:
mode:
Diffstat (limited to 'node_modules/montage-user/ui/video-player.reel/video-player.css')
-rwxr-xr-xnode_modules/montage-user/ui/video-player.reel/video-player.css313
1 files changed, 313 insertions, 0 deletions
diff --git a/node_modules/montage-user/ui/video-player.reel/video-player.css b/node_modules/montage-user/ui/video-player.reel/video-player.css
new file mode 100755
index 00000000..95af7571
--- /dev/null
+++ b/node_modules/montage-user/ui/video-player.reel/video-player.css
@@ -0,0 +1,313 @@
1/* <copyright>
2 This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
3 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
4 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
5 </copyright> */
6
7/*-----------------------------------------------------------------------------
8MARK: media
9-----------------------------------------------------------------------------*/
10
11.montage-video-player {
12 position: relative;
13 min-width: 500px;
14 overflow: hidden;
15 border: 1px solid black;
16 background-color: #000; /* black opaque */
17}
18
19.montage-video-player.fullscreen {
20 position: absolute;
21 display: -webkit-box;
22 -webkit-box-sizing: border-box;
23 z-index: 1000; /* TODO: Define global z-index regions */
24 top: 0;
25 left: 0;
26 border: none;
27 width: 100%;
28 height: 100%;
29}
30
31.montage-video-player .video {
32 display: block; /* Get rid of the bottom space */
33 position: relative;
34 width: 100%;
35 height: auto;
36}
37
38
39/*-----------------------------------------------------------------------------
40MARK: Controller
41-----------------------------------------------------------------------------*/
42.montage-video-player .control-wrapper {
43 position: absolute;
44 left: 0;
45 bottom: 0;
46 right: 0;
47 height: 50px;
48 box-shadow: inset 0 2px 6px 2px hsla(0,0%,0%,.4);
49 background-color: hsla(0,0%,0%,.95);
50 background-image: -webkit-linear-gradient(top, hsla(0,0%,100%,.27) 0%,
51 hsla(0,0%,100%,.15) 50%,
52 hsla(0,0%,30%,.4) 50%,
53 hsla(0,0%,0%,1) 100%);
54}
55
56.montage-video-player .control-wrapper.hide-controls {
57 opacity: 0;
58 pointer-events: none;
59 -webkit-transform: translateY(50px);
60 -webkit-transition: opacity .2s linear, -webkit-transform .2s cubic-bezier(.6,0,1,.75);
61}
62
63.montage-video-player .control-wrapper.show-controls {
64 opacity: 1.0;
65 -webkit-transition: opacity .2s linear, -webkit-transform .3s cubic-bezier(0,.4,.16,1);
66}
67
68
69.montage-video-player .controller {
70 display: -webkit-box;
71 position: relative;
72 max-width: 1280px;
73 color: #ffffff;
74 margin: 0 auto;
75 overflow: hidden;
76}
77
78.montage-video-player .controller > div {
79 border-right: 1px solid hsla(0,0%,0%,.7);
80 border-left: 1px solid hsla(0,0%,100%,.1);
81}
82.montage-video-player .controller > div:first-child {
83 border-left: none;
84}
85.montage-video-player .controller > div:last-child {
86 border-right: none;
87}
88
89.montage-video-player .controller-text {
90 font: bold 14px "Helvetica Neue", Helvetica, sans-serif;
91 color: #888;
92 text-shadow: 0 1px 0px #000;
93}
94
95
96/*-----------------------------------------------------------------------------
97MARK: Scrubber Panel
98-----------------------------------------------------------------------------*/
99
100.montage-video-player .controller-scrubber-panel {
101 display: -webkit-box;
102 -webkit-box-flex: 1;
103 height: 50px;
104 text-align: center;
105}
106
107.montage-video-player .scrubber {
108 display: block;
109 -webkit-box-flex: 1;
110 margin-top: -2px;
111}
112
113.montage-video-player .position {
114 display: block;
115 width: 50px;
116 height: 50px;
117 line-height: 50px;
118 text-align: right;
119}
120
121.montage-video-player .duration {
122 display: block;
123 width: 50px;
124 height: 50px;
125 line-height: 50px;
126 text-align: left;
127}
128
129
130/*-----------------------------------------------------------------------------
131MARK: Button Panel
132-----------------------------------------------------------------------------*/
133
134.montage-video-player .controller-button-panel {
135 display: block;
136 position: relative;
137 height: 50px;
138}
139
140.montage-video-player .controller-button {
141 position: relative;
142 width: 50px;
143 height: 50px;
144 outline: none;
145 background-repeat: no-repeat;
146 background-position: center center;
147}
148.montage-video-player .controller-button:active {
149 background-color: hsla(0,0%,0%,.4);
150}
151
152.montage-video-player .play { background-image: url("images/play.png"); }
153.montage-video-player .play.playing { background-image: url("images/pause.png"); }
154
155.montage-video-player .ff,
156.montage-video-player .rw,
157.montage-video-player .repeat
158{ display: none; } /* Temporarly disabled */
159
160/*-----------------------------------------------------------------------------
161MARK: Volume Panel
162-----------------------------------------------------------------------------*/
163
164.montage-video-player .controller-volume-panel {
165 display: -webkit-box;
166 position: relative;
167 width: 148px;
168 height: 50px;
169}
170
171.montage-video-player .volume {
172 position: relative;
173 top: 16px;
174 -webkit-box-flex: 1;
175}
176
177.montage-video-player .controller-progress {
178 height: 15px;
179 box-shadow: inset 0 0px 3px 1px hsla(0,0%,0%,.5);
180 background: -webkit-repeating-linear-gradient(left, hsl(0,0%,25%) 0, hsl(0,0%,25%) 3px,
181 hsl(0,0%,10%) 3px, hsl(0,0%,10%) 5px);
182}
183.montage-video-player .controller-progress:before {
184 content: "";
185 position: absolute;
186 top: 0; right: 0; bottom: 0; left: 0;
187 background: -webkit-linear-gradient(top, hsla(0,0%,0%,0), hsla(0,0%,0%,.3) );
188}
189
190.montage-video-player .volume-progress {
191 width: 50%;
192 height: 100%;
193 background: -webkit-repeating-linear-gradient(left, hsl(195,90%,50%) 0, hsl(195,90%,50%) 3px,
194 transparent 3px, transparent 5px);
195 -webkit-transition: width .1s ease-in-out;
196}
197
198.montage-video-player .volume-plus,
199.montage-video-player .volume-minus {
200 width: 50px;
201}
202
203.montage-video-player .volume-minus { background-image: url("images/volume-down.png"); }
204.montage-video-player .volume-minus:active {
205 background-color: transparent;
206 background-image: url("images/volume-down.png"),
207 -webkit-linear-gradient(right, hsla(0,0%,0%,0), hsla(0,0%,0%,.5) );
208}
209.montage-video-player .volume-plus { background-image: url("images/volume-up.png"); }
210.montage-video-player .volume-plus:active {
211 background-color: transparent;
212 background-image: url("images/volume-up.png"),
213 -webkit-linear-gradient(left, hsla(0,0%,0%,0), hsla(0,0%,0%,.5) );