1 files changed, 81 insertions, 0 deletions
diff --git a/www/wiki/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.TagItemWidget.less b/www/wiki/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.TagItemWidget.less
new file mode 100644
index 00000000..e9c982a8
--- /dev/null
+++ b/www/wiki/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.TagItemWidget.less
@@ -0,0 +1,81 @@
+@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
+	&.oo-ui-flaggedElement-muted.oo-ui-tagItemWidget.oo-ui-widget-enabled {
+		// Muted state
+		background-color: @colorGray14;
+		border-color: @colorGray12;
+
+		.oo-ui-labelElement-label {
+			color: @colorGray7;
+		}
+		.oo-ui-buttonWidget {
+			opacity: @muted-opacity;
+		}
+	}
+
+	&.oo-ui-flaggedElement-invalid.oo-ui-tagItemWidget.oo-ui-widget-enabled {
+		.oo-ui-labelElement-label {
+			color: @colorDestructiveActive;
+		}
+	}
+
+	// OOUI classes require super-specificity in order to override
+	// 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 &-selected.oo-ui-tagItemWidget.oo-ui-widget-enabled {
+		background-color: @background-color-primary;
+		border-color: @colorProgressive;
+	}
+
+	&-popup-content {
+		padding: 0.5em;
+		color: @colorGray5;
+	}
+
+	&.oo-ui-labelElement .oo-ui-labelElement-label {
+		cursor: pointer;
+	}
+
+	&-highlight {
+		display: none;
+		margin-right: 0.5em;
+		width: 10px;
+
+		&-highlighted {
+			display: inline-block;
+		}
+
+		&:before {
+			content: '';
+			position: absolute;
+			display: block;
+			top: 50%;
+		}
+
+		&[ data-color='c1' ]:before {
+			.mw-rcfilters-mixin-circle( @highlight-c1, 10px, ~'-5px 0.5em 0 0' );
+		}
+
+		&[ data-color='c2' ]:before {
+			.mw-rcfilters-mixin-circle( @highlight-c2, 10px, ~'-5px 0.5em 0 0' );
+		}
+
+		&[ data-color='c3' ]:before {
+			.mw-rcfilters-mixin-circle( @highlight-c3, 10px, ~'-5px 0.5em 0 0' );
+		}
+
+		&[ data-color='c4' ]:before {
+			.mw-rcfilters-mixin-circle( @highlight-c4, 10px, ~'-5px 0.5em 0 0' );
+		}
+
+		&[ data-color='c5' ]:before {
+			.mw-rcfilters-mixin-circle( @highlight-c5, 10px, ~'-5px 0.5em 0 0' );
+		}
+	}
+}