Honkai: Nexus Anima Wiki

MediaWiki:Gadget-Tooltip.css: Difference between revisions

Browse history interactively
← Older editNewer edit →

Kuhlau (talk | contribs)

2 user groups
324 edits
Kuhlau (talk | contribs)
Advanced Access, Autopatrol
324 edits
do collapsibles work different here or something... or how bad is this... anyways...
Tags: Mobile edit Mobile web edit
Kuhlau (talk | contribs)
Advanced Access, Autopatrol
324 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
(9 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 button[aria-expanded="true"] + .mw-collapsible-content.custom-tt {
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 */
/* Container header */
.skin-minerva .custom-tt-wrapper button[aria-expanded="true"] + .mw-collapsible-content.custom-tt:before {
.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-link-color);
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 105: 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 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;
}


/* 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 136: 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"