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