Isarra has uploaded a new change for review.
https://gerrit.wikimedia.org/r/223181
Change subject: New button styles for the Apex theme
......................................................................
New button styles for the Apex theme
Bolder colours and smoother gradients with subtle shadows for added
buttoniness. Also trying to clean up the variables a bit.
Unfortunately I have no idea how to actually apply styles for active,
hover, and focussed states for the progressive etc variants, but they'd
work the same as for the base button.
Bug: T100300
Change-Id: I98e4cc6437e4107fc02da40bdd2c81006148f89a
---
M src/styles/common.less
M src/themes/apex/common.less
M src/themes/apex/elements.less
3 files changed, 71 insertions(+), 69 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/81/223181/1
diff --git a/src/styles/common.less b/src/styles/common.less
old mode 100644
new mode 100755
index 16c2df0..3f7ab8a
--- a/src/styles/common.less
+++ b/src/styles/common.less
@@ -67,14 +67,14 @@
box-sizing: @type;
}
-.oo-ui-vertical-gradient( @start: #EEE, @stop: #FFF ) {
+.oo-ui-vertical-gradient( @start: #EEE, @stop: #FFF, @start-pos: 0%,
@stop-pos: 100% ) {
background: mix(@start, @stop, 50%);
filter: e(%("progid:DXImageTransform.Microsoft.gradient(GradientType=0,
startColorstr='%d', endColorstr='%d')", @start, @stop));
- background-image: -webkit-gradient(linear, right top, right bottom,
color-stop(0%, @start), color-stop(100%, @stop));
- background-image: -webkit-linear-gradient( top, @start 0%, @stop
100%);
- background-image: -moz-linear-gradient( top, @start 0%, @stop
100%);
- background-image: -o-linear-gradient( top, @start 0%, @stop
100%);
- background-image: linear-gradient(to bottom, @start 0%, @stop
100%);
+ background-image: -webkit-gradient(linear, right top, right bottom,
color-stop(@start-pos, @start), color-stop(@stop-pos, @stop));
+ background-image: -webkit-linear-gradient( top, @start @start-pos,
@stop @stop-pos);
+ background-image: -moz-linear-gradient( top, @start @start-pos, @stop
1@stop-pos);
+ background-image: -o-linear-gradient( top, @start @start-pos, @stop
@stop-pos);
+ background-image: linear-gradient(to bottom, @start @start-pos, @stop
@stop-pos);
}
.oo-ui-unselectable() {
diff --git a/src/themes/apex/common.less b/src/themes/apex/common.less
old mode 100644
new mode 100755
index 74dd3a3..ed062be
--- a/src/themes/apex/common.less
+++ b/src/themes/apex/common.less
@@ -3,19 +3,26 @@
// Theme variables
-@progressive: #087ecc;
-@constructive: #76ab36;
-@destructive: #d45353;
+@base: #333;
+@progressive: #06a;
+@constructive: #082;
+@destructive: #b11;
-@progressive-gradient-start: #eaf4fa;
-@progressive-gradient-end: #b0d9ee;
-@progressive-border: #a6cee1;
-@progressive-border-selected: #9dc2d4;
+@base-gradient-start: #fff;
+@base-gradient-end: #ddd;
+@base-border: #aaa;
-@constructive-gradient-start: #f0fbe1;
-@constructive-gradient-end: #c3e59a;
-@constructive-border: #b8d892;
-@constructive-border-selected: #adcb89;
+@progressive-gradient-start: #48e;
+@progressive-gradient-end: #36b;
+@progressive-border: #468;
+
+@constructive-gradient-start: #3c8;
+@constructive-gradient-end: #295;
+@constructive-border: #294;
+
+@destructive-gradient-start: #d44;
+@destructive-gradient-end: #a22;
+@destructive-border: #944;
@oo-ui-default-image-path: 'themes/apex/images';
diff --git a/src/themes/apex/elements.less b/src/themes/apex/elements.less
old mode 100644
new mode 100755
index 7d14391..1f33278
--- a/src/themes/apex/elements.less
+++ b/src/themes/apex/elements.less
@@ -4,7 +4,7 @@
.theme-oo-ui-buttonElement () {
> .oo-ui-buttonElement-button {
- color: #333;
+ color: @base;
}
&.oo-ui-iconElement > .oo-ui-buttonElement-button {
@@ -49,7 +49,7 @@
}
> .oo-ui-labelElement-label {
- color: #333;
+ color: @base;
}
}
@@ -64,12 +64,7 @@
// Support <input/> from ButtonInputWidget
> input.oo-ui-buttonElement-button {
padding-left: 0.25em;
- color: #333;
-
- &:hover,
- &:focus {
- color: #000;
- }
+ color: @base;
}
&.oo-ui-flaggedElement {
@@ -99,16 +94,17 @@
&-framed {
> .oo-ui-buttonElement-button {
margin: 0.1em 0;
- padding: 0.2em 0.8em;
+ padding: 0 0.8em;
border-radius: 0.3em;
- text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
- border: 1px #c9c9c9 solid;
+ text-shadow: 0 1px 1px #fff;
+ box-shadow: 0 1px 2px rgba(0,0,0,.1);
+ border: 1px @base-border solid;
.oo-ui-transition(border-color 100ms ease-in-out);
- .oo-ui-vertical-gradient(#fff, #ddd);
+ .oo-ui-vertical-gradient(@base-gradient-start,
@base-gradient-end, 0%, 90%);
&:hover,
&:focus {
- border-color: #aaa;
+ border-color: @base-border;
outline: none;
}
}
@@ -122,10 +118,10 @@
&.oo-ui-widget-enabled > .oo-ui-buttonElement-button:active,
&.oo-ui-buttonElement-active > .oo-ui-buttonElement-button,
&.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button {
- box-shadow: inset 0 1px 4px 0 rgba(0, 0, 0, 0.07);
- color: black;
- border-color: #c9c9c9;
- .oo-ui-vertical-gradient(#ddd, #fff);
+ box-shadow: inset 0 1px 6px 0 rgba(0, 0, 0, 0.2), 0 1px
2px rgba(0,0,0,.07);
+ color: darken(@base,15%);
+ border-color: darken(@base-border,5%);
+ .oo-ui-vertical-gradient(
darken(@base-gradient-start,3%), darken(@base-gradient-end,3%), 0%, 90%);
}
&.oo-ui-iconElement {
@@ -154,46 +150,45 @@
}
&.oo-ui-flaggedElement {
- &-progressive {
- > .oo-ui-buttonElement-button {
- border: 1px solid @progressive-border;
-
.oo-ui-vertical-gradient(@progressive-gradient-start,
@progressive-gradient-end);
-
- &:hover,
- &:focus {
- border-color:
@progressive-border-selected;
- }
- }
-
- &.oo-ui-widget-enabled >
.oo-ui-buttonElement-button:active,
- &.oo-ui-buttonElement-active >
.oo-ui-buttonElement-button,
- &.oo-ui-buttonElement-pressed >
.oo-ui-buttonElement-button {
- border: 1px solid @progressive-border;
-
.oo-ui-vertical-gradient(@progressive-gradient-end,
@progressive-gradient-start);
- }
+ &-progressive > .oo-ui-buttonElement-button {
+ border: 1px solid #49f;
+ color: @progressive;
}
- &-constructive {
- > .oo-ui-buttonElement-button {
- border: 1px solid @constructive-border;
-
.oo-ui-vertical-gradient(@constructive-gradient-start,
@constructive-gradient-end);
-
- &:hover,
- &:focus {
- border-color:
@constructive-border-selected;
- }
- }
-
- &.oo-ui-widget-enabled >
.oo-ui-buttonElement-button:active,
- &.oo-ui-buttonElement-active >
.oo-ui-buttonElement-button,
- &.oo-ui-buttonElement-pressed >
.oo-ui-buttonElement-button {
- border: 1px solid @constructive-border;
-
.oo-ui-vertical-gradient(@constructive-gradient-end,
@constructive-gradient-start);
- }
+ &-constructive > .oo-ui-buttonElement-button {
+ border: 1px solid #2c7;
+ color: @constructive;
}
&-destructive > .oo-ui-buttonElement-button {
+ border: 1px solid #d77;
color: @destructive;
+ }
+
+ &-primary.oo-ui-flaggedElement {
+ &-progressive > .oo-ui-buttonElement-button {
+ border-color: @progressive-border;
+ color: #fff;
+
.oo-ui-vertical-gradient(@progressive-gradient-start,
@progressive-gradient-end, 0%, 90%);
+ text-shadow: 0 -1px 1px #037;
+ box-shadow: 0 1px 3px rgba(0,0,0,.35);
+ }
+
+ &-constructive > .oo-ui-buttonElement-button {
+ border-color: @constructive-border;
+ color: #fff;
+
.oo-ui-vertical-gradient(@constructive-gradient-start,
@constructive-gradient-end, 0%, 90%);
+ text-shadow: 0 -1px 1px #072;
+ box-shadow: 0 1px 3px rgba(0,0,0,.3);
+ }
+
+ &-destructive > .oo-ui-buttonElement-button {
+ border-color: @destructive-border;
+ color: #fff;
+
.oo-ui-vertical-gradient(@destructive-gradient-start,
@destructive-gradient-end, 0%, 90%);
+ text-shadow: 0 -1px 1px #700;
+ box-shadow: 0 1px 3px rgba(0,0,0,.35);
+ }
}
}
@@ -205,7 +200,7 @@
// Opacity causes 1px measurement errors in
Chrome, so force GPU rendering
.oo-ui-force-webkit-gpu();
box-shadow: none;
- color: #333;
+ color: @base;
background: #eee;
border-color: #ccc;
--
To view, visit https://gerrit.wikimedia.org/r/223181
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I98e4cc6437e4107fc02da40bdd2c81006148f89a
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Isarra <zhoris...@gmail.com>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
