1@import 'mmv.variables.less'; 2@import 'mmv.mixins.less'; 3 4.mw-mmv-wrapper { 5 top: 0; 6 left: 0; 7 right: 0; 8 z-index: 1001; 9 position: absolute; 10 bottom: auto; 11 12 .skin-monobook & { 13 font-size: medium; 14 } 15} 16 17.mw-mmv-main { 18 width: 100%; 19 height: auto; 20 position: relative; 21 22 .jq-fullscreened { 23 background-color: #000; 24 } 25} 26 27.mw-mmv-image-wrapper { 28 position: fixed; 29 top: 0; 30 bottom: @metadatabar-above-fold-height; 31 left: 0; 32 right: 0; 33 overflow-y: hidden; 34} 35 36.mw-mmv-image-inner-wrapper { 37 display: table; 38 width: 100%; 39 height: 100%; 40} 41 42.mw-mmv-pre-image { 43 position: absolute; 44 top: 0; 45 height: 32px; 46 width: 100%; 47 z-index: 1; 48} 49 50.mw-mmv-post-image { 51 position: absolute; 52 width: 100%; 53 bottom: auto; 54 height: auto; 55 color: @color-base; 56 background-color: @panel-above-fold-background-color; 57 min-height: ( @metadatabar-above-fold-inner-height + 1 ); 58 z-index: 1005; 59} 60 61// above-the-fold part of the metadata panel 62.mw-mmv-above-fold { 63 width: 100%; 64 height: @metadatabar-above-fold-inner-height; 65 // min-height is used when the height is changed to auto to display long texts, to make sure the layout 66 // is not messed up wheen the text is short and does not fill the available place. It is also used by 67 // JavaScript to get the "default" height. 68 min-height: @metadatabar-above-fold-inner-height; 69 position: relative; 70 // make sure there is no content in the part which is overlapped by the revealed part of the below-fold content 71 // also used in JavaScript for the height calculations 72 padding-bottom: @metadatabar-below-fold-pushup-height; 73 74 .mw-mmv-untruncated & { 75 height: auto; 76 } 77} 78 79// Fullscreen styles 80 81.cursor-hidden { 82 cursor: none; 83} 84 85.mw-mmv-main.jq-fullscreened { 86 background-color: #000; 87} 88 89.jq-fullscreened { 90 // make the image occupy the whole screen 91 // make sure the panel fits in the screen and does not cause scrollbars to appear 92 .mw-mmv-image-wrapper, 93 .mw-mmv-post-image { 94 bottom: 0; 95 } 96 97 .mw-mmv-post-image { 98 position: fixed; 99 min-height: 0; 100 opacity: 0; 101 transition: opacity 0.25s; 102 103 &:hover { 104 opacity: 1; 105 } 106 } 107} 108