Merge "WLFilters: avoid querying the DB when filters are in conflict"

[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 0d12b81..c667bac 100644 (file)
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less
@@ -1,17 +1,19 @@
+@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;
-
-               legend {
-                       display: none;
-               }
        }
 
        .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
@@ -29,14 +31,13 @@
        }
 
        .rcfilters-head {
-               min-height: 310px;
-               margin-top: 1em;
+               min-height: 200px;
 
                &:not( .mw-rcfilters-ui-ready ) {
                        opacity: 0.5;
                        pointer-events: none;
 
-                       .rcoptions {
+                       .cloptions {
                                display: none;
                        }
                }
@@ -80,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 );
                }
-
        }
 }
 
@@ -100,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 );
        }
 }