User:MSchottlender-WMF/WhoWroteThatGadget.css

/*! * WhoWroteThat 0.1.0 * * This is a gadget to activate WhoWroteThat functionality. * Written by Community Tech team, 2019 * * The code for this gadget is being maintained on Github: * https://github.com/wikimedia/WhoWroteThat * * *************************************************** * ** Please do not change this local file directly ** * *************************************************** * * Any updates should be created from the official repository * by running `grunt build` and using * `dist/gadget/generated.whowrotethat.js` and * `dist/gadget/generated.whowrotethat.css` */ .ext-wwt-infoBarWidget { position: sticky; top: 0; display: flex; z-index: 1; width: 100%; box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.25); box-sizing: border-box; padding: 16px; color: #fff; } .ext-wwt-infoBarWidget .ext-wwt-infoBarWidget-close.oo-ui-iconElement { margin: 0 1em; cursor: pointer; } .ext-wwt-infoBarWidget .ext-wwt-infoBarWidget-close.oo-ui-iconElement.oo-ui-flaggedElement-pending { display: none; } .skin-timeless .ext-wwt-infoBarWidget { top: 3.125em; } .skin-monobook .ext-wwt-infoBarWidget { margin-left: -1em; margin-bottom: 2em; width: calc(100% + 1em + 1em); } .skin-monobook .ext-wwt-infoBarWidget .ext-wwt-infoBarWidget-close.oo-ui-iconElement { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ctitle%3Eclear%3C/title%3E%3Cg fill='%23fff'%3E%3Cpath d='M10 0a10 10 0 1 0 10 10A10 10 0 0 0 10 0zm5.66 14.24l-1.41 1.41L10 11.41l-4.24 4.25-1.42-1.42L8.59 10 4.34 5.76l1.42-1.42L10 8.59l4.24-4.24 1.41 1.41L11.41 10z'/%3E%3C/g%3E%3C/svg%3E"); height: 1.42857143em; width: 1.42857143em; } .skin-vector .ext-wwt-infoBarWidget { width: calc(100% + 1.5em + 1.5em); margin-top: -1.25em; margin-bottom: 1em; } .ltr.skin-vector .ext-wwt-infoBarWidget { margin-left: -1.5em; } .rtl.skin-vector .ext-wwt-infoBarWidget { margin-right: -1.5em; } .ext-wwt-infoBarWidget .oo-ui-iconElement-icon { width: 1em; } .ext-wwt-infoBarWidget .oo-ui-labelElement-label { flex-grow: 2; margin-left: 2em; } .rtl .ext-wwt-infoBarWidget .oo-ui-labelElement-label { margin-left: 0; margin-right: 2em; } .ext-wwt-infoBarWidget.oo-ui-flaggedElement-pending { background-color: #2a4b8d; } .ext-wwt-infoBarWidget.oo-ui-flaggedElement-pending .ext-wwt-infoBarWidget-spinner { display: inline-block; width: 50px; white-space: nowrap; } .ext-wwt-infoBarWidget.oo-ui-flaggedElement-pending .ext-wwt-infoBarWidget-spinner .ext-wwt-infoBarWidget-spinner-bounce, .ext-wwt-infoBarWidget.oo-ui-flaggedElement-pending .ext-wwt-infoBarWidget-spinner::before, .ext-wwt-infoBarWidget.oo-ui-flaggedElement-pending .ext-wwt-infoBarWidget-spinner::after { content: ''; background-color: #fff; display: block; float: left; margin-top: 6px; width: 12px; height: 12px; border-radius: 100%; animation: wwtBouncedelay 1600ms ease-in-out -160ms infinite both; } .ext-wwt-infoBarWidget.oo-ui-flaggedElement-pending .ext-wwt-infoBarWidget-spinner::before { margin-right: 4px; animation-delay: -330ms; } .ext-wwt-infoBarWidget.oo-ui-flaggedElement-pending .ext-wwt-infoBarWidget-spinner::after { margin-left: 4px; animation-delay: 0s; } .ext-wwt-infoBarWidget.oo-ui-flaggedElement-err { background-color: #b32424; } .ext-wwt-infoBarWidget.oo-ui-flaggedElement-err .oo-ui-labelElement-label { margin-left: 2em; } .ext-wwt-infoBarWidget.oo-ui-flaggedElement-ready { background-color: #36c; } .ext-wwt-infoBarWidget.oo-ui-flaggedElement-ready .ext-wwt-infoBarWidget-info.oo-ui-labelWidget { flex-grow: 2; text-align: right; } .rtl .ext-wwt-infoBarWidget.oo-ui-flaggedElement-ready .ext-wwt-infoBarWidget-info.oo-ui-labelWidget { text-align: left; } @keyframes wwtBouncedelay { 0%, 50%,  100% {    transform: scale(0.625); } 20% {    opacity: 0.87; transform: scale(1); } }