@import 'mediawiki.mixins.animation';
+@import 'mediawiki.ui/variables';
@import 'mw.rcfilters.mixins';
@rcfilters-spinner-width: 70px;
min-height: @rcfilters-wl-head-min-height;
}
- body:not( .mw-rcfilters-ui-initialized ) {
- .mw-recentchanges-toplinks-content.mw-rcfilters-toplinks-collapsed {
- display: none;
+ .mw-recentchanges-toplinks {
+ padding-left: 0.5em;
+
+ &:not( .mw-recentchanges-toplinks-collapsed ) {
+ margin-bottom: 0.5em;
+ border: 1px solid @colorGray12; // Same as the legend
+ padding: 0 0.5em 0.5em 0.5em;
+ }
+
+ /* stylelint-disable declaration-no-important */
+ .oo-ui-buttonElement > .oo-ui-buttonElement-button {
+ padding-right: 1.2em !important;
+
+ > .oo-ui-indicatorElement-indicator {
+ right: 0 !important;
+ width: 0.9375em !important;
+ }
}
+ /* stylelint-enable declaration-no-important */
+ }
+
+ 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-title.mw-rcfilters-toplinks-collapsed {
- // Hide, but keep the placement so we don't jump
- visibility: hidden;
+ .mw-recentchanges-toplinks-content {
+ display: none;
+ }
}
.rcfilters-head {
}
.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 {
}
}
+ // 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 );
}
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 );
}
}