jenkins-bot has submitted this change and it was merged.
Change subject: Standardize grey colors
......................................................................
Standardize grey colors
Bug: 65381
Change-Id: I0c8ea46b3d368bf59b50e9859953793708eba1ab
---
M less/Overlay.less
M less/common-js.less
M less/common.less
M less/content/hacks.less
M less/content/main.less
M less/footer.less
M less/mainmenu.less
M less/modules/NotificationsOverlay.less
M less/modules/editor/editor.less
M less/modules/toc/toc.less
M less/pageactions.less
M less/pagelist.less
M less/specials/mobilediff.less
M less/specials/pagefeed.less
M less/specials/search.less
M less/specials/uploads.less
M less/specials/userlogin.less
M less/ui.less
18 files changed, 78 insertions(+), 50 deletions(-)
Approvals:
Jdlrobson: Looks good to me, approved
jenkins-bot: Verified
diff --git a/less/Overlay.less b/less/Overlay.less
index f895471..18f1978 100644
--- a/less/Overlay.less
+++ b/less/Overlay.less
@@ -1,6 +1,9 @@
@import "minerva.variables";
@import "minerva.mixins";
+@overlayBottomBackgroundColor: #f3f3f3;
+@contentHeaderBorderColor: #e2e2e2;
+
.overlay-enabled {
#mw-mf-page-center {
@@ -151,7 +154,7 @@
// Only used on overlays in beta (nearby pages)- may not want to push
to stable
.content-header {
background: @searchBoxColorTo;
- border-bottom: 1px solid #e2e2e2;
+ border-bottom: 1px solid @contentHeaderBorderColor;
padding: 20px @contentMargin;
line-height: inherit;
}
@@ -294,10 +297,10 @@
top: auto;
bottom: 0;
height: auto !important;
- background: #f3f3f3;
+ background: @overlayBottomBackgroundColor;
.overlay-header-container {
- background: #f3f3f3;
+ background: @overlayBottomBackgroundColor;
}
}
diff --git a/less/common-js.less b/less/common-js.less
index 23147d1..7c964cd 100644
--- a/less/common-js.less
+++ b/less/common-js.less
@@ -2,6 +2,8 @@
@import "minerva.mixins";
@import "mediawiki.mixins.less";
+@progressBarBorderColor: #cacaca;
+
// Asynchronous loading
//
// Use the loading class along with spinner or content class whilst
asynchronously loading content.
@@ -54,7 +56,7 @@
.progress-bar {
width: 100%;
height: .9em;
- border: 1px solid #cacaca;
+ border: 1px solid @progressBarBorderColor;
.value {
width: 0;
diff --git a/less/common.less b/less/common.less
index a8a7679..def5eb2 100644
--- a/less/common.less
+++ b/less/common.less
@@ -2,6 +2,9 @@
@import "minerva.variables.less";
@import "minerva.mixins.less";
+@imageReplacementColor: #706E6E;
+@inputsBoxBorderColor: #e1e1e1;
+
// Reusable components
//
// Styleguide 6.
@@ -37,16 +40,16 @@
.mw-mf-image-replacement {
font-style: italic;
- color: #706E6E;
+ color: @imageReplacementColor;
text-decoration: underline;
- border: dotted 1px #CCC;
+ border: dotted 1px @colorGray12;
padding: 10px;
display: inline-block;
}
.inputs-box {
padding: 1px;
- border: solid 1px #e1e1e1;
+ border: solid 1px @inputsBoxBorderColor;
border-radius: 5px;
background: #fff;
margin: 0 0 .8em;
@@ -54,7 +57,7 @@
input:not([type=submit]), img {
border: none;
- border-top: solid 1px #e1e1e1;
+ border-top: solid 1px @inputsBoxBorderColor;
&:first-child {
border-top: none;
@@ -77,7 +80,7 @@
input:not([type=submit]), textarea {
background: #fff;
- border: 1px solid #ccc;
+ border: 1px solid @colorGray12;
border-radius: 3px;
padding: 5px;
}
diff --git a/less/content/hacks.less b/less/content/hacks.less
index dcd6328..d8a0319 100644
--- a/less/content/hacks.less
+++ b/less/content/hacks.less
@@ -59,7 +59,7 @@
margin-right: 0 !important;
&.infobox {
- background: #f9f9f9;
+ background: @colorGray15;
text-align: center !important;
}
}
diff --git a/less/content/main.less b/less/content/main.less
index 57602b4..f77d2dd 100644
--- a/less/content/main.less
+++ b/less/content/main.less
@@ -1,7 +1,6 @@
@import "minerva.variables";
@import "minerva.mixins";
-
// Content formatting and typography
//
// Our content is predominately text, hence visual hierarchy must be clear.
@@ -16,11 +15,12 @@
@bodyLineHeight: 1.4;
@headingLineHeight: 1.3;
+@tableHeadBackgroundColor: #F2F2F2;
body {
font-family: @fontFamily;
line-height: @bodyLineHeight;
- color: #252525;
+ color: @grayDark;
background: #fff;
}
@@ -113,7 +113,7 @@
}
.thumbborder {
- border: 1px solid #ccc;
+ border: 1px solid @colorGray12;
}
// Full-size images
@@ -202,7 +202,7 @@
th {
font-weight: bold;
- background-color: #f2f2f2;
+ background-color: @tableHeadBackgroundColor;
text-align: center;
}
@@ -331,7 +331,7 @@
pre {
padding: 1em;
font-family: monospace;
- border: solid 1px #CCC;
+ border: solid 1px @colorGray12;
white-space: pre-wrap;
}
diff --git a/less/footer.less b/less/footer.less
index 8f06feb..7784004 100644
--- a/less/footer.less
+++ b/less/footer.less
@@ -9,7 +9,7 @@
#footer {
padding: 2em @contentMargin 1.5em @contentMargin;
margin: 2em auto 0 auto;
- border-top: 1px solid #aaa;
+ border-top: 1px solid @colorGray10;
font-size: 0.9em;
clear: both;
@@ -39,7 +39,7 @@
&.footer-places li {
display: inline;
padding: 0 8px;
- border-right: 1px solid #aaa;
+ border-right: 1px solid @colorGray10;
&:last-child {
border: none;
diff --git a/less/mainmenu.less b/less/mainmenu.less
index af27823..83e34f8 100644
--- a/less/mainmenu.less
+++ b/less/mainmenu.less
@@ -7,6 +7,10 @@
@menuBorder: 12px;
@menuBorderColor: #252525;
+@pageLeftListDarkBorderColor: #3e3e3e;
+@pageLeftListMediumBorderColor: #5C5C5C;
+@pageLeftListLightBorderColor: #717171;
+
#mw-mf-viewport {
position: relative;
height: 100%;
@@ -95,11 +99,11 @@
position: relative; // ensure the logout link in beta can be
position absolute
font-size: 1.2em;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
- border-bottom: 1px solid #3e3e3e;
- border-top: 1px solid #717171;
+ border-bottom: 1px solid @pageLeftListDarkBorderColor;
+ border-top: 1px solid @pageLeftListLightBorderColor;
&:hover {
- background-color: #5C5C5C;
+ background-color: @pageLeftListMediumBorderColor;
border-left: solid @menuBorder #3366BB;
margin-left: -@menuBorder;
}
@@ -112,7 +116,7 @@
bottom: 0;
padding-right: 0;
width: 0; // rely on padding
- border-left: 1px solid #717171;
+ border-left: 1px solid @pageLeftListLightBorderColor;
}
.icon-profile {
@@ -138,7 +142,7 @@
border: none;
a {
- color: #ccc;
+ color: @colorGray12;
border: none;
padding: .7em 12px;
margin-left: 0;
diff --git a/less/modules/NotificationsOverlay.less
b/less/modules/NotificationsOverlay.less
index 6d5e90b..2ffe50b 100644
--- a/less/modules/NotificationsOverlay.less
+++ b/less/modules/NotificationsOverlay.less
@@ -46,13 +46,13 @@
.mw-echo-notification {
padding: 1.2em 1em 1em;
- border-bottom: 1px solid #eee;
+ border-bottom: 1px solid @colorGray14;
// FIXME: ARgghghghg more grays - think of the children!
background: #F8F8F8;
&:hover {
// FIXME: Yet another gray..
- background-color: #F9F9F9;
+ background-color: @colorGray15;
}
}
diff --git a/less/modules/editor/editor.less b/less/modules/editor/editor.less
index 633a208..1700747 100644
--- a/less/modules/editor/editor.less
+++ b/less/modules/editor/editor.less
@@ -35,8 +35,8 @@
.message {
margin: 0 0 .7em;
padding: 0 0 .3em;
- border-bottom: 1px solid #ccc;
- color: #707070;
+ border-bottom: 1px solid @colorGray12;
+ color: @infoColor;
p {
display: inline-block;
diff --git a/less/modules/toc/toc.less b/less/modules/toc/toc.less
index d53885b..e9e7796 100644
--- a/less/modules/toc/toc.less
+++ b/less/modules/toc/toc.less
@@ -9,7 +9,7 @@
.client-js .toc-mobile {
// FIXME: Use predefined colors?
- background-color: #f9f9f9;
+ background-color: @colorGray15;
border: solid 1px @grayLightest;
font-size: 1.3em;
float: left;
diff --git a/less/pageactions.less b/less/pageactions.less
index 88276b5..8ef15d7 100644
--- a/less/pageactions.less
+++ b/less/pageactions.less
@@ -1,6 +1,8 @@
@import "minerva.variables";
@import "minerva.mixins";
+@borderBottomColor: #CACACA;
+
// FIXME: hide in stable till talk code is stable
.mw-mobile-mode.stable #ca-talk,
// hide menu items when not possible to use
@@ -14,13 +16,13 @@
#section_0 {
padding: 12px @contentMargin 7px;
// FIXME: Use a gray defined in variables e.g. @grayMediumLight
- border-bottom: dotted 1px #CACACA;
+ border-bottom: dotted 1px @borderBottomColor;
}
#page-actions {
@verticalMargin: 8px;
// FIXME: Use a gray defined in variables e.g. @grayMediumLight
- border-bottom: solid 1px #CACACA;
+ border-bottom: solid 1px @borderBottomColor;
padding: @verticalMargin @contentMargin @verticalMargin @contentMargin
- 8;
diff --git a/less/pagelist.less b/less/pagelist.less
index 5434f29..ca71e3c 100644
--- a/less/pagelist.less
+++ b/less/pagelist.less
@@ -7,6 +7,7 @@
@thumbSpace: @thumbWidth + @thumbGap;
@thumbOverlayWidth: @searchBarPaddingLeft;
@thumbOverlaySpace: @thumbOverlayWidth + @thumbGap;
+@pageSummaryHeaderColor: #404040;
// Pages
//
@@ -30,7 +31,7 @@
font: inherit;
font-weight: bold;
// FIXME: Use one of the grays defined in variables.less
- color: #404040;
+ color: @pageSummaryHeaderColor;
a {
color: inherit;
}
@@ -75,7 +76,7 @@
overflow: hidden;
li {
- color: #666;
+ color: @colorGray6;
position: relative;
border-bottom: solid 1px @grayLightest;
padding: @itemPaddingV @contentMargin;
@@ -85,13 +86,13 @@
> a {
display: block;
- color: #666;
+ color: @colorGray6;
&:active,
&:hover,
&:visited {
text-decoration: none;
- color: #666;
+ color: @colorGray6;
}
}
}
diff --git a/less/specials/mobilediff.less b/less/specials/mobilediff.less
index 66667df..283b1dc 100644
--- a/less/specials/mobilediff.less
+++ b/less/specials/mobilediff.less
@@ -1,6 +1,10 @@
@import "minerva.variables";
@import "minerva.mixins";
+@userinfoBackgroundColor: #f0f0f0;
+@userinfoBorderColor: #c0c0c0;
+@diffDateColor: #c6c6c6;
+
// FIXME: Not a long term solution (see bug 64607) - footers and position
fixed elements do not play well
#footer {
display: none;
@@ -31,7 +35,7 @@
}
.mw-mf-diff-date {
- color: #c6c6c6;
+ color: @diffDateColor;
}
#mw-mf-diffarea {
@@ -57,8 +61,8 @@
min-height: @userInfoHeight;
width: 100%;
padding: 1em;
- background-color: #f0f0f0;
- border-top: solid 1px #c0c0c0;
+ background-color: @userinfoBackgroundColor;
+ border-top: solid 1px @userinfoBorderColor;
bottom: 0;
left: 0;
right: 0;
@@ -71,14 +75,14 @@
display: inline-block;
text-align: left;
margin-top: 1.2em;
- color: #333;
+ color: @colorGray3;
line-height: 1;
/* the edit count number */
div {
text-align: center;
font-size: 1.85em;
- color: #888;
+ color: @colorGray8;
}
}
}
diff --git a/less/specials/pagefeed.less b/less/specials/pagefeed.less
index 7ff3976..821626d 100644
--- a/less/specials/pagefeed.less
+++ b/less/specials/pagefeed.less
@@ -1,6 +1,10 @@
@import "minerva.variables";
@import "minerva.mixins";
+@pageHeaderBarBorderColor: #e2e2e2;
+@watchlistSelectorBorderColor: #e2e2e2;
+@watchlistSelectorLinkColor: #58595b;
+
// FIXME [mediawiki ui] These rules should not be needed and are specifically
for Watchlist
// This should use another MediaWiki UI widget
.content-header .mw-ui-button-group {
@@ -24,7 +28,7 @@
div {
line-height: 1.5;
padding: 5px 0 0;
- border-bottom: 1px solid #e2e2e2;
+ border-bottom: 1px solid @pageHeaderBarBorderColor;
text-align: center;
}
}
@@ -33,7 +37,7 @@
margin-bottom: -1px;
li {
display: inline-block;
- border-left: 1px solid #e2e2e2;
+ border-left: 1px solid @watchlistSelectorBorderColor;
width: 25%;
margin: 0 0 0 -1px;
border-bottom: none;
@@ -47,7 +51,7 @@
a {
display: block;
- color: #58595b;
+ color: @watchlistSelectorLinkColor;
margin: 0 1px 0 0;
border-bottom: 3px solid transparent;
}
diff --git a/less/specials/search.less b/less/specials/search.less
index d3e810a..71dec88 100644
--- a/less/specials/search.less
+++ b/less/specials/search.less
@@ -1,6 +1,7 @@
@import "minerva.variables";
@import "minerva.mixins";
+@searchResultsDataColor: #535353;
.mobile .searchresults {
ul.mw-search-results {
@@ -10,7 +11,7 @@
.mw-search-result-data {
font-size: 0.7em;
font-style: italic;
- color: #535353;
+ color: @searchResultsDataColor;
margin-left: 12px;
}
diff --git a/less/specials/uploads.less b/less/specials/uploads.less
index 84bf8d9..63b17b3 100644
--- a/less/specials/uploads.less
+++ b/less/specials/uploads.less
@@ -1,6 +1,7 @@
@import "minerva.variables";
@import "minerva.mixins";
+@imageListDescriptionColor: #565656;
.image-list {
margin: 20px @contentMargin 0;
@@ -10,7 +11,7 @@
padding-bottom: 20px;
p { // description
- color: #565656;
+ color: @imageListDescriptionColor;
line-height: 1.2;
}
}
diff --git a/less/specials/userlogin.less b/less/specials/userlogin.less
index d2a8adb..3835a62 100644
--- a/less/specials/userlogin.less
+++ b/less/specials/userlogin.less
@@ -1,6 +1,7 @@
@import "minerva.variables";
@import "minerva.mixins";
+@fancycaptchaReloadColor: #787878;
// This serves no purpose on the login screen as you are not logged in so
cannot use.
#user-button {
@@ -28,9 +29,9 @@
}
.headmsg {
- background-color: #eee;
- border: 1px solid #ccc;
- color: #252525;
+ background-color: @colorGray14;
+ border: 1px solid @colorGray12;
+ color: @grayDark;
padding: 0.5em 1em;
margin: 1em 0;
}
@@ -61,7 +62,7 @@
// FIXME: Make use of icon classes
.fancycaptcha-reload {
- color: #787878;
+ color: @fancycaptchaReloadColor;
font-weight: bold;
background-image: url(images/login/refresh.png);
background-repeat: no-repeat;
diff --git a/less/ui.less b/less/ui.less
index b9a61ee..5bc4c9a 100644
--- a/less/ui.less
+++ b/less/ui.less
@@ -5,6 +5,8 @@
// FIXME: Separate imported folders into a components directory
@import 'mainmenu';
+@topBarBackgroundColor: #F3F3F3;
+
html,
body {
// Ensure overlays take up full screen
@@ -13,12 +15,12 @@
#content_wrapper {
.top-bar {
- background-color: #F3F3F3;
+ background-color: @topBarBackgroundColor;
padding: 5px @contentMargin;
display: block;
- color: #666;
+ color: @colorGray6;
a {
- color: #666;
+ color: @colorGray6;
// If browser supports
&:nth-child(2) {
font-weight: bold;
--
To view, visit https://gerrit.wikimedia.org/r/164488
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I0c8ea46b3d368bf59b50e9859953793708eba1ab
Gerrit-PatchSet: 2
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Bmansurov <[email protected]>
Gerrit-Reviewer: Awjrichards <[email protected]>
Gerrit-Reviewer: JGonera <[email protected]>
Gerrit-Reviewer: Jdlrobson <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
