/* MiniModal Gadget - CSS styling. A fully functional but minimal modal See detailed documentation in Dev/mediawiki */ .mini-modal { width: 100%; height: 100vh; position: fixed; left: 0; top: 0; z-index: 1000; } .mini-modal:not(.active) { display: none; } .mini-modal .underlay { background-color: rgba(0,0,0,.5); width: 100%; height:100%; position: absolute; cursor: pointer; opacity: 1; transition: opacity .5s; } .mini-modal .underlay:hover { opacity: .6; } .mini-modal .mm-close { position: absolute; right: 27px; top: 16px; font-size: 73px; color: white; text-shadow: 1px 2px 3px rgba(0,0,0,.4); transition: color .3s; cursor: pointer; } .mini-modal .mm-close:hover { color: #ff6489; } .mini-modal .underlay:hover + .mm-close { color: #ff89a5; } .mini-modal > .content { position: absolute; width: 100%; max-width: 650px; margin: 100px 0 30px; left: calc( 50% - 325px ); max-height: calc( 100% - 120px ); overflow: auto; } @media (max-width: 680px ) { .mini-modal > .content { width: calc( 100% - 30px ); left: 0; margin: 100px 15px 30px; } } /* [[Category:MultiWiki]] */