1 @import 'mediawiki.mixins.animation';
2 @import 'mediawiki.ui/variables';
3 @import 'mw.rcfilters.mixins';
5 @rcfilters-spinner-size: 12px;
6 @rcfilters-head-min-height: 210px;
7 @rcfilters-head-margin-bottom: 20px;
8 @rcfilters-wl-head-min-height: 300px;
10 // Corrections for the standard special page
16 // Reserve space for the UI while it loads
18 min-height: @rcfilters-head-min-height;
19 margin-bottom: @rcfilters-head-margin-bottom;
22 // On the watchlist, reserve a bit more
23 .mw-special-Watchlist .rcfilters-head {
24 min-height: @rcfilters-wl-head-min-height;
27 .mw-recentchanges-toplinks {
30 &:not( .mw-recentchanges-toplinks-collapsed ) {
32 border: 1px solid @colorGray12; // Same as the legend
33 padding: 0 0.5em 0.5em 0.5em;
36 /* stylelint-disable declaration-no-important */
37 .oo-ui-buttonElement > .oo-ui-buttonElement-button {
38 padding-right: 1.2em !important;
40 > .oo-ui-indicatorElement-indicator {
42 width: 0.9375em !important;
45 /* stylelint-enable declaration-no-important */
48 body:not( .mw-rcfilters-ui-initialized ) {
49 .mw-recentchanges-toplinks.mw-recentchanges-toplinks-collapsed {
50 // Similar to the watchlist-details hack, we are going to make this float left
51 // while loading to prevent jumpiness in the min-height calculation
54 .mw-recentchanges-toplinks-content {
71 // Reserve space for the highlight circles
73 table.mw-enhanced-rc {
74 .result-circle-margin();
78 // Temporarily hide the empty results section while we load rcfilters.
79 .mw-changeslist-empty {
87 body.mw-rcfilters-ui-loading .mw-changeslist {
95 // Make sure the middle of the spinner is centered, rather than its left edge
96 margin-left: -3 * @rcfilters-spinner-size / 2;
101 & .rcfilters-spinner-bounce,
105 display: inline-block;
106 width: @rcfilters-spinner-size;
107 height: @rcfilters-spinner-size;
108 background-color: @colorGray12;
110 .animation( rcfiltersBouncedelay 1.5s ease-in-out -0.16s infinite both );
114 .animation-delay( -0.33s );
118 .animation-delay( 0s );
121 body:not( .mw-rcfilters-ui-initialized ) .rcfilters-spinner {
123 // When initializing, display the spinner on top of the area where the UI will appear
124 margin-top: -( @rcfilters-head-min-height + @rcfilters-head-margin-bottom ) / 2;
126 body.mw-rcfilters-ui-loading .rcfilters-spinner {
128 // When loading new results, display the spinner on top of the results area
133 form#mw-watchlist-resetbutton {
139 margin-bottom: 0.5em;
142 // Make the watchlist-details message display while loading, but make it not take up any
143 // space. This makes the min-height trick work better.
149 .mw-rcfilters-staticfilters-selected {
153 @-webkit-keyframes rcfiltersBouncedelay {
157 -webkit-transform: scale( 0.7 );
158 transform: scale( 0.7 );
161 background-color: @colorGray10;
162 -webkit-transform: scale( 1 );
163 transform: scale( 1 );
167 @-moz-keyframes rcfiltersBouncedelay {
171 -moz-transform: scale( 0.7 );
172 transform: scale( 0.7 );
175 background-color: @colorGray10;
176 -moz-transform: scale( 0.7 );
177 transform: scale( 1 );
181 @keyframes rcfiltersBouncedelay {
185 transform: scale( 0.7 );
188 background-color: @colorGray10;
189 transform: scale( 1 );