Merge "RCFilters UI: Adopt conflict colors"

diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.CapsuleItemWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.CapsuleItemWidget.less
index c70da38..8173150 100644 (file)
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.CapsuleItemWidget.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.CapsuleItemWidget.less
@@ -5,20 +5,34 @@
        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;
        }

diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.CapsuleItemWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.CapsuleItemWidget.js
index 800e7ea..a7ad954 100644 (file)
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.CapsuleItemWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.CapsuleItemWidget.js
@@ -135,8 +135,11 @@
                                'mw-rcfilters-ui-capsuleItemWidget-muted',
                                !this.model.isSelected() ||
                                this.model.isIncluded() ||
-                               this.model.isConflicted() ||
                                this.model.isFullyCovered()
+                       )
+                       .toggleClass(
+                               'mw-rcfilters-ui-capsuleItemWidget-conflicted',
+                               this.model.isConflicted()
                        );
        };