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

   1 @import 'mw.rcfilters.mixins';
   2
   3 .mw-rcfilters-ui-filterTagItemWidget {
   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-tagItemWidget.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-tagItemWidget.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-tagItemWidget.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                 margin-right: 0.5em;
  53                 height: 100%;
  54                 width: 10px;
  55
  56                 &-highlighted {
  57                         display: inline-block;
  58                 }
  59
  60                 &:before {
  61                         content: '';
  62                         position: absolute;
  63                         display: block;
  64                         top: 50%;
  65                 }
  66
  67                 &[data-color='c1']:before {
  68                         .mw-rcfilters-mixin-circle( @highlight-c1, 10px, ~'-5px 0.5em 0 0' );
  69                 }
  70
  71                 &[data-color='c2']:before {
  72                         .mw-rcfilters-mixin-circle( @highlight-c2, 10px, ~'-5px 0.5em 0 0' );
  73                 }
  74
  75                 &[data-color='c3']:before {
  76                         .mw-rcfilters-mixin-circle( @highlight-c3, 10px, ~'-5px 0.5em 0 0' );
  77                 }
  78
  79                 &[data-color='c4']:before {
  80                         .mw-rcfilters-mixin-circle( @highlight-c4, 10px, ~'-5px 0.5em 0 0' );
  81                 }
  82
  83                 &[data-color='c5']:before {
  84                         .mw-rcfilters-mixin-circle( @highlight-c5, 10px, ~'-5px 0.5em 0 0' );
  85                 }
  86         }
  87 }