MediaWiki:Gadget-Tooltip.css: Difference between revisions

Kuhlau (talk | contribs)
No edit summary
Kuhlau (talk | contribs)
No edit summary
 
(17 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 */
/* Colors */
:root .wgl-darkmode, :root .wgl-theme-dark {
.skin-vector-legacy.wgl-darkmode, .skin-vector-legacy.wgl-theme-dark { --tooltip-bg: #0c0c0cd6; --color-ee: #00a29a; }
--tooltip-bg: #0c0c0cd6;
.skin-vector-legacy.wgl-lightmode, .skin-vector-legacy.wgl-theme-light { --tooltip-bg: #ecececd6; --color-ee: #00a29a; }
}
.skin-minerva.wgl-lightmode, .skin-minerva.wgl-theme-light { --tooltip-bg: #0c0c0c; --color-ee: #00a29a; }
 
.skin-minerva.wgl-lightmode, .skin-minerva.wgl-theme-light { --tooltip-bg: #ececec; --color-ee: #00a29a; }
:root .wgl-lightmode, :root .wgl-theme-light {
--tooltip-bg: #ecececd6;
}


/** 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 29: Line 25:
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 35: Line 41:
display: inline-block;
display: inline-block;
     position: relative;
     position: relative;
border-bottom-color: rgb(128, 128, 128);
    text-decoration: underline;
border-bottom-width: 2px;
font-weight: bold;
border-bottom-style: dotted;
color: var(--color-ee);
}
}


/** Desktop: enabled through gadget **/
/** Desktop: enabled through gadget **/
/* Container */
/* Container */
.skin-vector-legacy .custom-tt-wrapper .oo-ui-popupWidget-popup {
.skin-vector-legacy .custom-tt-wrapper .oo-ui-popupWidget-popup,
.skin-vector-legacy .oo-ui-popupWidget-popup {
background: var(--tooltip-bg);
background: var(--tooltip-bg);
color: var(--theme-page-text-color);
color: var(--theme-page-text-color);
Line 52: Line 59:
}
}


/* Arrow */
/* Arrow (need to fix) */
.skin-vector-legacy .mw-collapsible-content.custom-tt:before {
.skin-vector-legacy .mw-collapsible-content.custom-tt:before {
     content: "";
     content: "";
Line 68: Line 75:


/* Bottom of Page Container (Mobile) */
/* Bottom of Page Container (Mobile) */
.skin-minerva .custom-tt-wrapper .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;
Line 88: Line 95:


/* Container header */
/* Container header */
.skin-minerva .custom-tt-wrapper .oo-ui-widget:not(.oo-ui-element-hidden):before {
.skin-minerva .custom-tt-wrapper.hnaw-collapsible .mw-collapsible-toggle-expanded + .custom-tt.mw-collapsible-content:before {
content: "ⓘ Tooltip content:";
content: "ⓘ Tooltip content:";
display: block;
display: block;
Line 98: Line 105:


/* Tooltip surrogate toggle on container header */
/* Tooltip surrogate toggle on container header */
.skin-minerva .custom-tt-wrapper .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: "×" !important;
content: "×" !important;
position: fixed;
position: fixed;
Line 107: Line 114:
}
}


.custom-tt-wrapper .tt-header {
.custom-tt-wrapper .tt-header,
.oo-ui-popupWidget-popup .tt-header {
display: block;
display: block;
font-weight: bold;
font-weight: bold;
Line 113: Line 121:
}
}


.hnaw-ee .oo-ui-popupWidget-body div {
.hnaw-ee .oo-ui-popupWidget-body div,
.hnaw-ee .mw-collapsible-content.custom-tt {
text-align: left !important;
text-align: left !important;
}
}


/* Undo default ooui */
/* Undo default ooui - bottom is placeholder for lack of better selection class */
.custom-tt-wrapper .oo-ui-popupWidget-popup {
.custom-tt-wrapper .oo-ui-popupWidget-popup,
.oo-ui-popupWidget-popup {
border: none;
border: none;
background-color: inherit;
background-color: transparent;
border-radius: inherit;
border-radius: none;
}
 
.skin-minerva .custom-tt-wrapper .oo-ui-popupWidget-body {
width: 100% !important;
}
}


Line 138: Line 144:
}
}
}
}
e