Honkai: Nexus Anima Wiki

MediaWiki:Gadget-Tooltip.css: Difference between revisions

Browse history interactively
← Older editNewer edit →

Kuhlau (talk | contribs)

2 user groups
347 edits
Kuhlau (talk | contribs)
Advanced Access, Autopatrol
347 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
347 edits
i honestly see no reason for TT and EE to be visually distinguished so much, let's just make them both look good and they can diverge later where needed
(7 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 .mw-collapsible-content {
.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(--theme-page-background-color);
     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-link-color);
     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-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 76:


/* 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 .oo-ui-widget:not(.oo-ui-element-hidden) {
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 .oo-ui-widget:not(.oo-ui-element-hidden):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 .oo-ui-widget:not(.oo-ui-element-hidden):after {
content: "x" !important;
content: "×" !important;
position: fixed;
position: fixed;
z-index: 10006;
z-index: 10006;
Line 96: Line 115:
}
}
/* Tooltip surrogate toggle on backdrop overlay */
/* Tooltip surrogate toggle on backdrop overlay */
.skin-minerva .custom-tt-wrapper .mw-collapsible-content .oo-ui-widget:not(.oo-ui-element-hidden):before {
/* 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 106: Line 126:
z-index: 10004;
z-index: 10004;
}
}
*/


/* For [[Template:Extra Effect]] */
/* Undo default ooui */
:root .wgl-darkmode, :root .wgl-theme-dark {
.custom-tt-wrapper .oo-ui-popupWidget-popup {
--extra-effect-bg: #0c0c0cd6;
border: none;
background-color: inherit;
border-radius: inherit;
}
}


:root .wgl-lightmode, :root .wgl-theme-light {
 
--extra-effect-bg: #ecececd6;
}


@keyframes extra-effect-appear {
@keyframes extra-effect-appear {
Line 126: Line 147:
}
}
}
}
 
e
.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"