|
|
| 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 {
| |
| position: relative;
| |
| 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 */ | | body |
| .tt-target:hover { | | { |
| border-bottom: 0.0625em dashed;
| | font-family: sans-serif; |
| } | | } |
| /* END OF HOVER ANIMATION CLASSES */ | | |
| | | |
| }}</includeonly><noinclude>{{Documentation}} | | .banner |
| <pre>text text {{tt|Hover me|blablablablabla}} text text</pre>
| | { |
| Results in: text text {{tt|Hover me|blablablablabla}} text text
| | background-color: #fcfcfc; |
| [[Category:Templates]]
| | border:1px solid #ccc; |
| </noinclude>
| | 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: 50%; |
| | } |
| | |
| | .right-banner |
| | { |
| | display: flex; |
| | justify-content: space-around; |
| | width: 40%; |
| | } |
| | |
| | |
| | |
| | |
| | |
| | }} |