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

   1 @import 'mediawiki.mixins.animation';
   2 @import 'mediawiki.ui/variables';
   3 @import 'mw.rcfilters.mixins';
   4
   5 @rcfilters-spinner-width: 70px;
   6 @rcfilters-head-min-height: 250px;
   7 @rcfilters-wl-head-min-height: 320px;
   8
   9 // Corrections for the standard special page
  10 .client-js {
  11         .cloptions {
  12                 border: 0;
  13         }
  14
  15         // Reserve space for the UI while it loads
  16         .rcfilters-head {
  17                 min-height: @rcfilters-head-min-height;
  18         }
  19
  20         // On the watchlist, reserve a bit more
  21         .mw-special-Watchlist .rcfilters-head {
  22                 min-height: @rcfilters-wl-head-min-height;
  23         }
  24
  25         .mw-recentchanges-toplinks {
  26                 margin-bottom: 0.5em;
  27
  28                 &:not( .mw-recentchanges-toplinks-collapsed ) {
  29                         // Same as the legend
  30                         border: 1px solid @colorGray12;
  31                 }
  32         }
  33
  34         body:not( .mw-rcfilters-ui-initialized ) {
  35                 .mw-recentchanges-toplinks.mw-recentchanges-toplinks-collapsed {
  36                         // Similar to the watchlist-details hack, we are going to make this float left
  37                         // while loading to prevent jumpiness in the min-height calculation
  38                         float: left;
  39
  40                         .mw-recentchanges-toplinks-content {
  41                                 display: none;
  42                         }
  43                 }
  44
  45                 .rcfilters-head {
  46                         opacity: 0.5;
  47                         pointer-events: none;
  48
  49                         .cloptions {
  50                                 display: none;
  51                         }
  52
  53                 }
  54         }
  55
  56         .rcfilters-container {
  57                 min-height: 100px;
  58                 margin: 0;
  59         }
  60
  61         .mw-changeslist {
  62                 &-empty {
  63                         // Hide the 'empty' message when we load rcfilters
  64                         // since we replace it anyways with a specific
  65                         // message of our own
  66                         display: none;
  67                 }
  68
  69                 // Reserve space for the highlight circles
  70                 ul,
  71                 table.mw-enhanced-rc {
  72                         .result-circle-margin();
  73                 }
  74         }
  75
  76         body.mw-rcfilters-ui-loading .mw-changeslist {
  77                 opacity: 0.5;
  78         }
  79
  80         .rcfilters-spinner {
  81                 display: none;
  82                 position: absolute;
  83                 left: 50%;
  84                 width: @rcfilters-spinner-width;
  85                 // Make sure the middle of the spinner is centered, rather than its left edge
  86                 margin-left: -@rcfilters-spinner-width/2;
  87
  88                 opacity: 0.8;
  89                 white-space: nowrap;
  90
  91                 & .rcfilters-spinner-bounce,
  92                 &:before,
  93                 &:after {
  94                         content: '';
  95                         display: inline-block;
  96                         width: 12px;
  97                         height: 12px;
  98                         background-color: @colorGray12;
  99                         border-radius: 100%;
 100                         .animation( rcfiltersBouncedelay 1.5s ease-in-out -0.16s infinite both );
 101                 }
 102
 103                 &:before {
 104                         .animation-delay( -0.33s );
 105                 }
 106
 107                 &:after {
 108                         .animation-delay( 0s );
 109                 }
 110         }
 111         body:not( .mw-rcfilters-ui-initialized ) .rcfilters-spinner {
 112                 display: block;
 113                 // When initializing, display the spinner on top of the area where the UI will appear
 114                 margin-top: -@rcfilters-head-min-height/2;
 115         }
 116         body.mw-rcfilters-ui-loading .rcfilters-spinner {
 117                 display: block;
 118                 // When loading new results, display the spinner on top of the results area
 119                 margin-top: 2em;
 120         }
 121
 122         #contentSub,
 123         form#mw-watchlist-resetbutton {
 124                 display: none;
 125         }
 126
 127         // Make the watchlist-details message display while loading, but make it not take up any
 128         // space. This makes the min-height trick work better.
 129         .watchlistDetails {
 130                 float: left;
 131         }
 132 }
 133
 134 .mw-rcfilters-staticfilters-selected {
 135         font-weight: bold;
 136 }
 137
 138 @-webkit-keyframes rcfiltersBouncedelay {
 139         0%,
 140         80%,
 141         100% {
 142                 -webkit-transform: scale( 0.7 );
 143                 transform: scale( 0.7 );
 144         }
 145         40% {
 146                 background-color: @colorGray10;
 147                 -webkit-transform: scale( 1 );
 148                 transform: scale( 1 );
 149         }
 150 }
 151
 152 @-moz-keyframes rcfiltersBouncedelay {
 153         0%,
 154         80%,
 155         100% {
 156                 -moz-transform: scale( 0.7 );
 157                 transform: scale( 0.7 );
 158         }
 159         40% {
 160                 background-color: @colorGray10;
 161                 -moz-transform: scale( 0.7 );
 162                 transform: scale( 1 );
 163         }
 164 }
 165
 166 @keyframes rcfiltersBouncedelay {
 167         0%,
 168         80%,
 169         100% {
 170                 transform: scale( 0.7 );
 171         }
 172         40% {
 173                 background-color: @colorGray10;
 174                 transform: scale( 1 );
 175         }
 176 }