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: 220px;
  35                 margin-top: 1em;
  36
  37                 &:not( .mw-rcfilters-ui-ready ) {
  38                         opacity: 0.5;
  39                         pointer-events: none;
  40
  41                         .cloptions {
  42                                 display: none;
  43                         }
  44                 }
  45         }
  46
  47         .rcfilters-container {
  48                 min-height: 100px;
  49                 margin: 0;
  50         }
  51
  52         .mw-changeslist {
  53                 &-empty {
  54                         // Hide the 'empty' message when we load rcfilters
  55                         // since we replace it anyways with a specific
  56                         // message of our own
  57                         display: none;
  58                 }
  59
  60                 &:not( .mw-rcfilters-ui-ready ) {
  61                         opacity: 0.5;
  62                 }
  63         }
  64
  65         .rcfilters-spinner {
  66                 margin: -2em auto 0;
  67                 width: 70px;
  68                 opacity: 0.8;
  69                 display: none;
  70                 white-space: nowrap;
  71
  72                 &:not( .mw-rcfilters-ui-ready ) {
  73                         display: block;
  74                 }
  75
  76                 & .rcfilters-spinner-bounce,
  77                 &:before,
  78                 &:after {
  79                         content: '';
  80                         display: inline-block;
  81                         width: 12px;
  82                         height: 12px;
  83                         background-color: #c8ccd1;
  84                         border-radius: 100%;
  85                         .animation( rcfiltersBouncedelay 1.5s ease-in-out -0.16s infinite both );
  86                 }
  87
  88                 &:before {
  89                         .animation-delay( -0.33s );
  90                 }
  91
  92                 &:after {
  93                         .animation-delay( 0s );
  94                 }
  95         }
  96 }
  97
  98 .mw-rcfilters-staticfilters-selected {
  99         font-weight: bold;
 100 }
 101
 102 @-webkit-keyframes rcfiltersBouncedelay {
 103         0%,
 104         80%,
 105         100% {
 106                 -webkit-transform: scale( 0.7 );
 107                 transform: scale( 0.7 );
 108         }
 109         40% {
 110                 background-color: #a2a9b1;
 111                 -webkit-transform: scale( 1 );
 112                 transform: scale( 1 );
 113         }
 114 }
 115
 116 @-moz-keyframes rcfiltersBouncedelay {
 117         0%,
 118         80%,
 119         100% {
 120                 -moz-transform: scale( 0.7 );
 121                 transform: scale( 0.7 );
 122         }
 123         40% {
 124                 background-color: #a2a9b1;
 125                 -moz-transform: scale( 0.7 );
 126                 transform: scale( 1 );
 127         }
 128 }
 129
 130 @keyframes rcfiltersBouncedelay {
 131         0%,
 132         80%,
 133         100% {
 134                 transform: scale( 0.7 );
 135         }
 136         40% {
 137                 background-color: #a2a9b1;
 138                 transform: scale( 1 );
 139         }
 140 }