Difference between revisions of "Template:Tt/sandbox"
From Detective Conan Wiki
(makes the tooltip work for touchscreens as well) |
|||
| Line 1: | Line 1: | ||
| − | <includeonly> | + | <includeonly>{{User:R0o0dii/Template:css |
| + | |html=%3Clabel%20class%3D%22tooltip-target%22%3E%0A%20%20%7B%7B%7Bparam%7D%7D%7D%0A%20%20%3Cinput%20type%3D%22checkbox%22%20class%3D%22tooltip-toggle%22%20%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%0A | ||
| + | |param={{{1}}} | ||
| + | |param2={{{2}}} | ||
|css= | |css= | ||
| − | + | /* Target word for the tooltip to focus on */ | |
| − | + | .tooltip-target { | |
| − | + | position: relative; | |
| − | + | display: inline-block; | |
| − | + | border-bottom: 0.0625em dotted; | |
| − | + | 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; | |
| − | + | 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 */ | ||
| + | .tooltip-container-below { | ||
| + | top: 90%; | ||
| + | transform: translate(-50%, -3px); | ||
| + | } | ||
| + | /* END OF CONTAINER CLASSES */ | ||
| + | |||
| + | |||
| + | /* The TOOLTIP itself */ | ||
| + | .tooltip { | ||
| + | background: #fff; | ||
| + | border-radius: 4px; | ||
| + | filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.6)); | ||
| + | padding: 6px 9px; | ||
| + | max-width: 100%; | ||
| + | height: min-content; | ||
| + | word-wrap: break-word; | ||
| + | z-index: 999; | ||
| + | text-align: center; | ||
| + | } | ||
| + | |||
| + | |||
| + | /* CHEVRON CLASSES */ | ||
| + | /* Shared class */ | ||
| + | .chevron { | ||
| + | position: absolute; | ||
| + | left: 50%; | ||
| + | transform: translateX(-50%); | ||
| + | width: 0; | ||
| + | height: 0; | ||
| + | border-style: solid; | ||
| + | z-index: 998; | ||
| + | } | ||
| + | |||
| + | /* When tooltip is above */ | ||
| + | .tooltip-container-above .chevron { | ||
| + | top: 95%; | ||
| + | border-width: 9px 9px 0 9px; | ||
| + | border-color: #fff transparent transparent transparent; | ||
| + | } | ||
| + | |||
| + | /* When tooltip is below */ | ||
| + | .tooltip-container-below .chevron { | ||
| + | bottom: 95%; | ||
| + | border-width: 0 9px 9px 9px; | ||
| + | border-color: transparent transparent #fff transparent; | ||
| + | } | ||
| + | /* END OF CHEVRON CLASSES */ | ||
| + | |||
| + | |||
| + | /* HOVER ANIMATION CLASSES */ | ||
| + | /* tooltip fade-in */ | ||
| + | /* when text is clicked on touchscreens */ | ||
| + | @media (hover: none) and (pointer: coarse) { | ||
| + | .tooltip-toggle:checked + .tooltip-container { | ||
| + | opacity: 1; | ||
| + | transform: translate(-50%, 0); | ||
| + | pointer-events: auto; | ||
| + | user-select: auto; | ||
| + | webkit-user-select: auto; | ||
| + | ms-user-select: auto; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | /* Hover for desktop */ | ||
| + | @media (hover: hover) and (pointer: fine) { | ||
| + | .tooltip-target:hover .tooltip-container { | ||
| + | opacity: 1; | ||
| + | transform: translate(-50%, 0); | ||
| + | pointer-events: auto; | ||
| + | user-select: auto; | ||
| + | webkit-user-select: auto; | ||
| + | ms-user-select: auto; | ||
| + | } | ||
| + | } | ||
| + | /* END OF HOVER ANIMATION CLASSES */ | ||
| + | |||
}}</includeonly><noinclude>We love {{tt/sandbox|DC|Detective Conan<ref>wjdid</ref>}}<ref>qwoidjqwoi</ref><ref>e9qjr</ref></noinclude> | }}</includeonly><noinclude>We love {{tt/sandbox|DC|Detective Conan<ref>wjdid</ref>}}<ref>qwoidjqwoi</ref><ref>e9qjr</ref></noinclude> | ||
