resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less

   1 @import 'mediawiki.mixins.animation';
   2 @import 'mw.rcfilters.mixins';
   3
   4 // Corrections for the standard special page
   5 .client-js {
   6         .cloptions {
   7                 border: 0;
   8         }
   9
  10         .mw-recentchanges-toplinks {
  11                 padding: 0 0.5em;
  12
  13                 .oo-ui-widget-enabled.oo-ui-buttonElement.oo-ui-buttonElement-frameless .oo-ui-buttonElement-button {
  14                         padding: 0 2.5em 0 0.5em;
  15                 }
  16
  17                 &-title,
  18                 .mw-collapsible-text {
  19                         // Same as the legend
  20                         font-size: 0.85em;
  21                 }
  22
  23                 &:not( .mw-collapsed ) {
  24                         // Same as the legend
  25                         border: 1px solid #ddd;
  26                 }
  27
  28                 &:not( .mw-rcfilters-ui-ready ) {
  29                         display: none;
  30                 }
  31         }
  32
  33         .rcfilters-head {
  34                 min-height: 200px;
  35
  36                 &:not( .mw-rcfilters-ui-ready ) {
  37                         opacity: 0.5;
  38                         pointer-events: none;
  39
  40                         .cloptions {
  41                                 display: none;
  42                         }
  43                 }
  44         }
  45
  46         .rcfilters-container {
  47                 min-height: 100px;
  48                 margin: 0;
  49         }
  50
  51         .mw-changeslist {
  52                 &-empty {
  53                         // Hide the 'empty' message when we load rcfilters
  54                         // since we replace it anyways with a specific
  55                         // message of our own
  56                         display: none;
  57                 }
  58
  59                 &:not( .mw-rcfilters-ui-ready ) {
  60                         opacity: 0.5;
  61                 }
  62         }
  63
  64         .rcfilters-spinner {
  65                 margin: -2em auto 0;
  66                 width: 70px;
  67                 opacity: 0.8;
  68                 display: none;
  69                 white-space: nowrap;
  70
  71                 &:not( .mw-rcfilters-ui-ready ) {
  72                         display: block;
  73                 }
  74
  75                 & .rcfilters-spinner-bounce,
  76                 &:before,
  77                 &:after {
  78                         content: '';
  79                         display: inline-block;
  80                         width: 12px;
  81                         height: 12px;
  82                         background-color: #c8ccd1;
  83                         border-radius: 100%;
  84                         .animation( rcfiltersBouncedelay 1.5s ease-in-out -0.16s infinite both );
  85                 }
  86
  87                 &:before {
  88                         .animation-delay( -0.33s );
  89                 }
  90
  91                 &:after {
  92                         .animation-delay( 0s );
  93                 }
  94         }
  95 }
  96
  97 .mw-rcfilters-staticfilters-selected {
  98         font-weight: bold;
  99 }
 100
 101 @-webkit-keyframes rcfiltersBouncedelay {
 102         0%,
 103         80%,
 104         100% {
 105                 -webkit-transform: scale( 0.7 );
 106                 transform: scale( 0.7 );
 107         }
 108         40% {
 109                 background-color: #a2a9b1;
 110                 -webkit-transform: scale( 1 );
 111                 transform: scale( 1 );
 112         }
 113 }
 114
 115 @-moz-keyframes rcfiltersBouncedelay {
 116         0%,
 117         80%,
 118         100% {
 119                 -moz-transform: scale( 0.7 );
 120                 transform: scale( 0.7 );
 121         }
 122         40% {
 123                 background-color: #a2a9b1;
 124                 -moz-transform: scale( 0.7 );
 125                 transform: scale( 1 );
 126         }
 127 }
 128
 129 @keyframes rcfiltersBouncedelay {
 130         0%,
 131         80%,
 132         100% {
 133                 transform: scale( 0.7 );
 134         }
 135         40% {
 136                 background-color: #a2a9b1;
 137                 transform: scale( 1 );
 138         }
 139 }