MediaWiki:Gadget-Tooltip.css: Difference between revisions
No edit summary Tags: Mobile edit Mobile web edit |
No edit summary Tags: Mobile edit Mobile web edit |
||
| (22 intermediate revisions by the same 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 . | |||
/* Colors */ | |||
.skin-vector-legacy.wgl-darkmode, .skin-vector-legacy.wgl-theme-dark { --tooltip-bg: #0c0c0cd6; } | |||
.skin-vector-legacy.wgl-lightmode, .skin-vector-legacy.wgl-theme-light { --tooltip-bg: #ecececd6; } | |||
.skin-minerva.wgl-lightmode, .skin-minerva.wgl-theme-light { --tooltip-bg: #0c0c0c; } | |||
.skin-minerva.wgl-lightmode, .skin-minerva.wgl-theme-light { --tooltip-bg: #ececec; } | |||
/** Text styling **/ | /** Text styling **/ | ||
/* Override collapsible stylings */ | /* Override collapsible stylings */ | ||
.custom-tt-wrapper.hnaw-collapsible .mw-collapsible-toggle { | .custom-tt-wrapper.hnaw-collapsible .mw-collapsible-toggle-expanded + .custom-tt.mw-collapsible-toggle { | ||
padding: 0; | padding: 0; | ||
border: none; | border: none; | ||
| Line 20: | Line 25: | ||
font-weight: normal; | font-weight: normal; | ||
} | } | ||
. | .custom-tt-wrapper.hnaw-collapsible .mw-collapsible-toggle-expanded + .custom-tt.mw-collapsible-content, | ||
.custom-tt-wrapper.hnaw-collapsible .custom-tt.mw-collapsible-toggle { | |||
float: none !important; | |||
display: inline-block !important; | |||
} | |||
.skin-minerva .custom-tt-wrapper.hnaw-collapsible .mw-collapsible-toggle-default::before, | |||
.skin-minerva .custom-tt-wrapper.hnaw-collapsible .mw-collapsible-toggle-default::after { | |||
content: ""; | |||
} | |||
.custom-tt { cursor: help; } | |||
/*** The tooltip's toggle version ***/ | /*** The tooltip's toggle version ***/ | ||
| Line 33: | Line 48: | ||
/** Desktop: enabled through gadget **/ | /** Desktop: enabled through gadget **/ | ||
/* Container */ | /* Container */ | ||
.skin-vector-legacy . | .skin-vector-legacy .custom-tt-wrapper .oo-ui-popupWidget-popup { | ||
background: var(--tooltip-bg); | |||
color: var(--theme-page-text-color); | |||
border: 1px solid var(--theme-accent-color); | |||
border-radius: 5px; | |||
padding: 6px; | |||
min-width: 75px; | |||
text-align: center; | |||
} | } | ||
/* Arrow */ | /* Arrow */ | ||
.skin-vector-legacy .mw-collapsible-content.custom-tt:before { | .skin-vector-legacy .mw-collapsible-content.custom-tt:before { | ||
| Line 67: | Line 74: | ||
/* Bottom of Page Container (Mobile) */ | /* Bottom of Page Container (Mobile) */ | ||
.skin-minerva .custom-tt-wrapper . | .skin-minerva .custom-tt-wrapper.hnaw-collapsible .mw-collapsible-toggle-expanded + .custom-tt.mw-collapsible-content { | ||
position: fixed; | position: fixed; | ||
z-index: 10005; | z-index: 10005; | ||
width: calc(100% - 1em + 2px); | width: calc(100% - 1em + 2px); | ||
height: 125px; | height: 125px; | ||
background: var(--tooltip-bg); | |||
color: var(--theme-page-text-color); | color: var(--theme-page-text-color); | ||
border-radius: | border-radius: 20px 20px 5px 5px; | ||
border: 1px solid var(--theme-accent-color); | border: 1px solid var(--theme-accent-color); | ||
box-shadow: 1px 5px 5px 1px black; | box-shadow: 1px 5px 5px 1px black; | ||
| Line 87: | Line 94: | ||
/* Container header */ | /* Container header */ | ||
.skin-minerva .custom-tt-wrapper . | .skin-minerva .custom-tt-wrapper.hnaw-collapsible .mw-collapsible-toggle-expanded + .custom-tt.mw-collapsible-content:before { | ||
content: "ⓘ Tooltip content:"; | content: "ⓘ Tooltip content:"; | ||
display: block; | display: block; | ||
| Line 97: | Line 104: | ||
/* Tooltip surrogate toggle on container header */ | /* Tooltip surrogate toggle on container header */ | ||
.skin-minerva .custom-tt-wrapper . | .skin-minerva .custom-tt-wrapper.hnaw-collapsible .mw-collapsible-toggle-expanded + .custom-tt.mw-collapsible-content:after { | ||
content: "×" !important; | content: "×" !important; | ||
position: fixed; | position: fixed; | ||
| Line 105: | Line 112: | ||
font-size: 30px; | font-size: 30px; | ||
} | } | ||
.custom-tt-wrapper .tt-header { | |||
display: block; | |||
font-weight: bold; | |||
font-size: larger; | |||
} | |||
.hnaw-ee .oo-ui-popupWidget-body div, | |||
.hnaw-ee .mw-collapsible-content.custom-tt { | |||
text-align: left !important; | |||
} | } | ||
/* Undo default ooui */ | /* Undo default ooui */ | ||
.custom-tt-wrapper .oo-ui-popupWidget-popup { | .custom-tt-wrapper .oo-ui-popupWidget-popup { | ||
border: none; | border: none; | ||
background-color: | background-color: transparent; | ||
border-radius: | border-radius: none; | ||
} | } | ||
| Line 144: | Line 140: | ||
opacity: 1; | opacity: 1; | ||
} | } | ||
} | } | ||