Difference between revisions of "User:Wookipan/Sandbox/Page.css"
< User:Wookipan | Sandbox
m (Change selectors in accordance with elements) |
|||
Line 1: | Line 1: | ||
.wiki-tooltip { | .wiki-tooltip { | ||
− | + | position: relative; | |
+ | display: inline-block; | ||
} | } | ||
.wiki-tooltip .wiki-tooltip-content { | .wiki-tooltip .wiki-tooltip-content { | ||
position: absolute; | position: absolute; | ||
+ | top: 0; | ||
+ | display: flex; | ||
+ | align-items: center; | ||
+ | color: #222222; | ||
+ | background-color: #FFFCF7; | ||
+ | margin-top: 20px; | ||
+ | padding: 5px; | ||
+ | font-weight: 400; | ||
-webkit-pointer-events: none; | -webkit-pointer-events: none; | ||
pointer-events: none; | pointer-events: none; | ||
-webkit-transition: opacity .2s ease-in-out; | -webkit-transition: opacity .2s ease-in-out; | ||
transition: opacity .2s ease-in-out; | transition: opacity .2s ease-in-out; | ||
− | + | white-space: nowrap; | |
− | + | box-shadow: 0 30px 90px -20px rgb(0 0 0 / 30%), 0 0 1px 1px rgb(0 0 0 / 5%); | |
− | + | opacity: 0; | |
+ | z-index: 9; | ||
+ | } | ||
+ | |||
+ | .wiki-tooltip .wiki-tooltip-content a { | ||
+ | background: url('/w/images/a/a6/Tooltip_internal_link_icon.png') no-repeat left / 16px; | ||
+ | width: 16px; | ||
+ | height: 16px; | ||
+ | margin-top: 1px; | ||
+ | margin-left: 5px; | ||
} | } | ||
.wiki-tooltip:hover .wiki-tooltip-content { | .wiki-tooltip:hover .wiki-tooltip-content { | ||
opacity: 1; | opacity: 1; | ||
− | + | -webkit-pointer-events: auto; | |
− | + | pointer-events: auto; | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
.infobox-label .wiki-tooltip { | .infobox-label .wiki-tooltip { | ||
− | + | position: relative; | |
− | + | margin-left: 20px; | |
} | } | ||
.infobox-label .wiki-tooltip:before { | .infobox-label .wiki-tooltip:before { | ||
− | content: ''; | + | content: 'i'; |
− | + | color: #222222; | |
− | + | position: absolute; | |
− | + | top: -1px; | |
− | + | left: -20px; | |
− | + | width: 12px; | |
− | + | height: 12px; | |
− | + | font-style: italic; | |
− | + | font-family: 'serif'; | |
+ | border: 1px solid; | ||
+ | border-radius: 100%; | ||
+ | padding: 1px; | ||
+ | line-height: 1; | ||
+ | text-align: center; | ||
} | } |
Revision as of 23:05, 3 September 2023
.wiki-tooltip { position: relative; display: inline-block; } .wiki-tooltip .wiki-tooltip-content { position: absolute; top: 0; display: flex; align-items: center; color: #222222; background-color: #FFFCF7; margin-top: 20px; padding: 5px; font-weight: 400; -webkit-pointer-events: none; pointer-events: none; -webkit-transition: opacity .2s ease-in-out; transition: opacity .2s ease-in-out; white-space: nowrap; box-shadow: 0 30px 90px -20px rgb(0 0 0 / 30%), 0 0 1px 1px rgb(0 0 0 / 5%); opacity: 0; z-index: 9; } .wiki-tooltip .wiki-tooltip-content a { background: url('/w/images/a/a6/Tooltip_internal_link_icon.png') no-repeat left / 16px; width: 16px; height: 16px; margin-top: 1px; margin-left: 5px; } .wiki-tooltip:hover .wiki-tooltip-content { opacity: 1; -webkit-pointer-events: auto; pointer-events: auto; } .infobox-label .wiki-tooltip { position: relative; margin-left: 20px; } .infobox-label .wiki-tooltip:before { content: 'i'; color: #222222; position: absolute; top: -1px; left: -20px; width: 12px; height: 12px; font-style: italic; font-family: 'serif'; border: 1px solid; border-radius: 100%; padding: 1px; line-height: 1; text-align: center; }