MediaWiki:Gadget-Tooltips.css
Jump to navigation
Jump to search
In other languages: Español • Polski • Русский • Українська
CSS and Javascript changes must comply with the wiki design rules.
Note: After saving, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Clear the cache in Tools → Preferences
/* Main CSS class of the tooltip */
.main-tooltip {
background: rgba(var(--wiki-content-background-color--rgb), 0.9);
color: var(--wiki-content-text-color);
font-size: 13px;
padding: 5px 8px;
border: none;
border-radius: 10px;
box-shadow: 0 15px 45px -10px rgb(0 0 0 / 30%);
background-image: var(--wiki-content-background);
background-position: bottom right;
background-repeat: no-repeat;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}
.main-tooltip::before {
content: '';
position: absolute;
top: 0;
left: 0;
height: calc(100% - 2px);
width: calc(100% - 2px);
border: 1px solid;
border-image-source: var(--wiki-content-border-image);
border-image-slice: 15 16;
border-image-width: 15px;
/* Legal fallback */
image-rendering: optimizeSpeed;
/* Firefox */
image-rendering: -moz-crisp-edges;
/* Opera */
image-rendering: -o-crisp-edges;
/* Safari */
image-rendering: -webkit-optimize-contrast;
/* CSS3 Proposed */
image-rendering: optimize-contrast;
/* IE8+ */
-ms-interpolation-mode: nearest-neighbor;
/* Chrome */
image-rendering: pixelated;
z-index: -1;
}
/* Adds padding to the wrapper to make space for a shadow */
#tooltip-wrapper {
padding: 3px 7px 2px 3px;
}
/* Hides tooltips with redlinks, not yet loaded ones and elements containing tooltip contents for advanced tooltips */
.has-redlinks, .tooltip-loading, .advanced-tooltip .tooltip-contents {
display: none;
}
.tooltips-init-complete {
cursor: help;
}
/* Align images with text the same way it's in page content */
/* Was probably better to play with the classes but that would cause ton of side effects */
.main-tooltip img {
vertical-align: middle;
}