Difference between revisions of "User:Tsutomu25/sandbox/Cover3"
From Detective Conan Wiki
| (11 intermediate revisions by the same user not shown) | |||
| Line 4: | Line 4: | ||
/* Styles for the spoiler box */ | /* Styles for the spoiler box */ | ||
#spoiler-box-{{{1}}}{ | #spoiler-box-{{{1}}}{ | ||
| − | |||
position: relative; | position: relative; | ||
background-color: #909199; | background-color: #909199; | ||
| − | transition: 0.3s; | + | transition: 0.3s ease-in; |
cursor: pointer; | cursor: pointer; | ||
} | } | ||
| Line 28: | Line 27: | ||
transform: translate(-50%, 3px); | transform: translate(-50%, 3px); | ||
display: inline-block; | display: inline-block; | ||
| − | width: | + | width: auto; |
| − | height: | + | height: auto; |
| + | padding-bottom: 7px; | ||
transition: 0.3s ease-in; | transition: 0.3s ease-in; | ||
visibility: hidden; | visibility: hidden; | ||
| Line 44: | Line 44: | ||
justify-content: center; | justify-content: center; | ||
align-items: center; | align-items: center; | ||
| − | width: | + | width: auto; |
| − | height: | + | height: auto; |
| + | padding: 3px 7px; | ||
background-color: white; | background-color: white; | ||
border-radius: 4px; | border-radius: 4px; | ||
| Line 53: | Line 54: | ||
color: black; | color: black; | ||
} | } | ||
| − | #spoiler-box-{{{1}}}:hover #show-button-{{{1}}}{ | + | #spoiler-box-{{{1}}} .button-container-{{{1}}} a:hover{ |
| + | text-decoration: none; | ||
| + | } | ||
| + | #spoiler-box-{{{1}}}:hover .button-container-{{{1}}}:has(#show-button-{{{1}}}){ | ||
visibility: visible; | visibility: visible; | ||
opacity: 1; | opacity: 1; | ||
| Line 59: | Line 63: | ||
z-index: 5; | z-index: 5; | ||
} | } | ||
| − | #spoiler-box-{{{1}}}:hover #hide-button-{{{1}}}{ | + | #spoiler-box-{{{1}}}:hover .button-container-{{{1}}}:has(#hide-button-{{{1}}}){ |
transform: translate(-50%, 0); | transform: translate(-50%, 0); | ||
} | } | ||
| Line 71: | Line 75: | ||
#spoiler-text-{{{1}}}{ | #spoiler-text-{{{1}}}{ | ||
opacity: 0; | opacity: 0; | ||
| − | transition: 0.3s; | + | transition: 0.3s ease-in; |
-webkit-user-select: none; /* Safari */ | -webkit-user-select: none; /* Safari */ | ||
-ms-user-select: none; /* IE 10 and IE 11 */ | -ms-user-select: none; /* IE 10 and IE 11 */ | ||
Latest revision as of 03:56, 27 August 2025
It hides the given input of spoiler text and reveals them when the user clicks on them. It takes two values. One is the name of the spoiler and another one is the actual spoiler text. Every time the template is used, every element has to have a unique id and class. Hence spoiler name is required.
Usage
The following is a list of required parameters:
{{User:Tsutomu25/sandbox/Cover3|<spoiler name>|<spoiler text>}}
Limitations
- When the template is used multiple times on the same page, only one spoiler can remain visible at a time. If the user reveals another spoiler, the previously opened one will automatically be hidden.
- If the page is refreshed while a spoiler is revealed, that spoiler will remain open even after the page reloads.
Examples
Result: The weapon is Knife
Result: The culprit wore Orange clothes
Result: The culprit is Gosho Aoyama
