Mercurial > libervia-templates

comparison sat_templates/templates/bulma/static/styles.css @ 278:672b6137ef29

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
bulma (components): template for the alternative media player
author Goffi <goffi@goffi.org>
date Sat, 15 Aug 2020 16:40:29 +0200
parents dbdaf1d7442b
children f8026bf77a4c
comparison
equal deleted inserted replaced
277:4efd3d23de17 278:672b6137ef29
204 .comments_side_panel.open, .invitation_manager_side_panel.open { 204 .comments_side_panel.open, .invitation_manager_side_panel.open {
205 width: 55rem; 205 width: 55rem;
206 transition: width 0.3s ease-out; 206 transition: width 0.3s ease-out;
207 } 207 }
208 208
209 /****************
210 * video player *
211 ****************/
212
213 div.video_player>div.video_elt, div.video_player>div.video_elt>ogvjs {
214 width: 100%;
215 }
216
217 div.video_player:fullscreen>div.video_elt, div.video_player:fullscreen>div.video_elt>ogvjs {
218 height: 100%;
219 }
220
221 div.video_player {
222 position: relative;
223 background-color: black;
224 }
225
226 div.video_player>div.video_overlay_play {
227 position: absolute;
228 top: 0;
229 left: 0;
230 width: 100%;
231 height: 100%;
232 }
233
234 div.video_player>div.video_overlay_play>.icon {
235 height: 12rem;
236 width: 12rem;
237 font-size: 10rem;
238 color: #eee;
239 }
240
241 div.video_player .video_pause, div.video_player .video_sound_off,
242 div.video_player .video_resize_small {
243 display: none;
244 }
245
246 div.video_player.playing .video_pause {
247 display: inline-block;
248 }
249
250 div.video_player.playing .video_play {
251 display: none;
252 }
253
254 div.video_player.muted .video_sound_off {
255 display: inline-block;
256 }
257
258 div.video_player.muted .video_sound_on {
259 display: none;
260 }
261
262 div.video_player:fullscreen .video_resize_small {
263 display: inline-block;
264 }
265
266 div.video_player:fullscreen .video_resize_full {
267 display: none;
268 }
269
270 div.video_controls {
271 position: absolute;
272 bottom: 0;
273 left: 0;
274 width: 100%;
275 margin: 0;
276 background-color: #000A;
277 color: #eee;
278 }
279
280 div.video_player.playing:hover>.video_controls,
281 div.video_player.playing>.video_controls.hidden:hover
282 {
283 opacity: 1;
284 transition: opacity 0.5s;
285 }
286
287 div.video_player.playing>.video_controls,
288 div.video_player.playing>.video_controls.hidden {
289 opacity: 0;
290 transition: opacity 2s;
291 }
292
293 div.video_player .video_controls .icon:hover {
294 background-color: #777;
295 cursor: pointer;
296 }
297
298 div.video_player .timer {
299 cursor: pointer;
300 width: 5em;
301 text-align: center;
302 }
303
304
209 /************* 305 /*************
210 * slideshow * 306 * slideshow *
211 *************/ 307 *************/
212 308
213 .slideshow { 309 .slideshow {