Difference between revisions of "MediaWiki:Mobile.css"

Latest revision as of 07:03, 26 May 2023

/* CSS placed here will affect users of the mobile site */
  .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;
    left: 50%;
    top: 10px;
    margin-left: -125px;
  }

  .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%;
  }
  .content p {
      line-height: 30px;
      font-size: 20px;
  }
    /* 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 */