User:Tsutomu25/sandbox/Cover3

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

Results in Show SpoilersHide SpoilersHe he he

Results in [[#spoiler-target-The culprit is Gosho Aoyama|Show Spoilers]]Hide Spoilers{{{2}}}

Results in <span id="spoiler-box-The culprit is Gosho Aoyama"><span class="button-container-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">Show Spoilers]]<span class="button-container-The culprit is Gosho Aoyama"><span id="hide-button-The culprit is Gosho Aoyama" class="button-The culprit is Gosho Aoyama">Hide Spoilers<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{

position: relative;
background-color: #909199;
transition: 0.3s ease-in;
cursor: pointer;

}

1. spoiler-box-The culprit is Gosho Aoyama::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-The culprit is Gosho Aoyama{

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;

}

/* Styles for the buttons */ .button-The culprit is Gosho Aoyama{

display: flex;
justify-content: center;
align-items: center;
width: auto;
height: auto;
padding: 3px 7px;
background-color: white;
border-radius: 4px;
filter: drop-shadow(0 1px 4px rgba(0,0,0,0.6));
text-wrap: nowrap;
text-decoration: none;
color: black;

}

1. spoiler-box-The culprit is Gosho Aoyama .button-container-The culprit is Gosho Aoyama a:hover{

text-decoration: none;

}

1. spoiler-box-The culprit is Gosho Aoyama:hover .button-container-The culprit is Gosho Aoyama:has(#show-button-The culprit is Gosho Aoyama){

visibility: visible;
opacity: 1;
transform: translate(-50%, 0);
z-index: 5;

}

1. spoiler-box-The culprit is Gosho Aoyama:hover .button-container-The culprit is Gosho Aoyama:has(#hide-button-The culprit is Gosho Aoyama){

transform: translate(-50%, 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 ease-in;
-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 */

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){

background-color: #e3e3e5;

}

1. spoiler-box-The culprit is Gosho Aoyama:has(#spoiler-target-The culprit is Gosho Aoyama:target)::before{

display: none;

}

1. spoiler-target-The culprit is Gosho Aoyama:target ~ #spoiler-text-The culprit is Gosho Aoyama{

opacity: 1;
-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:hover:has(#spoiler-target-The culprit is Gosho Aoyama:target) .button-container-The culprit is Gosho Aoyama:has(#show-button-The culprit is Gosho Aoyama){

visibility: hidden;
opacity: 0;
z-index: 0;

}

1. spoiler-box-The culprit is Gosho Aoyama:hover:has(#spoiler-target-The culprit is Gosho Aoyama:target) .button-container-The culprit is Gosho Aoyama:has(#hide-button-The culprit is Gosho Aoyama){

visibility: visible;
opacity: 1;
z-index: 5;

}" data-html="" data-param="" data-param2="">