From 94f347fc366c207717ca1b295aa11711108273c5 Mon Sep 17 00:00:00 2001 From: Volker E Date: Thu, 24 Aug 2017 12:42:56 -0700 Subject: [PATCH] RCFilters: Align remaining outdated greys to WikimediaUI palette ones Replacing abandoned grey colors with appropriate colors from WikimediaUI color palette. Additional changes: * Also simplified selector specificity in one case as OOUI code has already changed. Bug: T172850 Change-Id: I01e84d9a4d03ba894cbb67114821036b0ffe1ddb --- .../styles/mw.rcfilters.mixins.less | 13 ++++++------- ....rcfilters.ui.FilterMenuSectionOptionWidget.less | 3 +-- .../mw.rcfilters.ui.HighlightColorPickerWidget.less | 2 +- .../mw.rcfilters.ui.ItemMenuOptionWidget.less | 8 ++++---- .../styles/mw.rcfilters.ui.MenuSelectWidget.less | 2 +- .../styles/mw.rcfilters.ui.TagItemWidget.less | 4 ++-- 6 files changed, 15 insertions(+), 17 deletions(-) diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.mixins.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.mixins.less index 3b90f06ffa..5a885eccf5 100644 --- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.mixins.less +++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.mixins.less @@ -8,19 +8,18 @@ } // 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; } } diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterMenuSectionOptionWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterMenuSectionOptionWidget.less index 964f27e0fc..c09ca1ef09 100644 --- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterMenuSectionOptionWidget.less +++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterMenuSectionOptionWidget.less @@ -8,8 +8,7 @@ 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; 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 667f528a30..0adec46596 100644 --- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.HighlightColorPickerWidget.less +++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.HighlightColorPickerWidget.less @@ -38,7 +38,7 @@ .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, diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ItemMenuOptionWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ItemMenuOptionWidget.less index 86bfafb34a..75ea061aae 100644 --- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ItemMenuOptionWidget.less +++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ItemMenuOptionWidget.less @@ -6,11 +6,11 @@ .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 { @@ -19,7 +19,7 @@ } &:hover { - background-color: #fbfbfb; + background-color: #f8f9fa; } .mw-rcfilters-ui-table { @@ -37,7 +37,7 @@ color: #222; } &-desc { - color: #464a4f; + color: #54595d; white-space: normal; } } diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.MenuSelectWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.MenuSelectWidget.less index 8c54089ccd..24e062e6b8 100644 --- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.MenuSelectWidget.less +++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.MenuSelectWidget.less @@ -11,7 +11,7 @@ &-noresults { display: none; padding: 0.5em; - color: #666; + color: #54595d; .oo-ui-menuSelectWidget-invisible & { display: inline-block; diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.TagItemWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.TagItemWidget.less index 1fb2fca663..26ea64cfb4 100644 --- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.TagItemWidget.less +++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.TagItemWidget.less @@ -2,7 +2,7 @@ .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; @@ -26,7 +26,7 @@ // 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; } -- 2.20.1