@import 'mediawiki.mixins.animation';
+@import 'mediawiki.ui/variables';
@import 'mw.rcfilters.mixins';
@rcfilters-spinner-width: 70px;
-@rcfilters-head-min-height: 200px;
+@rcfilters-head-min-height: 250px;
+@rcfilters-wl-head-min-height: 320px;
// Corrections for the standard special page
.client-js {
border: 0;
}
+ // Reserve space for the UI while it loads
.rcfilters-head {
min-height: @rcfilters-head-min-height;
}
- body:not( .mw-rcfilters-ui-initialized ) .rcfilters-head {
- opacity: 0.5;
- pointer-events: none;
- .cloptions {
- display: none;
+ // On the watchlist, reserve a bit more
+ .mw-special-Watchlist .rcfilters-head {
+ min-height: @rcfilters-wl-head-min-height;
+ }
+
+ .mw-recentchanges-toplinks {
+ margin-bottom: 0.5em;
+ padding: 0 0.5em 0.5em 0.5em;
+ border: 1px solid transparent;
+
+ &:not( .mw-recentchanges-toplinks-collapsed ) {
+ // Same as the legend
+ border: 1px solid @colorGray12;
+ }
+ }
+
+ body:not( .mw-rcfilters-ui-initialized ) {
+ .mw-recentchanges-toplinks.mw-recentchanges-toplinks-collapsed {
+ // Similar to the watchlist-details hack, we are going to make this float left
+ // while loading to prevent jumpiness in the min-height calculation
+ float: left;
+
+ .mw-recentchanges-toplinks-content {
+ display: none;
+ }
+ }
+
+ .rcfilters-head {
+ opacity: 0.5;
+ pointer-events: none;
+
+ .cloptions {
+ display: none;
+ }
+
}
}
}
.mw-changeslist {
- &-empty {
- // Hide the 'empty' message when we load rcfilters
- // since we replace it anyways with a specific
- // message of our own
- display: none;
+ // Reserve space for the highlight circles
+ ul,
+ table.mw-enhanced-rc {
+ .result-circle-margin();
}
}
+ // Temporarily hide any 'empty' or 'timeout' message while we
+ // load rcfilters.
+ .mw-changeslist-empty,
+ .mw-changeslist-timeout {
+ display: none;
+ }
+
body.mw-rcfilters-ui-loading .mw-changeslist {
opacity: 0.5;
}
display: inline-block;
width: 12px;
height: 12px;
- background-color: #c8ccd1;
+ background-color: @colorGray12;
border-radius: 100%;
.animation( rcfiltersBouncedelay 1.5s ease-in-out -0.16s infinite both );
}
body.mw-rcfilters-ui-loading .rcfilters-spinner {
display: block;
// When loading new results, display the spinner on top of the results area
- margin-top: 4em;
+ margin-top: 2em;
}
#contentSub,
- .watchlistDetails,
form#mw-watchlist-resetbutton {
display: none;
}
+
+ // Make the watchlist-details message display while loading, but make it not take up any
+ // space. This makes the min-height trick work better.
+ .watchlistDetails {
+ float: left;
+ }
}
.mw-rcfilters-staticfilters-selected {
transform: scale( 0.7 );
}
40% {
- background-color: #a2a9b1;
+ background-color: @colorGray10;
-webkit-transform: scale( 1 );
transform: scale( 1 );
}
transform: scale( 0.7 );
}
40% {
- background-color: #a2a9b1;
+ background-color: @colorGray10;
-moz-transform: scale( 0.7 );
transform: scale( 1 );
}
transform: scale( 0.7 );
}
40% {
- background-color: #a2a9b1;
+ background-color: @colorGray10;
transform: scale( 1 );
}
}