RCFilters: Override frameless button opacity to show real highlight color

Overriding OOUI's frameless button opacity, which is targeted in this
place for icons to show real highlight color.

Bug: T190980
Change-Id: Id3355ecad8ff01ef8159375eaa04f7d284fc598b

diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterItemHighlightButton.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterItemHighlightButton.less
index 198f599..dd77eea 100644 (file)
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterItemHighlightButton.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterItemHighlightButton.less
@@ -2,10 +2,12 @@
 
 .mw-rcfilters-ui-filterItemHighlightButton {
        .oo-ui-buttonWidget.oo-ui-popupButtonWidget .oo-ui-buttonElement-button > &-circle {
+               background-image: none;
                display: inline-block;
                vertical-align: middle;
-               background-image: none;
                margin-right: 0.2em;
+               // Override OOUI rule on frameless icons
+               opacity: 1;
 
                &-color {
                        &-c1 {

diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.HighlightColorPickerWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.HighlightColorPickerWidget.less
index ee8ad85..41dc8cf 100644 (file)
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.HighlightColorPickerWidget.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.HighlightColorPickerWidget.less
@@ -29,6 +29,8 @@
                                height: 1.5em;
                                // By eye, this is centered horizontally for the color circle
                                margin-left: -0.1em;
+                               // Override OOUI rule on frameless icons
+                               opacity: 1;
                        }
 
                        &-none {
@@ -38,8 +40,8 @@
                                }
 
                                .mw-rcfilters-mixin-circle( @highlight-none, 2em, 0.5em, true );
-                               // Override border to dashed
-                               border: 1px dashed @colorGray5;
+                               // Override `border-style` to `dashed`
+                               border-style: dashed;
 
                                &.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
                                &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,