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

From Detective Conan Wiki
 
(2 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
<includeonly><span class="tt-target">{{{1}}}<span class="tt-container tt-container-above" style="display: none;"><span class="tt-tooltip">{{{2}}}<span class="tt-chevron"></span></span></span></span>{{code
+
<includeonly><span class="text-cover" tabindex="0"><span class="text-cover-content">{{{1}}}</span></span>
 +
{{code
 
|css=
 
|css=
−
    /* Target word for the tooltip to focus on */
+
.text-cover {
−
    .tt-target {
+
  background-color: #909199;
−
        position: relative;
+
  transition: 0.3s;
−
        display: inline-block;
+
}
−
        border-bottom: 0.0625em dotted;
 
−
        cursor: help;
 
−
    }
 
−
   
 
−
   
 
−
    /* CONTAINER CLASSES */
 
−
    /* A so-called 'container' for the tooltip to work around in */
 
−
    .tt-container {
 
−
        position: absolute;
 
−
        left: 50%;
 
−
        min-height: 1em;
 
−
        width: 170px;
 
−
        padding: 10px 0 8px;
 
−
        display: flex;
 
−
        justify-content: center;
 
−
        opacity: 0;
 
−
        z-index: 999;
 
−
        pointer-events: none;
 
−
        user-select: none;
 
−
        -webkit-user-select: none;
 
−
        -ms-user-select: none;
 
−
        transition: 0.3s ease 0.1s; /* This is used for the hover animations */
 
−
    }
 
−
   
 
−
    /* Container appear above target */
 
−
    .tt-container-above {
 
−
        bottom: calc(100% - 2px);
 
−
        transform: translate(-50%, 3px);
 
−
    }
 
−
   
 
−
    /* Container appear below target */
 
−
    .tt-container-below {
 
−
        top: calc(100% - 2px);
 
−
        transform: translate(-50%, -3px);
 
−
    }
 
−
    /* END OF CONTAINER CLASSES */
 
−
   
 
−
   
 
−
    /* The TOOLTIP itself */
 
−
    .tt-tooltip {
 
−
        background: #fff;
 
−
        border-radius: 4px;
 
−
        filter: drop-shadow(0 1px 4px rgba(0,0,0,0.6));
 
−
        padding: 6px 9px;
 
−
        text-align: center;
 
−
        overflow-wrap: anywhere;
 
−
    }
 
−
   
 
−
   
 
−
    /* CHEVRON CLASSES */
 
−
    /* Shared class */
 
−
    .tt-chevron {
 
−
        position: absolute;
 
−
        left: 50%;
 
−
        transform: translateX(-50%);
 
−
        width: 0;
 
−
        height: 0;
 
−
        border-style: solid;
 
−
        z-index: 998;
 
−
    }
 
−
   
 
−
    /* When tooltip is above */
 
−
    .tt-container-above .tt-chevron {
 
−
        top: calc(100% - 3px);
 
−
        border-width: 9px 9px 0 9px;
 
−
        border-color: #fff transparent transparent transparent;
 
−
    }
 
−
   
 
−
    /* When tooltip is below */
 
−
    .tt-container-below .tt-chevron {
 
−
        bottom: calc(100% - 2px);
 
−
        border-width: 0 9px 9px 9px;
 
−
        border-color: transparent transparent #fff transparent;
 
−
    }
 
−
    /* END OF CHEVRON CLASSES */
 
−
   
 
−
   
 
−
    /* HOVER ANIMATION CLASSES */
 
−
    /* Tooltip fade-in */
 
−
    .tt-target:hover .tt-container {
 
−
        opacity: 1;
 
−
        transform: translate(-50%, 0);
 
−
        pointer-events: auto;
 
−
        user-select: auto;
 
−
        -webkit-user-select: auto;
 
−
        -ms-user-select: auto;
 
−
    }
 
  
−
    /* Text bold on hover */
+
.text-cover-content {
−
    .tt-target:hover {
+
  opacity: 0;
−
        border-bottom: 0.0625em dashed;
+
  pointer-events: none;
−
    }
+
  -webkit-user-select: none;
−
    /* END OF HOVER ANIMATION CLASSES */
+
  -ms-user-select: none;
−
   
+
  user-select: none;
−
}}</includeonly>
+
}
 +
 
 +
.text-cover:hover {
 +
  background-color: #70717a;
 +
}
 +
.text-cover:focus-within {
 +
background-color: #e3e3e5;
 +
}
 +
.text-cover:focus-within .text-cover-content {
 +
  opacity: 1;
 +
  pointer-events: auto;
 +
}
 +
}}
 +
</includeonly><noinclude>
 +
It hides the given input of spoiler text and reveals them when the user clicks on them. It takes just one value i.e., spoiler text.
 +
== Usage ==
 +
The following is a list of required parameters:
 +
<pre>
 +
{{User:Tsutomu25/sandbox/Cover4|<spoiler text>}}
 +
</pre>
 +
 
 +
== 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: {{User:Tsutomu25/sandbox/Cover4|The weapon is Knife}}
 +
Result: {{User:Tsutomu25/sandbox/Cover4|The culprit wore {{font color|#ffa500|Orange}} clothes}}
 +
Result: {{User:Tsutomu25/sandbox/Cover4|The culprit is [[Gosho Aoyama]] and his editor}}
 +
 
 +
[[Category:Templates]]
 +
</noinclude>

Latest revision as of 15:47, 26 August 2025

It hides the given input of spoiler text and reveals them when the user clicks on them. It takes just one value i.e., spoiler text.

Usage

The following is a list of required parameters: 

{{User:Tsutomu25/sandbox/Cover4|<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 and his editor

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