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 body:not( .mw-rcfilters-ui-initialized ) {
25 .mw-recentchanges-toplinks-content.mw-rcfilters-toplinks-collapsed {
29 .mw-recentchanges-toplinks-title.mw-rcfilters-toplinks-collapsed {
30 // Hide, but keep the placement so we don't jump
45 .rcfilters-container {
52 // Hide the 'empty' message when we load rcfilters
53 // since we replace it anyways with a specific
58 // Reserve space for the highlight circles
60 table.mw-enhanced-rc {
61 .result-circle-margin();
65 body.mw-rcfilters-ui-loading .mw-changeslist {
73 width: @rcfilters-spinner-width;
74 // Make sure the middle of the spinner is centered, rather than its left edge
75 margin-left: -@rcfilters-spinner-width/2;
80 & .rcfilters-spinner-bounce,
84 display: inline-block;
87 background-color: #c8ccd1;
89 .animation( rcfiltersBouncedelay 1.5s ease-in-out -0.16s infinite both );
93 .animation-delay( -0.33s );
97 .animation-delay( 0s );
100 body:not( .mw-rcfilters-ui-initialized ) .rcfilters-spinner {
102 // When initializing, display the spinner on top of the area where the UI will appear
103 margin-top: -@rcfilters-head-min-height/2;
105 body.mw-rcfilters-ui-loading .rcfilters-spinner {
107 // When loading new results, display the spinner on top of the results area
112 form#mw-watchlist-resetbutton {
116 // Make the watchlist-details message display while loading, but make it not take up any
117 // space. This makes the min-height trick work better.
123 .mw-rcfilters-staticfilters-selected {
127 @-webkit-keyframes rcfiltersBouncedelay {
131 -webkit-transform: scale( 0.7 );
132 transform: scale( 0.7 );
135 background-color: #a2a9b1;
136 -webkit-transform: scale( 1 );
137 transform: scale( 1 );
141 @-moz-keyframes rcfiltersBouncedelay {
145 -moz-transform: scale( 0.7 );
146 transform: scale( 0.7 );
149 background-color: #a2a9b1;
150 -moz-transform: scale( 0.7 );
151 transform: scale( 1 );
155 @keyframes rcfiltersBouncedelay {
159 transform: scale( 0.7 );
162 background-color: #a2a9b1;
163 transform: scale( 1 );