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