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