Difference between revisions of "MediaWiki:Common.css"

From Bible Wiki, www.natnee.com
Jump to navigation Jump to search
 
(3 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; }
 
/* Info Box */
 
 
.infobox {
 
.infobox {
 
   border: 1px solid #a2a9b1;
 
   border: 1px solid #a2a9b1;
Line 22: Line 20:
 
}
 
}
  
.verse {
+
  .verse {
color:#0645BF;
+
    color:#0645BF;
cursor:pointer
+
    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;
 +
  }
  
.hover {
+
  .hvr-header {
  visibility:hidden;
+
    background-color:#aaa;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
+
    cursor: move;
  background-color:#eee;  
+
    padding:5px 10px
  width:250px;
+
   }
  height:250px;
 
   position:absolute;
 
}
 
  
.hover .header {
+
  .hvr-header .close {
  background-color:#aaa;
+
    display:inline-block;
  cursor: move;
+
    cursor:pointer;
  padding:5px 10px
+
    float:right;
}
+
    font-weight:900;
 +
    font-size:18px;
 +
    line-height:15px
 +
  }
  
.hover .header .close {
+
  .hvr-content {
  display:inline-block;
+
    padding:20px;
  cursor:pointer;
+
    height:160px;  
  float:right;  
+
    overflow-y:scroll;
  font-weight:900;
+
   }
   font-size:18px;
 
  line-height:15px
 
}
 
  
.hover .content {
+
  .hvr-content img {
  padding:20px;
+
    position: relative;
  height:160px;  
+
    top: 33%;
  overflow-y:scroll;
+
    left: 33%;
}
+
  }
  
  /* keyframes*/
+
    /* keyframes*/
    @-webkit-keyframes mwe-popups-fade-in-up{
+
      @-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)}
+
        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)}
+
        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{
+
      @-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)}
+
        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)}
+
        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{
+
      @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)}
+
        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)}
+
        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{
+
      @-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)}
+
        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)}
+
        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{
+
      @-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)}
+
        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)}
+
        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{
+
      @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)}
+
        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)}
+
        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{
+
      @-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)}
+
        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)}
+
        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{
+
      @-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)}
+
        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)}
+
        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{
+
      @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)}
+
        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)}
+
        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{
+
      @-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)}
+
        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)}
+
        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{
+
      @-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)}
+
        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)}
+
        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{
+
      @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)}
+
        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)}
+
        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{
+
      .mwe-popups-fade-in-up{
      -webkit-animation:mwe-popups-fade-in-up 0.2s ease forwards;
+
        -webkit-animation:mwe-popups-fade-in-up 0.2s ease forwards;
      -moz-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
+
        animation:mwe-popups-fade-in-up 0.2s ease forwards
    }
+
      }
    .mwe-popups-fade-in-down{
+
      .mwe-popups-fade-in-down{
      -webkit-animation:mwe-popups-fade-in-down 0.2s ease forwards;
+
        -webkit-animation:mwe-popups-fade-in-down 0.2s ease forwards;
      -moz-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
+
        animation:mwe-popups-fade-in-down 0.2s ease forwards
    }
+
      }
    .mwe-popups-fade-out-down{
+
      .mwe-popups-fade-out-down{
      -webkit-animation:mwe-popups-fade-out-down 0.2s ease forwards;
+
        -webkit-animation:mwe-popups-fade-out-down 0.2s ease forwards;
      -moz-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
+
        animation:mwe-popups-fade-out-down 0.2s ease forwards
    }
+
      }
    .mwe-popups-fade-out-up{
+
      .mwe-popups-fade-out-up{
      -webkit-animation:mwe-popups-fade-out-up 0.2s ease forwards;
+
        -webkit-animation:mwe-popups-fade-out-up 0.2s ease forwards;
      -moz-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
+
        animation:mwe-popups-fade-out-up 0.2s ease forwards
    }
+
      }
  /* end keyframes */
+
    /* 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 */