Merge "Show protection log on creation-protected pages"

[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 6277fd9..ef29655 100644 (file)
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less
@@ -1,23 +1,45 @@
+@import 'mediawiki.mixins.animation';
+@import 'mw.rcfilters.mixins';
+
 // Corrections for the standard special page
-.client-js{
+.client-js {
        .rcoptions {
                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;
+               }
 
-               legend {
+               &-title,
+               .mw-collapsible-text {
+                       // Same as the legend
+                       font-size: 0.85em;
+               }
+
+               &:not( .mw-collapsed ) {
+                       // Same as the legend
+                       border: 1px solid #ddd;
+               }
+
+               &:not( .mw-rcfilters-ui-ready ) {
                        display: none;
                }
        }
 
        .rcfilters-head {
-               min-height: 310px;
+               min-height: 220px;
+               margin-top: 1em;
+
                &:not( .mw-rcfilters-ui-ready ) {
-                       /* @embed */
-                       background-image: url( ../images/pending.gif );
-                       margin: 0;
+                       opacity: 0.5;
+                       pointer-events: none;
 
-                       * {
-                               visibility: hidden;
+                       .rcoptions {
+                               display: none;
                        }
                }
        }
@@ -27,14 +49,92 @@
                margin: 0;
        }
 
-       .mw-changeslist-empty {
-               // Hide the 'empty' message when we load rcfilters
-               // since we replace it anyways with a specific
-               // message of our own
+       .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;
+               }
+
+               &:not( .mw-rcfilters-ui-ready ) {
+                       opacity: 0.5;
+               }
+       }
+
+       .rcfilters-spinner {
+               margin: -2em auto 0;
+               width: 70px;
+               opacity: 0.8;
                display: none;
+               white-space: nowrap;
+
+               &:not( .mw-rcfilters-ui-ready ) {
+                       display: block;
+               }
+
+               & .rcfilters-spinner-bounce,
+               &:before,
+               &:after {
+                       content: '';
+                       display: inline-block;
+                       width: 12px;
+                       height: 12px;
+                       background-color: #c8ccd1;
+                       border-radius: 100%;
+                       .animation( rcfiltersBouncedelay 1.5s ease-in-out -0.16s infinite both );
+               }
+
+               &:before {
+                       .animation-delay( -0.33s );
+               }
+
+               &:after {
+                       .animation-delay( 0s );
+               }
        }
 }
 
 .mw-rcfilters-staticfilters-selected {
        font-weight: bold;
 }
+
+@-webkit-keyframes rcfiltersBouncedelay {
+       0%,
+       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 );
+       }
+}