Widget:SpoilerAlert: Difference between revisions
From Unforgotten Realms Wiki
Jump to navigationJump to search
imported>Pillowkeeper mNo edit summary |
imported>Pillowkeeper No 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> <img | <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> | </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;"> <img | <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> | ||
| Line 22: | Line 22: | ||
text-align:center; | text-align:center; | ||
visibility: hidden; | visibility: hidden; | ||
border-radius: 15px; | border-radius: 15px; | ||
padding: 16px; | padding: 16px; | ||
position: fixed; | position: fixed; | ||
z-index: | z-index: 2; | ||
left: | left: 475px; | ||
top: | top: 40px; | ||
} | } | ||
Revision as of 05:23, 22 April 2017
<tbody></tbody>
| <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"> | Warning! The following page contains spoilers for the most recent content! | <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"> |
<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; border-radius: 15px; padding: 16px; position: fixed; z-index: 2; left: 475px; top: 40px;
}
- 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>
