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