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

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