1 @import 'mediawiki.mixins.animation';
2 @import 'mediawiki.ui/variables';
3 @import 'mw.rcfilters.mixins';
5 @rcfilters-spinner-width: 70px;
6 @rcfilters-head-min-height: 250px;
7 @rcfilters-wl-head-min-height: 320px;
9 // Corrections for the standard special page
15 // Reserve space for the UI while it loads
17 min-height: @rcfilters-head-min-height;
20 // On the watchlist, reserve a bit more
21 .mw-special-Watchlist .rcfilters-head {
22 min-height: @rcfilters-wl-head-min-height;
25 .mw-recentchanges-toplinks {
28 &:not( .mw-recentchanges-toplinks-collapsed ) {
30 border: 1px solid @colorGray12;
34 body:not( .mw-rcfilters-ui-initialized ) {
35 .mw-recentchanges-toplinks.mw-recentchanges-toplinks-collapsed {
36 // Similar to the watchlist-details hack, we are going to make this float left
37 // while loading to prevent jumpiness in the min-height calculation
40 .mw-recentchanges-toplinks-content {
56 .rcfilters-container {
63 // Hide the 'empty' message when we load rcfilters
64 // since we replace it anyways with a specific
69 // Reserve space for the highlight circles
71 table.mw-enhanced-rc {
72 .result-circle-margin();
76 body.mw-rcfilters-ui-loading .mw-changeslist {
84 width: @rcfilters-spinner-width;
85 // Make sure the middle of the spinner is centered, rather than its left edge
86 margin-left: -@rcfilters-spinner-width/2;
91 & .rcfilters-spinner-bounce,
95 display: inline-block;
98 background-color: @colorGray12;
100 .animation( rcfiltersBouncedelay 1.5s ease-in-out -0.16s infinite both );
104 .animation-delay( -0.33s );
108 .animation-delay( 0s );
111 body:not( .mw-rcfilters-ui-initialized ) .rcfilters-spinner {
113 // When initializing, display the spinner on top of the area where the UI will appear
114 margin-top: -@rcfilters-head-min-height/2;
116 body.mw-rcfilters-ui-loading .rcfilters-spinner {
118 // When loading new results, display the spinner on top of the results area
123 form#mw-watchlist-resetbutton {
127 // Make the watchlist-details message display while loading, but make it not take up any
128 // space. This makes the min-height trick work better.
134 .mw-rcfilters-staticfilters-selected {
138 @-webkit-keyframes rcfiltersBouncedelay {
142 -webkit-transform: scale( 0.7 );
143 transform: scale( 0.7 );
146 background-color: @colorGray10;
147 -webkit-transform: scale( 1 );
148 transform: scale( 1 );
152 @-moz-keyframes rcfiltersBouncedelay {
156 -moz-transform: scale( 0.7 );
157 transform: scale( 0.7 );
160 background-color: @colorGray10;
161 -moz-transform: scale( 0.7 );
162 transform: scale( 1 );
166 @keyframes rcfiltersBouncedelay {
170 transform: scale( 0.7 );
173 background-color: @colorGray10;
174 transform: scale( 1 );