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

   1 @import 'mediawiki.mixins.animation';
   2 @import 'mw.rcfilters.mixins';
   3
   4 @rcfilters-spinner-width: 70px;
   5 @rcfilters-head-min-height: 200px;
   6
   7 // Corrections for the standard special page
   8 .client-js {
   9         .cloptions {
  10                 border: 0;
  11         }
  12
  13         .rcfilters-head {
  14                 min-height: @rcfilters-head-min-height;
  15         }
  16         body:not( .mw-rcfilters-ui-initialized ) .rcfilters-head {
  17                 opacity: 0.5;
  18                 pointer-events: none;
  19
  20                 .cloptions {
  21                         display: none;
  22                 }
  23         }
  24
  25         .rcfilters-container {
  26                 min-height: 100px;
  27                 margin: 0;
  28         }
  29
  30         .mw-changeslist {
  31                 &-empty {
  32                         // Hide the 'empty' message when we load rcfilters
  33                         // since we replace it anyways with a specific
  34                         // message of our own
  35                         display: none;
  36                 }
  37         }
  38
  39         body.mw-rcfilters-ui-loading .mw-changeslist {
  40                 opacity: 0.5;
  41         }
  42
  43         .rcfilters-spinner {
  44                 display: none;
  45                 position: absolute;
  46                 left: 50%;
  47                 width: @rcfilters-spinner-width;
  48                 // Make sure the middle of the spinner is centered, rather than its left edge
  49                 margin-left: -@rcfilters-spinner-width/2;
  50
  51                 opacity: 0.8;
  52                 white-space: nowrap;
  53
  54                 & .rcfilters-spinner-bounce,
  55                 &:before,
  56                 &:after {
  57                         content: '';
  58                         display: inline-block;
  59                         width: 12px;
  60                         height: 12px;
  61                         background-color: #c8ccd1;
  62                         border-radius: 100%;
  63                         .animation( rcfiltersBouncedelay 1.5s ease-in-out -0.16s infinite both );
  64                 }
  65
  66                 &:before {
  67                         .animation-delay( -0.33s );
  68                 }
  69
  70                 &:after {
  71                         .animation-delay( 0s );
  72                 }
  73         }
  74         body:not( .mw-rcfilters-ui-initialized ) .rcfilters-spinner {
  75                 display: block;
  76                 // When initializing, display the spinner on top of the area where the UI will appear
  77                 margin-top: -@rcfilters-head-min-height/2;
  78         }
  79         body.mw-rcfilters-ui-loading .rcfilters-spinner {
  80                 display: block;
  81                 // When loading new results, display the spinner on top of the results area
  82                 margin-top: 4em;
  83         }
  84
  85         #contentSub,
  86         form#mw-watchlist-resetbutton {
  87                 display: none;
  88         }
  89 }
  90
  91 .mw-rcfilters-staticfilters-selected {
  92         font-weight: bold;
  93 }
  94
  95 @-webkit-keyframes rcfiltersBouncedelay {
  96         0%,
  97         80%,
  98         100% {
  99                 -webkit-transform: scale( 0.7 );
 100                 transform: scale( 0.7 );
 101         }
 102         40% {
 103                 background-color: #a2a9b1;
 104                 -webkit-transform: scale( 1 );
 105                 transform: scale( 1 );
 106         }
 107 }
 108
 109 @-moz-keyframes rcfiltersBouncedelay {
 110         0%,
 111         80%,
 112         100% {
 113                 -moz-transform: scale( 0.7 );
 114                 transform: scale( 0.7 );
 115         }
 116         40% {
 117                 background-color: #a2a9b1;
 118                 -moz-transform: scale( 0.7 );
 119                 transform: scale( 1 );
 120         }
 121 }
 122
 123 @keyframes rcfiltersBouncedelay {
 124         0%,
 125         80%,
 126         100% {
 127                 transform: scale( 0.7 );
 128         }
 129         40% {
 130                 background-color: #a2a9b1;
 131                 transform: scale( 1 );
 132         }
 133 }