Capybara
Here's the code I've been using for Custom Spoilers:
/* ((9)) CUSTOM SPOILERS BEGIN */
span.spoiler {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.7)) !important;
color: transparent;
display: block;
padding: 10px 20px;
border-radius: 5px;
height: auto;
overflow: hidden;
user-select: none;
position: relative;
transition: all 0.3s ease-in-out;
border: 1px solid white;
text-align: center;
box-shadow: 0 0 10px white;
background-size: 400% 400%;
animation: rainbowBackground 10s ease infinite;
}
span.spoiler::before {
content: '\f07b Click To Reveal Spoiler \f07b';
font-family: 'Font Awesome 5 Free', sans-serif;
color: white;
display: block;
text-align: center;
transition: all 0.3s ease-in-out;
font-weight: bold;
animation: pulse 2s infinite;
text-shadow: 0 0 5px white, 0 0 10px black;
}
span.spoiler:hover {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.9)) !important;
cursor: pointer;
font-size: calc(14px - 1%) !important;
box-shadow: 0 0 15px white, 0 0 20px black;
transform: scale(1.05);
}
span.spoiler:active {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.8)) !important;
box-shadow: 0 0 20px white, 0 0 25px black;
transform: scale(0.95);
}
span.spoiler.revealed {
color: white !important;
height: auto;
box-shadow: 0 0 25px white, 0 0 30px black;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.7)) !important;
}
span.spoiler.revealed::before {
content: none;
}
@keyframes rainbowBackground {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
@keyframes pulse {
0% {
text-shadow: 0 0 5px white;
}
50% {
text-shadow: 0 0 20px black;
}
100% {
text-shadow: 0 0 5px white;
}
}
@media (prefers-color-scheme: dark) {
span.spoiler {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.7)) !important;
}
span.spoiler:hover {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.9)) !important;
}
span.spoiler:active {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.8)) !important;
}
}
/* ((9)) CUSTOM SPOILERS END */
Wondering if it might be possible to modify this code to insert an image as the background maybe...
