Merge "Remove the localStorage replication of the block cookie"

[lhc/web/wiklou.git] / resources / src / mediawiki.rcfilters / styles / mw.rcfilters.ui.CapsuleItemWidget.less

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 2521899..b16e84c 100644 (file)
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.CapsuleItemWidget.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.CapsuleItemWidget.less
@@ -1,6 +1,42 @@
-@import "mw.rcfilters.mixins";
+@import 'mw.rcfilters.mixins';
 
 .mw-rcfilters-ui-capsuleItemWidget {
+       background-color: #fff;
+       border-color: #979797;
+       color: #222;
+
+       // 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.oo-ui-capsuleItemWidget.oo-ui-widget-enabled {
+               background-color: #eaf3ff;
+               border-color: #36c;
+       }
+
        &-popup-content {
                padding: 0.5em;
                color: #54595d;
@@ -11,17 +47,6 @@
                cursor: pointer;
        }
 
-       &-muted {
-               // Muted state
-               // We want everything muted except the circle
-               background-color: rgba( 255, 255, 255, @muted-opacity );
-
-               .oo-ui-labelElement-label,
-               .oo-ui-buttonWidget {
-                       opacity: @muted-opacity;
-               }
-       }
-
        &-highlight {
                display: none;
                padding-right: 0.5em;
@@ -31,20 +56,20 @@
 
                }
 
-               &[data-color="c1"] {
-                       .mw-rcfilters-mixin-circle( @highlight-c1, 0.7em, ~"0 0.5em 0 0" );
+               &[data-color='c1'] {
+                       .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" );
+               &[data-color='c2'] {
+                       .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" );
+               &[data-color='c3'] {
+                       .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" );
+               &[data-color='c4'] {
+                       .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" );
+               &[data-color='c5'] {
+                       .mw-rcfilters-mixin-circle( @highlight-c5, 10px, ~'0 0.5em 0 0' );
                }
        }
 }