1 @import 'mediawiki.mixins.animation';
2 @import 'mw.rcfilters.mixins';
4 @rcfilters-spinner-width: 70px;
5 @rcfilters-head-min-height: 250px;
6 @rcfilters-wl-head-min-height: 320px;
8 // Corrections for the standard special page
14 // Reserve space for the UI while it loads
16 min-height: @rcfilters-head-min-height;
19 // On the watchlist, reserve a bit more
20 .mw-special-Watchlist .rcfilters-head {
21 min-height: @rcfilters-wl-head-min-height;
24 .mw-recentchanges-toplinks {
27 &:not( .mw-recentchanges-toplinks-collapsed ) {
29 border: 1px solid #ddd;
33 body:not( .mw-rcfilters-ui-initialized ) {
34 .mw-recentchanges-toplinks.mw-recentchanges-toplinks-collapsed {
35 // Similar to the watchlist-details hack, we are going to make this float left
36 // while loading to prevent jumpiness in the min-height calculation
39 .mw-recentchanges-toplinks-content {
55 .rcfilters-container {
62 // Hide the 'empty' message when we load rcfilters
63 // since we replace it anyways with a specific
68 // Reserve space for the highlight circles
70 table.mw-enhanced-rc {
71 .result-circle-margin();
75 body.mw-rcfilters-ui-loading .mw-changeslist {
83 width: @rcfilters-spinner-width;
84 // Make sure the middle of the spinner is centered, rather than its left edge
85 margin-left: -@rcfilters-spinner-width/2;
90 & .rcfilters-spinner-bounce,
94 display: inline-block;
97 background-color: #c8ccd1;
99 .animation( rcfiltersBouncedelay 1.5s ease-in-out -0.16s infinite both );
103 .animation-delay( -0.33s );
107 .animation-delay( 0s );
110 body:not( .mw-rcfilters-ui-initialized ) .rcfilters-spinner {
112 // When initializing, display the spinner on top of the area where the UI will appear
113 margin-top: -@rcfilters-head-min-height/2;
115 body.mw-rcfilters-ui-loading .rcfilters-spinner {
117 // When loading new results, display the spinner on top of the results area
122 form#mw-watchlist-resetbutton {
126 // Make the watchlist-details message display while loading, but make it not take up any
127 // space. This makes the min-height trick work better.
133 .mw-rcfilters-staticfilters-selected {
137 @-webkit-keyframes rcfiltersBouncedelay {
141 -webkit-transform: scale( 0.7 );
142 transform: scale( 0.7 );
145 background-color: #a2a9b1;
146 -webkit-transform: scale( 1 );
147 transform: scale( 1 );
151 @-moz-keyframes rcfiltersBouncedelay {
155 -moz-transform: scale( 0.7 );
156 transform: scale( 0.7 );
159 background-color: #a2a9b1;
160 -moz-transform: scale( 0.7 );
161 transform: scale( 1 );
165 @keyframes rcfiltersBouncedelay {
169 transform: scale( 0.7 );
172 background-color: #a2a9b1;
173 transform: scale( 1 );