Widget:SpoilerAlert: Difference between revisions
From Unforgotten Realms Wiki
Jump to navigationJump to search
imported>Pillowkeeper Created page with "<div id="snackbar"><table style="margin:auto; background: #212121; border:solid 2px #c60024; min-width: 225px; border-radius:10px; text-align:center;"> <tbody><tr> <td> <a hre..." |
imported>Pillowkeeper mNo edit summary |
||
| 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; min-width: 225px; border-radius:10px; text-align:center;"> | ||
<tbody><tr> | <tbody><tr> | ||
<td | <td> <img alt="Rob, I want to use an interrupt." 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> | </td> | ||
<td> <span style="color:#ffffff;font-size:150%;"><b>Warning!</b> The following page contains spoilers for the most recent content!</span> | <td> <span style="color:#ffffff;font-size:150%;"><b>Warning!</b> The following page contains spoilers for the most recent content!</span> | ||
</td> | </td> | ||
<td style="padding-right: 5px; padding-left: 10px; padding-top: 5px; padding-bottom: 5px; | <td style="padding-right: 5px; padding-left: 10px; padding-top: 5px; padding-bottom: 5px;"> <img alt="Oh no!" 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> | |||
<script> | <script> | ||
function myFunction() { | function myFunction() { | ||
Revision as of 05:13, 22 April 2017
<tbody></tbody>
| <img alt="Rob, I want to use an interrupt." 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"> | Warning! The following page contains spoilers for the most recent content! | <img alt="Oh no!" 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"> |
<script> function myFunction() {
var x = document.getElementById("snackbar")
x.className = "show";
setTimeout(function(){ x.className = x.className.replace("show", ""); }, 5000);
} window.onload = myFunction(); </script>
<style>
- snackbar {
margin:auto; text-align:center; visibility: hidden; margin-left: -225px; border-radius: 15px; padding: 16px; position: fixed; z-index: 1; left: 50%; top: 30px;
}
- 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>
