resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less

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