Honkai: Nexus Anima Wiki

MediaWiki:Gadget-Tooltip.css: Difference between revisions

Browse history interactively
← Older editNewer edit →

Kuhlau (talk | contribs)

2 user groups
330 edits
Kuhlau (talk | contribs)
Advanced Access, Autopatrol
330 edits
just testing stuff
Tags: Mobile edit Mobile web edit
Kuhlau (talk | contribs)
Advanced Access, Autopatrol
330 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
(8 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 66: Line 75:
}
}


/** Mobile: enabled by default (attr:title does not work) **/
/* Bottom of Page Container (Mobile) */
/* Container */
.skin-minerva .custom-tt-wrapper .oo-ui-widget:not(.oo-ui-element-hidden) {
.skin-minerva .custom-tt-wrapper .mw-collapsible-content .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: pink;
    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 button[aria-expanded="true"]: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 97: Line 115:
}
}
/* Tooltip surrogate toggle on backdrop overlay */
/* Tooltip surrogate toggle on backdrop overlay */
.skin-minerva .custom-tt-wrapper button[aria-expanded="true"]: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 107: 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;
}


/* For [[Template:Extra Effect]] */
:root .wgl-darkmode, :root .wgl-theme-dark {
--extra-effect-bg: #0c0c0cd6;
}


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


@keyframes extra-effect-appear {
@keyframes extra-effect-appear {
Line 128: 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"