User:Tsutomu25/sandbox/Cover2: Difference between revisions
No edit summary |
No edit summary |
||
| 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> | ||