Trevor Parscal has uploaded a new change for review.
https://gerrit.wikimedia.org/r/107984
Change subject: Adjust button styles
......................................................................
Adjust button styles
* Make button groups have a shared shadow instead of individual shadows on each
button
* Make primary and constructive buttons have darker borders
* Make toggle switches blue when active instead of green
Change-Id: I419bb058286955038e9f4b61e4fceba65a3218e4
---
M src/styles/OO.ui.Element.css
M src/styles/OO.ui.Widget.css
2 files changed, 22 insertions(+), 15 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/84/107984/1
diff --git a/src/styles/OO.ui.Element.css b/src/styles/OO.ui.Element.css
index f2a17fa..dd83152 100644
--- a/src/styles/OO.ui.Element.css
+++ b/src/styles/OO.ui.Element.css
@@ -154,7 +154,7 @@
.oo-ui-buttonedElement-framed.oo-ui-flaggableElement-constructive
.oo-ui-buttonedElement-button {
/* Green */
- border: solid 1px #c3e59a;
+ border: solid 1px #b8d892;
background-color: #f0fbe1;
filter: progid:DXImageTransform.Microsoft.gradient(
GradientType=0,startColorstr=#f0fbe1, endColorstr=#c3e59a
@@ -171,13 +171,13 @@
.oo-ui-buttonedElement-framed.oo-ui-flaggableElement-constructive
.oo-ui-buttonedElement-button:hover,
.oo-ui-buttonedElement-framed.oo-ui-flaggableElement-constructive
.oo-ui-buttonedElement-button:focus {
- border-color: #a6cf74;
+ border-color: #adcb89;
}
.oo-ui-buttonedElement-framed.oo-ui-flaggableElement-constructive
.oo-ui-buttonedElement-button:active,
.oo-ui-buttonedElement-framed.oo-ui-buttonedElement-active.oo-ui-flaggableElement-constructive
.oo-ui-buttonedElement-button {
/* Green */
- border: solid 1px #c3e59a;
+ border: solid 1px #b8d892;
background-color: #c3e59a;
filter: progid:DXImageTransform.Microsoft.gradient(
GradientType=0,startColorstr=#c3e59a, endColorstr=#f0fbe1
@@ -194,7 +194,7 @@
.oo-ui-buttonedElement-framed.oo-ui-flaggableElement-primary
.oo-ui-buttonedElement-button {
/* Blue */
- border: solid 1px #b0d9ee;
+ border: solid 1px #a6cee1;
background-color: #eaf4fa;
filter: progid:DXImageTransform.Microsoft.gradient(
GradientType=0,startColorstr=#eaf4fa, endColorstr=#b0d9ee
@@ -211,13 +211,13 @@
.oo-ui-buttonedElement-framed.oo-ui-flaggableElement-primary
.oo-ui-buttonedElement-button:hover,
.oo-ui-buttonedElement-framed.oo-ui-flaggableElement-primary
.oo-ui-buttonedElement-button:focus {
- border-color: #84b9d4;
+ border-color: #9dc2d4;
}
.oo-ui-buttonedElement-framed.oo-ui-flaggableElement-primary
.oo-ui-buttonedElement-button:active,
.oo-ui-buttonedElement-framed.oo-ui-buttonedElement-active.oo-ui-flaggableElement-primary
.oo-ui-buttonedElement-button {
/* Blue */
- border: solid 1px #b0d9ee;
+ border: solid 1px #a6cee1;
background-color: #b0d9ee;
filter: progid:DXImageTransform.Microsoft.gradient(
GradientType=0,startColorstr=#b0d9ee, endColorstr=#eaf4fa
diff --git a/src/styles/OO.ui.Widget.css b/src/styles/OO.ui.Widget.css
index 476df11..4ef0889 100644
--- a/src/styles/OO.ui.Widget.css
+++ b/src/styles/OO.ui.Widget.css
@@ -21,11 +21,15 @@
.oo-ui-buttonGroupWidget {
display: inline-block;
+ border-radius: 0.3em;
+ box-shadow: 0 0.1em 0.25em rgba(0, 0, 0, 0.1);
}
.oo-ui-buttonGroupWidget .oo-ui-buttonedElement-framed
.oo-ui-buttonedElement-button {
border-radius: 0;
+ margin-bottom: -1px;
margin-left: -1px;
+ box-shadow: none;
}
.oo-ui-buttonGroupWidget .oo-ui-buttonedElement-framed:first-child
.oo-ui-buttonedElement-button {
@@ -326,11 +330,14 @@
.oo-ui-buttonSelectWidget {
display: inline-block;
+ border-radius: 0.3em;
+ box-shadow: 0 0.1em 0.25em rgba(0, 0, 0, 0.1);
}
.oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget
.oo-ui-buttonedElement-button {
border-radius: 0;
margin-left: -1px;
+ box-shadow: none;
}
.oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget:first-child
.oo-ui-buttonedElement-button {
@@ -572,19 +579,19 @@
-o-transition: opacity 200ms ease-in-out;
transition: opacity 200ms ease-in-out;
- /* Green */
- background-color: #c3e59a;
+ /* Blue */
+ background-color: #eaf4fa;
filter: progid:DXImageTransform.Microsoft.gradient(
- GradientType=0,startColorstr=#c3e59a, endColorstr=#f0fbe1
+ GradientType=0,startColorstr=#b0d9ee, endColorstr=#eaf4fa
);
background-image: -webkit-gradient(
- linear, right top, right bottom, color-stop(0%,#c3e59a),
color-stop(100%,#f0fbe1)
+ linear, right top, right bottom, color-stop(0%,#b0d9ee),
color-stop(100%,#eaf4fa)
);
- background-image: -webkit-linear-gradient(top, #c3e59a 0%, #f0fbe1
100%);
- background-image: -moz-linear-gradient(top, #c3e59a 0%, #f0fbe1 100%);
- background-image: -ms-linear-gradient(top, #c3e59a 0%, #f0fbe1 100%);
- background-image: -o-linear-gradient(top, #c3e59a 0%, #f0fbe1 100%);
- background-image: linear-gradient(top, #c3e59a 0%, #f0fbe1 100%);
+ background-image: -webkit-linear-gradient(top, #b0d9ee 0%, #eaf4fa
100%);
+ background-image: -moz-linear-gradient(top, #b0d9ee 0%, #eaf4fa 100%);
+ background-image: -ms-linear-gradient(top, #b0d9ee 0%, #eaf4fa 100%);
+ background-image: -o-linear-gradient(top, #b0d9ee 0%, #eaf4fa 100%);
+ background-image: linear-gradient(top, #b0d9ee 0%, #eaf4fa 100%);
}
.oo-ui-toggleWidget-on .oo-ui-toggleSwitchWidget-on {
--
To view, visit https://gerrit.wikimedia.org/r/107984
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I419bb058286955038e9f4b61e4fceba65a3218e4
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Trevor Parscal <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
