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         .watchlistDetails,
  87         form#mw-watchlist-resetbutton {
  88                 display: none;
  89         }
  90 }
  91
  92 .mw-rcfilters-staticfilters-selected {
  93         font-weight: bold;
  94 }
  95
  96 @-webkit-keyframes rcfiltersBouncedelay {
  97         0%,
  98         80%,
  99         100% {
 100                 -webkit-transform: scale( 0.7 );
 101                 transform: scale( 0.7 );
 102         }
 103         40% {
 104                 background-color: #a2a9b1;
 105                 -webkit-transform: scale( 1 );
 106                 transform: scale( 1 );
 107         }
 108 }
 109
 110 @-moz-keyframes rcfiltersBouncedelay {
 111         0%,
 112         80%,
 113         100% {
 114                 -moz-transform: scale( 0.7 );
 115                 transform: scale( 0.7 );
 116         }
 117         40% {
 118                 background-color: #a2a9b1;
 119                 -moz-transform: scale( 0.7 );
 120                 transform: scale( 1 );
 121         }
 122 }
 123
 124 @keyframes rcfiltersBouncedelay {
 125         0%,
 126         80%,
 127         100% {
 128                 transform: scale( 0.7 );
 129         }
 130         40% {
 131                 background-color: #a2a9b1;
 132                 transform: scale( 1 );
 133         }
 134 }