border-color: #979797;
color: #222;
- &-muted {
+ // Background and color of the capsule widget need a bit
+ // more specificity to override ooui internals
+ &-muted.oo-ui-capsuleItemWidget.oo-ui-widget-enabled {
// Muted state
background-color: #eaecf0;
border-color: #c8ccd1;
+
.oo-ui-labelElement-label {
color: #72777d;
}
+ .oo-ui-buttonWidget {
+ opacity: @muted-opacity;
+ }
+ }
+
+ &-conflicted.oo-ui-capsuleItemWidget.oo-ui-widget-enabled {
+ background-color: #fee7e6; // Red90 AAA
+ border-color: #b32424; // Red30 AAA
+ .oo-ui-labelElement-label {
+ color: #b32424;
+ }
.oo-ui-buttonWidget {
opacity: @muted-opacity;
}
}
- &-selected {
+ &-selected.oo-ui-capsuleItemWidget.oo-ui-widget-enabled {
background-color: #eaf3ff;
border-color: #36c;
}
}
&[data-color='c1'] {
- .mw-rcfilters-mixin-circle( @highlight-c1, 0.7em, ~'0 0.5em 0 0' );
+ .mw-rcfilters-mixin-circle( @highlight-c1, 10px, ~'0 0.5em 0 0' );
}
&[data-color='c2'] {
- .mw-rcfilters-mixin-circle( @highlight-c2, 0.7em, ~'0 0.5em 0 0' );
+ .mw-rcfilters-mixin-circle( @highlight-c2, 10px, ~'0 0.5em 0 0' );
}
&[data-color='c3'] {
- .mw-rcfilters-mixin-circle( @highlight-c3, 0.7em, ~'0 0.5em 0 0' );
+ .mw-rcfilters-mixin-circle( @highlight-c3, 10px, ~'0 0.5em 0 0' );
}
&[data-color='c4'] {
- .mw-rcfilters-mixin-circle( @highlight-c4, 0.7em, ~'0 0.5em 0 0' );
+ .mw-rcfilters-mixin-circle( @highlight-c4, 10px, ~'0 0.5em 0 0' );
}
&[data-color='c5'] {
- .mw-rcfilters-mixin-circle( @highlight-c5, 0.7em, ~'0 0.5em 0 0' );
+ .mw-rcfilters-mixin-circle( @highlight-c5, 10px, ~'0 0.5em 0 0' );
}
}
}