/*
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: 10px;
  top: 2px;
  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: calc( 100% - 95px );
  max-width: 650px;
  margin: 75px 0 30px;
  left: calc( 50% - 332px );
  max-height: calc( 100dvh - 147px );
  overflow: hidden;
  box-sizing: content-box;
}

.mini-modal > .content > .viewport {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.mini-modal > .content > .viewport > .overview {
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 700px ) {
  .mini-modal > .content {
    width: calc( 100% - 90px );
    left: 0;
    margin-left: 15px;
    margin-right: 15px;
  }
}

/* Body : prevent page refresh by scrolling up */

body.mini-modal-active {
  overscroll-behavior-y: none;
}

/*
[[Category:MultiWiki]]
*/