Difference between revisions of "Template:Tt/sandbox"

From Detective Conan Wiki
m (Undo revision 387474 by AvidConanContributor (talk) That didn't work)
(Tag: Undo)
Line 1: Line 1:
−
<includeonly><span class="tooltip-target" style="white-space: initial; overflow-x: initial;">{{{1}}}<span class="tooltip-container tooltip-container-above"><span class="tooltip">{{{2}}}<span class="chevron"></span></span></span></span>{{code
+
<includeonly>{{code
 +
|html=%3Clabel%20class%3D%22tooltip-target%22%20for%3D%22%7B%7B%7BUID%7D%7D%7D%22%3E%0A%20%20%7B%7B%7Bparam%7D%7D%7D%0A%20%20%3Cinput%20type%3D%22checkbox%22%20class%3D%22tooltip-toggle%22%20id%3D%22%7B%7B%7BUID%7D%7D%7D%22%2F%3E%0A%20%20%3Cspan%20class%3D%22tooltip-container%20tooltip-container-above%22%3E%0A%20%20%20%20%3Cspan%20class%3D%22tooltip%22%3E%0A%20%20%20%20%20%20%7B%7B%7Bparam2%7D%7D%7D%0A%20%20%20%20%20%20%3Cspan%20class%3D%22chevron%22%3E%3C%2Fspan%3E%0A%20%20%20%20%3C%2Fspan%3E%0A%20%20%3C%2Fspan%3E%0A%3C%2Flabel%3E
 +
|param={{{1}}}
 +
|param2={{{2}}}
 
|css=
 
|css=
−
    /* Target word for the tooltip to focus on */
+
/* Target word for the tooltip to focus on */
−
    .tooltip-target {
+
.tooltip-target {
−
        position: relative;
+
  position: relative;
−
        display: inline-block;
+
  display: inline-block;
−
        border-bottom: 0.0625em dotted;
+
  border-bottom: 0.0625em dotted;
−
        cursor: help;
+
  cursor: help;
−
    }
+
}
 +
 
 +
.tooltip-toggle {
 +
  display: none;
 +
}
 +
 
 +
/* CONTAINER CLASSES */
 +
/* A so-called 'container' for the tooltip to work around in */
 +
.tooltip-container {
 +
  position: absolute;
 +
  left: 50%;
 +
  min-height: 1em;
 +
  width: 170px;
 +
  padding: 10px 0 8px;
 +
  display: flex;
 +
  justify-content: center;
 +
  opacity: 0;
 +
  pointer-events: none;
 +
  user-select: none;
 +
  -webkit-user-select: none;
 +
  -ms-user-select: none;
 +
  transition: 0.3s ease;
 +
  padding: 10px 0 8px;
 +
  transition: 0.3s ease 0.1s; /* This is used for the hover animations */
 +
}
 +
 
 +
/* Container appear above target */
 +
.tooltip-container-above {
 +
  bottom: 90%;
 +
  transform: translate(-50%, 3px);
 +
}
 
      
 
      
−
   
+
/* Container appear below target */
−
    /* CONTAINER CLASSES */
+
.tooltip-container-below {
−
    /* A so-called 'container' for the tooltip to work around in */
+
  top: 90%;
−
    .tooltip-container {
+
  transform: translate(-50%, -3px);
−
        position: absolute;
+
}
−
        left: 50%;
+
/* END OF CONTAINER CLASSES */
−
        transform: translateX(-50%);
+
 
−
        min-height: 1em;
+
 
−
        width: 170px;
+
/* The TOOLTIP itself */
−
        padding: 10px 0 8px;
+
.tooltip {
−
        display: flex;
+
  background: #fff;
−
        justify-content: center;
+
  border-radius: 4px;
−
        opacity: 0;
+
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.6));
−
        pointer-events: none;
+
  padding: 6px 9px;
−
        user-select: none;
+
  max-width: 100%;
−
        -webkit-user-select: none;
+
  height: min-content;
−
        -ms-user-select: none;
+
  word-wrap: break-word;
−
        transition: 0.3s ease 0.1s; /* This is used for the hover animations */
+
  z-index: 999;
−
    }
+
  text-align: center;
−
   
+
}
−
    /* Container appear above target */
+
 
−
    .tooltip-container-above {
+
 
−
        bottom: 90%;
+
/* CHEVRON CLASSES */
−
        transform: translate(-50%, 3px);
+
/* Shared class */
−
    }
+
.chevron {
−
   
+
  position: absolute;
−
    /* Container appear below target */
+
  left: 50%;
−
    .tooltip-container-below {
+
  transform: translateX(-50%);
−
        top: 90%;
+
  width: 0;
−
        transform: translate(-50%, -3px);
+
  height: 0;
−
    }
+
  border-style: solid;
−
    /* END OF CONTAINER CLASSES */
+
  z-index: 998;
−
   
+
}
−
   
+
 
−
    /* The TOOLTIP itself */
+
/* When tooltip is above */
−
    .tooltip {
+
.tooltip-container-above .chevron {
−
        background: #fff;
+
  top: 95%;
−
        border-radius: 4px;
+
  border-width: 9px 9px 0 9px;
−
        filter: drop-shadow(0 1px 4px rgba(0,0,0,0.6));
+
  border-color: #fff transparent transparent transparent;
−
        padding: 6px 9px;
+
}
−
        max-width: 100%;
+
 
−
        height: min-content;
+
/* When tooltip is below */
−
        word-wrap: break-word;
+
.tooltip-container-below .chevron {
−
        z-index: 999;
+
  bottom: 95%;
−
    }
+
  border-width: 0 9px 9px 9px;
−
   
+
  border-color: transparent transparent #fff transparent;
−
   
+
}
−
    /* CHEVRON CLASSES */
+
/* END OF CHEVRON CLASSES */
−
    /* Shared class */
+
 
−
    .chevron {
+
 
−
        position: absolute;
+
/* HOVER ANIMATION CLASSES */
−
        left: 50%;
+
/* tooltip fade-in */
−
        transform: translateX(-50%);
+
/* when text is clicked on touchscreens */
−
        width: 0;
+
/* @media (hover: none) and (pointer: coarse) { */
−
        height: 0;
+
@media (max-width: 450px) {
−
        border-style: solid;
+
  .tooltip-toggle:checked + .tooltip-container {
−
        z-index: 998;
+
    opacity: 1;
−
    }
+
    transform: translate(-50%, 0);
−
   
+
    pointer-events: auto;
−
    /* When tooltip is above */
+
    user-select: auto;
−
    .tooltip-container-above .chevron {
+
    webkit-user-select: auto;
−
        top: 95%;
+
    ms-user-select: auto;
−
        border-width: 9px 9px 0 9px;
+
  }
−
        border-color: #fff transparent transparent transparent;
+
}
−
    }
+
 
−
   
+
/* Hover for desktop */
−
    /* When tooltip is below */
+
@media (hover: hover) and (pointer: fine) {
−
    .tooltip-container-below .chevron {
+
.tooltip-target:hover .tooltip-container {
−
        bottom: 95%;
+
    opacity: 1;
−
        border-width: 0 9px 9px 9px;
+
    transform: translate(-50%, 0);
−
        border-color: transparent transparent #fff transparent;
+
    pointer-events: auto;
−
    }
+
    user-select: auto;
−
    /* END OF CHEVRON CLASSES */
+
    webkit-user-select: auto;
−
   
+
     ms-user-select: auto;
−
   
+
}
−
    /* HOVER ANIMATION CLASSES */
+
}
−
    /* Above tooltip fade-in */
+
/* END OF HOVER ANIMATION CLASSES */
−
    .tooltip-target:hover .tooltip-target:active .tooltip-container {
+
 
−
        opacity: 1;
+
}}</includeonly><noinclude>We love {{tt/sandbox|DC|Detective Conan}}<ref>qwoidjqwoi</ref><ref>e9qjr</ref></noinclude>
−
        transform: translate(-50%, 0);
 
−
        pointer-events: auto;
 
−
        user-select: auto;
 
−
        -webkit-user-select: auto;
 
−
        -ms-user-select: auto;
 
−
    }
 
−
   
 
−
    /* Underline dashed on hover */
 
−
    .tooltip-target:hover .tooltip-target:active {
 
−
        border-bottom: 0.0625em dashed;
 
−
     }
 
−
    /* END OF HOVER ANIMATION CLASSES */
 
−
   
 
−
}}</includeonly><noinclude>We love {{tt/sandbox|DC|Detective Conan<ref>wjdid</ref>}}<ref>qwoidjqwoi</ref><ref>e9qjr</ref></noinclude>
 

Revision as of 20:58, 9 June 2025

We love DC[1][2]

  1. ^ qwoidjqwoi
  2. ^ e9qjr
Retrieved from "https://www.detectiveconanworld.com/wiki/index.php?title=Template:Tt/sandbox&oldid=387475"