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

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