WebInterface: Add experimental browser based stream player. Test it on your local...
[enigma2-plugins.git] / webinterface / src / stream / css / main.css
1 /*! HTML5 Boilerplate v6.0.1 | MIT License | https://html5boilerplate.com/ */
2
3 /*
4  * What follows is the result of much research on cross-browser styling.
5  * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
6  * Kroc Camen, and the H5BP dev community and team.
7  */
8
9 /* plyr */
10 .plyr__progress {
11         visibility: hidden;
12 }
13
14 .plyr:-moz-full-screen .plyr__video-wrapper {
15         max-height: 100vh;
16         height: 100vh;
17         max-width: 100vw;
18         width: 100vw;
19 }
20
21 .plyr:-webkit-full-screen .plyr__video-wrapper {
22         max-height: 100vh;
23         height: 100vh;
24         max-width: 100vw;
25         width: 100vw;
26 }
27
28 .plyr:-ms-fullscreen .plyr__video-wrapper {
29         max-height: 100vh;
30         height: 100vh;
31         max-width: 100vw;
32         width: 100vw;
33 }
34
35 .plyr:fullscreen .plyr__video-wrapper {
36         max-height: 100vh;
37         height: 100vh;
38         max-width: 100vw;
39         width: 100vw;
40 }
41
42 .plyr--full-ui, .plyr__video-wrapper{
43         max-height: calc(100vh - 65px);
44         height: 100vh;
45 }
46
47 .plyr__video-wrapper {
48         align-items: center;
49         display: flex;
50         justify-content: center;
51 }
52
53 .plyr__control--overlaid {
54         background: #3f51b5;
55 }
56
57 .plyr__control--overlaid:focus, .plyr__control--overlaid:hover {
58         background: #324090;
59 }
60
61 .plyr--full-ui input[type="range"] {
62         color: #3f51b5;
63 }
64
65 .plyr__menu__container label.plyr__control input[type=radio]:checked+span {
66         background: #3f51b5
67 }
68
69 .plyr--video .plyr__controls .plyr__control.plyr__tab-focus, .plyr--video .plyr__controls .plyr__control:hover, .plyr--video .plyr__controls .plyr__control[aria-expanded="true"] {
70         background: #3f51b5;
71 }
72
73 dialog + .backdrop {
74         background: rgba(0,0,0,0.7);
75 }
76
77 dialog::backdrop {
78   background: rgba(0, 0, 0, 0.7);
79 }
80
81 #video {
82         object-fit:
83 }
84
85 /* ==========================================================================
86    Base styles: opinionated defaults
87    ========================================================================== */
88 @media (max-width: 479px) {
89         .mdl-layout__drawer {
90             width: 300px;
91             left: -150px;
92         }
93 }
94 @media (min-width: 480px) {
95         .mdl-layout__drawer {
96             width: 400px;
97             left: -200px;
98         }
99 }
100
101 .mdl-layout__drawer.is-visible {
102     left: 0;
103 }
104
105
106 html {
107         background: #000;
108     color: #DDD;
109     font-size: 1em;
110     line-height: 1.4;
111 }
112
113 body {
114         max-width: 100%;
115         max-height: 100%;
116 }
117
118 #video {
119     width: 100% !important;
120     height: auto !important;
121     max-height: 100% !important;
122 }
123
124 .center {
125         text-align: center;
126 }
127
128 /*
129  * Remove text-shadow in selection highlight:
130  * https://twitter.com/miketaylr/status/12228805301
131  *
132  * Vendor-prefixed and regular ::selection selectors cannot be combined:
133  * https://stackoverflow.com/a/16982510/7133471
134  *
135  * Customize the background color to match your design.
136  */
137
138 ::-moz-selection {
139     background: #b3d4fc;
140     text-shadow: none;
141 }
142
143 ::selection {
144     background: #b3d4fc;
145     text-shadow: none;
146 }
147
148 /*
149  * A better looking default horizontal rule
150  */
151
152 hr {
153     display: block;
154     height: 1px;
155     border: 0;
156     border-top: 1px solid #ccc;
157     margin: 1em 0;
158     padding: 0;
159 }
160
161 /*
162  * Remove the gap between audio, canvas, iframes,
163  * images, videos and the bottom of their containers:
164  * https://github.com/h5bp/html5-boilerplate/issues/440
165  */
166
167 audio,
168 canvas,
169 iframe,
170 img,
171 svg,
172 video {
173     vertical-align: middle;
174 }
175
176 /*
177  * Remove default fieldset styles.
178  */
179
180 fieldset {
181     border: 0;
182     margin: 0;
183     padding: 0;
184 }
185
186 /*
187  * Allow only vertical resizing of textareas.
188  */
189
190 textarea {
191     resize: vertical;
192 }
193
194 /* ==========================================================================
195    Browser Upgrade Prompt
196    ========================================================================== */
197
198 .browserupgrade {
199     margin: 0.2em 0;
200     background: #ccc;
201     color: #000;
202     padding: 0.2em 0;
203 }
204
205 /* ==========================================================================
206    Author's custom styles
207    ========================================================================== */
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225 /* ==========================================================================
226    Helper classes
227    ========================================================================== */
228
229 /*
230  * Hide visually and from screen readers
231  */
232
233 .hidden {
234     display: none !important;
235 }
236
237 /*
238  * Hide only visually, but have it available for screen readers:
239  * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
240  *
241  * 1. For long content, line feeds are not interpreted as spaces and small width
242  *    causes content to wrap 1 word per line:
243  *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
244  */
245
246 .visuallyhidden {
247     border: 0;
248     clip: rect(0 0 0 0);
249     -webkit-clip-path: inset(50%);
250     clip-path: inset(50%);
251     height: 1px;
252     margin: -1px;
253     overflow: hidden;
254     padding: 0;
255     position: absolute;
256     width: 1px;
257     white-space: nowrap; /* 1 */
258 }
259
260 /*
261  * Extends the .visuallyhidden class to allow the element
262  * to be focusable when navigated to via the keyboard:
263  * https://www.drupal.org/node/897638
264  */
265
266 .visuallyhidden.focusable:active,
267 .visuallyhidden.focusable:focus {
268     clip: auto;
269     -webkit-clip-path: none;
270     clip-path: none;
271     height: auto;
272     margin: 0;
273     overflow: visible;
274     position: static;
275     width: auto;
276     white-space: inherit;
277 }
278
279 /*
280  * Hide visually and from screen readers, but maintain layout
281  */
282
283 .invisible {
284     visibility: hidden;
285 }
286
287 /*
288  * Clearfix: contain floats
289  *
290  * For modern browsers
291  * 1. The space content is one way to avoid an Opera bug when the
292  *    `contenteditable` attribute is included anywhere else in the document.
293  *    Otherwise it causes space to appear at the top and bottom of elements
294  *    that receive the `clearfix` class.
295  * 2. The use of `table` rather than `block` is only necessary if using
296  *    `:before` to contain the top-margins of child elements.
297  */
298
299 .clearfix:before,
300 .clearfix:after {
301     content: " "; /* 1 */
302     display: table; /* 2 */
303 }
304
305 .clearfix:after {
306     clear: both;
307 }
308
309 /* ==========================================================================
310    EXAMPLE Media Queries for Responsive Design.
311    These examples override the primary ('mobile first') styles.
312    Modify as content requires.
313    ========================================================================== */
314
315 @media only screen and (min-width: 35em) {
316     /* Style adjustments for viewports that meet the condition */
317 }
318
319 @media print,
320        (-webkit-min-device-pixel-ratio: 1.25),
321        (min-resolution: 1.25dppx),
322        (min-resolution: 120dpi) {
323     /* Style adjustments for high resolution devices */
324 }
325
326 /* ==========================================================================
327    Print styles.
328    Inlined to avoid the additional HTTP request:
329    http://www.phpied.com/delay-loading-your-print-css/
330    ========================================================================== */
331
332 @media print {
333     *,
334     *:before,
335     *:after {
336         background: transparent !important;
337         color: #000 !important; /* Black prints faster:
338                                    http://www.sanbeiji.com/archives/953 */
339         box-shadow: none !important;
340         text-shadow: none !important;
341     }
342
343     a,
344     a:visited {
345         text-decoration: underline;
346     }
347
348     a[href]:after {
349         content: " (" attr(href) ")";
350     }
351
352     abbr[title]:after {
353         content: " (" attr(title) ")";
354     }
355
356     /*
357      * Don't show links that are fragment identifiers,
358      * or use the `javascript:` pseudo protocol
359      */
360
361     a[href^="#"]:after,
362     a[href^="javascript:"]:after {
363         content: "";
364     }
365
366     pre {
367         white-space: pre-wrap !important;
368     }
369     pre,
370     blockquote {
371         border: 1px solid #999;
372         page-break-inside: avoid;
373     }
374
375     /*
376      * Printing Tables:
377      * http://css-discuss.incutio.com/wiki/Printing_Tables
378      */
379
380     thead {
381         display: table-header-group;
382     }
383
384     tr,
385     img {
386         page-break-inside: avoid;
387     }
388
389     p,
390     h2,
391     h3 {
392         orphans: 3;
393         widows: 3;
394     }
395
396     h2,
397     h3 {
398         page-break-after: avoid;
399     }
400 }