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 0bf6f58..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,30 +1,52 @@
-@import "mw.rcfilters.mixins";
+@import 'mw.rcfilters.mixins';
 
 .mw-rcfilters-ui-capsuleItemWidget {
-       &-popup {
-               padding: 1em;
-       }
+       background-color: #fff;
+       border-color: #979797;
+       color: #222;
 
-       .oo-ui-popupWidget {
-               // Fix the positioning of the popup itself
-               margin-top: 1em;
-       }
+       // 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 {
-               vertical-align: middle;
+               .oo-ui-labelElement-label {
+                       color: #72777d;
+               }
+               .oo-ui-buttonWidget {
+                       opacity: @muted-opacity;
+               }
        }
 
-       &-muted {
-               // Muted state
-               // We want everything muted except the circle
-               background-color: rgba( 255, 255, 255, @muted-opacity );
+       &-conflicted.oo-ui-capsuleItemWidget.oo-ui-widget-enabled {
+               background-color: #fee7e6; // Red90 AAA
+               border-color: #b32424; // Red30 AAA
 
-               .oo-ui-labelElement-label,
+               .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;
+       }
+
+       &.oo-ui-labelElement .oo-ui-labelElement-label {
+               vertical-align: middle;
+               cursor: pointer;
+       }
+
        &-highlight {
                display: none;
                padding-right: 0.5em;
@@ -34,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' );
                }
        }
 }