+@import 'mediawiki.ui/variables';
@import 'mw.rcfilters.mixins';
+@import 'mw.rcfilters.variables';
.mw-rcfilters-ui-tagItemWidget {
// Background and color of the capsule widget need a bit
- // more specificity to override ooui internals
+ // more specificity to override OOUI internals
&.oo-ui-flaggedElement-muted.oo-ui-tagItemWidget.oo-ui-widget-enabled {
// Muted state
- background-color: #eaecf0;
- border-color: #c8ccd1;
+ background-color: @colorGray14;
+ border-color: @colorGray12;
.oo-ui-labelElement-label {
- color: #72777d;
+ color: @colorGray7;
}
.oo-ui-buttonWidget {
opacity: @muted-opacity;
&.oo-ui-flaggedElement-invalid.oo-ui-tagItemWidget.oo-ui-widget-enabled {
.oo-ui-labelElement-label {
- color: #b32424;
+ color: @colorDestructiveActive;
}
}
// the white background
// The specificity is fixed in the patch: https://gerrit.wikimedia.org/r/#/c/349525/
// and will be available in the next OOUI release.
- .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagMultiselectWidget-handle &-selected.oo-ui-tagItemWidget.oo-ui-widget-enabled {
- background-color: #eaf3ff;
- border-color: #36c;
+ .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined &-selected.oo-ui-tagItemWidget.oo-ui-widget-enabled {
+ background-color: @background-color-primary;
+ border-color: @colorProgressive;
}
&-popup-content {
padding: 0.5em;
- color: #54595d;
+ color: @colorGray5;
}
&.oo-ui-labelElement .oo-ui-labelElement-label {
top: 50%;
}
- &[data-color='c1']:before {
+ &[ data-color='c1' ]:before {
.mw-rcfilters-mixin-circle( @highlight-c1, 10px, ~'-5px 0.5em 0 0' );
}
- &[data-color='c2']:before {
+ &[ data-color='c2' ]:before {
.mw-rcfilters-mixin-circle( @highlight-c2, 10px, ~'-5px 0.5em 0 0' );
}
- &[data-color='c3']:before {
+ &[ data-color='c3' ]:before {
.mw-rcfilters-mixin-circle( @highlight-c3, 10px, ~'-5px 0.5em 0 0' );
}
- &[data-color='c4']:before {
+ &[ data-color='c4' ]:before {
.mw-rcfilters-mixin-circle( @highlight-c4, 10px, ~'-5px 0.5em 0 0' );
}
- &[data-color='c5']:before {
+ &[ data-color='c5' ]:before {
.mw-rcfilters-mixin-circle( @highlight-c5, 10px, ~'-5px 0.5em 0 0' );
}
}