Difference between revisions of "User:Tsutomu25/sandbox/Cover3"

From Detective Conan Wiki
(→‎Examples)
 
(22 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
<includeonly><span id="spoiler-box-{{{1}}}">[[#spoiler-target-{{{1}}}|<span id="show-button-{{{1}}}" class="button-{{{1}}}">Show Spoilers</span>]][[#null|<span id="hide-button-{{{1}}}" class="button-{{{1}}}">Hide Spoilers</span>]]<span id="spoiler-target-{{{1}}}"></span><span id="spoiler-text-{{{1}}}">{{{2}}}</span></span>
+
<includeonly><span id="spoiler-box-{{{1}}}"><span class="button-container-{{{1}}}">[[#spoiler-target-{{{1}}}|<span id="show-button-{{{1}}}" class="button-{{{1}}}">Show Spoilers</span>]]</span><span class="button-container-{{{1}}}">[[#null|<span id="hide-button-{{{1}}}" class="button-{{{1}}}">Hide Spoilers</span>]]</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-{{{1}}}{
 
#spoiler-box-{{{1}}}{
−
display: inline-block;
 
 
  position: relative;
 
  position: relative;
 
  background-color: #909199;
 
  background-color: #909199;
−
  transition: 0.3s;
+
  transition: 0.3s ease-in;
 +
cursor: pointer;
 +
}
 +
#spoiler-box-{{{1}}}::before{
 +
content: ' ';
 +
display: inline-block;
 +
position: absolute;
 +
width: 100%;
 +
height: 100%;
 +
top: 0%;
 +
left: 0%;
 +
z-index: 1;
 +
}
 +
 
 +
/* Styles for the containers of buttons */
 +
.button-container-{{{1}}}{
 +
position: absolute;
 +
bottom: 100%;
 +
left: 50%;
 +
transform: translate(-50%, 3px);
 +
display: inline-block;
 +
width: auto;
 +
height: auto;
 +
padding-bottom: 7px;
 +
transition: 0.3s ease-in;
 +
visibility: hidden;
 +
opacity: 0;
 +
z-index: 0;
 +
-webkit-user-select: none;
 +
-ms-user-select: none;
 +
user-select: none;
 
}
 
}
  
Line 15: Line 44:
 
  justify-content: center;
 
  justify-content: center;
 
  align-items: center;
 
  align-items: center;
−
  position: absolute;
+
  width: auto;
−
  bottom: calc(100% + 7px);
+
  height: auto;
−
  left: 50%;
+
  padding: 3px 7px;
−
transform: translateX(-50%);
 
−
width: 90px;
 
−
height: 20px;
 
 
  background-color: white;
 
  background-color: white;
−
  background-clip: content-box;
+
  border-radius: 4px;
−
  border: solid black;
+
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.6));
−
border-width: 1px 2px 2px 1px;
 
−
border-radius: 5px;
 
 
  text-wrap: nowrap;
 
  text-wrap: nowrap;
 
  text-decoration: none;
 
  text-decoration: none;
 
  color: black;
 
  color: black;
−
font-size: 10pt;
 
−
transition: 0.3s;
 
−
transition-delay: 0.1s;
 
−
visibility: hidden;
 
−
opacity: 0;
 
−
z-index: 0;
 
−
-webkit-user-select: none;
 
−
-ms-user-select: none;
 
−
user-select: none;
 
 
}
 
}
−
#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;
 +
transform: translate(-50%, 0);
 
  z-index: 5;
 
  z-index: 5;
 +
}
 +
#spoiler-box-{{{1}}}:hover .button-container-{{{1}}}:has(#hide-button-{{{1}}}){
 +
transform: translate(-50%, 0);
 
}
 
}
  
Line 53: 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 */
Line 60: Line 82:
  
 
/* Styles to reveal the spoiler text */
 
/* Styles to reveal the spoiler text */
 +
#spoiler-box-{{{1}}}:hover{
 +
background-color: #70717a;
 +
}
 
#spoiler-box-{{{1}}}:has(#spoiler-target-{{{1}}}:target){
 
#spoiler-box-{{{1}}}:has(#spoiler-target-{{{1}}}:target){
 
  background-color: #e3e3e5;
 
  background-color: #e3e3e5;
 +
}
 +
#spoiler-box-{{{1}}}:has(#spoiler-target-{{{1}}}:target)::before{
 +
display: none;
 
}
 
}
 
#spoiler-target-{{{1}}}:target ~ #spoiler-text-{{{1}}}{
 
#spoiler-target-{{{1}}}:target ~ #spoiler-text-{{{1}}}{
 
  opacity: 1;
 
  opacity: 1;
−
background-color: #e3e3e5;
 
 
  -webkit-user-select: text;
 
  -webkit-user-select: text;
 
  -ms-user-select: text;
 
  -ms-user-select: text;
Line 72: Line 99:
  
 
/* Styles to hide the show button and reveal the hide button */
 
/* Styles to hide the show button and reveal the hide button */
−
#spoiler-box-{{{1}}}:hover:has(#spoiler-target-{{{1}}}:target) #show-button-{{{1}}}{
+
#spoiler-box-{{{1}}}:hover:has(#spoiler-target-{{{1}}}:target) .button-container-{{{1}}}:has(#show-button-{{{1}}}){
−
/* display: none; */
 
 
  visibility: hidden;
 
  visibility: hidden;
 
  opacity: 0;
 
  opacity: 0;
 
  z-index: 0;
 
  z-index: 0;
 
}
 
}
−
#spoiler-box-{{{1}}}:hover:has(#spoiler-target-{{{1}}}:target) #hide-button-{{{1}}}{
+
#spoiler-box-{{{1}}}:hover:has(#spoiler-target-{{{1}}}:target) .button-container-{{{1}}}:has(#hide-button-{{{1}}}){
−
/* display: flex; */
 
 
  visibility: visible;
 
  visibility: visible;
 
  opacity: 1;
 
  opacity: 1;
Line 91: Line 116:
 
The following is a list of required parameters:
 
The following is a list of required parameters:
 
<pre>
 
<pre>
−
{{User:Tsutomu25/sandbox/Cover2|<spoiler name>|<spoiler text>}}
+
{{User:Tsutomu25/sandbox/Cover3|<spoiler name>|<spoiler text>}}
 
</pre>
 
</pre>
  
Line 100: Line 125:
 
== Examples==
 
== Examples==
 
Result: {{User:Tsutomu25/sandbox/Cover3|weapon|The weapon is Knife}}
 
Result: {{User:Tsutomu25/sandbox/Cover3|weapon|The weapon is Knife}}
−
Result: {{User:Tsutomu25/sandbox/Cover3|motive|The culprit wore {{font color|#ffff00|Yellow}} clothes}}
+
Result: {{User:Tsutomu25/sandbox/Cover3|motive|The culprit wore {{font color|#ffa500|Orange}} clothes}}
 
Result: {{User:Tsutomu25/sandbox/Cover3|culprit|The culprit is [[Gosho Aoyama]]}}
 
Result: {{User:Tsutomu25/sandbox/Cover3|culprit|The culprit is [[Gosho Aoyama]]}}
  
 
[[Category:Templates]]
 
[[Category:Templates]]
 
</noinclude>
 
</noinclude>

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: Show SpoilersHide SpoilersThe weapon is Knife

Result: Show SpoilersHide SpoilersThe culprit wore Orange clothes

Result: Show SpoilersHide SpoilersThe culprit is Gosho Aoyama

Retrieved from "https://www.detectiveconanworld.com/wiki/index.php?title=User:Tsutomu25/sandbox/Cover3&oldid=394011"