MediaWiki:Gadget-Tooltip.css: Difference between revisions
do collapsibles work different here or something... or how bad is this... anyways... Tags: Mobile edit Mobile web edit |
Tag: Undo |
||
| (11 intermediate revisions by the same user not shown) | |||
| Line 3: | Line 3: | ||
.skin-minerva .hover-tooltip { display: none; } | .skin-minerva .hover-tooltip { display: none; } | ||
.skin-minerva .custom-tt-wrapper.hnaw-collapsible .mw-collapsible-toggle { display: none !important; } | .skin-minerva .custom-tt-wrapper.hnaw-collapsible .mw-collapsible-toggle { display: none !important; } | ||
/* Colors */ | |||
:root .wgl-darkmode, :root .wgl-theme-dark { | |||
--tooltip-bg: #0c0c0cd6; | |||
} | |||
:root .wgl-lightmode, :root .wgl-theme-light { | |||
--tooltip-bg: #ecececd6; | |||
} | |||
/** Text styling **/ | /** Text styling **/ | ||
| Line 17: | Line 26: | ||
font-weight: inherit; | font-weight: inherit; | ||
} | } | ||
.custom-tt-wrapper.hnaw-collapsible | .custom-tt-wrapper.hnaw-collapsible { | ||
font-weight: normal; | font-weight: normal; | ||
} | } | ||
| Line 38: | Line 47: | ||
width: fit-content; | width: fit-content; | ||
height: fit-content; | height: fit-content; | ||
background: var(-- | background: var(--tooltip-bg); | ||
color: var(--theme-page-text-color); | color: var(--theme-page-text-color); | ||
border-radius: 5px 0 5px 5px; | border-radius: 5px 0 5px 5px; | ||
border: 1px solid var(--theme- | border: 1px solid var(--theme-accent-color); | ||
min-width: 75px; | min-width: 75px; | ||
min-height: 25px; | min-height: 25px; | ||
| Line 59: | Line 68: | ||
width: 0; | width: 0; | ||
border-top: 0 solid transparent; | border-top: 0 solid transparent; | ||
border-bottom: 10px solid var(--theme- | border-bottom: 10px solid var(--theme-accent-color); | ||
border-left: 10px solid transparent; | border-left: 10px solid transparent; | ||
border-right: 0 solid transparent; | border-right: 0 solid transparent; | ||
| Line 66: | Line 75: | ||
} | } | ||
/* | /* Bottom of Page Container (Mobile) */ | ||
.skin-minerva .custom-tt-wrapper .oo-ui-widget:not(.oo-ui-element-hidden) { | |||
.skin-minerva .custom-tt-wrapper | |||
position: fixed; | position: fixed; | ||
z-index: 10005; | z-index: 10005; | ||
width: 100%; | 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- | border: 1px solid var(--theme-accent-color); | ||
box-shadow: 1px 5px 5px 1px black; | |||
min-width: 150px; | min-width: 150px; | ||
min-height: 25px; | min-height: 25px; | ||
padding: 6px | padding: 6px 0 6px 12px; | ||
bottom: 0; | bottom: 0; | ||
left: 0; | left: 0; | ||
margin: 0; | margin: 0; | ||
overflow-y: | overflow-y: auto; | ||
} | } | ||
/* Container header */ | /* Container header */ | ||
.skin-minerva .custom-tt-wrapper | .skin-minerva .custom-tt-wrapper .oo-ui-widget:not(.oo-ui-element-hidden):before { | ||
content: "ⓘ Tooltip content:"; | content: "ⓘ Tooltip content:"; | ||
display: block; | display: block; | ||
| Line 93: | Line 102: | ||
margin: 2px 0; | margin: 2px 0; | ||
width: 100%; | width: 100%; | ||
border-bottom: 1px solid var(--theme- | border-bottom: 1px solid var(--theme-accent-color); | ||
} | } | ||
/* Tooltip surrogate toggle on container header */ | /* Tooltip surrogate toggle on container header */ | ||
.skin-minerva .custom-tt-wrapper | .skin-minerva .custom-tt-wrapper .oo-ui-widget:not(.oo-ui-element-hidden):after { | ||
content: " | content: "×" !important; | ||
position: fixed; | position: fixed; | ||
z-index: 10006; | z-index: 10006; | ||
| Line 105: | Line 115: | ||
} | } | ||
/* Tooltip surrogate toggle on backdrop overlay */ | /* Tooltip surrogate toggle on backdrop overlay */ | ||
.skin-minerva .custom-tt-wrapper | /* not sure what this does so hiding it for now | ||
.skin-minerva .custom-tt-wrapper .oo-ui-widget:not(.oo-ui-element-hidden):before { | |||
background: black; | background: black; | ||
position: fixed; | position: fixed; | ||
| Line 115: | Line 126: | ||
z-index: 10004; | z-index: 10004; | ||
} | } | ||
*/ | |||
/* Undo default ooui */ | |||
.custom-tt-wrapper .oo-ui-popupWidget-popup { | |||
border: none; | |||
background-color: inherit; | |||
border-radius: inherit; | |||
} | |||
@keyframes extra-effect-appear { | @keyframes extra-effect-appear { | ||
| Line 136: | Line 147: | ||
} | } | ||
} | } | ||
e | |||