MediaWiki:Gadget-Tooltip.css: Difference between revisions
Changing mentions of Genshin Impact Wiki, that shouldn't break anything not currently being worked on |
No edit summary |
||
| (2 intermediate revisions by one other user not shown) | |||
| Line 2: | Line 2: | ||
/* Force disable default hover tooltip on mobile and enable the toggle */ | /* Force disable default hover tooltip on mobile and enable the toggle */ | ||
.skin-minerva .hover-tooltip { display: none; } | .skin-minerva .hover-tooltip { display: none; } | ||
.skin-minerva .custom-tt-wrapper. | .skin-minerva .custom-tt-wrapper.hnaw-collapsible .mw-collapsible-toggle { display: inline !important; } | ||
/** Text styling **/ | /** Text styling **/ | ||
/* Override collapsible stylings */ | /* Override collapsible stylings */ | ||
.custom-tt-wrapper. | .custom-tt-wrapper.hnaw-collapsible .mw-collapsible-toggle { | ||
padding: 0; | padding: 0; | ||
border: none; | border: none; | ||
| Line 17: | Line 17: | ||
font-weight: inherit; | font-weight: inherit; | ||
} | } | ||
.custom-tt-wrapper. | .custom-tt-wrapper.hnaw-collapsible .mw-collapsible-content { | ||
font-weight: normal; | font-weight: normal; | ||
} | } | ||
.text-tooltip { cursor: help; } | .text-tooltip { cursor: help; } | ||
/*** The tooltip's toggle version ***/ | /*** The tooltip's toggle version ***/ | ||
.toggle-tooltip. | .toggle-tooltip.hnaw-collapsible, .text-tooltip { | ||
position: relative; | |||
border-bottom-color: rgb(128, 128, 128); | border-bottom-color: rgb(128, 128, 128); | ||
border-bottom-width: 2px; | border-bottom-width: 2px; | ||
border-bottom-style: dotted; | border-bottom-style: dotted; | ||
} | } | ||
/** Desktop: enabled through gadget **/ | /** Desktop: enabled through gadget **/ | ||
/* Container */ | /* Container */ | ||
.skin-vector-legacy . | .skin-vector-legacy .mw-collapsible-content.custom-tt { | ||
position: absolute; | |||
z-index: 10005; | |||
width: fit-content; | |||
height: fit-content; | |||
background: var(--theme-page-background-color); | |||
color: var(--theme-page-text-color); | |||
border-radius: 5px 0 5px 5px; | |||
border: 1px solid var(--theme-link-color); | |||
min-width: 75px; | |||
min-height: 25px; | |||
padding: 6px; | |||
margin-top: 35px; | |||
text-align: center; | |||
top: 0; | |||
right: 10%; | |||
text-wrap: wrap; | |||
} | } | ||
/* Arrow */ | |||
.skin-vector-legacy .mw-collapsible-content.custom-tt | .skin-vector-legacy .mw-collapsible-content.custom-tt:before { | ||
content: ""; | |||
position: absolute; | |||
bottom: 100%; | |||
top: -20px; | |||
width: 0; | |||
border-top: 0 solid transparent; | |||
border-bottom: 10px solid var(--theme-link-color); | |||
border-left: 10px solid transparent; | |||
border-right: 0 solid transparent; | |||
right: -1px; | |||
z-index: 10005; | |||
} | } | ||
| Line 110: | Line 116: | ||
/ | /* For [[Template:Extra Effect]] */ | ||
:root .wgl-darkmode, :root .wgl-theme-dark { | :root .wgl-darkmode, :root .wgl-theme-dark { | ||
--extra-effect-bg: #0c0c0cd6; | --extra-effect-bg: #0c0c0cd6; | ||
| Line 130: | Line 136: | ||
} | } | ||
.hnaw-extra-effect-wrapper.hnaw-collapsible.mw-collapsible { | |||
padding:0; | padding: 0; | ||
border-bottom-style:solid; | border-bottom-style: solid; | ||
border-bottom-width:1px | border-bottom-width: 1px; | ||
} | } | ||
.hnaw-extra-effect | |||
font-size:16px; | .mw-collapsible-content.hnaw-extra-effect { | ||
font-size: 16px; | |||
background:var(--extra-effect-bg, #0c0c0cd6); | position: absolute; | ||
backdrop-filter:blur(3px); | z-index: 999999; | ||
border:1px solid var(--theme-border-color); | width: fit-content; | ||
height: fit-content; | |||
background: var(--extra-effect-bg, #0c0c0cd6); | |||
backdrop-filter: blur(3px); | |||
border: 1px solid var(--theme-border-color); | |||
margin-top: 25px; | |||
border-radius: 5px; | |||
color: var(--theme-page-text-color); | |||
min-width: 35px; | |||
max-width: 75vw; | |||
padding: 3px 6px; | |||
animation: extra-effect-appear 0.25s; | |||
} | } | ||
| Line 168: | Line 171: | ||
z-index: 10005; | z-index: 10005; | ||
width: 100%; | width: 100%; | ||
height: | height: 125px; | ||
background: var(--extra-effect-bg, #0c0c0cd6); | background: var(--extra-effect-bg, #0c0c0cd6); | ||
color: var(--theme-page-text-color); | color: var(--theme-page-text-color); | ||
| Line 180: | Line 183: | ||
overflow-y: scroll; | overflow-y: scroll; | ||
max-width: 100vw; | max-width: 100vw; | ||
} | } | ||