Merge "Making sister search sidebar links blue"

[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 9f3b809..c667bac 100644 (file)
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less
@@ -1,22 +1,43 @@
+@import 'mediawiki.mixins.animation';
+@import 'mw.rcfilters.mixins';
+
 // Corrections for the standard special page
 .client-js {
-       .rcoptions {
+       .cloptions {
                border: 0;
-               border-bottom: 1px solid #a2a9b1;
+       }
+
+       .mw-recentchanges-toplinks {
+               padding: 0 0.5em;
+
+               .oo-ui-widget-enabled.oo-ui-buttonElement.oo-ui-buttonElement-frameless .oo-ui-buttonElement-button {
+                       padding: 0 2.5em 0 0.5em;
+               }
+
+               &-title,
+               .mw-collapsible-text {
+                       // Same as the legend
+                       font-size: 0.85em;
+               }
+
+               &:not( .mw-collapsed ) {
+                       // Same as the legend
+                       border: 1px solid #ddd;
+               }
 
-               legend {
+               &:not( .mw-rcfilters-ui-ready ) {
                        display: none;
                }
        }
 
        .rcfilters-head {
-               min-height: 310px;
+               min-height: 200px;
 
                &:not( .mw-rcfilters-ui-ready ) {
                        opacity: 0.5;
                        pointer-events: none;
 
-                       .rcoptions {
+                       .cloptions {
                                display: none;
                        }
                }
@@ -60,19 +81,16 @@
                        height: 12px;
                        background-color: #c8ccd1;
                        border-radius: 100%;
-                       animation: rcfiltersBouncedelay 1.5s infinite ease-in-out;
-                       animation-fill-mode: both;
-                       animation-delay: -0.16s;
+                       .animation( rcfiltersBouncedelay 1.5s ease-in-out -0.16s infinite both );
                }
 
                &:before {
-                       animation-delay: -0.33s;
+                       .animation-delay( -0.33s );
                }
 
                &:after {
-                       animation-delay: 0s;
+                       .animation-delay( 0s );
                }
-
        }
 }
 
@@ -80,14 +98,42 @@
        font-weight: bold;
 }
 
-@keyframes rcfiltersBouncedelay {
+@-webkit-keyframes rcfiltersBouncedelay {
        0%,
-       100%,
-       80% {
+       80%,
+       100% {
+               -webkit-transform: scale( 0.7 );
                transform: scale( 0.7 );
        }
        40% {
+               background-color: #a2a9b1;
+               -webkit-transform: scale( 1 );
                transform: scale( 1 );
+       }
+}
+
+@-moz-keyframes rcfiltersBouncedelay {
+       0%,
+       80%,
+       100% {
+               -moz-transform: scale( 0.7 );
+               transform: scale( 0.7 );
+       }
+       40% {
                background-color: #a2a9b1;
+               -moz-transform: scale( 0.7 );
+               transform: scale( 1 );
+       }
+}
+
+@keyframes rcfiltersBouncedelay {
+       0%,
+       80%,
+       100% {
+               transform: scale( 0.7 );
+       }
+       40% {
+               background-color: #a2a9b1;
+               transform: scale( 1 );
        }
 }