1 @import 'mw.rcfilters.mixins';
3 .mw-rcfilters-ui-capsuleItemWidget {
4 background-color: #fff;
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 {
13 background-color: #eaecf0;
14 border-color: #c8ccd1;
16 .oo-ui-labelElement-label {
20 opacity: @muted-opacity;
24 &-conflicted.oo-ui-capsuleItemWidget.oo-ui-widget-enabled {
25 background-color: #fee7e6; // Red90 AAA
26 border-color: #b32424; // Red30 AAA
28 .oo-ui-labelElement-label {
32 opacity: @muted-opacity;
36 &-selected.oo-ui-capsuleItemWidget.oo-ui-widget-enabled {
37 background-color: #eaf3ff;
46 &.oo-ui-labelElement .oo-ui-labelElement-label {
47 vertical-align: middle;
56 display: inline-block;
61 .mw-rcfilters-mixin-circle( @highlight-c1, 10px, ~'0 0.5em 0 0' );
64 .mw-rcfilters-mixin-circle( @highlight-c2, 10px, ~'0 0.5em 0 0' );
67 .mw-rcfilters-mixin-circle( @highlight-c3, 10px, ~'0 0.5em 0 0' );
70 .mw-rcfilters-mixin-circle( @highlight-c4, 10px, ~'0 0.5em 0 0' );
73 .mw-rcfilters-mixin-circle( @highlight-c5, 10px, ~'0 0.5em 0 0' );