resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesListWrapperWidget.highlightCircles.seenunseen.less

   1 @import 'mw.rcfilters.mixins';
   2 @import 'mw.rcfilters.variables';
   3
   4 .mw-rcfilters-ui-changesListWrapperWidget {
   5         ul {
   6                 list-style: none;
   7
   8                 li {
   9                         list-style: none;
  10                 }
  11         }
  12 }
  13
  14 // Make more specific for the overrides
  15 div.mw-rcfilters-ui-highlights {
  16         body.mw-rcfilters-ui-initialized & {
  17                 display: inline-block;
  18         }
  19
  20         &-color {
  21                 &-none {
  22                         display: inline-block;
  23                         .mw-changeslist-watchedseen & {
  24                                 .mw-rcfilters-ui-changesListWrapperWidget.mw-rcfilters-ui-changesListWrapperWidget-highlighted & {
  25                                         .mw-rcfilters-mixin-circle( @highlight-none, @result-circle-diameter, 0, true, @highlight-grey, true );
  26                                 }
  27
  28                                 .mw-rcfilters-ui-changesListWrapperWidget:not( .mw-rcfilters-ui-changesListWrapperWidget-highlighted ) & {
  29                                         .mw-rcfilters-mixin-circle( @highlight-none, @result-circle-diameter, 0, true, @highlight-bluedot, true );
  30                                 }
  31                         }
  32
  33                         .mw-changeslist-watchedunseen & {
  34                                 .mw-rcfilters-ui-changesListWrapperWidget.mw-rcfilters-ui-changesListWrapperWidget-highlighted & {
  35                                         .mw-rcfilters-mixin-circle( @highlight-grey, @result-circle-diameter, 0, true, @highlight-grey );
  36                                 }
  37
  38                                 .mw-rcfilters-ui-changesListWrapperWidget:not( .mw-rcfilters-ui-changesListWrapperWidget-highlighted ) & {
  39                                         .mw-rcfilters-mixin-circle( @highlight-bluedot, @result-circle-diameter, 0, true, @highlight-bluedot );
  40                                 }
  41                         }
  42
  43                 }
  44
  45                 // Watchlist unseen highlighted fixes
  46                 // Seen (empty circle)
  47                 // There's no need to correct 'unseen' because that would be
  48                 // a filled colorful circle, which is the regular rendering
  49                 .mw-changeslist-watchedseen &-c1 {
  50                         .mw-rcfilters-mixin-circle( @highlight-c1, @result-circle-diameter, 0, true, @highlight-c1, true );
  51                 }
  52
  53                 .mw-changeslist-watchedseen &-c2 {
  54                         .mw-rcfilters-mixin-circle( @highlight-c2, @result-circle-diameter, 0, true, @highlight-c2, true );
  55                 }
  56
  57                 .mw-changeslist-watchedseen &-c3 {
  58                         .mw-rcfilters-mixin-circle( @highlight-c3, @result-circle-diameter, 0, true, @highlight-c3, true );
  59                 }
  60
  61                 .mw-changeslist-watchedseen &-c4 {
  62                         .mw-rcfilters-mixin-circle( @highlight-c4, @result-circle-diameter, 0, true, @highlight-c4, true );
  63                 }
  64
  65                 .mw-changeslist-watchedseen &-c5 {
  66                         .mw-rcfilters-mixin-circle( @highlight-c5, @result-circle-diameter, 0, true, @highlight-c5, true );
  67                 }
  68         }
  69
  70         .mw-rcfilters-ui-changesListWrapperWidget & > div {
  71                 margin-right: @result-circle-margin;
  72         }
  73 }