MediaWiki:DidYouKnow.css

/** * Makes a clickable "did you know" icon with popup content (LEGACY) * @author  Ursuul  * @version 1.3.0 * @note    This is a legacy version of DidYouKnow.css for users who copied the template prior to the September 2021 upgrade. */

@import url("https://fonts.googleapis.com/css2?display=swap&family=Lobster");

/* Button */ .did-you-know { -webkit-backface-visibility: hidden; -webkit-perspective: 1000; float: right; position: relative; z-index: 0; margin: 10px 10px 15px 15px; }

.did-you-know .dyk-obutton { display: inline-block; background-color: #333C4F; color: #0038D8; color: var(--theme-link-color); padding: 2px; border: 2px solid #0038D8; border-color: var(--theme-accent-color); border-radius: 50%; box-sizing: border-box; box-shadow: 0 0 0 0 rgba(90, 153, 212, 0.5); box-shadow: 0 0 0 0 rgba(var(--theme-accent-color--rgb), 0.5); cursor: pointer; }

.did-you-know .dyk-obutton:not(:active) { animation: pulse 1.5s infinite; }

.did-you-know .dyk-obutton:active { transform: scale(0.95); }

.did-you-know .dyk-ibutton { all: unset; display: flex; flex-wrap: wrap; justify-content: center; width: 74px; height: 74px; background: rgb(218, 213, 203); background: var(--theme-page-background-color); border: 1px solid #0038D8; border-color: var(--theme-accent-color); border-radius: 50%; margin: 0; }

.did-you-know .dyk-ibutton b { display: flex !important; font-size: medium; }

.did-you-know .dyk-ibutton b:first-child { align-items: flex-end; font-weight: bold; }

.did-you-know .dyk-ibutton b:last-child { font-family: "Lobster", cursive; }

/* Popup */ .did-you-know .dyk-body { display: none; pointer-events: none; position: absolute; z-index: -20; top: 2px; right: 50%; width: 600px; min-height: calc(100% - 3px); box-sizing: border-box; }

.portable-infobox .did-you-know .dyk-body, .did-you-know.dyk-icon .dyk-body { z-index: initial; }

.did-you-know .dyk-scroll { pointer-events: auto; display: block; position: absolute; right: 0; z-index: 850; height: 100%; background-color: rgb(218, 213, 203); background-color: var(--theme-page-background-color--secondary); padding: 10px 45px 3px 40px; box-sizing: border-box; border: 3px solid #0038D8; border-color: var(--theme-accent-color); border-radius: 50px 0 0 50px; }

.theme-fandomdesktop-dark .did-you-know .dyk-scroll { background-color: var(--theme-page-background-color--secondary); }

.did-you-know .dyk-placeholder { visibility: hidden; }

.did-you-know .dyk-text { position: absolute; top: 0; left: 0; min-height: calc(100% - 12px); background-color: inherit; padding: 10px 45px 3px 40px; border-top-left-radius: 37px; border: 1px solid #0038D8; border-color: var(--theme-accent-color); box-sizing: border-box; }

.did-you-know .dyk-scroll p:first-child { margin-top: 0; }

.did-you-know .dyk-scroll p:last-child { margin-bottom: 0; }

.did-you-know .is-short { max-height: 100%; overflow-y: scroll; background: transparent; padding-top: 2px; padding-bottom: 4px; border: none; }

.portable-infobox .did-you-know .is-short, .did-you-know.dyk-icon .is-short { border: 1px solid #0038D8; border-color: var(--theme-accent-color); }

.portable-infobox .did-you-know .dyk-text, .did-you-know.dyk-icon .dyk-text, .did-you-know .has-fold { border-bottom: none; }

.portable-infobox .did-you-know .dyk-text:before, .did-you-know.dyk-icon .dyk-text:before, .did-you-know .has-fold:before { content: ""; display: block; position: absolute; right: 29px; bottom: -30px; left: -1px; background-color: inherit; height: 30px; border-width: 0 0 1px 1px; border-style: solid; border-color: var(--theme-accent-color); }

.portable-infobox .did-you-know .dyk-text:after, .did-you-know.dyk-icon .dyk-text:after, .did-you-know .has-fold:after { content: ""; position: absolute; right: -1px; bottom: -30px; border-width: 30px 30px 0 0; border-style: solid; border-color: var(--theme-accent-color) transparent; }

/* no-pulse version */ .did-you-know.dyk-no-pulse .dyk-obutton:not(:active) { animation: none; transition: box-shadow 0.25s ease-in; }

.did-you-know.dyk-no-pulse .dyk-obutton:hover { box-shadow: 0 0 0 3px rgba(var(--theme-accent-color--rgb), 1); }

/* icon mode */ /** icon **/ .portable-infobox .did-you-know, .did-you-know.dyk-icon { display: inline-flex; justify-content: flex-end; position: relative; padding-top: 5px; margin: 0; }

.portable-infobox .did-you-know + *, .did-you-know.dyk-icon + * { margin-top: 0; }

/** swap out text with emoji in desktop — override previous, necessary uses of !important **/ .portable-infobox .did-you-know .dyk-ibutton b, .did-you-know.dyk-icon .dyk-ibutton b { display: none !important; }

.portable-infobox .did-you-know .dyk-ibutton:before, .did-you-know.dyk-icon .dyk-ibutton:before { content: "\1F4A1"; }

/** shrink down icon to a right-floated element **/ .portable-infobox .did-you-know .dyk-obutton, .did-you-know.dyk-icon .dyk-obutton { flex-shrink: 0; display: inline-flex; justify-content: center; align-items: center; order: 5; width: 36px; height: 36px; padding-top: 3px; margin: 0 5px 0 0; }

.portable-infobox .did-you-know .dyk-ibutton, .did-you-know.dyk-icon .dyk-ibutton { all: unset; font-size: 16px; }

/** Disable absolute positioning, make text container able to take up space **/ .portable-infobox .did-you-know .dyk-placeholder, .did-you-know.dyk-icon .dyk-placeholder { display: none; }

.portable-infobox .did-you-know .dyk-scroll, .portable-infobox .did-you-know .dyk-body, .did-you-know.dyk-icon .dyk-scroll, .did-you-know.dyk-icon .dyk-body { position: initial; width: auto; }

.portable-infobox .did-you-know .dyk-body, .did-you-know.dyk-icon .dyk-body { padding-top: 5px; margin-right: -19px; margin-bottom: 2em; }

.portable-infobox .did-you-know .dyk-scroll, .did-you-know.dyk-icon .dyk-scroll { background-color: transparent; padding: 0; border: none; }

.portable-infobox .did-you-know .dyk-text, .did-you-know.dyk-icon .dyk-text { position: static; background-color: var(--theme-page-background-color--secondary); padding: 13px 18px 3px 15px; }

.portable-infobox .did-you-know .dyk-text:before, .did-you-know.dyk-icon .dyk-text:before { right: calc(22px + 10px); bottom: calc(-10px + 2em); left: 0; height: 10px; }

.portable-infobox .did-you-know .dyk-text:after, .did-you-know.dyk-icon .dyk-text:after { right: 22px; bottom: calc(-10px + 2em); border-width: 10px 10px 0 0; }

/* icon mode forced always inside infoboxes with scroll */ .portable-infobox .did-you-know .dyk-text > div { max-height: 235px; overflow-x: scroll; scrollbar-width: thin; }

.portable-infobox .did-you-know .dyk-text > div::-webkit-scrollbar { width: 7px; height: 0; }

.portable-infobox .did-you-know .dyk-text > div::-webkit-scrollbar-corner { background: rgba(0, 0, 0, 0); }

.portable-infobox .did-you-know .dyk-text > div::-webkit-scrollbar-thumb { height: 40px; background-color: rgba(0, 0, 0, 0.5); border: 1px solid rgba(var(--theme-accent-color--rgb), 0.5); border-radius: 5px; }

.theme-fandomdesktop-dark .portable-infobox .did-you-know .dyk-text > div::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.35); }

/* Reposition & shrink in infoboxes */ .dyk-container { display: contents; }

.portable-infobox .dyk-container { display: flex; }

.portable-infobox .did-you-know .dyk-obutton:hover { box-shadow: 0 0 0 2px rgba(var(--theme-accent-color--rgb), 1); }

.portable-infobox .did-you-know .dyk-obutton { width: 30px; height: 30px; }

.portable-infobox .did-you-know .dyk-ibutton { font-size: 14px; }

.portable-infobox .did-you-know .dyk-body { margin-right: -16px; }

.portable-infobox .did-you-know .dyk-text:before { right: calc(19px + 10px); bottom: calc(-19px + 2em); }

.portable-infobox .did-you-know .dyk-text:after { right: 19px; bottom: calc(-19px + 2em); }

/* Hide mobile-only elements in desktop — override inline */ .did-you-know .dyk-mobile { display: none !important; }

/* Animations */ @keyframes pulse { 0%  {        transform: scale(0.97); }

70% {        transform: scale(1); box-shadow: 0 0 0 10px rgba(90, 153, 212, 0); box-shadow: 0 0 0 10px rgba(var(--theme-accent-color--rgb), 0); }

100% {       transform: scale(0.97); box-shadow: 0 0 0 0 rgba(90, 153, 212, 0); box-shadow: 0 0 0 0 rgba(var(--theme-accent-color--rgb), 0); } }