Difference between revisions of "User:Tsutomu25/sandbox/Cover2"
From Detective Conan Wiki
| Line 1: | Line 1: | ||
| − | <includeonly><span id="spoiler-box-{{{1}}}">[[#spoiler-target|<span id="show-button-{{{1}}}" class="button-{{{1}}}"></span>]][[#null|<span href="#" id="hide-button-{{{1}}}" class="button-{{{1}}}"></span>]]<span id="spoiler-target-{{{1}}}"></span><span id="spoiler-text-{{{1}}}">{{{2}}}</span></span | + | <includeonly><span id="spoiler-box-{{{1}}}">[[#spoiler-target-{{{1}}}|<span id="show-button-{{{1}}}" class="button-{{{1}}}"></span>]][[#null|<span href="#" id="hide-button-{{{1}}}" class="button-{{{1}}}"></span>]]<span id="spoiler-target-{{{1}}}"></span><span id="spoiler-text-{{{1}}}">{{{2}}}</span></span> |
{{code | {{code | ||
|css= | |css= | ||
/* Styles for the spoiler box */ | /* Styles for the spoiler box */ | ||
| − | #spoiler-box{ | + | #spoiler-box-{{{1}}}{ |
display: inline-block; | display: inline-block; | ||
position: relative; | position: relative; | ||
| Line 11: | Line 11: | ||
/* Styles for the buttons */ | /* Styles for the buttons */ | ||
| − | + | button-{{{1}}}{ | |
position: absolute; | position: absolute; | ||
top: 0px; | top: 0px; | ||
| Line 18: | Line 18: | ||
height: 100%; | height: 100%; | ||
} | } | ||
| − | #show-button{ | + | #show-button-{{{1}}}{ |
display: inline-block; | display: inline-block; | ||
z-index: 5; | z-index: 5; | ||
} | } | ||
| − | #hide-button{ | + | #hide-button-{{{1}}}{ |
display: none; | display: none; | ||
z-index: 0; | z-index: 0; | ||
| Line 28: | Line 28: | ||
/* Hiding the target div */ | /* Hiding the target div */ | ||
| − | #spoiler-target{ | + | #spoiler-target-{{{1}}}{ |
display: none; | display: none; | ||
} | } | ||
/* Styles to hide the spoiler text */ | /* Styles to hide the spoiler text */ | ||
| − | #spoiler-text{ | + | #spoiler-text-{{{1}}}{ |
opacity: 0; | opacity: 0; | ||
transition: 0.3s; | transition: 0.3s; | ||
| Line 42: | Line 42: | ||
/* Styles to reveal the spoiler text */ | /* Styles to reveal the spoiler text */ | ||
| − | #spoiler-box:has(#spoiler-target:target){ | + | #spoiler-box-{{{1}}}:has(#spoiler-target-{{{1}}}:target){ |
background-color: #e3e3e5; | background-color: #e3e3e5; | ||
} | } | ||
| − | #spoiler-target:target ~ #spoiler-text{ | + | #spoiler-target-{{{1}}}:target ~ #spoiler-text-{{{1}}}{ |
opacity: 1; | opacity: 1; | ||
background-color: #e3e3e5; | background-color: #e3e3e5; | ||
| Line 54: | Line 54: | ||
/* Styles to hide the show button and reveal the hide button */ | /* Styles to hide the show button and reveal the hide button */ | ||
| − | #spoiler-box:has(#spoiler-target:target) #show-button{ | + | #spoiler-box-{{{1}}}:has(#spoiler-target-{{{1}}}:target) #show-button-{{{1}}}{ |
display: none; | display: none; | ||
z-index: 0; | z-index: 0; | ||
} | } | ||
| − | #spoiler-box:has(#spoiler-target:target) #hide-button{ | + | #spoiler-box-{{{1}}}:has(#spoiler-target-{{{1}}}:target) #hide-button-{{{1}}}{ |
display: inline-block; | display: inline-block; | ||
z-index: 5; | z-index: 5; | ||
} | } | ||
}} | }} | ||
| − | + | </includeonly> | |
<noinclude> | <noinclude> | ||
