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