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