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