Difference between revisions of "MediaWiki:Common.css"

From Bible Wiki, www.natnee.com
Jump to navigation Jump to search
(Created page with "→‎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_P...")
 
 
(6 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
/* CSS placed here will be applied to all skins */
 
/* CSS placed here will be applied to all skins */
−
 
+
body { font-size: 18px; }
 
#siteSub { display:block; font-weight:normal; font-size:normal;}
 
#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; }
 
body.page-Main_Page.action-view #siteSub, body.page-Main_Page.action-submit #siteSub { display: none; }
 +
.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;
 +
}
 +
 +
  .verse {
 +
    color:#0645BF;
 +
    cursor:pointer
 +
  }
 +
  .hover {
 +
    visibility:hidden;
 +
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
 +
    background-color:#eee;
 +
    width:250px;
 +
    height:250px;
 +
    position:absolute;
 +
    font-weight:normal;
 +
    font-size:16px;
 +
  }
 +
 +
  .hvr-header {
 +
    background-color:#aaa;
 +
    cursor: move;
 +
    padding:5px 10px
 +
  }
 +
 +
  .hvr-header .close {
 +
    display:inline-block;
 +
    cursor:pointer;
 +
    float:right;
 +
    font-weight:900;
 +
    font-size:18px;
 +
    line-height:15px
 +
  }
 +
 +
  .hvr-content {
 +
    padding:20px;
 +
    height:160px;
 +
    overflow-y:scroll;
 +
  }
 +
 +
  .hvr-content img {
 +
    position: relative;
 +
    top: 33%;
 +
    left: 33%;
 +
  }
 +
 +
    /* 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 */

Latest revision as of 00:38, 29 May 2023

/* CSS placed here will be applied to all skins */
body { font-size: 18px; }
#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; }
.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;
}

  .verse {
    color:#0645BF;
    cursor:pointer
  }
  .hover {
    visibility:hidden; 
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    background-color:#eee; 
    width:250px;
    height:250px;
    position:absolute;
    font-weight:normal;
    font-size:16px;
  }

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

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

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

  .hvr-content img {
    position: relative;
    top: 33%;
    left: 33%;
  }

    /* 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 */
Retrieved from "https://www.natnee.com/index.php?title=MediaWiki:Common.css&oldid=361"