1 @import 'mediawiki.mixins.animation';
2 @import 'mediawiki.ui/variables';
3 @import 'mw.rcfilters.mixins';
5 @rcfilters-spinner-size: 12px;
6 @rcfilters-head-min-height: 210px;
7 @rcfilters-head-margin-bottom: 20px;
8 @rcfilters-wl-head-min-height: 295px;
9 @rcfilters-head-min-height-collapsed: 130px;
10 @rcfilters-wl-head-min-height-collapsed: 220px;
12 // Corrections for the standard special page
14 /* stylelint-disable-next-line selector-class-pattern */
19 // Reserve space for the UI while it loads
21 min-height: @rcfilters-head-min-height;
22 margin-bottom: @rcfilters-head-margin-bottom;
25 // On the watchlist, reserve a bit more
26 .mw-special-Watchlist .mw-rcfilters-head {
27 min-height: @rcfilters-wl-head-min-height;
30 .mw-rcfilters-collapsed {
32 min-height: @rcfilters-head-min-height-collapsed;
35 // On the watchlist, reserve a bit more
36 &.mw-special-Watchlist .mw-rcfilters-head {
37 min-height: @rcfilters-wl-head-min-height-collapsed;
41 .mw-recentchanges-toplinks {
44 &:not( .mw-recentchanges-toplinks-collapsed ) {
45 margin-top: -1px; // Make up for `border` to prevent link movement
48 border: 1px solid @colorGray12; // Same as the legend
49 padding: 0 0.5em 0.5em 0.5em;
52 /* stylelint-disable declaration-no-important */
53 .oo-ui-buttonElement > .oo-ui-buttonElement-button {
54 padding-right: 1.2em !important;
56 > .oo-ui-indicatorElement-indicator {
58 width: 0.9375em !important;
61 /* stylelint-enable declaration-no-important */
64 body:not( .mw-rcfilters-ui-initialized ) {
65 .mw-recentchanges-toplinks.mw-recentchanges-toplinks-collapsed {
66 // Similar to the watchlist-details hack, we are going to make this float left
67 // while loading to prevent jumpiness in the min-height calculation
70 .mw-recentchanges-toplinks-content {
79 /* stylelint-disable-next-line selector-class-pattern */
86 .mw-rcfilters-ui-highlights {
91 // Reserve space for the highlight circles
93 table.mw-enhanced-rc {
94 .result-circle-margin();
98 // Temporarily hide the empty results section while we load rcfilters.
99 .mw-changeslist-empty {
103 /* stylelint-disable-next-line selector-class-pattern */
108 body.mw-rcfilters-ui-loading .mw-changeslist {
112 .mw-rcfilters-spinner {
116 // Make sure the middle of the spinner is centered, rather than its left edge
117 margin-left: -3 * @rcfilters-spinner-size / 2;
120 & .mw-rcfilters-spinner-bounce,
124 background-color: @colorGray7;
127 width: @rcfilters-spinner-size;
128 height: @rcfilters-spinner-size;
130 .animation( rcfiltersBouncedelay 1600ms ease-in-out -160ms infinite both );
135 .animation-delay( -330ms );
140 .animation-delay( 0s );
144 body:not( .mw-rcfilters-ui-initialized ) .mw-rcfilters-spinner {
146 // When initializing, display the spinner on top of the area where the UI will appear
147 margin-top: -( @rcfilters-head-min-height + @rcfilters-head-margin-bottom ) / 1.5;
150 body.mw-rcfilters-ui-loading .mw-rcfilters-spinner {
152 // When loading new results, display the spinner on top of the results area
153 margin-top: -( @rcfilters-head-min-height + @rcfilters-head-margin-bottom ) / 8;
157 form#mw-watchlist-resetbutton {
161 // Why does rcfilters have a copy of this?
162 // TODO: Remove per T195256.
165 margin-bottom: 0.5em;
168 // Make the watchlist-details message display while loading, but make it not take up any
169 // space. This makes the min-height trick work better.
170 /* stylelint-disable-next-line selector-class-pattern */
173 // The 20em should match the min-width we are setting up
174 // for the .mw-rcfilters-ui-watchlistTopSectionWidget-editWatchlistButton
175 // in mw.rcfilters.ui.WatchlistTopSectionWidget.less
176 width: ~'calc( 100% - 20em )';
180 .mw-rcfilters-staticfilters-selected {
184 // on smaller screen, set .watchlistDetail to full width
185 // so that the spinner doesn't appear beside it. T225127#5518870
186 @media screen and ( max-width: @width-breakpoint-tablet ) {
188 /* stylelint-disable-next-line selector-class-pattern */
196 @-webkit-keyframes rcfiltersBouncedelay {
201 -webkit-transform: scale( 0.625 );
207 -webkit-transform: scale( 1 );
211 @-moz-keyframes rcfiltersBouncedelay {
215 -moz-transform: scale( 0.625 );
220 -moz-transform: scale( 1 );
224 @keyframes rcfiltersBouncedelay {
228 transform: scale( 0.625 );
231 20% { // equals 320ms
233 transform: scale( 1 );