VolkerE has uploaded a new change for review.
https://gerrit.wikimedia.org/r/263656
Change subject: MediaWiki theme: Clarify `@background` var by renaming it
......................................................................
MediaWiki theme: Clarify `@background` var by renaming it
Clarifying `@background` Less variable by renaming it aligned to
guidelines. Additionally introducing `@color-default-light` for light on
dark background text and `@box-shadow-light-inset`.
Change-Id: If37c47cbcffec09ba963c996ee533ea683412248
---
M src/themes/mediawiki/common.less
M src/themes/mediawiki/elements.less
M src/themes/mediawiki/widgets.less
3 files changed, 27 insertions(+), 25 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/56/263656/1
diff --git a/src/themes/mediawiki/common.less b/src/themes/mediawiki/common.less
index cb9600a..0c64be4 100644
--- a/src/themes/mediawiki/common.less
+++ b/src/themes/mediawiki/common.less
@@ -3,7 +3,7 @@
// Theme variables
-@background: #fff;
+@background-color-default: #fff;
@background-color-active: #999;
@background-color-selected: #d8e6fe;
@@ -26,6 +26,7 @@
@color-default: #555;
@color-default-pressed: #444;
@background-color-pressed: #d0d0d0;
+@color-default-light: #fff;
@background-color-disabled: #ddd;
@color-disabled: #ccc;
@@ -51,6 +52,7 @@
@box-shadow-dialog: 0 0.15em 0 0 rgba( 0, 0, 0, 0.15 );
@box-shadow-menu: @box-shadow-dialog;
@box-shadow-popup: @box-shadow-dialog;
+@box-shadow-light-inset: inset 0 0 0 1px @color-default-light;
@icon-size: unit( 24 / 16 / 0.8, em );
@indicator-size: unit( 12 / 16 / 0.8, em );
diff --git a/src/themes/mediawiki/elements.less
b/src/themes/mediawiki/elements.less
index b02d86c..922828d 100644
--- a/src/themes/mediawiki/elements.less
+++ b/src/themes/mediawiki/elements.less
@@ -170,13 +170,13 @@
}
&.oo-ui-widget-enabled {
- > .oo-ui-buttonElement-button {
+ & > .oo-ui-buttonElement-button {
color: @color-default;
- background-color: @background;
+ background-color: @background-color-default;
border: @border-button-neutral;
&:hover {
- background-color:
darken(@background,8%);
+ background-color: darken(
@background-color-default, 8% );
}
&:focus {
@@ -186,8 +186,8 @@
& > .oo-ui-buttonElement-button:active,
&.oo-ui-buttonElement-pressed >
.oo-ui-buttonElement-button {
- background-color: darken(@background,15%);
- border-color: darken(@background,15%);
+ background-color: darken(
@background-color-default, 15% );
+ border-color: darken(
@background-color-default, 15% );
box-shadow: none;
}
@@ -281,7 +281,7 @@
.mediawiki-framed-primary-button-colored( @neutral, @hover, @pressed ) {
> .oo-ui-buttonElement-button {
- color: @background;
+ color: @color-default-light;
background-color: @neutral;
border-color: @neutral;
@@ -291,7 +291,7 @@
}
&:focus {
- box-shadow: inset 0 0 0 1px @background;
+ box-shadow: @box-shadow-light-inset;
border-color: @neutral;
}
}
@@ -299,7 +299,7 @@
&.oo-ui-widget-enabled {
> .oo-ui-buttonElement-button:active,
&.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button {
- color: @background;
+ color: @color-default-light;
background-color: @pressed;
border-color: @pressed;
box-shadow: none;
diff --git a/src/themes/mediawiki/widgets.less
b/src/themes/mediawiki/widgets.less
index e8e8124..4a11796 100644
--- a/src/themes/mediawiki/widgets.less
+++ b/src/themes/mediawiki/widgets.less
@@ -4,7 +4,7 @@
.theme-oo-ui-outlineControlsWidget () {
height: 3em;
- background-color: @background;
+ background-color: @background-color-default;
&-items,
&-movers {
@@ -100,7 +100,7 @@
.theme-oo-ui-dropdownWidget () {
width: 100%;
max-width: 50em;
- background-color: @background;
+ background-color: @background-color-default;
.oo-ui-inline-spacing(0.5em);
@@ -186,7 +186,7 @@
&-info {
height: 2.4em;
- background-color: @background;
+ background-color: @background-color-default;
border: 1px solid #ccc;
border-radius: @border-radius-default;
@@ -305,7 +305,7 @@
&-dropTarget {
line-height: 3.5em;
- background-color: @background;
+ background-color: @background-color-default;
border: 1px dashed #ccc;
padding: 0.5em 1em;
margin-bottom: 0.5em;
@@ -428,7 +428,7 @@
max-width: 50em;
select {
- background-color: @background;
+ background-color: @background-color-default;
height: 2.275em;
font-size: inherit;
font-family: inherit;
@@ -556,7 +556,7 @@
margin: 0;
font-size: inherit;
font-family: inherit;
- background-color: @background;
+ background-color: @background-color-default;
color: black;
border: 1px solid #ccc;
box-shadow: inset 0 0 0 0 @progressive;
@@ -694,7 +694,7 @@
max-width: 50em;
&-handle {
- background-color: @background;
+ background-color: @background-color-default;
cursor: text;
min-height: 2.4em;
@@ -1034,14 +1034,14 @@
.oo-ui-selectWidget-pressed &.oo-ui-optionWidget-selected,
.oo-ui-selectWidget-depressed &.oo-ui-optionWidget-selected,
&.oo-ui-optionWidget-selected:hover {
- background-color: @background;
+ background-color: @background-color-default;
color: #333;
}
}
.theme-oo-ui-popupWidget () {
&-popup {
- background-color: @background;
+ background-color: @background-color-default;
border: 1px solid #aaa;
border-radius: @border-radius-default;
box-shadow: @box-shadow-popup;
@@ -1152,7 +1152,7 @@
.theme-oo-ui-radioSelectWidget () {}
.theme-oo-ui-menuSelectWidget () {
- background-color: @background;
+ background-color: @background-color-default;
margin-top: -1px;
border: 1px solid #aaa;
border-radius: 0 0 @border-radius-default @border-radius-default;
@@ -1197,7 +1197,7 @@
width: @travelDistance + 2em;
border: 1px solid @input-border-color;
border-radius: 1em;
- background-color: @background;
+ background-color: @background-color-default;
.oo-ui-inline-spacing( 0.5em );
.oo-ui-transition(
background-color @transition-ease-quick,
@@ -1249,11 +1249,11 @@
&.oo-ui-widget-enabled {
&.oo-ui-toggleWidget-on {
- background: @progressive;
+ background-color: @progressive;
border-color: @progressive;
.oo-ui-toggleSwitchWidget-grip {
- background: @background;
+ background-color: @background-color-default;
box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.1 );
}
}
@@ -1261,7 +1261,7 @@
border-color: @progressive-hover;
&.oo-ui-toggleWidget-on {
- background: @progressive-hover;
+ background-color: @progressive-hover;
border-color: @progressive-hover;
}
}
@@ -1283,7 +1283,7 @@
border-color: @progressive;
.oo-ui-toggleSwitchWidget-grip {
- background: @background;
+ background-color: @background-color-default;
box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.1 );
}
}
@@ -1302,7 +1302,7 @@
.theme-oo-ui-progressBarWidget () {
max-width: 50em;
- background-color: @background;
+ background-color: @background-color-default;
border: 1px solid #ccc;
border-radius: @border-radius-default;
overflow: hidden;
--
To view, visit https://gerrit.wikimedia.org/r/263656
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: If37c47cbcffec09ba963c996ee533ea683412248
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: VolkerE <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
