Honkai: Nexus Anima Wiki

MediaWiki:Gadget-Tooltip.css: Difference between revisions

Browse history interactively
← Older edit

Kuhlau (talk | contribs)

2 user groups
389 edits
Kuhlau (talk | contribs)
Advanced Access, Autopatrol
389 edits
okay theres some weird z-index shenanigans going on that idk how to resolve, but it's coming together
Tags: Mobile edit Mobile web edit
Kuhlau (talk | contribs)
Advanced Access, Autopatrol
389 edits
No edit summary
Tags: Mobile edit Mobile web edit
 
(28 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 .custom-tt-wrapper.hnaw-collapsible .mw-collapsible-toggle { display: none !important; }
 
/* 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 17: Line 22:
font-weight: inherit;
font-weight: inherit;
}
}
.custom-tt-wrapper.hnaw-collapsible .mw-collapsible-content {
.custom-tt-wrapper.hnaw-collapsible {
font-weight: normal;
font-weight: normal;
}
}
.text-tooltip { cursor: help; }
.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 .mw-collapsible-content.custom-tt {
.skin-vector-legacy .custom-tt-wrapper .oo-ui-popupWidget-popup {
    position: absolute;
background: var(--tooltip-bg);
    z-index: 10005;
color: var(--theme-page-text-color);
    width: fit-content;
border: 1px solid var(--theme-accent-color);
    height: fit-content;
border-radius: 5px;
    background: var(--theme-page-background-color);
padding: 6px;
    color: var(--theme-page-text-color);
min-width: 75px;
    border-radius: 5px 0 5px 5px;
text-align: center;
    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 */
/* Arrow */
.skin-vector-legacy .mw-collapsible-content.custom-tt:before {
.skin-vector-legacy .mw-collapsible-content.custom-tt:before {
Line 59: Line 66:
     width: 0;
     width: 0;
     border-top: 0 solid transparent;
     border-top: 0 solid transparent;
     border-bottom: 10px solid var(--theme-link-color);
     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 67: Line 74:


/* Bottom of Page Container (Mobile) */
/* Bottom of Page Container (Mobile) */
.skin-minerva .custom-tt-wrapper .mw-collapsible-content .oo-ui-widget:not(.oo-ui-element-hidden) {
.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: 100%;
width: calc(100% - 1em + 2px);
height: 125px;
height: 125px;
background: var(--theme-page-background-color);
    background: var(--tooltip-bg);
color: var(--theme-page-text-color);
color: var(--theme-page-text-color);
border-radius: 0 0 5px 5px;
border-radius: 20px 20px 5px 5px;
border: 1px solid var(--theme-link-color);
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;
text-align: center;
bottom: 0;
bottom: 0;
left: 0;
left: 0;
margin: 0;
margin: 0;
overflow-y: scroll;
overflow-y: auto;
}
 
/* Container header */
.skin-minerva .custom-tt-wrapper.hnaw-collapsible .mw-collapsible-toggle-expanded + .custom-tt.mw-collapsible-content:before {
content: "ⓘ Tooltip content:";
display: block;
text-align: left;
margin: 2px 0;
width: 100%;
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 .mw-collapsible-content .oo-ui-widget:not(.oo-ui-element-hidden):after {
.skin-minerva .custom-tt-wrapper.hnaw-collapsible .mw-collapsible-toggle-expanded + .custom-tt.mw-collapsible-content:after {
content: "x" !important;
content: "×" !important;
position: fixed;
position: fixed;
z-index: 10006;
z-index: 10006;
Line 95: Line 112:
font-size: 30px;
font-size: 30px;
}
}
/* Tooltip surrogate toggle on backdrop overlay */
 
.skin-minerva .custom-tt-wrapper .mw-collapsible-content .oo-ui-widget:not(.oo-ui-element-hidden):before {
.custom-tt-wrapper .tt-header {
background: black;
display: block;
position: fixed;
font-weight: bold;
height: calc(100% - 125px);
font-size: larger;
width: 100%;
top: 0;
left: 0;
opacity: 0.6;
z-index: 10004;
}
}


/* For [[Template:Extra Effect]] */
.hnaw-ee .oo-ui-popupWidget-body div,
:root .wgl-darkmode, :root .wgl-theme-dark {
.hnaw-ee .mw-collapsible-content.custom-tt {
--extra-effect-bg: #0c0c0cd6;
text-align: left !important;
}
}


:root .wgl-lightmode, :root .wgl-theme-light {
/* Undo default ooui */
--extra-effect-bg: #ecececd6;
.custom-tt-wrapper .oo-ui-popupWidget-popup {
border: none;
background-color: transparent;
border-radius: none;
}
}


Line 125: Line 140:
opacity: 1;
opacity: 1;
}
}
}
.hnaw-extra-effect-wrapper.hnaw-collapsible.mw-collapsible {
padding: 0;
border-bottom-style: solid;
border-bottom-width: 1px;
}
.mw-collapsible-content.hnaw-extra-effect {
font-size: 16px;
position: absolute;
z-index: 999999;
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;
}
.hnaw-extra-effect .hnaw-extra-effect-header {
display: block;
font-weight: bold;
border-bottom: 1px solid var(--theme-border-color);
margin-bottom: 2px;
}
.skin-minerva .hnaw-extra-effect-wrapper button[aria-expanded="true"] + .mw-collapsible-content.hnaw-extra-effect {
position: fixed;
z-index: 10005;
width: 100%;
height: 125px;
background: var(--extra-effect-bg, #0c0c0cd6);
color: var(--theme-page-text-color);
border-radius: 0 0 5px 5px;
border: 1px solid var(--theme-border-color);
min-width: 150px;
min-height: 25px;
bottom: 0;
left: 0;
margin: 0;
overflow-y: scroll;
max-width: 100vw;
}
}
Retrieved from "https://hna.wiki/MediaWiki:Gadget-Tooltip.css"