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