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

   1 @import "mw.rcfilters.mixins";
   2
   3 .mw-rcfilters-ui-capsuleItemWidget {
   4         &-popup-content {
   5                 padding: 0.5em;
   6                 color: #54595d;
   7         }
   8
   9         .oo-ui-labelElement-label {
  10                 vertical-align: middle;
  11         }
  12
  13         &-muted {
  14                 // Muted state
  15                 // We want everything muted except the circle
  16                 background-color: rgba( 255, 255, 255, @muted-opacity );
  17
  18                 .oo-ui-labelElement-label,
  19                 .oo-ui-buttonWidget {
  20                         opacity: @muted-opacity;
  21                 }
  22         }
  23
  24         &-highlight {
  25                 display: none;
  26                 padding-right: 0.5em;
  27
  28                 &-highlighted {
  29                         display: inline-block;
  30
  31                 }
  32
  33                 &[data-color="c1"] {
  34                         .mw-rcfilters-mixin-circle( @highlight-c1, 0.7em, ~"0 0.5em 0 0" );
  35                 }
  36                 &[data-color="c2"] {
  37                         .mw-rcfilters-mixin-circle( @highlight-c2, 0.7em, ~"0 0.5em 0 0" );
  38                 }
  39                 &[data-color="c3"] {
  40                         .mw-rcfilters-mixin-circle( @highlight-c3, 0.7em, ~"0 0.5em 0 0" );
  41                 }
  42                 &[data-color="c4"] {
  43                         .mw-rcfilters-mixin-circle( @highlight-c4, 0.7em, ~"0 0.5em 0 0" );
  44                 }
  45                 &[data-color="c5"] {
  46                         .mw-rcfilters-mixin-circle( @highlight-c5, 0.7em, ~"0 0.5em 0 0" );
  47                 }
  48         }
  49 }