Difference between revisions of "MediaWiki:Common.css"

Revision as of 08:44, 9 June 2020

/* CSS placed here will be applied to all skins */

#siteSub { display:block; font-weight:normal; font-size:normal;}
body.page-Main_Page.action-view #siteSub, body.page-Main_Page.action-submit #siteSub { display: none; }

/* Info Box */
.infobox {
   border: 1px solid #a2a9b1;
   border-spacing: 3px;
   background-color: #f8f9fa;
   color: black;
   margin: 0.5em 0 0.5em 1em;
   padding: 0.2em;
   float: right;
   clear: right;
   font-size: 88%;
   line-height: 1.5em;
}
.infobox td, .infobox th {
    vertical-align: top;
    text-align: left;
}

.hover {
  visibility:hidden; 
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
  background-color:#eee; 
  width:250px;
  height:250px;
  position:absolute; 
}

.hover .header {
  background-color:#aaa;
  cursor: move;
  padding:5px 10px
}

.hover .header .close {
  display:inline-block;
  cursor:pointer; 
  float:right; 
  font-weight:900;
  font-size:18px;
  line-height:15px
}

.hover .content {
  padding:20px;
  height:160px; 
  overflow-y:scroll;
}

  /* keyframes*/
    @-webkit-keyframes mwe-popups-fade-in-up{
      0%{opacity:0;-webkit-transform:translate(0,20px);-moz-transform:translate(0,20px);-ms-transform:translate(0,20px);transform:translate(0,20px)}
      100%{opacity:1;-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}
    }
    @-moz-keyframes mwe-popups-fade-in-up{
      0%{opacity:0;-webkit-transform:translate(0,20px);-moz-transform:translate(0,20px);-ms-transform:translate(0,20px);transform:translate(0,20px)}
      100%{opacity:1;-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}
    }
    @keyframes mwe-popups-fade-in-up{
      0%{opacity:0;-webkit-transform:translate(0,20px);-moz-transform:translate(0,20px);-ms-transform:translate(0,20px);transform:translate(0,20px)}
      100%{opacity:1;-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}
    }
    @-webkit-keyframes mwe-popups-fade-in-down{
      0%{opacity:0;-webkit-transform:translate(0,-20px);-moz-transform:translate(0,-20px);-ms-transform:translate(0,-20px);transform:translate(0,-20px)}
      100%{opacity:1;-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}
    }
    @-moz-keyframes mwe-popups-fade-in-down{
      0%{opacity:0;-webkit-transform:translate(0,-20px);-moz-transform:translate(0,-20px);-ms-transform:translate(0,-20px);transform:translate(0,-20px)}
      100%{opacity:1;-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}
    }
    @keyframes mwe-popups-fade-in-down{
      0%{opacity:0;-webkit-transform:translate(0,-20px);-moz-transform:translate(0,-20px);-ms-transform:translate(0,-20px);transform:translate(0,-20px)}
      100%{opacity:1;-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}
    }
    @-webkit-keyframes mwe-popups-fade-out-down{
      0%{opacity:1;-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}
      100%{opacity:0;-webkit-transform:translate(0,20px);-moz-transform:translate(0,20px);-ms-transform:translate(0,20px);transform:translate(0,20px)}
    }
    @-moz-keyframes mwe-popups-fade-out-down{
      0%{opacity:1;-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}
      100%{opacity:0;-webkit-transform:translate(0,20px);-moz-transform:translate(0,20px);-ms-transform:translate(0,20px);transform:translate(0,20px)}
    }
    @keyframes mwe-popups-fade-out-down{
      0%{opacity:1;-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}
      100%{opacity:0;-webkit-transform:translate(0,20px);-moz-transform:translate(0,20px);-ms-transform:translate(0,20px);transform:translate(0,20px)}
    }
    @-webkit-keyframes mwe-popups-fade-out-up{
      0%{opacity:1;-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}
      100%{opacity:0;-webkit-transform:translate(0,-20px);-moz-transform:translate(0,-20px);-ms-transform:translate(0,-20px);transform:translate(0,-20px)}
    }
    @-moz-keyframes mwe-popups-fade-out-up{
      0%{opacity:1;-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}
      100%{opacity:0;-webkit-transform:translate(0,-20px);-moz-transform:translate(0,-20px);-ms-transform:translate(0,-20px);transform:translate(0,-20px)}
    }
    @keyframes mwe-popups-fade-out-up{
      0%{opacity:1;-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}
      100%{opacity:0;-webkit-transform:translate(0,-20px);-moz-transform:translate(0,-20px);-ms-transform:translate(0,-20px);transform:translate(0,-20px)}
    }
    .mwe-popups-fade-in-up{
      -webkit-animation:mwe-popups-fade-in-up 0.2s ease forwards;
      -moz-animation:mwe-popups-fade-in-up 0.2s ease forwards;
      animation:mwe-popups-fade-in-up 0.2s ease forwards
    }
    .mwe-popups-fade-in-down{
      -webkit-animation:mwe-popups-fade-in-down 0.2s ease forwards;
      -moz-animation:mwe-popups-fade-in-down 0.2s ease forwards;
      animation:mwe-popups-fade-in-down 0.2s ease forwards
    }
    .mwe-popups-fade-out-down{
      -webkit-animation:mwe-popups-fade-out-down 0.2s ease forwards;
      -moz-animation:mwe-popups-fade-out-down 0.2s ease forwards;
      animation:mwe-popups-fade-out-down 0.2s ease forwards
    }
    .mwe-popups-fade-out-up{
      -webkit-animation:mwe-popups-fade-out-up 0.2s ease forwards;
      -moz-animation:mwe-popups-fade-out-up 0.2s ease forwards;
      animation:mwe-popups-fade-out-up 0.2s ease forwards
    }
  /* end keyframes */