@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 {
+ 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;
}
+ }
- .mw-recentchanges-toplinks-title.mw-rcfilters-toplinks-collapsed {
- // Hide, but keep the placement so we don't jump
- visibility: hidden;
+ 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 {
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 );
}
}