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 /* stylelint-disable selector-class-pattern */
   6
   7 @rcfilters-spinner-size: 12px;
   8 @rcfilters-head-min-height: 210px;
   9 @rcfilters-head-margin-bottom: 20px;
  10 @rcfilters-wl-head-min-height: 295px;
  11 @rcfilters-head-min-height-collapsed: 130px;
  12 @rcfilters-wl-head-min-height-collapsed: 220px;
  13
  14 // Corrections for the standard special page
  15 .client-js {
  16         .cloptions {
  17                 border: 0;
  18         }
  19
  20         // Reserve space for the UI while it loads
  21         .rcfilters-head {
  22                 min-height: @rcfilters-head-min-height;
  23                 margin-bottom: @rcfilters-head-margin-bottom;
  24         }
  25
  26         // On the watchlist, reserve a bit more
  27         .mw-special-Watchlist .rcfilters-head {
  28                 min-height: @rcfilters-wl-head-min-height;
  29         }
  30
  31         .mw-rcfilters-collapsed {
  32                 .rcfilters-head {
  33                         min-height: @rcfilters-head-min-height-collapsed;
  34                 }
  35
  36                 // On the watchlist, reserve a bit more
  37                 &.mw-special-Watchlist .rcfilters-head {
  38                         min-height: @rcfilters-wl-head-min-height-collapsed;
  39                 }
  40         }
  41
  42         .mw-recentchanges-toplinks {
  43                 padding-left: 0.5em;
  44
  45                 &:not( .mw-recentchanges-toplinks-collapsed ) {
  46                         margin-top: -1px; // Make up for `border` to prevent link movement
  47                         margin-left: -1px;
  48                         margin-bottom: 0.5em;
  49                         border: 1px solid @colorGray12; // Same as the legend
  50                         padding: 0 0.5em 0.5em 0.5em;
  51                 }
  52
  53                 /* stylelint-disable declaration-no-important */
  54                 .oo-ui-buttonElement > .oo-ui-buttonElement-button {
  55                         padding-right: 1.2em !important;
  56
  57                         > .oo-ui-indicatorElement-indicator {
  58                                 right: 0 !important;
  59                                 width: 0.9375em !important;
  60                         }
  61                 }
  62                 /* stylelint-enable declaration-no-important */
  63         }
  64
  65         body:not( .mw-rcfilters-ui-initialized ) {
  66                 .mw-recentchanges-toplinks.mw-recentchanges-toplinks-collapsed {
  67                         // Similar to the watchlist-details hack, we are going to make this float left
  68                         // while loading to prevent jumpiness in the min-height calculation
  69                         float: left;
  70
  71                         .mw-recentchanges-toplinks-content {
  72                                 display: none;
  73                         }
  74                 }
  75
  76                 .rcfilters-head {
  77                         opacity: 0.5;
  78                         pointer-events: none;
  79
  80                         .cloptions {
  81                                 display: none;
  82                         }
  83                 }
  84         }
  85
  86         .mw-rcfilters-ui-highlights {
  87                 display: none;
  88         }
  89
  90         .mw-changeslist {
  91                 // Reserve space for the highlight circles
  92                 ul,
  93                 table.mw-enhanced-rc {
  94                         .result-circle-margin();
  95                 }
  96         }
  97
  98         // Temporarily hide the empty results section while we load rcfilters.
  99         .mw-changeslist-empty {
 100                 display: none;
 101         }
 102
 103         .errorbox {
 104                 display: none;
 105         }
 106
 107         body.mw-rcfilters-ui-loading .mw-changeslist {
 108                 opacity: 0.5;
 109         }
 110
 111         .rcfilters-spinner {
 112                 display: none;
 113                 position: absolute;
 114                 left: 50%;
 115                 // Make sure the middle of the spinner is centered, rather than its left edge
 116                 margin-left: -3 * @rcfilters-spinner-size / 2;
 117                 white-space: nowrap;
 118
 119                 & .rcfilters-spinner-bounce,
 120                 &:before,
 121                 &:after {
 122                         content: '';
 123                         background-color: @colorGray7;
 124                         display: block;
 125                         float: left;
 126                         width: @rcfilters-spinner-size;
 127                         height: @rcfilters-spinner-size;
 128                         border-radius: 100%;
 129                         .animation( rcfiltersBouncedelay 1600ms ease-in-out -160ms infinite both );
 130                 }
 131
 132                 &:before {
 133                         margin-right: 4px;
 134                         .animation-delay( -330ms );
 135                 }
 136
 137                 &:after {
 138                         margin-left: 4px;
 139                         .animation-delay( 0s );
 140                 }
 141         }
 142
 143         body:not( .mw-rcfilters-ui-initialized ) .rcfilters-spinner {
 144                 display: block;
 145                 // When initializing, display the spinner on top of the area where the UI will appear
 146                 margin-top: -( @rcfilters-head-min-height + @rcfilters-head-margin-bottom ) / 1.5;
 147         }
 148
 149         body.mw-rcfilters-ui-loading .rcfilters-spinner {
 150                 display: block;
 151                 // When loading new results, display the spinner on top of the results area
 152                 margin-top: -( @rcfilters-head-min-height + @rcfilters-head-margin-bottom ) / 8;
 153         }
 154
 155         #contentSub,
 156         form#mw-watchlist-resetbutton {
 157                 display: none;
 158         }
 159
 160         // Why does rcfilters have a copy of this?
 161         // TODO: Remove per T195256.
 162         #jump-to-nav {
 163                 margin-top: -0.5em;
 164                 margin-bottom: 0.5em;
 165         }
 166
 167         // Make the watchlist-details message display while loading, but make it not take up any
 168         // space. This makes the min-height trick work better.
 169         .watchlistDetails {
 170                 float: left;
 171                 // The 20em should match the min-width we are setting up
 172                 // for the .mw-rcfilters-ui-watchlistTopSectionWidget-editWatchlistButton
 173                 // in mw.rcfilters.ui.WatchlistTopSectionWidget.less
 174                 width: ~'calc( 100% - 20em )';
 175         }
 176 }
 177
 178 .mw-rcfilters-staticfilters-selected {
 179         font-weight: bold;
 180 }
 181
 182 @-webkit-keyframes rcfiltersBouncedelay {
 183         0%,
 184         50%, // equals 800ms
 185         100% {
 186                 -webkit-transform: scale( 0.625 );
 187         }
 188
 189         20% { // equals 320ms
 190                 opacity: 0.87;
 191                 -webkit-transform: scale( 1 );
 192         }
 193 }
 194
 195 @-moz-keyframes rcfiltersBouncedelay {
 196         0%,
 197         50%,
 198         100% {
 199                 -moz-transform: scale( 0.625 );
 200         }
 201
 202         20% {
 203                 opacity: 0.87;
 204                 -moz-transform: scale( 1 );
 205         }
 206 }
 207
 208 @keyframes rcfiltersBouncedelay {
 209         0%,
 210         50%,
 211         100% {
 212                 transform: scale( 0.625 );
 213         }
 214
 215         20% { // equals 320ms
 216                 opacity: 0.87;
 217                 transform: scale( 1 );
 218         }
 219 }