Tags: Mobile edit Mobile web edit |
|
| (5 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 33: |
Line 42: |
| /** 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-accent-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 72: |
Line 73: |
| width: calc(100% - 1em + 2px); | | 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: 20px 20px 5px 5px; | | border-radius: 20px 20px 5px 5px; |
| Line 105: |
Line 106: |
| font-size: 30px; | | font-size: 30px; |
| } | | } |
| /* Tooltip surrogate toggle on backdrop overlay */
| | |
| /* not sure what this does so hiding it for now
| | .custom-tt-wrapper .tt-header { |
| .skin-minerva .custom-tt-wrapper .oo-ui-widget:not(.oo-ui-element-hidden):before {
| | display: block; |
| background: black; | | font-weight: bold; |
| position: fixed; | | font-size: larger; |
| height: calc(100% - 125px); | | } |
| width: 100%;
| | |
| top: 0;
| | .hnaw-ee { |
| left: 0;
| | text-align: left !important; |
| opacity: 0.6;
| |
| z-index: 10004; | |
| } | | } |
| */
| |
|
| |
|
| /* Undo default ooui */ | | /* Undo default ooui */ |
| Line 126: |
Line 124: |
| } | | } |
|
| |
|
| /* 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 145: |
Line 136: |
| } | | } |
| } | | } |
| | | 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;
| |
| }
| |
