}
// This is a general mixin for a color circle
-.mw-rcfilters-mixin-circle( @color: white, @diameter: 2em, @padding: 0.5em, @border: false ) {
- border-radius: 50%;
+.mw-rcfilters-mixin-circle( @color: #fff, @diameter: 2em, @padding: 0.5em, @border: false ) {
+ background-color: @color;
+ .box-sizing( border-box );
min-width: @diameter;
width: @diameter;
min-height: @diameter;
height: @diameter;
margin: @padding;
- .box-sizing( border-box );
-
- background-color: @color;
+ border-radius: 50%;
- & when (@border = true) {
- border: 1px solid #565656;
+ & when ( @border = true ) {
+ border: 1px solid #54595d;
}
}
padding: 0 0.75em;
// Use a high specificity to override OOUI
.oo-ui-optionWidget.oo-ui-labelElement &-title.oo-ui-labelElement-label {
- // TODO: Unify colors with official design palette
- color: #555a5d;
+ color: #54595d;
.box-sizing( border-box );
display: inline-block;
line-height: normal;
.mw-rcfilters-mixin-circle( @highlight-none, 2em, 0.5em, true );
// Override border to dashed
- border: 1px dashed #565656;
+ border: 1px dashed #54595d;
&.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
&.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
.box-sizing( border-box );
&:not( :last-child ) {
- border-bottom: solid 1px #eaecf0; // Base 80 AAA
+ border-bottom: 1px solid #eaecf0; // Base80 AAA
}
&-view-namespaces {
- border-top: 5px solid #ccc;
+ border-top: 5px solid #c8ccd1;
&:first-child,
&.mw-rcfilters-ui-itemMenuOptionWidget-identifier-subject + &.mw-rcfilters-ui-itemMenuOptionWidget-identifier-talk {
}
&:hover {
- background-color: #fbfbfb;
+ background-color: #f8f9fa;
}
.mw-rcfilters-ui-table {
color: #222;
}
&-desc {
- color: #464a4f;
+ color: #54595d;
white-space: normal;
}
}
&-noresults {
display: none;
padding: 0.5em;
- color: #666;
+ color: #54595d;
.oo-ui-menuSelectWidget-invisible & {
display: inline-block;
.mw-rcfilters-ui-tagItemWidget {
// Background and color of the capsule widget need a bit
- // more specificity to override ooui internals
+ // more specificity to override OOUI internals
&.oo-ui-flaggedElement-muted.oo-ui-tagItemWidget.oo-ui-widget-enabled {
// Muted state
background-color: #eaecf0;
// 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 .oo-ui-tagMultiselectWidget-handle &-selected.oo-ui-tagItemWidget.oo-ui-widget-enabled {
+ .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined &-selected.oo-ui-tagItemWidget.oo-ui-widget-enabled {
background-color: #eaf3ff;
border-color: #36c;
}