diff -r 539c9bee5372 -r 7623f9af9272 src/widgets/Controller.css --- a/src/widgets/Controller.css Fri Sep 25 14:45:38 2015 +0200 +++ b/src/widgets/Controller.css Fri Oct 02 11:27:17 2015 +0200 @@ -1,176 +1,248 @@ /* Player Widget */ .Ldt-Ctrl { - font-size: 10px; - background:url('img/player_gradient.png') repeat-x transparent ; - height: 25px; - border: 1px solid #b6b8b8; - position: relative; + font-size: 10px; + background: url('img/player_gradient.png') repeat-x transparent ; + height: 25px; + border: 1px solid #b6b8b8; + position: relative; + overflow: hidden; } .Ldt-Ctrl-Left { - float:left; width: 300px; + float: left; } .Ldt-Ctrl-Right { - float: right; + float: right; } .Ldt-Ctrl-button { - float: left; - width: 30px; height: 25px; - background: url('img/player-sprites.png'); - cursor: pointer; + float: left; + width: 30px; + height: 25px; + background: url('img/player-sprites.png'); + cursor: pointer; } .Ldt-Ctrl-spacer { - float: left; width: 1px; height: 25px; background: #b6b8b8; + float: left; + width: 1px; + height: 25px; + background: #b6b8b8; } .Ldt-Ctrl-Play { - margin: 0 15px; + margin: 100px 0; + margin: 0 15px; } .Ldt-Ctrl-Play-PlayState { - background-position: 0 0; + background-position: 0 0; } .Ldt-Ctrl-Play-PlayState:hover { - background-position: 0 -25px; + background-position: 0 -25px; } .Ldt-Ctrl-Play-PlayState:active { - background-position: 0 -50px; + background-position: 0 -50px; } .Ldt-Ctrl-Play-PauseState { - background-position: -30px 0; + background-position: -30px 0; } .Ldt-Ctrl-Play-PauseState:hover { - background-position: -30px -25px; + background-position: -30px -25px; } .Ldt-Ctrl-Play-PauseState:active { - background-position: -30px -50px; + background-position: -30px -50px; } .Ldt-Ctrl-Annotate { - margin: 0 2px; - background-position: -60px 0; + margin: 0 2px; + background-position: -60px 0; } .Ldt-Ctrl-Annotate:hover { - background-position: -60px -25px; + background-position: -60px -25px; } .Ldt-Ctrl-Annotate:active { - background-position: -60px -50px; + background-position: -60px -50px; } .Ldt-Ctrl-SearchBtn { - margin: 0 2px; - background-position: -90px 0; + margin: 0 2px; + background-position: -90px 0; } .Ldt-Ctrl-SearchBtn:hover { - background-position: -90px -25px; + background-position: -90px -25px; } .Ldt-Ctrl-SearchBtn:active { - background-position: -90px -50px; + background-position: -90px -50px; } .Ldt-Ctrl-Search { - width: 0; float: left; overflow: hidden; + width: 0; float: left; overflow: hidden; } input.Ldt-Ctrl-SearchInput { - width: 145px; height: 20px; margin: 2px; padding: 3px; - border: 1px solid #8080a0; border-radius: 3px; font-size: 13px; + -moz-box-sizing: border-box; + width: 145px; + height: 20px; + margin: 2px; + padding: 3px; + border: 1px solid #8080a0; + border-radius: 3px; + font-size: 13px; } .Ldt-Ctrl-Time { - float: left; - margin: 5px; - font-size: 12px; - font-family: Arial, Verdana, sans-serif; + float: left; + margin: 5px; + font-size: 12px; + font-family: Arial, Verdana, sans-serif; } .Ldt-Ctrl-Time-Elapsed { - float: left; - color: #4a4a4a; + float: left; + color: #4a4a4a; } .Ldt-Ctrl-Time-Separator { - margin: 0 4px; - float: left; + margin: 0 4px; + float: left; } .Ldt-Ctrl-Time-Total { - float: left; - color: #b2b2b2; + float: left; + color: #b2b2b2; } .Ldt-Ctrl-Sound { - margin: 0 2px; + margin: 0 2px; } .Ldt-Ctrl-Sound-Full { - background-position: -120px 0; + background-position: -120px 0; } .Ldt-Ctrl-Sound-Full:hover { - background-position: -120px -25px; + background-position: -120px -25px; } .Ldt-Ctrl-Sound-Full:active { - background-position: -120px -50px; + background-position: -120px -50px; } .Ldt-Ctrl-Sound-Mute { - background-position: -150px 0; + background-position: -150px 0; } .Ldt-Ctrl-Sound-Mute:hover { - background-position: -150px -25px; + background-position: -150px -25px; } .Ldt-Ctrl-Sound-Mute:active { - background-position: -150px -50px; + background-position: -150px -50px; } .Ldt-Ctrl-Sound-Half { - background-position: -180px 0; + background-position: -180px 0; } .Ldt-Ctrl-Sound-Half:hover { - background-position: -180px -25px; + background-position: -180px -25px; } .Ldt-Ctrl-Sound-Half:active { - background-position: -180px -50px; + background-position: -180px -50px; } .Ldt-Ctrl-Volume-Control { display: none; - position: absolute; - background:url('img/player_gradient.png') repeat-x transparent ; - height: 25px; - width: 100px; top: 25px; right: -1px; z-index: 100; - padding: 0 2px; - border: 1px solid #b6b8b8; + position: absolute; + background: url('img/player_gradient.png') repeat-x transparent ; + height: 25px; + width: 100px; + top: 25px; + right: -1px; + z-index: 100; + padding: 0 2px; + border: 1px solid #b6b8b8; } -.Ldt-Ctrl-Volume-Bar { - height: 5px; margin: 9px 3px 0; background: #cccccc; border: 1px solid #999999; border-radius: 2px; +.Ldt-Ctrl-Volume-Bar { + height: 5px; + margin: 9px 3px 0; + background: #cccccc; + border: 1px solid #999999; + border-radius: 2px; } .Ldt-Ctrl-Volume-Control .ui-slider-handle { - width: 6px; height: 19px; background: #a8a8a8; border: 1px solid #999999; border-radius: 2px; top: -8px; margin-left: -4px; + width: 6px; + height: 19px; + background: #a8a8a8; + border: 1px solid #999999; + border-radius: 2px; + top: -8px; + margin-left: -4px; cursor: pointer; } .Ldt-Ctrl-Volume-Control:hover .ui-slider-handle { - background: #F7268E; -} \ No newline at end of file + background: #F7268E; +} + +/* quiz */ + +.Ldt-Ctrl-Quiz-Enable button, .Ldt-Ctrl-Quiz-Create button, .Ldt-Ctrl-Quiz-Disactivated button, .Ldt-Ctrl-Fullscreen-Button{ + border: none; + background: transparent; +} + +.Ldt-Ctrl-Quiz-Enable { + background-image: url("img/quiz_off.svg"); + float: left; + height: 22px; + width: 22px; + background-repeat: no-repeat; +} +.Ldt-Ctrl-Quiz-Enable.Ldt-Ctrl-Quiz-Toggle-Active { + background-image: url("img/quiz_on.svg"); +} + +.Ldt-Ctrl-Quiz-Create { + background-image: url("img/quiz_add_question.svg"); + float: left; + height: 23px; + width: 26px; + background-repeat: no-repeat; + margin-left: 4px; + margin-top: 0px; + display: none; +} +.Ldt-Ctrl-Quiz-Create.Ldt-Ctrl-Quiz-Toggle-Active { + display: inline-block; +} + +.Ldt-Ctrl-Fullscreen-Button { + margin-top: 3px; +} + +.Ldt-Ctrl-Fullscreen-Button { + float: left; + background-image: url("img/fullscreen.svg"); + background-position: right; + margin-right: 6px; + margin-top: 1px; + height: 22px; + width: 22px; + border: none; +}