[MediaWiki-commits] [Gerrit] wikimedia/portals[master]: Align leftover colors to overhauled color palette

2016-12-05 Thread jenkins-bot (Code Review) 
jenkins-bot has submitted this change and it was merged.

Change subject: Align leftover colors to overhauled color palette
..


Align leftover colors to overhauled color palette

Aligning several colors to overhauled color palette, that
were left behind so far. Also making better use of WikimediaUI Base
variables.

Bug: T146231
Change-Id: I8a0ac44228d86c520cd5892b06496881f42d049e
---
M dev/wikipedia.org/assets/postcss/_forms.css
M dev/wikipedia.org/assets/postcss/_lang-dropdown.css
M dev/wikipedia.org/assets/postcss/_search-box.css
M dev/wikipedia.org/assets/postcss/_vars.css
4 files changed, 21 insertions(+), 26 deletions(-)

Approvals:
  JGirault: Looks good to me, approved
  jenkins-bot: Verified



diff --git a/dev/wikipedia.org/assets/postcss/_forms.css 
b/dev/wikipedia.org/assets/postcss/_forms.css
index f92929a..013691e 100644
--- a/dev/wikipedia.org/assets/postcss/_forms.css
+++ b/dev/wikipedia.org/assets/postcss/_forms.css
@@ -28,15 +28,16 @@
 .pure-form input[type="color"],
 .pure-form select,
 .pure-form textarea {
-padding: 0.5em;
+background-color: var( --background-color-base );
 display: inline-block;
-border: 1px solid #ccc;
-box-shadow: inset 0 0 0 0 rgb( 52, 123, 255 );
-border-radius: 0.1em;
-vertical-align: middle;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
+border: var( --border-base );
+border-radius: var( --border-radius-base );
+padding: 0.5em;
+box-shadow: inset 0 0 0 1px var( --background-color-base );
+vertical-align: middle;
 }
 
 /*
@@ -46,8 +47,7 @@
 .pure-form input:not( [type] ) {
 padding: 0.5em 0.6em;
 display: inline-block;
-border: 1px solid #ccc;
-box-shadow: inset 0 1px 3px #ddd;
+border: var( --border-base );
 border-radius: 4px;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
@@ -78,7 +78,7 @@
 .pure-form textarea:focus {
 outline: 0;
 border-color: var( --color-primary );
-box-shadow: inset 0 0 0 0.1em var( --color-primary );
+box-shadow: var( --box-shadow-base--focus );
 }
 
 /*
@@ -118,9 +118,9 @@
 .pure-form input[type="color"][disabled],
 .pure-form select[disabled],
 .pure-form textarea[disabled] {
-cursor: not-allowed;
+cursor: var( --cursor-base--disabled );
 background-color: #eaeded;
-color: #cad2d3;
+color: var( --color-base--disabled );
 }
 
 /*
@@ -128,7 +128,7 @@
 since IE8 won't execute CSS that contains a CSS3 selector.
 */
 .pure-form input:not([type])[disabled] {
-cursor: not-allowed;
+cursor: var( --cursor-base--disabled );
 background-color: #eaeded;
 color: #cad2d3;
 }
@@ -154,7 +154,7 @@
 .pure-form select {
 /* Normalizes the height; padding is not sufficient. */
 height: 2.25em;
-border: 1px solid #ccc;
+border: var( --border-base );
 background-color: #fff;
 }
 .pure-form select[multiple] {
@@ -173,8 +173,7 @@
 width: 100%;
 padding: 0.3em 0;
 margin-bottom: 0.3em;
-color: #333;
-border-bottom: 1px solid #e5e5e5;
+color: var( --color-base );
 }
 
 .pure-form-stacked input[type="text"],
diff --git a/dev/wikipedia.org/assets/postcss/_lang-dropdown.css 
b/dev/wikipedia.org/assets/postcss/_lang-dropdown.css
index ea9c58e..c07db7e 100644
--- a/dev/wikipedia.org/assets/postcss/_lang-dropdown.css
+++ b/dev/wikipedia.org/assets/postcss/_lang-dropdown.css
@@ -8,7 +8,7 @@
 */
 
 hr {
-border-color: #ccc;
+border-color: var( --border-color-heading );
 }
 
 .lang-list-container {
@@ -18,7 +18,7 @@
 overflow: hidden;
 max-height: 0;
 width: 80%;
-background-color: var( --ss-c-grey-hover );
+background-color: var( --background-color-framed );
 transition: max-height 0.5s ease-out, visibility 0.5s ease-in 1s;
 }
 
@@ -54,10 +54,9 @@
 z-index: 1;
 background-color: var( --background-color-framed );
 border: var( --border-base );
-border-radius: 2px;
+border-radius: var( --border-radius-base );
 outline: 1rem solid #fff;
-transition: outline-width 0.05s ease-in;
-transition-delay: 0.5s;
+transition: outline-width 0.05s ease-in 0.5s;
 }
 
 .lang-list-button:hover {
@@ -99,9 +98,8 @@
 max-width: 460px;
 width: 80%;
 height: 1px;
-background-color: #c8ccd1;
-transition: max-width 0.2s ease-out;
-transition-delay: 0.4s;
+background-color: var( --border-color-heading );
+transition: max-width 0.2s ease-out 0.4s;
 }
 
 .lang-list-active .lang-list-border {
@@ -138,11 +136,11 @@
 .bookshelf {
 text-align: center;
 white-space: normal;
-border-top: 1px solid #ddd;
+border-top: 1px solid var( --border-color-heading );
 box-shadow: 0 -1px 0 #fff;
 }
 .bookshelf span {
-background-color: var( --ss-c-grey-hover );
+background-color: var( --background-color-framed );
 position: relative;
 top: -0.7rem;
 font-weight:

[MediaWiki-commits] [Gerrit] wikimedia/portals[master]: Align leftover colors to overhauled color palette

2016-12-02 Thread VolkerE (Code Review) 
VolkerE has uploaded a new change for review.

  https://gerrit.wikimedia.org/r/325057

Change subject: Align leftover colors to overhauled color palette
..

Align leftover colors to overhauled color palette

Aligning several colors to overhauled color palette, that
were left behind so far. Also making better use of WikimediaUI Base
variables.

Bug: T146231
Change-Id: I8a0ac44228d86c520cd5892b06496881f42d049e
---
M dev/wikipedia.org/assets/postcss/_forms.css
M dev/wikipedia.org/assets/postcss/_lang-dropdown.css
M dev/wikipedia.org/assets/postcss/_search-box.css
M dev/wikipedia.org/assets/postcss/_vars.css
4 files changed, 21 insertions(+), 26 deletions(-)


  git pull ssh://gerrit.wikimedia.org:29418/wikimedia/portals 
refs/changes/57/325057/1

diff --git a/dev/wikipedia.org/assets/postcss/_forms.css 
b/dev/wikipedia.org/assets/postcss/_forms.css
index f92929a..013691e 100644
--- a/dev/wikipedia.org/assets/postcss/_forms.css
+++ b/dev/wikipedia.org/assets/postcss/_forms.css
@@ -28,15 +28,16 @@
 .pure-form input[type="color"],
 .pure-form select,
 .pure-form textarea {
-padding: 0.5em;
+background-color: var( --background-color-base );
 display: inline-block;
-border: 1px solid #ccc;
-box-shadow: inset 0 0 0 0 rgb( 52, 123, 255 );
-border-radius: 0.1em;
-vertical-align: middle;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
+border: var( --border-base );
+border-radius: var( --border-radius-base );
+padding: 0.5em;
+box-shadow: inset 0 0 0 1px var( --background-color-base );
+vertical-align: middle;
 }
 
 /*
@@ -46,8 +47,7 @@
 .pure-form input:not( [type] ) {
 padding: 0.5em 0.6em;
 display: inline-block;
-border: 1px solid #ccc;
-box-shadow: inset 0 1px 3px #ddd;
+border: var( --border-base );
 border-radius: 4px;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
@@ -78,7 +78,7 @@
 .pure-form textarea:focus {
 outline: 0;
 border-color: var( --color-primary );
-box-shadow: inset 0 0 0 0.1em var( --color-primary );
+box-shadow: var( --box-shadow-base--focus );
 }
 
 /*
@@ -118,9 +118,9 @@
 .pure-form input[type="color"][disabled],
 .pure-form select[disabled],
 .pure-form textarea[disabled] {
-cursor: not-allowed;
+cursor: var( --cursor-base--disabled );
 background-color: #eaeded;
-color: #cad2d3;
+color: var( --color-base--disabled );
 }
 
 /*
@@ -128,7 +128,7 @@
 since IE8 won't execute CSS that contains a CSS3 selector.
 */
 .pure-form input:not([type])[disabled] {
-cursor: not-allowed;
+cursor: var( --cursor-base--disabled );
 background-color: #eaeded;
 color: #cad2d3;
 }
@@ -154,7 +154,7 @@
 .pure-form select {
 /* Normalizes the height; padding is not sufficient. */
 height: 2.25em;
-border: 1px solid #ccc;
+border: var( --border-base );
 background-color: #fff;
 }
 .pure-form select[multiple] {
@@ -173,8 +173,7 @@
 width: 100%;
 padding: 0.3em 0;
 margin-bottom: 0.3em;
-color: #333;
-border-bottom: 1px solid #e5e5e5;
+color: var( --color-base );
 }
 
 .pure-form-stacked input[type="text"],
diff --git a/dev/wikipedia.org/assets/postcss/_lang-dropdown.css 
b/dev/wikipedia.org/assets/postcss/_lang-dropdown.css
index 5269b19..529dffd 100644
--- a/dev/wikipedia.org/assets/postcss/_lang-dropdown.css
+++ b/dev/wikipedia.org/assets/postcss/_lang-dropdown.css
@@ -8,7 +8,7 @@
 */
 
 hr {
-border-color: #ccc;
+border-color: var( --border-color-heading );
 }
 
 .lang-list-container {
@@ -18,7 +18,7 @@
 overflow: hidden;
 max-height: 0;
 width: 80%;
-background-color: var( --ss-c-grey-hover );
+background-color: var( --background-color-framed );
 transition: max-height 0.5s ease-out, visibility 0.5s ease-in 1s;
 }
 
@@ -54,10 +54,9 @@
 z-index: 1;
 background-color: var( --background-color-framed );
 border: var( --border-base );
-border-radius: 2px;
+border-radius: var( --border-radius-base );
 outline: 1rem solid #fff;
-transition: outline-width 0.05s ease-in;
-transition-delay: 0.5s;
+transition: outline-width 0.05s ease-in 0.5s;
 }
 
 .lang-list-button:hover {
@@ -99,9 +98,8 @@
 max-width: 460px;
 width: 80%;
 height: 1px;
-background-color: #c8ccd1;
-transition: max-width 0.2s ease-out;
-transition-delay: 0.4s;
+background-color: var( --border-color-heading );
+transition: max-width 0.2s ease-out 0.4s;
 }
 
 .lang-list-active .lang-list-border {
@@ -138,11 +136,11 @@
 .bookshelf {
 text-align: center;
 white-space: normal;
-border-top: 1px solid #ddd;
+border-top: 1px solid var( --border-color-heading );
 box-shadow: 0 -1px 0 #fff;
 }
 .bookshelf span {
-background-color: var( --ss-c-grey-hover );
+background-color: var( --background-color-framed );
 position: relative;