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