Difference between revisions of "Template:Tt"

From Detective Conan Wiki
(Undo revision 388156 by Tsutomu25 (talk))
(Tag: Undo)
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
+
 
 +
<div class="banner">
 +
        <div class="left-banner">
 +
            <div style="font-size:162%; border:none; margin:0; padding:.1em; color:#000;">Welcome to [[Detective Conan]] Wiki,</div>
 +
            <div style="top:+0.2em; font-size:95%;">the ultimate resource about Detective Conan.</div>
 +
            <div id="articlecount" style="font-size:85%;">This wiki contains a total of [[Special:Statistics|{{NUMBEROFARTICLES}}]] articles thus far</div>
 +
        </div>
 +
 
 +
        <div class="right-banner">
 +
            <div style="font-size:95%;" class="front">
 +
* [http://www.detectiveconanworld.com Homepage]
 +
* [http://www.detectiveconanworld.com/forum Forum]
 +
* [http://www.detectiveconanworld.com/contact Contact]
 +
            </div>
 +
            <div style="font-size:95%;">
 +
* [[Characters]]
 +
* [[Anime]]
 +
* [[Manga]]
 +
            </div>
 +
            <div style="font-size:95%;">
 +
* [[Movies]]
 +
* [[OVAs]]
 +
* [[Specials]]
 +
            </div>
 +
        </div>
 +
    </div>
 +
 
 +
{{code
 
|css=
 
|css=
−
     /* Target word for the tooltip to focus on */
+
 
−
     .tt-target {
+
body
−
        position: relative;
+
{
−
        display: inline-block;
+
    font-family: sans-serif;
−
        border-bottom: 0.0625em dotted;
+
}
−
         cursor: help;
+
 
 +
 
 +
.banner
 +
{
 +
    background-color: #fcfcfc;
 +
    border:1px solid #ccc;
 +
    color:#000;
 +
    min-height: 75px;
 +
    display: flex;
 +
    flex-direction: row;
 +
     align-items: center;
 +
     justify-content: space-between;
 +
}
 +
 
 +
.left-banner
 +
{
 +
    display: flex;
 +
    flex-direction: column;
 +
    align-items: center;
 +
    width: 55vw;
 +
}
 +
 
 +
.right-banner
 +
{
 +
    display: flex;
 +
    justify-content: space-around;
 +
    width: 35vw;
 +
padding: 0px 5vw
 +
}
 +
 
 +
/* .right-banner div:first-child
 +
{
 +
    margin-left: 15%;
 +
}
 +
 
 +
.right-banner div:last-child
 +
{
 +
    margin-right: 5%;
 +
} */
 +
 
 +
 
 +
@media only screen and (max-width: 850px) {
 +
 
 +
 
 +
    .left-banner
 +
    {
 +
         width: 55%;
 
     }
 
     }
 
      
 
      
−
      
+
     .right-banner
−
    /* CONTAINER CLASSES */
+
     {
−
    /* A so-called 'container' for the tooltip to work around in */
+
         width: 40%;
−
     .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);
+
 
 +
@media only screen and (max-width: 700px) {
 +
 
 +
     .banner
 +
     {
 +
         flex-direction: column;
 
     }
 
     }
−
   
+
 
−
    /* Container appear below target */
+
     .left-banner, .right-banner
−
     .tt-container-below {
+
    {
−
         top: calc(100% - 2px);
+
         width: ;
−
        transform: translate(-50%, -3px);
 
 
     }
 
     }
−
    /* END OF CONTAINER CLASSES */
+
 
−
   
+
     .right-banner div
−
   
+
     {
−
    /* The TOOLTIP itself */
+
         margin: 0px;
−
    .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 */
+
}}
−
    .tt-target:hover {
 
−
        border-bottom: 0.0625em dashed;
 
−
    }
 
−
    /* END OF HOVER ANIMATION CLASSES */
 
−
   
 
−
}}</includeonly><noinclude>{{Documentation}}
 
−
<pre>text text {{tt|Hover me|blablablablabla}} text text</pre>
 
−
Results in: text text {{tt|Hover me|blablablablabla}} text text
 
−
[[Category:Templates]]
 
−
</noinclude>
 

Revision as of 11:46, 19 June 2025

Retrieved from "https://www.detectiveconanworld.com/wiki/index.php?title=Template:Tt&oldid=388160"