Widget:SpoilerAlert: Difference between revisions

From Unforgotten Realms Wiki
Jump to navigationJump to search
imported>Pillowkeeper
mNo edit summary
imported>Pillowkeeper
No edit summary
 
(16 intermediate revisions by the same user not shown)
Line 1: Line 1:
<div id="snackbar"><table style="margin:auto; background: #212121; border:solid 2px #c60024; min-width: 225px; border-radius:10px; text-align:center;">
<div id="snackbar"><table style="margin:auto; background: #212121; border:solid 2px #c60024; width: 75%; border-radius:10px; padding-right:10px; text-align:center;">
 
<tbody><tr>
<tbody><tr>
<td> <img src="/images/thumb/7/70/Interrupt_gem.png/90px-Interrupt_gem.png" width="90" height="89" srcset="/images/thumb/7/70/Interrupt_gem.png/135px-Interrupt_gem.png 1.5x, /images/thumb/7/70/Interrupt_gem.png/180px-Interrupt_gem.png 2x">
<td> <a href="/wiki/File:Interrupt_gem.png" class="image"><img alt="Interrupt gem.png" src="/images/thumb/7/70/Interrupt_gem.png/90px-Interrupt_gem.png" width="90" height="89" srcset="/images/thumb/7/70/Interrupt_gem.png/135px-Interrupt_gem.png 1.5x, /images/thumb/7/70/Interrupt_gem.png/180px-Interrupt_gem.png 2x"></a>
</td>
</td>
<td> <span style="color:#ffffff;font-size:150%;"><b>Warning!</b> The following page contains spoilers for the most recent content!</span>
<td> <b>Do not</b> use any of these files without the correct license. Please be mindful of our <a href="/wiki/Unforgotten_Realms_Wiki:Copyrights" title="Unforgotten Realms Wiki:Copyrights">copyright policy</a> regarding files on the wiki.
</td>
<td style="padding-right: 5px; padding-left: 10px; padding-top: 5px; padding-bottom: 5px;"> <img src="/images/thumb/f/f2/Coe_Terrible.png/90px-Coe_Terrible.png" width="90" height="90" srcset="/images/thumb/f/f2/Coe_Terrible.png/135px-Coe_Terrible.png 1.5x, /images/thumb/f/f2/Coe_Terrible.png/180px-Coe_Terrible.png 2x">
</td></tr></tbody></table>
</td></tr></tbody></table>
</div>
</div>
<script>
<script>
function myFunction() {
function myFunction() {
    var x = document.getElementById("snackbar")
     setTimeout(function(){ $("#snackbar").fadeOut(750); }, 8000);
    x.className = "show";
     setTimeout(function(){ x.className = x.className.replace("show", ""); }, 5000);
}
}
window.onload = myFunction();
document.onload = myFunction();
</script>
</script>


Line 21: Line 18:
   margin:auto;
   margin:auto;
   text-align:center;
   text-align:center;
    visibility: hidden;
     margin-left: -225px;
     margin-left: -225px;
     border-radius: 15px;
     border-radius: 15px;
Line 28: Line 24:
     z-index: 2;
     z-index: 2;
     left: 475px;
     left: 475px;
     top: 40px;
     bottom: 0px;
}
 
#snackbar.show {
    visibility: visible;
    -webkit-animation: fadein 0.5s, fadeout 0.5s 4.5s;
    animation: fadein 0.5s, fadeout 0.5s 4.5s;
}
 
@-webkit-keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
}
}


@keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
}


@-webkit-keyframes fadeout {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
}
@keyframes fadeout {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
}
</style>
</style>

Latest revision as of 01:34, 12 July 2017

<tbody></tbody>
<a href="/wiki/File:Interrupt_gem.png" class="image"><img alt="Interrupt gem.png" src="/images/thumb/7/70/Interrupt_gem.png/90px-Interrupt_gem.png" width="90" height="89" srcset="/images/thumb/7/70/Interrupt_gem.png/135px-Interrupt_gem.png 1.5x, /images/thumb/7/70/Interrupt_gem.png/180px-Interrupt_gem.png 2x"></a> Do not use any of these files without the correct license. Please be mindful of our <a href="/wiki/Unforgotten_Realms_Wiki:Copyrights" title="Unforgotten Realms Wiki:Copyrights">copyright policy</a> regarding files on the wiki.

<script> function myFunction() {

   setTimeout(function(){ $("#snackbar").fadeOut(750); }, 8000);

} document.onload = myFunction(); </script>

<style>

  1. snackbar {
 margin:auto;
 text-align:center;
   margin-left: -225px;
   border-radius: 15px;
   padding: 16px;
   position: fixed;
   z-index: 2;
   left: 475px;
   bottom: 0px;

}


</style>