Template:Tt: Difference between revisions

← Older edit Newer edit →

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