MediaWiki:DidYouKnow.css

/** * Makes a clickable "did you know" icon with popup content * @protect * @author  Ursuul  * @version 2.1.0 * @see also MediaWiki:DidYouKnow.css */

/* Button */ .did-you-know { -webkit-backface-visibility: hidden; -webkit-perspective: 1000; display: inline-flex; justify-content: flex-end; float: right; position: relative; z-index: 399; padding: 10px 5px; margin: 0; }

.did-you-know .dyk-obutton { flex-shrink: 0; order: 5; display: inline-flex; justify-content: center; align-items: center; width: 36px; height: 36px; background-color: #333C4F; color: #0038D8; color: var(--theme-link-color); padding: 3px 2px 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); outline: none; margin: 0 5px 0 0; 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; font-size: 16px; }

/* swap out text with emoji in desktop */ .did-you-know .dyk-ibutton:before { content: ""; display: block; width: 20px; height: 20px; background: url("https://static.wikia.nocookie.net/testback/images/e/e2/Bulbb.gif") center/contain no-repeat; }

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

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

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

/** Scrolling **/ .did-you-know .dyk-scroll { pointer-events: auto; display: block; position: absolute; right: 0; z-index: 850; height: 81px; 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-right: none; 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-scroll p:first-child { margin-top: 0; }

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

.did-you-know .dyk-scroll.will-scroll { height: 95px; border: 3px solid #0038D8; border-color: var(--theme-accent-color); }

/** Scrollbar modifications **/ .did-you-know .will-scroll .dyk-text { scrollbar-width: thin; }

.did-you-know .will-scroll .dyk-text::-webkit-scrollbar { width: 8px; }

.did-you-know .will-scroll .dyk-text::-webkit-scrollbar-thumb { height: 26px; background-color: rgba(0, 0, 0, 0.5); border-radius: 5px; }

.did-you-know .will-scroll .dyk-text::-webkit-scrollbar-track-piece:start { background: transparent; margin-top: 27px; }

.theme-fandomdesktop-dark .did-you-know .will-scroll .dyk-text::-webkit-scrollbar { width: 10px; }

.theme-fandomdesktop-dark .did-you-know .will-scroll .dyk-text::-webkit-scrollbar-thumb { border: 1px solid rgba(140, 140, 140, 0.5); border-color: rgba(var(--theme-accent-color--rgb), 0.5); }

/** Scroll interior **/ .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 25px 3px; border-top-left-radius: 37px; border: 1px solid #0038D8; border-color: var(--theme-accent-color); box-sizing: border-box; }

.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-push .is-short { border: 1px solid #0038D8; border-color: var(--theme-accent-color); }

.portable-infobox .did-you-know .dyk-text, .did-you-know.dyk-push .dyk-text, .did-you-know .has-fold { border-bottom-width: 0; }

.portable-infobox .did-you-know .dyk-text:before, .did-you-know.dyk-push .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-push .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; }

/* Truncated Mode */ .did-you-know.dyk-truncated .dyk-body { width: 300px; }

.did-you-know.dyk-truncated.dyk-push .dyk-body { max-width: 300px; }

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

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

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

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

.portable-infobox .did-you-know .dyk-text, .did-you-know.dyk-push .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-push .dyk-text:before { right: calc(27px + 10px); bottom: calc(0px + 2em); left: 5px; height: 10px; }

.portable-infobox .did-you-know .dyk-text:after, .did-you-know.dyk-push .dyk-text:after { right: 27px; bottom: calc(0px + 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; float: right; }

.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(24px + 10px); bottom: calc(0px + 2em); }

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

/* no-pulse version */ .did-you-know.dyk-no-pulse { padding: 5px; }

.did-you-know.dyk-no-pulse .dyk-obutton { margin: 0; }

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

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

.did-you-know.dyk-no-pulse.dyk-push .dyk-text:before { right: calc(22px + 10px); bottom: calc(-5px + 2em); }

.did-you-know.dyk-no-pulse.dyk-push .dyk-text:after { right: 22px; bottom: calc(-5px + 2em); }

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

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

/* Sponsor */ /** Sponsor container **/ .did-you-know .dyk-sponsor { margin-top: 0.5em; }

/** Sponsor icons **/ .did-you-know .dyk-sponsor a { display: contents; }

.did-you-know .dyk-sponsor img { -o-object-fit: contain; object-fit: contain; width: 20px; height: 20px; box-sizing: border-box; }

/** Remove margin-bottom when sponsor is present **/ .did-you-know .has-sponsor > p:last-of-type { margin-bottom: 0; }

/* Paper mode */ .did-you-know.dyk-paper { --dyk-background-rouge: url("data:image/png; base64, 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"); --dyk-filter-vector: url("data:image/svg+xml; base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPGZpbHRlciBpZD0id2F2ZXMiIHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgcHJpbWl0aXZlVW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9ImxpbmVhclJHQiI+CiAgICAgICAgPGZlVHVyYnVsZW5jZSB0eXBlPSJ0dXJidWxlbmNlIiBiYXNlRnJlcXVlbmN5PSIwLjAyIiBudW1PY3RhdmVzPSI1IiBzZWVkPSIxIiBzdGl0Y2hUaWxlcz0ibm9TdGl0Y2giIHJlc3VsdD0idHVyYnVsZW5jZSIgLz4KICAgICAgICA8ZmVEaXNwbGFjZW1lbnRNYXAgaW49IlNvdXJjZUdyYXBoaWMiIGluMj0idHVyYnVsZW5jZSIgc2NhbGU9IjQiIHhDaGFubmVsU2VsZWN0b3I9IkciIHlDaGFubmVsU2VsZWN0b3I9IkEiIHJlc3VsdD0iZGlzcGxhY2VtZW50TWFwIiAvPgogICAgPC9maWx0ZXI+Cjwvc3ZnPg==#waves"); }

.did-you-know.dyk-paper .dyk-text > div { color: #000000; }

.did-you-know.dyk-paper .dyk-text > div:first-child p a { color: inherit; text-decoration-line: underline; text-decoration-color: #000000; }

.did-you-know.dyk-paper .dyk-text:before, .did-you-know.dyk-paper .dyk-text:after { all: unset; display: none; }

.did-you-know.dyk-paper .dyk-scroll, .did-you-know.dyk-paper .dyk-text { background: transparent; border-color: transparent; }

.did-you-know.dyk-paper:not(.dyk-push) .dyk-scroll.will-scroll:before, .did-you-know.dyk-paper .dyk-text:before { content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background: #FFFEF0 var(--dyk-background-rouge); filter: var(--dyk-filter-vector); color: #000000; box-shadow: 2px 3px 20px #000000, 0 0 60px #8A4D0F inset; }

.did-you-know.dyk-paper:not(.dyk-push) .will-scroll .dyk-text:before { display: none; }

.theme-fandomdesktop-light .did-you-know.dyk-paper .dyk-text:before { box-shadow: 2px 3px 20px #808080, 0 0 60px #BD6915 inset; }

/** Push/Infobox support **/ .portable-infobox .did-you-know.dyk-paper .dyk-text:before, .did-you-know.dyk-push.dyk-paper .dyk-text:before { right: calc(18px + 10px); top: 14px; }

.did-you-know.dyk-no-pulse.dyk-push.dyk-paper .dyk-text:before { right: calc(13px + 10px); top: 7px; }

.portable-infobox .did-you-know.dyk-paper .dyk-text:before { right: calc(15px + 10px); top: 16px; }

.portable-infobox .did-you-know.dyk-no-pulse.dyk-paper .dyk-text:before { right: calc(10px + 10px); top: 14px; }

/* 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); } }