resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.LiveUpdateButtonWidget.less

   1 @import 'mediawiki.mixins';
   2
   3 .mw-rcfilters-ui-liveUpdateButtonWidget {
   4         margin: 0;
   5
   6         &.oo-ui-toggleWidget-on {
   7                 position: relative;
   8                 overflow: hidden;
   9                 &:after {
  10                         content: '';
  11                         mix-blend-mode: screen;
  12                         pointer-events: none;
  13                         position: absolute;
  14                         width: 1.875em;
  15                         height: 1.875em;
  16                         top: 1.875em / 4;
  17                         left: 0.46875em;
  18                         background: rgba( 51, 102, 204, 0.5 );
  19                         border-radius: 100%;
  20                         transform-origin: 50% 50%;
  21                         opacity: 0;
  22                         animation: ripple 2.3s ease-out infinite;
  23                         animation-delay: 1s;
  24                 }
  25         }
  26 }
  27
  28 @keyframes ripple {
  29         0%,
  30         35% {
  31                 .transform( scale( 0 ) );
  32                 opacity: 1;
  33         }
  34         50% {
  35                 .transform( scale( 1.5 ) );
  36                 opacity: 0.8;
  37         }
  38         80%,
  39         100% {
  40                 opacity: 0;
  41                 .transform( scale( 4 ) );
  42         }
  43 }