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