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; // Same as the legend
31 padding: 0 0.5em 0.5em 0.5em;
34 /* stylelint-disable declaration-no-important */
35 .oo-ui-buttonElement > .oo-ui-buttonElement-button {
36 padding-right: 1.2em !important;
38 > .oo-ui-indicatorElement-indicator {
40 width: 0.9375em !important;
43 /* stylelint-enable declaration-no-important */
46 body:not( .mw-rcfilters-ui-initialized ) {
47 .mw-recentchanges-toplinks.mw-recentchanges-toplinks-collapsed {
48 // Similar to the watchlist-details hack, we are going to make this float left
49 // while loading to prevent jumpiness in the min-height calculation
52 .mw-recentchanges-toplinks-content {
68 .rcfilters-container {
74 // Reserve space for the highlight circles
76 table.mw-enhanced-rc {
77 .result-circle-margin();
81 // Temporarily hide any 'empty' or 'timeout' message while we
83 .mw-changeslist-empty,
84 .mw-changeslist-timeout {
88 body.mw-rcfilters-ui-loading .mw-changeslist {
96 width: @rcfilters-spinner-width;
97 // Make sure the middle of the spinner is centered, rather than its left edge
98 margin-left: -@rcfilters-spinner-width/2;
103 & .rcfilters-spinner-bounce,
107 display: inline-block;
110 background-color: @colorGray12;
112 .animation( rcfiltersBouncedelay 1.5s ease-in-out -0.16s infinite both );
116 .animation-delay( -0.33s );
120 .animation-delay( 0s );
123 body:not( .mw-rcfilters-ui-initialized ) .rcfilters-spinner {
125 // When initializing, display the spinner on top of the area where the UI will appear
126 margin-top: -@rcfilters-head-min-height/2;
128 body.mw-rcfilters-ui-loading .rcfilters-spinner {
130 // When loading new results, display the spinner on top of the results area
135 form#mw-watchlist-resetbutton {
139 // Make the watchlist-details message display while loading, but make it not take up any
140 // space. This makes the min-height trick work better.
146 .mw-rcfilters-staticfilters-selected {
150 @-webkit-keyframes rcfiltersBouncedelay {
154 -webkit-transform: scale( 0.7 );
155 transform: scale( 0.7 );
158 background-color: @colorGray10;
159 -webkit-transform: scale( 1 );
160 transform: scale( 1 );
164 @-moz-keyframes rcfiltersBouncedelay {
168 -moz-transform: scale( 0.7 );
169 transform: scale( 0.7 );
172 background-color: @colorGray10;
173 -moz-transform: scale( 0.7 );
174 transform: scale( 1 );
178 @keyframes rcfiltersBouncedelay {
182 transform: scale( 0.7 );
185 background-color: @colorGray10;
186 transform: scale( 1 );