diff -r 539c9bee5372 -r 7623f9af9272 src/widgets/SlideVideoPlayer.css --- a/src/widgets/SlideVideoPlayer.css Fri Sep 25 14:45:38 2015 +0200 +++ b/src/widgets/SlideVideoPlayer.css Fri Oct 02 11:27:17 2015 +0200 @@ -1,23 +1,56 @@ -/* Empty for now */ - .Ldt-SlideVideoPlayer-panel { + display: -webkit-flex; display: flex; width: 50%; float: left; } .Ldt-SlideVideoPlayer { - min-height: 400px; - max-height: 100%; -} - -.Ldt-SlideVideoPlayer { width: 100%; max-width: 100%; height: 100%; max-height: 100%; } +.Ldt-SlideVideoPlayer-pip-main { + position: relative; + width: 100%; + height: 100%; + top: 0px; + left: 0px; + right: 0px; + bottom: 0px; + z-index: 1; +} + +.Ldt-SlideVideoPlayer-pip-pip { + position: absolute; + width: 30%; + height: 30%; + right: 2px; + bottom: 2px; + z-index: 3; +} + .Ldt-SlideVideoPlayer h2 { display: none; } +.Ldt-SlideVideoPlayer-pip-menu { + position: absolute; + top: 0px; + right: 0px; + z-index: 10; + display: none; +} +.Ldt-SlideVideoPlayer-pip-pip:hover .Ldt-SlideVideoPlayer-pip-menu { + background-color: #000; + opacity: .5; + display: inline-block; +} + +.Ldt-SlideVideoPlayer-pip-menu-toggle { + width: 18px; + height: 18px; + cursor: pointer; + background-image: url(img/pip_toggle.svg); +}