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

From Detective Conan Wiki
(Created page with "<includeonly><span class="cover">{{{1}}}</span></includeonly> {{code |css= .cover, .cover a, a .cover, .cover a.new { background-color: #e6e6e6; color: #e6e6e6; text-sh...")
 
Line 1: Line 1:
−
<includeonly><span class="cover">{{{1}}}</span></includeonly>
+
<includeonly><span id="spoiler-box"><a href="#spoiler-target" id="show-button" class="button"></a><a href="#" id="hide-button" class="button"></a><div id="spoiler-target"></div><span id="spoiler-text">{{{1}}}</span></span>
 
{{code
 
{{code
 +
|css=
 +
/* Styles for the spoiler box */
 +
#spoiler-box{
 +
display: inline-block;
 +
position: relative;
 +
background-color: #909199;
 +
transition: 0.3s;
 +
}
  
−
|css=
+
/* Styles for the buttons */
−
.cover, .cover a, a .cover, .cover a.new {
+
.button{
−
  background-color: #e6e6e6;
+
position: absolute;
−
  color: #e6e6e6;
+
top: 0px;
−
  text-shadow: none;
+
left: 0px;
−
  transition: color 0.2s linear, background-color 0.2s linear;
+
width: 100%;
 +
height: 100%;
 +
}
 +
#show-button{  
 +
display: inline-block;
 +
z-index: 5;
 +
}
 +
#hide-button{
 +
display: none;
 +
z-index: 0;
 +
}
 +
 
 +
/* Hiding the target div */
 +
#spoiler-target{
 +
display: none;
 +
}
 +
 
 +
/* Styles to hide the spoiler text */
 +
#spoiler-text{
 +
opacity: 0;
 +
transition: 0.3s;
 +
-webkit-user-select: none; /* Safari */
 +
-ms-user-select: none; /* IE 10 and IE 11 */
 +
user-select: none; /* Standard syntax */
 +
}
 +
 
 +
/* Styles to reveal the spoiler text */
 +
#spoiler-box:has(#spoiler-target:target){
 +
background-color: #e3e3e5;
 
}
 
}
−
.cover:hover, .cover:active,
+
#spoiler-target:target ~ #spoiler-text{
−
.cover:hover .cover, .cover:active .cover {
+
opacity: 1;
−
  color: black !important;
+
background-color: #e3e3e5;
−
  background-color: transparent !important;
+
-webkit-user-select: text;
 +
-ms-user-select: text;
 +
user-select: text;
 
}
 
}
−
.cover:hover a, a:hover .cover,
+
 
−
.cover:active a, a:active .cover {
+
/* Styles to hide the show button and reveal the hide button */
−
  color: blue !important;
+
#spoiler-box:has(#spoiler-target:target) #show-button{
−
  background-color: transparent !important;
+
display: none;
 +
z-index: 0;
 
}
 
}
−
.cover:hover .new, .cover .new:hover, .new:hover .cover,
+
#spoiler-box:has(#spoiler-target:target) #hide-button{
−
.cover:active .new, .cover .new:active, .new:active .cover {
+
display: inline-block;
−
  color: #BA0000 !important;
+
z-index: 5;
−
  background-color: transparent !important;
 
 
}
 
}
−
}}<noinclude>
+
}}</includeonly>
 +
 
 +
<noinclude>
  
 
<pre>{{User:Tsutomu25/sandbox/Cover2|The culprit is Gosho Aoyama}}</pre>
 
<pre>{{User:Tsutomu25/sandbox/Cover2|The culprit is Gosho Aoyama}}</pre>

Revision as of 10:22, 21 August 2025



{{User:Tsutomu25/sandbox/Cover2|The culprit is Gosho Aoyama}}

Results in {{{2}}}

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 */

  1. 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%;

}

  1. show-button-The culprit is Gosho Aoyama{
display: inline-block;
z-index: 5;

}

  1. hide-button-The culprit is Gosho Aoyama{
display: none;
z-index: 0;

}

/* Hiding the target div */

  1. spoiler-target-The culprit is Gosho Aoyama{
display: none;

}

/* Styles to hide the spoiler text */

  1. 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 */

  1. spoiler-box-The culprit is Gosho Aoyama:hover{
background-color: #70717a;

}

  1. 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;

}

  1. 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 */

  1. 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;

}

  1. 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="">


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