VolkerE has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/372216 )
Change subject: Replace greys, most blues and reds with WikimediaUI palette ones
......................................................................
Replace greys, most blues and reds with WikimediaUI palette ones
Replacing all greys, majority of blues and reds with ones of
WikimediaUI color palette. They got either replaced by the
closest color available, or
- in some cases of widget backgrounds and borders with OOUI
equivalents,
- with subtle colors to the next WCAG 2.0 level AA conformant
color,
- when solid blue colors with Accent50 blue and
- when error colors with Red50.
Also cleaning up CSS in minor cases.
Bug: T150731
Change-Id: I36621625605fb9d6836c153ad23d708951625d41
---
M modules/dashboard/styles/ext.cx.dashboard.less
M modules/dashboard/styles/ext.cx.lists.common.less
M modules/dashboard/styles/ext.cx.suggestionlist.less
M modules/dashboard/styles/ext.cx.translationlist.less
M modules/entrypoint/styles/ext.cx.entrypoint.less
M modules/publish/styles/ext.cx.publish.dialog.less
M modules/publish/styles/ext.cx.publish.less
M modules/source/styles/ext.cx.source.selector.less
M modules/stats/styles/ext.cx.stats.less
M modules/tools/styles/ext.cx.tools.card.less
M modules/tools/styles/ext.cx.tools.categories.less
M modules/tools/styles/ext.cx.tools.formatter.less
M modules/tools/styles/ext.cx.tools.link.less
M modules/tools/styles/ext.cx.tools.linker.less
M modules/tools/styles/ext.cx.tools.linter.less
M modules/tools/styles/ext.cx.tools.manager.less
M modules/tools/styles/ext.cx.tools.mt.card.less
M modules/tools/styles/ext.cx.tools.mtabuse.less
M modules/tools/styles/ext.cx.tools.reference.less
M modules/tools/styles/ext.cx.tools.template.card.less
M modules/tools/styles/ext.cx.tools.template.editor.less
M modules/tools/styles/mw.cx.tools.InstructionsTool.less
M modules/translation/styles/ext.cx.translation.conflict.less
M modules/translation/styles/ext.cx.translation.less
M modules/ui/legacy/styles/mw.cx.ui.ToolsColumn.less
M modules/ui/legacy/styles/mw.cx.ui.TranslationColumn.less
M modules/ui/legacy/styles/mw.cx.ui.TranslationView.less
M modules/ui/styles/mw.cx.ui.Header.less
M modules/ui/styles/mw.cx.ui.ToolsColumn.less
M modules/ui/styles/mw.cx.ui.TranslationView.less
M modules/ui/styles/translationunits/mw.cx.ui.LinkTranslationUnit.less
M modules/ui/styles/widgets/mw.cx.ui.MessageWidget.less
M modules/ui/styles/widgets/mw.cx.ui.ProgressBarWidget.less
M modules/ui/styles/widgets/mw.cx.ui.TranslationToolWidget.less
M modules/ve-cx/ce/styles/ve.ce.CXPlaceholderNode.css
M modules/widgets/pageselector/ext.cx.pageselector.less
M modules/widgets/progressbar/ext.cx.progressbar.less
M modules/widgets/spinner/ext.cx.spinner.less
M modules/widgets/templates/mw.cx.widgets.TemplateParamOptionWidget.less
39 files changed, 125 insertions(+), 117 deletions(-)
git pull
ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/ContentTranslation
refs/changes/16/372216/1
diff --git a/modules/dashboard/styles/ext.cx.dashboard.less
b/modules/dashboard/styles/ext.cx.dashboard.less
index 0207add..02bf5c3 100644
--- a/modules/dashboard/styles/ext.cx.dashboard.less
+++ b/modules/dashboard/styles/ext.cx.dashboard.less
@@ -38,10 +38,10 @@
ul {
margin: 0;
padding: 0;
- border-top: 1px solid #ddd;
+ border-top: 1px solid #c8ccd1;
li {
- border-bottom: 1px solid #ddd;
+ border-bottom: 1px solid #c8ccd1;
padding: 10px 0;
list-style: none;
}
@@ -99,7 +99,7 @@
.cx-header--dashboard {
background: #fff;
- border-bottom: 1px solid #ddd;
+ border-bottom: 1px solid #c8ccd1;
.cx-header__title {
overflow: hidden;
@@ -151,22 +151,22 @@
padding: 0;
:last-child {
- border-right: 1px solid #656565;
+ border-right: 1px solid #a2a9b1;
}
.cx-filter {
overflow: hidden;
float: left;
- border-top: 1px solid #656565;
- border-bottom: 1px solid #656565;
- border-left: 1px solid #656565;
+ border-top: 1px solid #a2a9b1;
+ border-bottom: 1px solid #a2a9b1;
+ border-left: 1px solid #a2a9b1;
cursor: pointer;
padding: 10px;
background-color: #fff;
- color: #333;
+ color: #222;
&--selected {
- background-color: #656565;
+ background-color: #a2a9b1;
color: #fff;
}
}
diff --git a/modules/dashboard/styles/ext.cx.lists.common.less
b/modules/dashboard/styles/ext.cx.lists.common.less
index 0b69ba7..fff4f8d 100644
--- a/modules/dashboard/styles/ext.cx.lists.common.less
+++ b/modules/dashboard/styles/ext.cx.lists.common.less
@@ -5,7 +5,7 @@
.mw-ui-one-whole;
padding: 16px;
background-color: #fff;
- border-top: 1px solid #ddd;
+ border-top: 1px solid #c8ccd1;
cursor: pointer;
&:hover {
@@ -18,7 +18,7 @@
}
&:last-child {
- border-top: 1px solid #ddd;
+ border-top: 1px solid #c8ccd1;
}
transition: 1s ease;
}
@@ -46,7 +46,7 @@
.translation-language-filter {
background-color: @colorGray15;
max-width: 33.33%;
- border: 1px solid #9d9d9d;
+ border: 1px solid #a2a9b1;
border-radius: @borderRadius;
padding: 0;
@@ -121,7 +121,7 @@
.translation-language-arrow:before {
margin-top: -18px;
border-color: rgba( 157, 157, 157, 0 );
- border-left-color: #9d9d9d;
+ border-left-color: #a2a9b1;
border-width: 18px;
border-left-width: 13px;
}
@@ -131,7 +131,7 @@
.cx-translationlist-empty,
.cx-suggestionlist-empty {
.mw-ui-item;
- color: #999;
+ color: #72777d;
padding-top: 20px;
text-align: center;
@@ -140,7 +140,7 @@
background-repeat: no-repeat;
background-color: #eaecf0;
background-position: top;
- border-right: 1px solid #eee;
+ border-right: 1px solid #eaecf0;
padding: 50px 0;
}
diff --git a/modules/dashboard/styles/ext.cx.suggestionlist.less
b/modules/dashboard/styles/ext.cx.suggestionlist.less
index 2d16104..922c794 100644
--- a/modules/dashboard/styles/ext.cx.suggestionlist.less
+++ b/modules/dashboard/styles/ext.cx.suggestionlist.less
@@ -16,7 +16,7 @@
}
// At any time display only two suggestion lists
-.cx-suggestionlist-type-4:nth-child(n+3) {
+.cx-suggestionlist-type-4:nth-child( n+3 ) {
display: none;
}
@@ -30,7 +30,7 @@
.cx-suggestionlist--collapsed h2 {
.mw-ui-one-whole;
background-color: #fff;
- border: 1px solid #ddd;
+ border: 1px solid #c8ccd1;
border-bottom: 0;
padding: 10px;
margin: 0;
@@ -40,7 +40,7 @@
.cx-suggestionlist--collapsed {
// First item is heading and then next 2 items.
// So hide all items starting at 4th child.
- .cx-slitem:nth-child(n+4) {
+ .cx-slitem:nth-child( n+4 ) {
display: none;
}
}
@@ -51,10 +51,11 @@
.mw-ui-one-whole;
padding: 10px;
background-color: #fff;
- border: 1px solid #ddd;
+ border: 1px solid #c8ccd1;
cursor: pointer;
font-size: medium;
text-align: center;
+
&:hover {
background-color: #eff3fb;
}
diff --git a/modules/dashboard/styles/ext.cx.translationlist.less
b/modules/dashboard/styles/ext.cx.translationlist.less
index f1d4964..b16a72f 100644
--- a/modules/dashboard/styles/ext.cx.translationlist.less
+++ b/modules/dashboard/styles/ext.cx.translationlist.less
@@ -30,7 +30,7 @@
background-position: center;
background-size: 24px;
&:hover {
- background-color: #eee;
+ background-color: #eaecf0;
}
}
@@ -45,8 +45,8 @@
font-weight: normal;
white-space: nowrap;
background-color: #fff;
- border: 1px solid #ddd;
- border-bottom: 3px solid #ddd;
+ border: 1px solid #c8ccd1;
+ border-bottom-width: 3px;
border-radius: 2px;
li {
@@ -78,7 +78,7 @@
}
.cx-tlitem__actions__trigger {
- background-color: #eee;
+ background-color: #eaecf0;
}
}
}
@@ -136,7 +136,7 @@
}
.target-title {
- color: #bbb;
+ color: #72777d;
padding-left: 1em;
}
@@ -159,7 +159,7 @@
}
.status-deleted {
- color: #f30;
+ color: #d33;
}
.status-published {
@@ -176,7 +176,7 @@
min-width: 500px;
max-width: 600px;
background: #fff;
- border: 1px solid #ddd;
+ border: 1px solid #c8ccd1;
border-bottom-width: 3px;
border-radius: 3px;
padding: 0;
diff --git a/modules/entrypoint/styles/ext.cx.entrypoint.less
b/modules/entrypoint/styles/ext.cx.entrypoint.less
index f99bfcc..a557b92 100644
--- a/modules/entrypoint/styles/ext.cx.entrypoint.less
+++ b/modules/entrypoint/styles/ext.cx.entrypoint.less
@@ -32,7 +32,7 @@
.mw-ui-item;
.mw-ui-one-whole;
padding: 10px 15px 5px 15px;
- color: #333;
+ color: #222;
}
.cx-entrypoint-dialog__license {
@@ -42,7 +42,7 @@
background-color: @gray-lighter;
font-size: 12px;
color: #72777d;
- border-top: 1px solid #f5f5f5;
+ border-top: 1px solid #f8f9fa;
}
.cx-entrypoint-dialog__actions {
@@ -51,6 +51,7 @@
padding: 15px 15px 15px 15px;
text-align: right;
background-color: @gray-lighter;
+
button {
margin-left: 10px;
}
diff --git a/modules/publish/styles/ext.cx.publish.dialog.less
b/modules/publish/styles/ext.cx.publish.dialog.less
index be98ed6..ecec587 100644
--- a/modules/publish/styles/ext.cx.publish.dialog.less
+++ b/modules/publish/styles/ext.cx.publish.dialog.less
@@ -3,11 +3,11 @@
.cx-publishing-dialog {
.mw-ui-item;
- color: #333;
+ color: #222;
position: absolute;
width: 400px;
background: #fff;
- border: 1px solid #ccc;
+ border: 1px solid #c8ccd1;
border-bottom-width: 3px;
border-radius: 3px;
padding: 5px;
diff --git a/modules/publish/styles/ext.cx.publish.less
b/modules/publish/styles/ext.cx.publish.less
index 6952001..3b279ac 100644
--- a/modules/publish/styles/ext.cx.publish.less
+++ b/modules/publish/styles/ext.cx.publish.less
@@ -3,7 +3,7 @@
.cx-publish-captcha-form {
position: absolute;
background: #fff;
- border: 1px solid #aaa;
+ border: 1px solid #a2a9b1;
width: 25%;
top: 150px;
left: 70%;
@@ -33,7 +33,7 @@
:before {
border-color: rgba( 238, 238, 238, 0 );
- border-bottom-color: #aaa;
+ border-bottom-color: #a2a9b1;
border-width: 21px;
margin-left: -21px;
}
diff --git a/modules/source/styles/ext.cx.source.selector.less
b/modules/source/styles/ext.cx.source.selector.less
index f90ed85..a37a1e0 100644
--- a/modules/source/styles/ext.cx.source.selector.less
+++ b/modules/source/styles/ext.cx.source.selector.less
@@ -9,7 +9,7 @@
min-width: 650px;
max-width: 700px;
background: #fff;
- border: 1px solid #ddd;
+ border: 1px solid #c8ccd1;
border-bottom-width: 3px;
border-radius: 3px;
padding: 0;
@@ -27,7 +27,7 @@
padding: @vertical-margin @horizontal-margin;
font-size: 1.6em;
line-height: 1.5em;
- border-bottom: 1px solid #eee;
+ border-bottom: 1px solid #eaecf0;
font-weight: normal;
}
@@ -43,7 +43,7 @@
height: 50px;
padding: 10px;
- border-bottom: 1px solid #eee;
+ border-bottom: 1px solid #eaecf0;
}
.cx-sourceselector-dialog__language-label {
@@ -92,7 +92,7 @@
font-size: medium;
padding: 5px 10px;
- background: #efefef;
+ background: #eaecf0;
position: relative;
cursor: pointer;
text-align: left;
diff --git a/modules/stats/styles/ext.cx.stats.less
b/modules/stats/styles/ext.cx.stats.less
index 99cdf3a..3df8ef0 100644
--- a/modules/stats/styles/ext.cx.stats.less
+++ b/modules/stats/styles/ext.cx.stats.less
@@ -6,7 +6,7 @@
padding: 0 50px;
clear: both;
- background-color: #f6f6f6;
+ background-color: #f8f9fa;
min-height: 100vh;
h1,
@@ -25,7 +25,7 @@
.mw-ui-item;
.mw-ui-one-whole;
- border: 1px solid #eee;
+ border: 1px solid #eaecf0;
padding: 0;
background-color: #fff;
}
@@ -34,7 +34,7 @@
.mw-ui-one-whole;
cursor: s-resize;
- border-top: 1px solid #eee;
+ border-top: 1px solid #eaecf0;
padding: 10px;
}
@@ -131,7 +131,7 @@
margin: 0;
padding: 0;
list-style: none;
- border-bottom: 1px solid #eee;
+ border-bottom: 1px solid #eaecf0;
li {
background: none;
@@ -171,7 +171,7 @@
.cx-stats-graph {
background-color: #fff;
- border: 1px solid #999;
+ border: 1px solid #a2a9b1;
// Legend styling
li {
@@ -201,7 +201,7 @@
background-color: #fff;
margin-right: 50px;
padding: 10px;
- border: 1px solid #999;
+ border: 1px solid #a2a9b1;
&__title {
font-size: 1em;
@@ -226,7 +226,7 @@
}
&.decrease {
- color: #f00;
+ color: #d33;
}
}
diff --git a/modules/tools/styles/ext.cx.tools.card.less
b/modules/tools/styles/ext.cx.tools.card.less
index d3f9ff2..ca42397 100644
--- a/modules/tools/styles/ext.cx.tools.card.less
+++ b/modules/tools/styles/ext.cx.tools.card.less
@@ -2,14 +2,14 @@
.card {
background: #fff;
- border: 1px solid #c9c9c9;
+ border: 1px solid #c8ccd1;
border-radius: 2px;
- box-shadow: 0 1px 0 #c9c9c9;
+ box-shadow: 0 1px 0 #c8ccd1;
margin-top: 15px;
&:hover {
- border-color: #bbb;
- box-shadow: 0 1px 0 #bbb;
+ border-color: #a2a9b1;
+ box-shadow: 0 1px 0 #a2a9b1;
}
/* Clearfix */
@@ -29,7 +29,7 @@
.card__title--language {
.mw-ui-item;
.mw-ui-one-half;
- color: #aaa;
+ color: #72777d;
padding: 4px;
}
diff --git a/modules/tools/styles/ext.cx.tools.categories.less
b/modules/tools/styles/ext.cx.tools.categories.less
index 672ac19..41680ed 100644
--- a/modules/tools/styles/ext.cx.tools.categories.less
+++ b/modules/tools/styles/ext.cx.tools.categories.less
@@ -48,14 +48,14 @@
margin-top: 1em;
padding-top: 0.5em;
padding-bottom: 0.5em;
- border: 1px solid #ddd;
+ border: 1px solid #c8ccd1;
border-radius: 2px;
.cx-category-nocategories {
padding-left: 0.5em;
display: inline-block;
margin-right: 1em;
- color: #999;
+ color: #72777d;
}
.cx-category-categorylist {
@@ -66,7 +66,7 @@
margin-left: 2em;
.cx-category {
- border: 1px solid #c9c9c9;
+ border: 1px solid #c8ccd1;
border-radius: 2px;
padding-left: 0.25em;
padding-right: 0.25em;
@@ -103,7 +103,7 @@
}
.cx-category-disabled {
- color: #999;
+ color: #72777d;
border: 0;
cursor: default;
}
@@ -111,7 +111,7 @@
.cx-category-highlight {
.cx-category;
background-color: @text-highlight-color;
- box-shadow: 0 1px 0 0 #c9c9c9;
+ box-shadow: 0 1px 0 0 #c8ccd1;
transition: all 0.15s;
}
}
diff --git a/modules/tools/styles/ext.cx.tools.formatter.less
b/modules/tools/styles/ext.cx.tools.formatter.less
index 6f7d010..8e368a7 100644
--- a/modules/tools/styles/ext.cx.tools.formatter.less
+++ b/modules/tools/styles/ext.cx.tools.formatter.less
@@ -25,7 +25,7 @@
opacity: 1;
}
&.highlight {
- background-color: #ccc;
+ background-color: #c8ccd1;
}
}
diff --git a/modules/tools/styles/ext.cx.tools.link.less
b/modules/tools/styles/ext.cx.tools.link.less
index 738d7c8..3484cf9 100644
--- a/modules/tools/styles/ext.cx.tools.link.less
+++ b/modules/tools/styles/ext.cx.tools.link.less
@@ -54,7 +54,7 @@
background-size: 15px;
cursor: pointer;
clear: both;
- border-top: 1px solid #ddd;
+ border-top: 1px solid #c8ccd1;
}
.card__add-link {
@@ -72,7 +72,7 @@
background-size: 15px;
background-color: #fff;
cursor: pointer;
- border-top: 1px solid #ddd;
+ border-top: 1px solid #c8ccd1;
}
.card__link-image-container {
@@ -95,7 +95,7 @@
background-repeat: no-repeat;
background-color: @gray-lighter;
background-position: center center;
- border-right: 1px solid #eee;
+ border-right: 1px solid #eaecf0;
}
}
@@ -117,7 +117,7 @@
min-height: 65px;
.card__link-text {
- color: #0645ad;
+ color: #36c;
font-size: large;
white-space: nowrap;
}
@@ -136,7 +136,7 @@
background-repeat: no-repeat;
background-color: @gray-lighter;
background-position: center center;
- border-right: 1px solid #eee;
+ border-right: 1px solid #eaecf0;
}
.card__add-link,
@@ -151,11 +151,11 @@
background-repeat: no-repeat;
background-color: @gray-lighter;
background-position: center center;
- border-right: 1px solid #eee;
+ border-right: 1px solid #eaecf0;
}
.card__link-text {
- color: #f00;
+ color: #d33;
}
.card__add-link,
@@ -173,13 +173,13 @@
.mw-ui-one-whole;
color: @gray-dark;
font-size: large;
- border-top: 1px solid #ddd;
+ border-top: 1px solid #c8ccd1;
clear: both;
padding-top: 10px;
.shortcut-info {
font-size: small;
- color: #aaa;
+ color: #72777d;
}
}
@@ -188,7 +188,7 @@
// The dashed underline will only appear for the links on the current
paragraph.
// Links from other paragraphs will not show the dashed underline to
avoid too much visual noise.
&:focus .cx-target-link-unadapted {
- border-bottom: 1px dashed #ccc;
+ border-bottom: 1px dashed #c8ccd1;
}
.cx-target-link-unadapted {
diff --git a/modules/tools/styles/ext.cx.tools.linker.less
b/modules/tools/styles/ext.cx.tools.linker.less
index 50eb159..0f080c5 100644
--- a/modules/tools/styles/ext.cx.tools.linker.less
+++ b/modules/tools/styles/ext.cx.tools.linker.less
@@ -76,7 +76,7 @@
}
.linker-inactive {
- color: #999;
+ color: #72777d;
}
button {
diff --git a/modules/tools/styles/ext.cx.tools.linter.less
b/modules/tools/styles/ext.cx.tools.linter.less
index 70a2ef2..8fa7b80 100644
--- a/modules/tools/styles/ext.cx.tools.linter.less
+++ b/modules/tools/styles/ext.cx.tools.linter.less
@@ -9,7 +9,7 @@
.cx-linter-disallow,
.cx-linter-error {
padding-left: 5px;
- border-left: 2px solid #f00;
+ border-left: 2px solid #d33;
}
.card__linter-header {
diff --git a/modules/tools/styles/ext.cx.tools.manager.less
b/modules/tools/styles/ext.cx.tools.manager.less
index f07a4e3..97da65d 100644
--- a/modules/tools/styles/ext.cx.tools.manager.less
+++ b/modules/tools/styles/ext.cx.tools.manager.less
@@ -2,7 +2,7 @@
.card__section {
.mw-ui-grid;
- border-bottom: 1px solid #ddd;
+ border-bottom: 1px solid #c8ccd1;
padding: 10px 10px 20px 10px;
font-size: 16px;
word-wrap: break-word;
@@ -12,7 +12,7 @@
.card__title-row {
.mw-ui-item;
.mw-ui-one-whole;
- color: #aaa; // TODO Should come from library?
+ color: #72777d; // TODO Should come from library?
font-size: small;
.card__title {
diff --git a/modules/tools/styles/ext.cx.tools.mt.card.less
b/modules/tools/styles/ext.cx.tools.mt.card.less
index b03d0b0..76c31e5 100644
--- a/modules/tools/styles/ext.cx.tools.mt.card.less
+++ b/modules/tools/styles/ext.cx.tools.mt.card.less
@@ -8,6 +8,7 @@
padding: 5px 10px 10px;
cursor: pointer;
color: @gray-dark;
+
&:after {
.background-image-svg( '../images/dropdown.svg',
'../images/dropdown.png');
content: '';
@@ -29,9 +30,9 @@
position: absolute;
margin: 30px 10px;
background-color: #fff;
- border: 1px solid #aaa;
+ border: 1px solid #a2a9b1;
border-radius: 2px;
- box-shadow: 0 1px 0 #c9c9c9;
+ box-shadow: 0 1px 0 #c8ccd1;
z-index: 1;
> li {
@@ -43,11 +44,13 @@
background-repeat: no-repeat;
background-position: right 4px center;
}
+
&:hover {
background-color: #6698ff;
color: #fff;
}
}
+
:after,
:before {
bottom: 100%;
@@ -69,7 +72,7 @@
:before {
border-color: rgba( 238, 238, 238, 0 );
- border-bottom-color: #aaa;
+ border-bottom-color: #a2a9b1;
border-width: 11px;
margin-left: -11px;
}
@@ -90,7 +93,7 @@
.mw-ui-one-whole;
line-height: 1.5em;
color: @gray;
- border-top: 1px solid #ddd;
+ border-top: 1px solid #c8ccd1;
.card__control-button {
.mw-ui-one-half;
diff --git a/modules/tools/styles/ext.cx.tools.mtabuse.less
b/modules/tools/styles/ext.cx.tools.mtabuse.less
index 07e95a3..6d6ff07 100644
--- a/modules/tools/styles/ext.cx.tools.mtabuse.less
+++ b/modules/tools/styles/ext.cx.tools.mtabuse.less
@@ -28,5 +28,5 @@
color: @color-primary;
padding: 10px;
font-size: medium;
- border-top: 1px solid #ddd;
+ border-top: 1px solid #c8ccd1;
}
diff --git a/modules/tools/styles/ext.cx.tools.reference.less
b/modules/tools/styles/ext.cx.tools.reference.less
index f37194b..ab70f6f 100644
--- a/modules/tools/styles/ext.cx.tools.reference.less
+++ b/modules/tools/styles/ext.cx.tools.reference.less
@@ -18,7 +18,7 @@
background-size: 15px;
cursor: pointer;
clear: both;
- border-top: 1px solid #ddd;
+ border-top: 1px solid #c8ccd1;
}
.card__remove-reference {
@@ -38,7 +38,7 @@
background-size: 15px;
cursor: pointer;
clear: both;
- border-top: 1px solid #ddd;
+ border-top: 1px solid #c8ccd1;
}
.card__reference-number {
diff --git a/modules/tools/styles/ext.cx.tools.template.card.less
b/modules/tools/styles/ext.cx.tools.template.card.less
index 7e20c09..e0b674c 100644
--- a/modules/tools/styles/ext.cx.tools.template.card.less
+++ b/modules/tools/styles/ext.cx.tools.template.card.less
@@ -11,9 +11,9 @@
position: absolute;
margin: 0 10px;
background-color: #fff;
- border: 1px solid #aaa;
+ border: 1px solid #a2a9b1;
border-radius: 2px;
- box-shadow: 0 1px 0 #c9c9c9;
+ box-shadow: 0 1px 0 #c8ccd1;
z-index: 1;
> li {
@@ -53,7 +53,7 @@
:before {
border-color: rgba( 238, 238, 238, 0 );
- border-bottom-color: #aaa;
+ border-bottom-color: #a2a9b1;
border-width: 11px;
margin-left: -11px;
}
@@ -75,8 +75,8 @@
float: none;
padding: 5px 10px 10px;
cursor: pointer;
- color: #555;
- border-top: 1px solid #ddd;
+ color: #54595d;
+ border-top: 1px solid #c8c9d1;
&:after {
.background-image-svg( '../images/dropdown.svg',
'../images/dropdown.png');
@@ -118,5 +118,5 @@
}
.cx-unadaptable-template {
- background-color: #ddd;
+ background-color: #c8ccd1;
}
diff --git a/modules/tools/styles/ext.cx.tools.template.editor.less
b/modules/tools/styles/ext.cx.tools.template.editor.less
index c0eba0c..9f23448 100644
--- a/modules/tools/styles/ext.cx.tools.template.editor.less
+++ b/modules/tools/styles/ext.cx.tools.template.editor.less
@@ -8,7 +8,7 @@
height: 100%;
padding: 0 10px;
background-color: @gray-light;
- border: 1px solid #ccc;
+ border: 1px solid #c8ccd1;
z-index: 9; // The sticky header on the top of page is with z-index 10
&:after {
content: '';
@@ -45,7 +45,7 @@
.cx-template-editor-title {
.mw-ui-one-whole;
font-weight: bold;
- border-bottom: 1px solid #ddd;
+ border-bottom: 1px solid #c8ccd1;
padding: 10px 30px;
.background-image-svg( '../images/template-puzzle-ltr.svg',
'../images/template-puzzle-ltr.png');
background-position: left center;
@@ -56,7 +56,7 @@
.cx-template-editor-param {
.mw-ui-one-whole;
padding: 0 10px;
- border-bottom: 1px solid #eee;
+ border-bottom: 1px solid #eaecf0;
line-height: 1em;
}
@@ -82,9 +82,10 @@
cursor: pointer;
font-size: 1.2em;
min-height: 50px;
+
&:hover {
color: #252525;
- background-color: #f8f8f8;
+ background-color: #f8f9fa;
display: flex;
justify-content: center;
align-items: center;
@@ -110,10 +111,12 @@
.oo-ui-indicatorElement-indicator {
right: inherit;
}
+
&:focus {
border-color: @white;
box-shadow: inset 0 0 0 1px @white;
}
+
.oo-ui-labelElement-label {
margin: 0;
margin-right: 5px;
@@ -128,6 +131,7 @@
padding: 5px 0;
min-height: 35px;
overflow: auto;
+
&:focus {
outline: 1px solid #36c;
}
diff --git a/modules/tools/styles/mw.cx.tools.InstructionsTool.less
b/modules/tools/styles/mw.cx.tools.InstructionsTool.less
index 83bd60f..5ba1911 100644
--- a/modules/tools/styles/mw.cx.tools.InstructionsTool.less
+++ b/modules/tools/styles/mw.cx.tools.InstructionsTool.less
@@ -15,7 +15,7 @@
margin-right: auto;
overflow: hidden;
clear: both;
- border-bottom: 1px solid #ddd;
+ border-bottom: 1px solid #c8ccd1;
padding: 10px 10px 20px 10px;
font-size: 16px;
word-wrap: break-word;
diff --git a/modules/translation/styles/ext.cx.translation.conflict.less
b/modules/translation/styles/ext.cx.translation.conflict.less
index d1e2542..a2884a2 100644
--- a/modules/translation/styles/ext.cx.translation.conflict.less
+++ b/modules/translation/styles/ext.cx.translation.conflict.less
@@ -4,7 +4,7 @@
.mw-ui-item;
.mw-ui-one-whole;
background-color: #fff;
- border: 1px solid #eee;
+ border: 1px solid #eaecf0;
padding: 20px 200px;
&-info {
font-size: larger;
diff --git a/modules/translation/styles/ext.cx.translation.less
b/modules/translation/styles/ext.cx.translation.less
index 9bea404..3fc9fad 100644
--- a/modules/translation/styles/ext.cx.translation.less
+++ b/modules/translation/styles/ext.cx.translation.less
@@ -12,7 +12,7 @@
[typeof='mw:Transclusion'] {
&:focus {
border: 1px solid #6698ff;
- background-color: #f8f8f8;
+ background-color: #f8f9fa;
}
a {
@@ -42,8 +42,8 @@
&:first-child,
&:hover,
.cx-column--translation &:first-child:hover {
- color: #aaa;
- background-color: #f8f8f8;
+ color: #72777d;
+ background-color: #f8f9fa;
/* In supported browsers, center the placeholder text */
display: flex;
/* align horizontally */
diff --git a/modules/ui/legacy/styles/mw.cx.ui.ToolsColumn.less
b/modules/ui/legacy/styles/mw.cx.ui.ToolsColumn.less
index 361e32f..45f9156 100644
--- a/modules/ui/legacy/styles/mw.cx.ui.ToolsColumn.less
+++ b/modules/ui/legacy/styles/mw.cx.ui.ToolsColumn.less
@@ -7,7 +7,7 @@
min-height: 100vh;
position: relative;
z-index: 20;
- border-left: 1px solid #ccc;
+ border-left: 1px solid #c8ccd1;
&.sticky {
.stick-to-side;
diff --git a/modules/ui/legacy/styles/mw.cx.ui.TranslationColumn.less
b/modules/ui/legacy/styles/mw.cx.ui.TranslationColumn.less
index 7beaf4e..2c7b5e2 100644
--- a/modules/ui/legacy/styles/mw.cx.ui.TranslationColumn.less
+++ b/modules/ui/legacy/styles/mw.cx.ui.TranslationColumn.less
@@ -26,8 +26,8 @@
&:first-child,
.cx-column--translation &:first-child:hover,
&:hover {
- color: #aaa;
- background-color: #f8f8f8;
+ color: #72777d;
+ background-color: #f8f9fa;
/* In supported browsers, center the placeholder text */
display: flex;
justify-content: center; /* align horizontally */
diff --git a/modules/ui/legacy/styles/mw.cx.ui.TranslationView.less
b/modules/ui/legacy/styles/mw.cx.ui.TranslationView.less
index 9fb9b9f..3120174 100644
--- a/modules/ui/legacy/styles/mw.cx.ui.TranslationView.less
+++ b/modules/ui/legacy/styles/mw.cx.ui.TranslationView.less
@@ -39,7 +39,7 @@
.mw-ui-one-half(@palm);
background-color: @white;
- border: 1px solid #ccc;
+ border: 1px solid #c8ccd1;
padding: 10px;
margin: 2px 0;
}
diff --git a/modules/ui/styles/mw.cx.ui.Header.less
b/modules/ui/styles/mw.cx.ui.Header.less
index 6c66aa2..962cb63 100644
--- a/modules/ui/styles/mw.cx.ui.Header.less
+++ b/modules/ui/styles/mw.cx.ui.Header.less
@@ -11,7 +11,7 @@
align-items: center;
width: 42px;
height: 38px;
- border-right: 1px solid #ddd;
+ border-right: 1px solid #c8ccd1;
}
.cx-header__title {
@@ -30,8 +30,8 @@
.cx-header__bar {
.mw-ui-item;
.mw-ui-one-whole;
- border-bottom: 1px solid #eee;
- border-top: 1px solid #eee;
+ border-bottom: 1px solid #eaecf0;
+ border-top: 1px solid #eaecf0;
padding: 5px;
/* Trick to get items vertically aligned */
line-height: 2em;
diff --git a/modules/ui/styles/mw.cx.ui.ToolsColumn.less
b/modules/ui/styles/mw.cx.ui.ToolsColumn.less
index 4aaaaa1..5574a27 100644
--- a/modules/ui/styles/mw.cx.ui.ToolsColumn.less
+++ b/modules/ui/styles/mw.cx.ui.ToolsColumn.less
@@ -9,7 +9,7 @@
position: fixed;
top: 110px;
right: 0;
- border-left: 1px solid #ccc;
+ border-left: 1px solid #c8ccd1;
&.sticky {
top: 55px;
diff --git a/modules/ui/styles/mw.cx.ui.TranslationView.less
b/modules/ui/styles/mw.cx.ui.TranslationView.less
index ca63439..b947552 100644
--- a/modules/ui/styles/mw.cx.ui.TranslationView.less
+++ b/modules/ui/styles/mw.cx.ui.TranslationView.less
@@ -40,7 +40,7 @@
.mw-ui-one-half(@palm);
background-color: @white;
- border: 1px solid #ccc;
+ border: 1px solid #c8ccd1;
padding: 10px;
margin: 2px 0;
}
diff --git
a/modules/ui/styles/translationunits/mw.cx.ui.LinkTranslationUnit.less
b/modules/ui/styles/translationunits/mw.cx.ui.LinkTranslationUnit.less
index e3e086d..02f0c54 100644
--- a/modules/ui/styles/translationunits/mw.cx.ui.LinkTranslationUnit.less
+++ b/modules/ui/styles/translationunits/mw.cx.ui.LinkTranslationUnit.less
@@ -17,7 +17,7 @@
// The dashed underline will only appear for the links on the current
paragraph.
// Links from other paragraphs will not show the dashed underline to
avoid too much visual noise.
&:focus .cx-target-link-unadapted {
- border-bottom: 1px dashed #ccc;
+ border-bottom: 1px dashed #c8ccd1;
}
}
diff --git a/modules/ui/styles/widgets/mw.cx.ui.MessageWidget.less
b/modules/ui/styles/widgets/mw.cx.ui.MessageWidget.less
index e8896bb..17b5e56 100644
--- a/modules/ui/styles/widgets/mw.cx.ui.MessageWidget.less
+++ b/modules/ui/styles/widgets/mw.cx.ui.MessageWidget.less
@@ -1,7 +1,7 @@
@import '../../../widgets/common/ext.cx.common.less';
.cx-message-widget {
- border-bottom: 1px solid #ddd;
+ border-bottom: 1px solid #c8ccd1;
min-height: 2em;
padding: 5px 10px;
diff --git a/modules/ui/styles/widgets/mw.cx.ui.ProgressBarWidget.less
b/modules/ui/styles/widgets/mw.cx.ui.ProgressBarWidget.less
index 7819d20..04e187a 100644
--- a/modules/ui/styles/widgets/mw.cx.ui.ProgressBarWidget.less
+++ b/modules/ui/styles/widgets/mw.cx.ui.ProgressBarWidget.less
@@ -1,12 +1,13 @@
@import '../../../widgets/common/ext.cx.common.less';
.cx-progressbar {
- background-color: #ddd;
+ background-color: #fff;
transition: width 1s;
.cx-progressbar-total {
border: 0;
height: 4px;
+
.oo-ui-progressBarWidget-bar {
background-color: @color-primary;
}
@@ -18,6 +19,7 @@
top: -4px;
position: relative;
opacity: 0.5;
+
.oo-ui-progressBarWidget-bar {
background-color: @gray-dark;
}
diff --git a/modules/ui/styles/widgets/mw.cx.ui.TranslationToolWidget.less
b/modules/ui/styles/widgets/mw.cx.ui.TranslationToolWidget.less
index 06376bf..aa61658 100644
--- a/modules/ui/styles/widgets/mw.cx.ui.TranslationToolWidget.less
+++ b/modules/ui/styles/widgets/mw.cx.ui.TranslationToolWidget.less
@@ -36,7 +36,7 @@
.mw-ui-item;
padding: 5px 10px;
clear: both;
- border-top: 1px solid #eee;
+ border-top: 1px solid #eaecf0;
}
.card__title,
diff --git a/modules/ve-cx/ce/styles/ve.ce.CXPlaceholderNode.css
b/modules/ve-cx/ce/styles/ve.ce.CXPlaceholderNode.css
index 5a0ebfd..2910f68 100644
--- a/modules/ve-cx/ce/styles/ve.ce.CXPlaceholderNode.css
+++ b/modules/ve-cx/ce/styles/ve.ce.CXPlaceholderNode.css
@@ -6,7 +6,7 @@
-moz-transition: opacity 200ms ease-out;
transition: opacity 200ms ease-out;
- outline: 1px dashed #ccc;
+ outline: 1px dashed #c8ccd1;
/* rgba( #f1f7fb, 0.75 ) */
background-color: rgba( 241, 247, 251, 0.75 );
}
diff --git a/modules/widgets/pageselector/ext.cx.pageselector.less
b/modules/widgets/pageselector/ext.cx.pageselector.less
index a97ad36..d87fd4d 100644
--- a/modules/widgets/pageselector/ext.cx.pageselector.less
+++ b/modules/widgets/pageselector/ext.cx.pageselector.less
@@ -3,7 +3,7 @@
.mw-pageselector-menu {
position: absolute;
- border: 1px solid #ccc;
+ border: 1px solid #c8ccd1;
box-shadow: 0 5px 10px rgba( 0, 0, 0, 0.2 );
list-style: none;
margin: 30px 0;
@@ -16,7 +16,7 @@
overflow-y: auto;
& > li {
- border-bottom: 1px solid #eee;
+ border-bottom: 1px solid #eaecf0;
background-repeat: no-repeat;
background-position: left center;
background-size: 50px 50px;
@@ -39,10 +39,10 @@
background-repeat: no-repeat;
background-color: @gray-lighter;
background-position: top left;
- border-right: 1px solid #eee;
+ border-right: 1px solid #eaecf0;
.mw-page-title {
- color: #f00;
+ color: #d33;
}
}
diff --git a/modules/widgets/progressbar/ext.cx.progressbar.less
b/modules/widgets/progressbar/ext.cx.progressbar.less
index 708683e..aa1c3e1 100644
--- a/modules/widgets/progressbar/ext.cx.progressbar.less
+++ b/modules/widgets/progressbar/ext.cx.progressbar.less
@@ -11,13 +11,13 @@
.mw-ui-item;
.mw-ui-one-whole;
height: 4px;
- background: #ddd;
+ background: #fff;
vertical-align: middle;
padding: 0;
}
.cx-progressbar__bar {
- background: #3892e3;
+ background: #36c;
display: block;
height: 4px;
left: 0;
@@ -29,14 +29,14 @@
height: 4px;
left: 0;
transition: width 1s;
- background: #555;
+ background: #54595d;
position: relative;
top: -4px;
opacity: 0.5;
}
.cx-progressbar__info {
- background-color: #eee;
+ background-color: #eaecf0;
}
.cx-progressbar__info--mt {
diff --git a/modules/widgets/spinner/ext.cx.spinner.less
b/modules/widgets/spinner/ext.cx.spinner.less
index eef01e7..76d5d8c 100644
--- a/modules/widgets/spinner/ext.cx.spinner.less
+++ b/modules/widgets/spinner/ext.cx.spinner.less
@@ -16,7 +16,7 @@
> div {
width: 16px;
height: 16px;
- background-color: #ddd;
+ background-color: #eaecf0;
border-radius: 100%;
display: inline-block;
-webkit-animation: bouncedelay 1s infinite ease-in-out;
@@ -37,7 +37,6 @@
40% {
-webkit-transform: scale( 1 );
transform: scale( 1 );
- background-color: #bbb;
}
}
@@ -45,13 +44,11 @@
0%,
100%,
80% {
- -webkit-transform: scale( 0.6 );
-ms-transform: scale( 0.6 );
transform: scale( 0.6 );
}
40% {
- -webkit-transform: scale( 1 );
-ms-transform: scale( 1 );
transform: scale( 1 );
}
diff --git
a/modules/widgets/templates/mw.cx.widgets.TemplateParamOptionWidget.less
b/modules/widgets/templates/mw.cx.widgets.TemplateParamOptionWidget.less
index 3b6bc25..d49461d 100644
--- a/modules/widgets/templates/mw.cx.widgets.TemplateParamOptionWidget.less
+++ b/modules/widgets/templates/mw.cx.widgets.TemplateParamOptionWidget.less
@@ -3,5 +3,5 @@
text-overflow: ellipsis;
overflow: hidden;
font-size: 14px;
- color: #555;
+ color: #54595d;
}
--
To view, visit https://gerrit.wikimedia.org/r/372216
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I36621625605fb9d6836c153ad23d708951625d41
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/ContentTranslation
Gerrit-Branch: master
Gerrit-Owner: VolkerE <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
