Difference between revisions of "User:Tsutomu25/sandbox/Cover2"
| Line 1: | Line 1: | ||
| − | <includeonly><span id="spoiler-box"> | + | <includeonly><span id="spoiler-box">[[#spoiler-target|<span id="show-button" class="button"></span>]][[#|<span href="#" id="hide-button" class="button"></span>]]<span id="spoiler-target"></span><span id="spoiler-text">Spoiler text goes here</span></span></includeonly> |
{{code | {{code | ||
|css= | |css= | ||
| Line 62: | Line 62: | ||
z-index: 5; | z-index: 5; | ||
} | } | ||
| − | }} | + | }} |
<noinclude> | <noinclude> | ||
Revision as of 10:36, 21 August 2025
{{User:Tsutomu25/sandbox/Cover2|The culprit is Gosho Aoyama}}
Results in [[#spoiler-target-The culprit is Gosho Aoyama|]]{{{2}}}
Results in <span id="spoiler-box-The culprit is Gosho Aoyama">[[#spoiler-target-The culprit is Gosho Aoyama|<span id="show-button-The culprit is Gosho Aoyama" class="button-The culprit is Gosho Aoyama">]]<span href="#" id="hide-button-The culprit is Gosho Aoyama" class="button-The culprit is Gosho Aoyama"><span id="spoiler-target-The culprit is Gosho Aoyama"><span id="spoiler-text-The culprit is Gosho Aoyama">{{{2}}} <span class="Template-code" style="display:none" data-styles="/* Styles for the spoiler box */
- spoiler-box-The culprit is Gosho Aoyama{
display: inline-block; position: relative; background-color: #909199; transition: 0.3s;
}
/* Styles for the buttons */ .button-The culprit is Gosho Aoyama{
position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;
}
- show-button-The culprit is Gosho Aoyama{
display: inline-block; z-index: 5;
}
- hide-button-The culprit is Gosho Aoyama{
display: none; z-index: 0;
}
/* Hiding the target div */
- spoiler-target-The culprit is Gosho Aoyama{
display: none;
}
/* Styles to hide the spoiler text */
- spoiler-text-The culprit is Gosho Aoyama{
opacity: 0; transition: 0.3s; -webkit-user-select: none; -ms-user-select: none; user-select: none;
}
/* Styles to reveal the spoiler text */
- spoiler-box-The culprit is Gosho Aoyama:hover{
background-color: #70717a;
}
- spoiler-box-The culprit is Gosho Aoyama:has(#spoiler-target-The culprit is Gosho Aoyama:target), #spoiler-box:has(#spoiler-target:target){
background-color: #e3e3e5;
}
- spoiler-target-The culprit is Gosho Aoyama:target ~ #spoiler-text-The culprit is Gosho Aoyama, #spoiler-target:target ~ #spoiler-text{
opacity: 1; background-color: #e3e3e5; -webkit-user-select: text; -ms-user-select: text; user-select: text;
}
/* Styles to hide the show button and reveal the hide button */
- spoiler-box-The culprit is Gosho Aoyama:has(#spoiler-target-The culprit is Gosho Aoyama:target) #show-button-The culprit is Gosho Aoyama, #spoiler-box:has(#spoiler-target:target) #show-button{
display: none; z-index: 0;
}
- spoiler-box-The culprit is Gosho Aoyama:has(#spoiler-target-The culprit is Gosho Aoyama:target) #hide-button-The culprit is Gosho Aoyama, #spoiler-box:has(#spoiler-target:target) #hide-button{
display: inline-block; z-index: 5;
}" data-html="" data-param="" data-param2="">
