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

   1 @import 'mediawiki.mixins.animation';
   2 @import 'mediawiki.ui/variables';
   3 @import 'mw.rcfilters.mixins';
   4
   5 @rcfilters-spinner-size: 12px;
   6 @rcfilters-head-min-height: 210px;
   7 @rcfilters-head-margin-bottom: 20px;
   8 @rcfilters-wl-head-min-height: 270px;
   9
  10 // Corrections for the standard special page
  11 .client-js {
  12         .cloptions {
  13                 border: 0;
  14         }
  15
  16         // Reserve space for the UI while it loads
  17         .rcfilters-head {
  18                 min-height: @rcfilters-head-min-height;
  19                 margin-bottom: @rcfilters-head-margin-bottom;
  20         }
  21
  22         // On the watchlist, reserve a bit more
  23         .mw-special-Watchlist .rcfilters-head {
  24                 min-height: @rcfilters-wl-head-min-height;
  25         }
  26
  27         .mw-recentchanges-toplinks {
  28                 padding-left: 0.5em;
  29
  30                 &:not( .mw-recentchanges-toplinks-collapsed ) {
  31                         margin-top: -1px; // Make up for `border` to prevent link movement
  32                         margin-left: -1px;
  33                         margin-bottom: 0.5em;
  34                         border: 1px solid @colorGray12; // Same as the legend
  35                         padding: 0 0.5em 0.5em 0.5em;
  36                 }
  37
  38                 /* stylelint-disable declaration-no-important */
  39                 .oo-ui-buttonElement > .oo-ui-buttonElement-button {
  40                         padding-right: 1.2em !important;
  41
  42                         > .oo-ui-indicatorElement-indicator {
  43                                 right: 0 !important;
  44                                 width: 0.9375em !important;
  45                         }
  46                 }
  47                 /* stylelint-enable declaration-no-important */
  48         }
  49
  50         body:not( .mw-rcfilters-ui-initialized ) {
  51                 .mw-recentchanges-toplinks.mw-recentchanges-toplinks-collapsed {
  52                         // Similar to the watchlist-details hack, we are going to make this float left
  53                         // while loading to prevent jumpiness in the min-height calculation
  54                         float: left;
  55
  56                         .mw-recentchanges-toplinks-content {
  57                                 display: none;
  58                         }
  59                 }
  60
  61                 .rcfilters-head {
  62                         opacity: 0.5;
  63                         pointer-events: none;
  64
  65                         .cloptions {
  66                                 display: none;
  67                         }
  68
  69                 }
  70         }
  71
  72         .mw-changeslist {
  73                 // Reserve space for the highlight circles
  74                 ul,
  75                 table.mw-enhanced-rc {
  76                         .result-circle-margin();
  77                 }
  78         }
  79
  80         // Temporarily hide the empty results section while we load rcfilters.
  81         .mw-changeslist-empty {
  82                 display: none;
  83         }
  84
  85         .errorbox {
  86                 display: none;
  87         }
  88
  89         body.mw-rcfilters-ui-loading .mw-changeslist {
  90                 opacity: 0.5;
  91         }
  92
  93         .rcfilters-spinner {
  94                 display: none;
  95                 position: absolute;
  96                 left: 50%;
  97                 // Make sure the middle of the spinner is centered, rather than its left edge
  98                 margin-left: -3 * @rcfilters-spinner-size / 2;
  99
 100                 opacity: 0.8;
 101                 white-space: nowrap;
 102
 103                 & .rcfilters-spinner-bounce,
 104                 &:before,
 105                 &:after {
 106                         content: '';
 107                         display: inline-block;
 108                         width: @rcfilters-spinner-size;
 109                         height: @rcfilters-spinner-size;
 110                         background-color: @colorGray12;
 111                         border-radius: 100%;
 112                         .animation( rcfiltersBouncedelay 1.5s ease-in-out -0.16s infinite both );
 113                 }
 114
 115                 &:before {
 116                         .animation-delay( -0.33s );
 117                 }
 118
 119                 &:after {
 120                         .animation-delay( 0s );
 121                 }
 122         }
 123         body:not( .mw-rcfilters-ui-initialized ) .rcfilters-spinner {
 124                 display: block;
 125                 // When initializing, display the spinner on top of the area where the UI will appear
 126                 margin-top: -( @rcfilters-head-min-height + @rcfilters-head-margin-bottom ) / 2;
 127         }
 128         body.mw-rcfilters-ui-loading .rcfilters-spinner {
 129                 display: block;
 130                 // When loading new results, display the spinner on top of the results area
 131                 margin-top: 2em;
 132         }
 133
 134         #contentSub,
 135         form#mw-watchlist-resetbutton {
 136                 display: none;
 137         }
 138
 139         // Why does rcfilters have a copy of this?
 140         // TODO: Remove per T195256.
 141         #jump-to-nav {
 142                 margin-top: -0.5em;
 143                 margin-bottom: 0.5em;
 144         }
 145
 146         // Make the watchlist-details message display while loading, but make it not take up any
 147         // space. This makes the min-height trick work better.
 148         .watchlistDetails {
 149                 float: left;
 150         }
 151 }
 152
 153 .mw-rcfilters-staticfilters-selected {
 154         font-weight: bold;
 155 }
 156
 157 @-webkit-keyframes rcfiltersBouncedelay {
 158         0%,
 159         80%,
 160         100% {
 161                 -webkit-transform: scale( 0.7 );
 162                 transform: scale( 0.7 );
 163         }
 164         40% {
 165                 background-color: @colorGray10;
 166                 -webkit-transform: scale( 1 );
 167                 transform: scale( 1 );
 168         }
 169 }
 170
 171 @-moz-keyframes rcfiltersBouncedelay {
 172         0%,
 173         80%,
 174         100% {
 175                 -moz-transform: scale( 0.7 );
 176                 transform: scale( 0.7 );
 177         }
 178         40% {
 179                 background-color: @colorGray10;
 180                 -moz-transform: scale( 0.7 );
 181                 transform: scale( 1 );
 182         }
 183 }
 184
 185 @keyframes rcfiltersBouncedelay {
 186         0%,
 187         80%,
 188         100% {
 189                 transform: scale( 0.7 );
 190         }
 191         40% {
 192                 background-color: @colorGray10;
 193                 transform: scale( 1 );
 194         }
 195 }