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

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