Merge "objectcache: use INTERIM_KEY_TTL constant in WANObjectCache for readability"

[lhc/web/wiklou.git] / resources / src / mediawiki.rcfilters / styles / mw.rcfilters.less

diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less
index ba7a70e..74b81fa 100644 (file)
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less
@@ -1,4 +1,5 @@
 @import 'mediawiki.mixins.animation';
+@import 'mediawiki.ui/variables';
 @import 'mw.rcfilters.mixins';
 
 @rcfilters-spinner-width: 70px;
@@ -21,14 +22,36 @@
                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 {
@@ -48,13 +71,6 @@
        }
 
        .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 {
@@ -62,6 +78,13 @@
                }
        }
 
+       // 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;
        }
@@ -84,7 +107,7 @@
                        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 );
                }
@@ -132,7 +155,7 @@
                transform: scale( 0.7 );
        }
        40% {
-               background-color: #a2a9b1;
+               background-color: @colorGray10;
                -webkit-transform: scale( 1 );
                transform: scale( 1 );
        }
@@ -146,7 +169,7 @@
                transform: scale( 0.7 );
        }
        40% {
-               background-color: #a2a9b1;
+               background-color: @colorGray10;
                -moz-transform: scale( 0.7 );
                transform: scale( 1 );
        }
@@ -159,7 +182,7 @@
                transform: scale( 0.7 );
        }
        40% {
-               background-color: #a2a9b1;
+               background-color: @colorGray10;
                transform: scale( 1 );
        }
 }