Template:Tt/styles.css: Difference between revisions

Revision as of 15:23, 5 May 2025

.has-tt {
  display: inline;
}

.tt-wrapper {
  position: absolute;
  visibility: hidden;
}

.has-tt:hover .tt-wrapper {
  visibility: visible;
}

.tt {
 display: block;
 position: relative;
  top: 2em;
  right: 100%;
 width: max-content;
 max-width: 400px;
 padding: 6px 12px;
 color: #FFFFFF;
 background: #353535;
 text-align: center;
 border-radius: 8px;
}

.tt-after {
 content: '';
 position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -8px;
  width: 0;
  height: 0;
  border-bottom: 8px solid #000000;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
}

@@ Line 1: / Line 1: @@
-.tooltip {
+.has-tt {
-  position: relative;
    display: inline;
-  border-bottom: 1px dashed black;
 }
-.tooltiptext {
+.tt-wrapper {
+  position: absolute;
    visibility: hidden;
-  min-width: 250px;
-  padding: 12px 14px;
-  position: absolute;
-  left: 50%;
-  bottom: calc(20px + 100%);
-  z-index: 99999;
-  background: #fff;
-  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.15);
-  border: 1px solid #a2a9b1;
-  white-space: normal;
-  font-weight: normal;
-  font-style: initial;
-  text-align: center;
-  font-size: 14px;
-  line-height: 1.6;
 }
-.tooltiptext:after, .tooltiptext:before {
-   content: '';
+.has-tt:hover .tt-wrapper {
-  position: absolute;
+   visibility: visible;
-  left: 50%;
-  border-style: solid;
 }
-.tooltiptext:after {
-  top: 100%;
+.tt {
-  bottom: auto;
+ display: block;
-   width: 20px;
+ position: relative;
-   height: 20px;
+   top: 2em;
-  background: #fff;
+   right: 100%;
-  margin-top: -10px;
+ width: max-content;
-  margin-left: -10px;
+ max-width: 400px;
-  box-shadow: 1px 1px 0px #a2a9b1;
+ padding: 6px 12px;
-  transform: rotate(45deg);
+ color: #FFFFFF;
-  border-width: 0;
+ background: #353535;
+ text-align: center;
+ border-radius: 8px;
 }
-.tooltiptext:before {
-  top: 100%;
+.tt-after {
-  bottom: auto;
+ content: '';
-  border-width: 18px;
+ position: absolute;
-  margin-left: -18px;
-  border-color: rgba(0, 0, 0, 0.15) transparent transparent transparent;
-}
-.tooltip .tooltip .tooltiptext, .header-fixed-helper .tooltip .tooltiptext {
-  bottom: auto;
-  top: calc(20px + 100%);
-}
-.tooltip .tooltip .tooltiptext:after, .header-fixed-helper .tooltip .tooltiptext:after {
-  top: auto;
    bottom: 100%;
-   border-width: 15px;
+   left: 50%;
-   margin-left: -15px;
+   margin-left: -8px;
-  border-color: transparent transparent white transparent;
    width: 0;
    height: 0;
-   box-shadow: none;
+   border-bottom: 8px solid #000000;
-  background: none;
+   border-right: 8px solid transparent;
-  transform: none;
+   border-left: 8px solid transparent;
-}
-.tooltip .tooltip .tooltiptext:before, .header-fixed-helper .tooltip .tooltiptext:before {
-  top: auto;
-  bottom: 100%;
-   border-width: 16px;
-  margin-left: -16px;
-   border-color: transparent transparent #888 transparent;
-}
-.tooltiptext span.hr {
-  display: block;
-  height: 1px;
-  background-color: #a2a9b1;
-}
-.tooltiptext hr, .tooltiptext span.hr {
-  margin: 10px 0 12px;
-  position: relative;
-  background: none;
-}
-.tooltiptext hr:after, .tooltiptext span.hr:after {
-  content: '';
-  display: block;
-  width: 100%;
-  height: 1px !important;
-  position: absolute;
-  left: -14px;
-  background: #a2a9b1;
-  padding: 0 14px;
-}
-.tooltip:hover>.tooltiptext, .tooltip.hover>.tooltiptext {
-  visibility: visible;
-}
-.tooltiptext {
-  opacity: 0;
-  transition: opacity 200ms ease, visibility 0s ease 200ms, transform 200ms ease;
-  transform: translate(-50%, 8px);
-}
-.tooltip .tooltip .tooltiptext, .header-fixed-helper .tooltip .tooltiptext {
-  transform: translate(-50%, -8px);
-}
-.tooltip:hover>.tooltiptext, .tooltip.hover>.tooltiptext {
-  opacity: 1;
-  transition-delay: 0s;
-  transform: translate(-50%, 0);
-}
-.tooltiptext a {
-  color: #0645ad;
-  border-bottom: 0;
-}
-.tooltiptext a:visited {
-  color: #0b0080;
-}
-.tooltiptext a:active {
-  color: #faa700;
-}
-.tooltiptext a:hover, a:focus {
-  text-decoration: underline;
-}
-.tooltiptext {
-  color: #252525;
-}
-.tooltiptext a.new {
-  color: #ba0000;
-}
-/* Remove .mw-body-content stacking context so the tooltip can
-   overlap with elements outside content area and be shown properly */
-.mw-body-content {
-  z-index: auto;
-}
-.flow-post .flow-post-content {
-  overflow: visible;
 }