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

   1 @import 'mw.rcfilters.mixins';
   2
   3 .mw-rcfilters-ui-capsuleItemWidget {
   4         background-color: #fff;
   5         border-color: #979797;
   6         color: #222;
   7
   8         // Background and color of the capsule widget need a bit
   9         // more specificity to override ooui internals
  10         &-muted.oo-ui-capsuleItemWidget.oo-ui-widget-enabled {
  11                 // Muted state
  12                 background-color: #eaecf0;
  13                 border-color: #c8ccd1;
  14
  15                 .oo-ui-labelElement-label {
  16                         color: #72777d;
  17                 }
  18                 .oo-ui-buttonWidget {
  19                         opacity: @muted-opacity;
  20                 }
  21         }
  22
  23         &-conflicted.oo-ui-capsuleItemWidget.oo-ui-widget-enabled {
  24                 background-color: #fee7e6; // Red90 AAA
  25                 border-color: #b32424; // Red30 AAA
  26
  27                 .oo-ui-labelElement-label {
  28                         color: #b32424;
  29                 }
  30                 .oo-ui-buttonWidget {
  31                         opacity: @muted-opacity;
  32                 }
  33         }
  34
  35         &-selected.oo-ui-capsuleItemWidget.oo-ui-widget-enabled {
  36                 background-color: #eaf3ff;
  37                 border-color: #36c;
  38         }
  39
  40         &-popup-content {
  41                 padding: 0.5em;
  42                 color: #54595d;
  43         }
  44
  45         &.oo-ui-labelElement .oo-ui-labelElement-label {
  46                 vertical-align: middle;
  47                 cursor: pointer;
  48         }
  49
  50         &-highlight {
  51                 display: none;
  52                 padding-right: 0.5em;
  53
  54                 &-highlighted {
  55                         display: inline-block;
  56
  57                 }
  58
  59                 &[data-color='c1'] {
  60                         .mw-rcfilters-mixin-circle( @highlight-c1, 10px, ~'0 0.5em 0 0' );
  61                 }
  62                 &[data-color='c2'] {
  63                         .mw-rcfilters-mixin-circle( @highlight-c2, 10px, ~'0 0.5em 0 0' );
  64                 }
  65                 &[data-color='c3'] {
  66                         .mw-rcfilters-mixin-circle( @highlight-c3, 10px, ~'0 0.5em 0 0' );
  67                 }
  68                 &[data-color='c4'] {
  69                         .mw-rcfilters-mixin-circle( @highlight-c4, 10px, ~'0 0.5em 0 0' );
  70                 }
  71                 &[data-color='c5'] {
  72                         .mw-rcfilters-mixin-circle( @highlight-c5, 10px, ~'0 0.5em 0 0' );
  73                 }
  74         }
  75 }