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 {
27 padding: 0 0.5em 0.5em 0.5em;
28 border: 1px solid transparent;
30 &:not( .mw-recentchanges-toplinks-collapsed ) {
32 border: 1px solid @colorGray12;
36 body:not( .mw-rcfilters-ui-initialized ) {
37 .mw-recentchanges-toplinks.mw-recentchanges-toplinks-collapsed {
38 // Similar to the watchlist-details hack, we are going to make this float left
39 // while loading to prevent jumpiness in the min-height calculation
42 .mw-recentchanges-toplinks-content {
58 .rcfilters-container {
64 // Reserve space for the highlight circles
66 table.mw-enhanced-rc {
67 .result-circle-margin();
71 // Temporarily hide any 'empty' or 'timeout' message while we
73 .mw-changeslist-empty,
74 .mw-changeslist-timeout {
78 body.mw-rcfilters-ui-loading .mw-changeslist {
86 width: @rcfilters-spinner-width;
87 // Make sure the middle of the spinner is centered, rather than its left edge
88 margin-left: -@rcfilters-spinner-width/2;
93 & .rcfilters-spinner-bounce,
97 display: inline-block;
100 background-color: @colorGray12;
102 .animation( rcfiltersBouncedelay 1.5s ease-in-out -0.16s infinite both );
106 .animation-delay( -0.33s );
110 .animation-delay( 0s );
113 body:not( .mw-rcfilters-ui-initialized ) .rcfilters-spinner {
115 // When initializing, display the spinner on top of the area where the UI will appear
116 margin-top: -@rcfilters-head-min-height/2;
118 body.mw-rcfilters-ui-loading .rcfilters-spinner {
120 // When loading new results, display the spinner on top of the results area
125 form#mw-watchlist-resetbutton {
129 // Make the watchlist-details message display while loading, but make it not take up any
130 // space. This makes the min-height trick work better.
136 .mw-rcfilters-staticfilters-selected {
140 @-webkit-keyframes rcfiltersBouncedelay {
144 -webkit-transform: scale( 0.7 );
145 transform: scale( 0.7 );
148 background-color: @colorGray10;
149 -webkit-transform: scale( 1 );
150 transform: scale( 1 );
154 @-moz-keyframes rcfiltersBouncedelay {
158 -moz-transform: scale( 0.7 );
159 transform: scale( 0.7 );
162 background-color: @colorGray10;
163 -moz-transform: scale( 0.7 );
164 transform: scale( 1 );
168 @keyframes rcfiltersBouncedelay {
172 transform: scale( 0.7 );
175 background-color: @colorGray10;
176 transform: scale( 1 );