diff --git a/resources/ext.multimediaViewer/ext.multimediaViewer.css b/resources/ext.multimediaViewer/ext.multimediaViewer.css index cd4a4ddc0..f5f04b7d1 100644 --- a/resources/ext.multimediaViewer/ext.multimediaViewer.css +++ b/resources/ext.multimediaViewer/ext.multimediaViewer.css @@ -1,45 +1,70 @@ -.mw-lightbox-title-div { - text-align: left; - padding-left: 10px; - font-weight: bold; +/** + * Override multilightbox styles that don't apply to us + */ +.mlb-main.mlb-fullscreened { + background-color: white; +} +.mlb-image-wrapper { + top: 0px; + bottom: 64px; +} + +.mlb-controls { + height: auto; +} + +.mlb-post-image { position: absolute; - bottom: 0px; - left: 0px; - right: 0px; + height: auto; + background-color: #e4e2e1; +} + +.mw-mlb-controls-position { + position: absolute; + top: -999px; + left: -999px; +} + +.mw-mlb-controls-wrapper { + width: 100%; + height: 100%; + position: relative; +} + +.mw-mlb-controls { + border: none; + position: absolute; + top: 0px; + z-index: 1003; +} + +body.mobile .mw-mlb-controls, +.mw-mlb-controls-position:hover .mw-mlb-controls { + display: block; +} + +.mw-mlb-controls div { + position: static; + border: none; + display: block; +} + +.mw-lightbox-title-div, +.mw-lightbox-extra-info-div { + text-align: left; height: 50px; + position: absolute; + right: 0px; + left: 0px; +} - /* FF 3.6+ */ - background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); - - /* Chrome, Safari 4+ */ - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,1))); - - /* Chrome 10+, Safari 5.1+ */ - background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); - - /* Opera 11.10+ */ - background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); - - /* IE10+ */ - background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); - - /* W3C */ - background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); - - /* IE 6-9 */ - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); +.mw-lightbox-title-div { + bottom: 0px; } .mw-lightbox-extra-info-div { - height: 50px; - position: absolute; bottom: -50px; - right: 0px; - left: 0px; - - text-align: left; - padding-left: 10px; } .mw-lightbox-extra-info-div a, @@ -58,10 +83,6 @@ right: 0px; } -.mlb-fullscreen-div { - background-color: rgb( 255, 255, 255 ); -} - .mlb-overlay { background-color: rgba( 255, 255, 255, 0.9 ); } @@ -86,30 +107,35 @@ vertical-align: middle; } -.mw-mlb-title { +.mw-mlb-title-para { margin-bottom: 1px; margin-top: 0px; padding: 0px; - font-weight: bold; +} + +.mw-mlb-title { font-size: 1.2em; } -.mw-mlb-author { - font-weight: bold; +.mw-mlb-image-metadata { + width: 100%; + background-color: #e4e2e1; + position: relative; } -.mw-mlb-image-metadata { - margin-top: 30px; - width: 64%; - margin: 30px auto; - position: relative; +.mw-mlb-image-desc-div { + width: 60%; + overflow-y: auto; +} + +.mw-mlb-image-links-div { + width: 40%; } .mw-mlb-image-desc-div, .mw-mlb-image-links-div { display: inline-block; - width: 50%; - height: 100px; + height: 150px; vertical-align: top; } @@ -117,10 +143,6 @@ color: #6f7073; } -.mw-mlb-image-desc-div { - overflow-y: auto; -} - .mw-mlb-image-links li { list-style: none; font-size: 0.8em; @@ -161,29 +183,18 @@ background-image: none !important; } -.mw-mlb-credit.empty { - display: none; -} - -.mw-mlb-license-contain, +.mw-mlb-license, .mw-mlb-title-credit { display: inline-block; } -.mw-mlb-license-contain { - width: 30%; -} - .mw-mlb-title-credit { - width: 70%; -} - -.mw-mlb-title-contain { - padding-left: 10px; + width: 100%; + height: 64px; } .mw-mlb-license { - padding-right: 10px; + padding-left: 10px; } .mw-mlb-license.empty { @@ -220,9 +231,16 @@ width: 100%; } +.mw-mlb-title-para, +.mw-mlb-credit, +.mw-mlb-image-desc, +.mw-mlb-mmv-about-links { + padding-left: 20px; +} + .mw-mlb-mmv-about-links { font-size: 0.8em; - padding-top: 20px; + padding: 20px; width: 50%; } @@ -238,3 +256,12 @@ .mlb-image.empty img { display: none; } + +body.mw-mlb-lightbox-open { + /** Stop the article from scrolling in the background */ + overflow: hidden; +} + +body.mw-mlb-lightbox-open .mlb-main { + overflow-y: auto; +} diff --git a/resources/ext.multimediaViewer/ext.multimediaViewer.js b/resources/ext.multimediaViewer/ext.multimediaViewer.js index 6b8dc9b00..8804f35c0 100755 --- a/resources/ext.multimediaViewer/ext.multimediaViewer.js +++ b/resources/ext.multimediaViewer/ext.multimediaViewer.js @@ -109,6 +109,7 @@ // some src attribute to work. Will fix. viewer.lightbox.images[index].src = $thumbContain.find( 'img' ).prop( 'src' ); viewer.lightbox.open(); + $( document.body ).addClass( 'mw-mlb-lightbox-open' ); viewer.lightbox.iface.$imageDiv.append( $.createSpinner( { id: 'mw-mlb-loading-spinner', size: 'large' @@ -120,6 +121,7 @@ imageEle.onload = function () { viewer.lightbox.iface.replaceImageWith( imageEle ); viewer.lightbox.iface.$imageDiv.removeClass( 'empty' ); + viewer.updateControls(); $.removeSpinner( 'mw-mlb-loading-spinner' ); viewer.setImageInfo( fileTitle, imageInfo ); }; @@ -135,9 +137,13 @@ this.lightbox = new MultiLightbox( urls ); } + lightboxHooks.register( 'closeInterface', function () { + this.$mwControls.css( { top: '-999px', left: '-999px' } ); + $( document.body ).removeClass( 'mw-mlb-lightbox-open' ); + } ); + lightboxHooks.register( 'imageResize', function () { var api = new mw.Api(), - ratio = this.isFullScreen ? 0.9 : 0.5, density = $.devicePixelRatio(), filename = viewer.currentImageFilename, ui = this; @@ -148,8 +154,8 @@ titles: filename, prop: 'imageinfo', iiprop: 'url', - iiurlwidth: Math.floor( density * ratio * $( window ).width() * 1.1 ), - iiurlheight: Math.floor( density * ratio * $( window ).height() * 1.1 ) + iiurlwidth: Math.floor( density * this.$imageWrapper.width() ), + iiurlheight: Math.floor( density * this.$imageWrapper.height() ) } ).done( function ( data ) { var imageInfo, innerInfo, image = new Image(); @@ -163,6 +169,7 @@ image.onload = function () { ui.replaceImageWith( image ); + viewer.updateControls(); }; image.src = innerInfo.thumburl || innerInfo.url; @@ -222,7 +229,10 @@ MMVP.initializeInterface = function ( ui ) { this.ui = ui; + this.ui.$postDiv.css( 'top', ( $( window ).height() - 64 ) + 'px' ); + this.initializeHeader(); + this.initializeButtons(); this.initializeImage(); this.initializeImageMetadata(); this.initializeAboutLinks(); @@ -461,9 +471,13 @@ }; MMVP.initializeHeader = function () { + this.ui.$closeButton.detach(); + this.ui.$fullscreenButton.detach(); + this.ui.$titleDiv = $( '
' ) .addClass( 'mw-mlb-title-contain' ); + this.ui.$postDiv.append( this.ui.$controlBar.detach() ); this.ui.$controlBar.append( this.ui.$titleDiv ); this.initializeTitleAndCredit(); @@ -481,10 +495,14 @@ }; MMVP.initializeTitle = function () { - this.ui.$title = $( '

' ) + this.ui.$title = $( '' ) .addClass( 'mw-mlb-title' ); - this.ui.$titleAndCredit.append( this.ui.$title ); + this.ui.$titlePara = $( '

' ) + .addClass( 'mw-mlb-title-para' ) + .append( this.ui.$title ); + + this.ui.$titleAndCredit.append( this.ui.$titlePara ); }; MMVP.initializeCredit = function () { @@ -514,13 +532,90 @@ .addClass( 'empty' ) .prop( 'href', '#' ); - this.ui.$licensePara = $( '

' ) - .addClass( 'mw-mlb-license-contain' ) - .append( this.ui.$license ); - - this.ui.$titleDiv.append( this.ui.$licensePara ); + this.ui.$titlePara.append( this.ui.$license ); }; + MMVP.initializeButtons = function () { + this.ui.$mwControls = $( '

' ) + .addClass( 'mw-mlb-controls' ) + // Note we aren't adding the fullscreen button here. + // Fullscreen causes some funky issues with UI redraws, + // and we aren't sure why, but it's not really necessary + // with the new interface anyway - it's basically fullscreen + // already! + .append( + this.ui.$closeButton + ) + .appendTo( this.ui.$main ); + }; + + MMVP.updateControls = function () { + var isOnButton = false, + isOnImage = false, + ui = this.ui, + pos = ui.$image.offset(); + + function fadeIn() { + isOnImage = true; + ui.$mwControls.fadeIn( 100 ); + ui.$image.one( 'click', fadeOut ); + } + + function fadeOut() { + ui.$mwControls.fadeOut( 100 ); + ui.$image.one( 'click', fadeIn ); + } + + function fadeOutDelayed() { + isOnImage = false; + setTimeout( function () { + if ( !isOnImage && !isOnButton ) { + fadeOut(); + } + }, 500 ); + } + + function detectButton() { + isOnButton = true; + } + + function detectLeaveButton() { + isOnButton = false; + setTimeout( function () { + if ( !isOnImage && !isOnButton ) { + fadeOut(); + } + }, 500 ); + } + + pos.top = ( ui.$imageWrapper.height() - ui.$image.height() ) / 2; + pos.left += ui.$image.width() - ui.$closeButton.width(); + + pos.top += 'px'; + pos.left += 'px'; + + ui.$mwControls + .css( pos ) + .appendTo( ui.$main ) + .fadeIn( 100 ) + .delay( 500 ) + .fadeOut( 100 ); + + ui.$postDiv.css( 'top', ui.$imageWrapper.height() ); + + ui.$image + .off( 'mouseenter', fadeIn ) + .off( 'mouseleave', fadeOutDelayed ) + .one( 'click', fadeIn ) + .on( 'mouseenter', fadeIn ) + .on( 'mouseleave', fadeOutDelayed ); + + ui.$closeButton.add( ui.$fullscreenButton ) + .off( 'mouseenter', detectButton ) + .off( 'mouseleave', detectLeaveButton ) + .on( 'mouseenter', detectButton ) + .on( 'mouseleave', detectLeaveButton ); + }; MMVP.registerLogging = function () { var viewer = this; @@ -845,7 +940,6 @@ var imageInfo, filename = fileTitle.getPrefixedText(), - ratio = this.lightbox.iface.isFullScreen ? 0.9 : 0.5, density = $.devicePixelRatio(), apiArgs = { action: 'query', @@ -853,8 +947,8 @@ titles: filename, prop: 'imageinfo', iiprop: iiprops.join( '|' ), - iiurlwidth: Math.floor( density * ratio * $( window ).width() * 1.1 ), - iiurlheight: Math.floor( density * ratio * $( window ).height() * 1.1 ), + iiurlwidth: Math.floor( density * this.lightbox.iface.$imageWrapper.width() ), + iiurlheight: Math.floor( density * this.lightbox.iface.$imageWrapper.height() ), // Short-circuit, don't fallback, to save some tiny amount of time iiextmetadatalanguage: mw.config.get( 'wgUserLanguage', false ) || mw.config.get( 'wgContentLanguage', 'en' ) }, diff --git a/resources/ext.multimediaViewer/img/cc.svg b/resources/ext.multimediaViewer/img/cc.svg index 80c074732..cdd2d42ad 100644 --- a/resources/ext.multimediaViewer/img/cc.svg +++ b/resources/ext.multimediaViewer/img/cc.svg @@ -1,3 +1,3 @@ - + diff --git a/resources/ext.multimediaViewer/img/mw-close.svg b/resources/ext.multimediaViewer/img/mw-close.svg index c6bac5ade..0f03e12e2 100644 --- a/resources/ext.multimediaViewer/img/mw-close.svg +++ b/resources/ext.multimediaViewer/img/mw-close.svg @@ -1 +1,195 @@ - + + + +image/svg+xml + + + + + \ No newline at end of file diff --git a/resources/ext.multimediaViewer/img/mw-defullscreen.svg b/resources/ext.multimediaViewer/img/mw-defullscreen.svg index 0fac3de82..06d4be073 100644 --- a/resources/ext.multimediaViewer/img/mw-defullscreen.svg +++ b/resources/ext.multimediaViewer/img/mw-defullscreen.svg @@ -1 +1,199 @@ - + + + +image/svg+xml + + + + + \ No newline at end of file diff --git a/resources/ext.multimediaViewer/img/time.svg b/resources/ext.multimediaViewer/img/time.svg index 12d5bbb8d..878ba6752 100644 --- a/resources/ext.multimediaViewer/img/time.svg +++ b/resources/ext.multimediaViewer/img/time.svg @@ -1,18 +1,3 @@ - - - - - - - - - - - - + diff --git a/resources/ext.multimediaViewer/img/user.svg b/resources/ext.multimediaViewer/img/user.svg index f01dae57a..7f6e5c262 100644 --- a/resources/ext.multimediaViewer/img/user.svg +++ b/resources/ext.multimediaViewer/img/user.svg @@ -1,47 +1,3 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + diff --git a/resources/multilightbox/hooks.txt b/resources/multilightbox/hooks.txt index c4979bbf5..e91aa762a 100644 --- a/resources/multilightbox/hooks.txt +++ b/resources/multilightbox/hooks.txt @@ -82,3 +82,8 @@ imageResize Arguments: None ThisArg: LightboxInterface Called: From LightboxInterface resize listener. Return false to override default behaviour. + +closeInterface + Arguments: None + ThisArg: LightboxInterface + Called: From LightboxInterface unattach method when the interface is being unattached. diff --git a/resources/multilightbox/lightboximage.js b/resources/multilightbox/lightboximage.js index 7e0a4d0a1..ddff3d9a9 100644 --- a/resources/multilightbox/lightboximage.js +++ b/resources/multilightbox/lightboximage.js @@ -26,62 +26,61 @@ return ele; }; - LIP.autoResize = function ( ele, ratio ) { + // Assumes that the parent element's size is the maximum size. + LIP.autoResize = function ( ele, $parent ) { function updateRatios() { if ( imgHeight ) { - imgHeightRatio = imgMaxHeight / imgHeight; + imgHeightRatio = parentHeight / imgHeight; } if ( imgWidth ) { - imgWidthRatio = imgMaxWidth / imgWidth; + imgWidthRatio = parentWidth / imgWidth; } } - var imgWidthRatio, imgHeightRatio, - multRatio = ratio || 0.5, - $window = $( window ), - winWidth = $window.width(), - winHeight = $window.height(), + var imgWidthRatio, imgHeightRatio, parentWidth, parentHeight, $img = $( ele ), - imgMaxWidth = winWidth * multRatio, - imgMaxHeight = winHeight * multRatio, imgWidth = $img.width(), imgHeight = $img.height(); - if ( this.globalMaxWidth && imgMaxWidth > this.globalMaxWidth ) { - imgMaxWidth = this.globalMaxWidth; + $parent = $parent || $img.parent(); + parentWidth = $parent.width(); + parentHeight = $parent.height(); + + if ( this.globalMaxWidth && parentWidth > this.globalMaxWidth ) { + parentWidth = this.globalMaxWidth; } - if ( this.globalMaxHeight && imgMaxHeight > this.globalMaxHeight ) { - imgMaxHeight = this.globalMaxHeight; + if ( this.globalMaxHeight && parentHeight > this.globalMaxHeight ) { + parentHeight = this.globalMaxHeight; } updateRatios(); - if ( imgWidth > imgMaxWidth ) { + if ( imgWidth > parentWidth ) { imgHeight *= imgWidthRatio || 1; - imgWidth = imgMaxWidth; + imgWidth = parentWidth; updateRatios(); } - if ( imgHeight > imgMaxHeight ) { + if ( imgHeight > parentHeight ) { imgWidth *= imgHeightRatio || 1; - imgHeight = imgMaxHeight; + imgHeight = parentHeight; updateRatios(); } - if ( imgWidth < imgMaxWidth && imgHeight < imgMaxHeight ) { + if ( imgWidth < parentWidth && imgHeight < parentHeight ) { if ( imgWidth === 0 && imgHeight === 0 ) { // Only set one - imgWidth = imgMaxWidth; + imgWidth = parentWidth; imgHeight = null; } else { if ( imgHeightRatio > imgWidthRatio ) { imgWidth *= imgHeightRatio; - imgHeight = imgMaxHeight; + imgHeight = parentHeight; } else { imgHeight *= imgWidthRatio; - imgWidth = imgMaxWidth; + imgWidth = parentWidth; } updateRatios(); } diff --git a/resources/multilightbox/lightboxinterface.js b/resources/multilightbox/lightboxinterface.js index 375cf613e..b1baa91e4 100644 --- a/resources/multilightbox/lightboxinterface.js +++ b/resources/multilightbox/lightboxinterface.js @@ -15,7 +15,8 @@ !document.mozFullScreenElement && !document.webkitFullScreenElement && !document.msFullScreenElement) { - lbinterface.fullscreen(); + lightboxHooks.callAll( 'defullscreen' ); + lbinterface.$main.removeClass( 'mlb-fullscreened' ); } else if ( lbinterface.fullscreenButtonJustPressed ) { lbinterface.fullscreenButtonJustPressed = false; } @@ -26,6 +27,11 @@ addToPost = [], lbinterface = this; + // Staging area for image resizes + this.$staging = $( '
' ) + .addClass( 'mlb-staging-area' ); + $( document.body ).append( this.$staging ); + this.$overlay = $( '
' ) .addClass( 'mlb-overlay' ); @@ -38,6 +44,15 @@ this.$imageDiv = $( '
' ) .addClass( 'mlb-image' ); + // I blame CSS for this + this.$innerWrapper = $( '
' ) + .addClass( 'mlb-image-inner-wrapper' ) + .append( this.$imageDiv ); + + this.$imageWrapper = $( '
' ) + .addClass( 'mlb-image-wrapper' ) + .append( this.$innerWrapper ); + this.$preDiv = $( '
' ) .addClass( 'mlb-pre-image' ); result = lightboxHooks.callAll( 'addToPreDiv', this, addToPre ); @@ -50,7 +65,7 @@ this.$main.append( this.$preDiv, - this.$imageDiv, + this.$imageWrapper, this.$postDiv ); @@ -64,9 +79,6 @@ if ( e.keyCode === 27 ) { // Escape button pressed lbinterface.unattach(); - if ( lbinterface.isFullScreen ) { - lbinterface.fullscreen(); - } } } ); @@ -93,6 +105,8 @@ }; LIP.unattach = function () { + lightboxHooks.callAll( 'closeInterface', this ); + this.$wrapper.detach(); this.$overlay.detach(); }; @@ -100,35 +114,24 @@ LIP.fullscreen = function () { var fullscreen; - if ( this.isFullScreen ) { - if ( !document.fullscreenElement && - !document.mozFullScreenElement && - !document.webkitFullScreenElement && - !document.msFullScreenElement ) { - if ( document.cancelFullScreen ) { - document.cancelFullScreen(); - } else if ( document.mozCancelFullScreen ) { - document.mozCancelFullScreen(); - } else if ( document.webkitCancelFullScreen ) { - document.webkitCancelFullScreen(); - } else if ( document.msCancelFullScreen ) { - document.msCancelFullScreen(); - } + if ( document.fullscreenElement || + document.mozFullScreenElement || + document.webkitFullScreenElement || + document.msFullScreenElement ) { + if ( document.cancelFullScreen ) { + document.cancelFullScreen(); + } else if ( document.mozCancelFullScreen ) { + document.mozCancelFullScreen(); + } else if ( document.webkitCancelFullScreen ) { + document.webkitCancelFullScreen(); + } else if ( document.msCancelFullScreen ) { + document.msCancelFullScreen(); } - this.$wrapper.html( this.$main.detach() ); - this.$fullscreen = this.$fullscreen.detach(); - + this.$main.removeClass( 'mlb-fullscreened' ); lightboxHooks.callAll( 'defullscreen', this ); } else { - this.$fullscreen = this.$fullscreen || $( '
' ) - .addClass( 'mlb-fullscreen-div' ); - - this.$fullscreen.html( this.$main.detach() ); - - this.$wrapper.append( this.$fullscreen ); - - fullscreen = this.$fullscreen[0]; + fullscreen = this.$main.get( 0 ); if ( fullscreen.requestFullScreen ) { fullscreen.requestFullScreen(); } else if ( fullscreen.mozRequestFullScreen ) { @@ -139,25 +142,30 @@ fullscreen.msRequestFullscreen(); } + this.$main.addClass( 'mlb-fullscreened' ); lightboxHooks.callAll( 'fullscreen', this ); } - - this.isFullScreen = !this.isFullScreen; }; LIP.load = function ( image ) { var ele = image.getImageElement( function () { + image.globalMaxWidth = ele.width; + image.globalMaxHeight = ele.height; iface.$image = $( ele ); - iface.$imageDiv.append( iface.$image ); - image.globalMaxWidth = iface.$image.width(); - image.globalMaxHeight = iface.$image.height(); - image.autoResize( ele, iface.isFullScreen ? 0.9 : 0.5 ); + + iface.autoResizeImage(); window.addEventListener( 'resize', function () { - var result = lightboxHooks.callAll( 'imageResize', iface ); + var result = lightboxHooks.callAll( 'imageResize', iface ), + isFullScreen = ( + document.fullscreenElement || + document.mozFullScreenElement || + document.webkitFullScreenElement || + document.msFullScreenElement ), + $measurement = isFullScreen ? $( window ) : iface.$image; if ( result !== false ) { - image.autoResize( iface.$image.get( 0 ), iface.isFullScreen ? 0.9 : 0.5 ); + iface.autoResizeImage(); } } ); @@ -168,6 +176,12 @@ this.currentImage = image; }; + LIP.autoResizeImage = function () { + this.$staging.append( this.$image ); + this.currentImage.autoResize( this.$image.get( 0 ), this.$imageDiv ); + this.$imageDiv.append( this.$image ); + }; + LIP.replaceImageWith = function ( imageEle ) { var $image = $( imageEle ); @@ -178,7 +192,7 @@ this.currentImage.globalMaxWidth = this.$image.width(); this.currentImage.globalMaxHeight = this.$image.height(); - this.currentImage.autoResize( imageEle, this.isFullScreen ? 0.9 : 0.5 ); + this.currentImage.autoResize( imageEle ); }; LIP.setupPreDiv = function ( buildDefaults, toAdd ) { diff --git a/resources/multilightbox/multilightbox.css b/resources/multilightbox/multilightbox.css index 8b3f0731a..c90cda8e1 100644 --- a/resources/multilightbox/multilightbox.css +++ b/resources/multilightbox/multilightbox.css @@ -1,3 +1,9 @@ +.mlb-staging-area { + position: absolute; + top: -999999px; + left: -999999px; +} + .mlb-overlay { position: fixed; top: 0px; @@ -18,15 +24,30 @@ } .mlb-main { - margin-top: 20px; - width: 80%; - margin-right: auto; - margin-left: auto; + width: 100%; + height: 100%; position: relative; } -.mlb-image { +.mlb-image-wrapper { + position: absolute; + top: 50px; + left: 0px; + right: 0px; + bottom: 0px; +} + +.mlb-image-inner-wrapper { + display: table; width: 100%; + height: 100%; +} + +.mlb-image { + display: table-cell; + width: 100%; + height: 100%; + vertical-align: middle; } .mlb-image img { @@ -35,52 +56,49 @@ margin-left: auto; } +.mlb-pre-image { + position: absolute; + top: 0px; + height: 32px; + width: 100%; +} + +.mlb-post-image { + position: absolute; + bottom: 0px; + height: 32px; + width: 100%; +} + .mlb-controls { - margin-right: auto; - margin-left: auto; - width: 80%; - min-height: 32px; + height: 32px; + width: 100%; border-bottom: 1px solid #7d7c81; - margin-bottom: 40px; - position: relative; +} + +.mlb-close, +.mlb-fullscreen { + position: absolute; + top: 0px; + cursor: pointer; + width: 32px; + height: 32px; } .mlb-close { - cursor: pointer; + left: 0px; background-image: url("../img/close.svg"); - width: 32px; - height: 32px; border-right: 1px solid #7d7c81; - border-bottom: 1px solid #7d7c81; - position: absolute; - bottom: -1px; - left: -32px; } .mlb-fullscreen { - cursor: pointer; - background-image: url("../img/fullscreen.svg"); - width: 32px; - height: 32px; - border-left: 1px solid #7d7c81; - border-bottom: 1px solid #7d7c81; - position: absolute; - bottom: -1px; - right: -32px; -} - -.mlb-fullscreen-div { - position: absolute; - top: 0px; - left: 0px; right: 0px; - bottom: 0px; - z-index: 1002; + background-image: url("../img/fullscreen.svg"); + border-left: 1px solid #7d7c81; } -.mlb-fullscreen-div .mlb-main { - margin-top: 10px; - width: 100%; +.mlb-main.mlb-fullscreened { + background-color: black; } .mlb-fullscreen-div .mlb-fullscreen {