diff --git a/modules/jquery.wikiEditor.less b/modules/jquery.wikiEditor.less
index b14fb6c5..70e3331d 100644
--- a/modules/jquery.wikiEditor.less
+++ b/modules/jquery.wikiEditor.less
@@ -1,4 +1,5 @@
@import 'mediawiki.mixins';
+@import 'mediawiki.skin.variables.less';
/*
* CSS for WikiEditor jQuery plugin
@@ -23,12 +24,12 @@
}
.wikiEditor-ui-view {
- border: 1px solid #c8ccd1;
+ border: @border-subtle;
}
.wikiEditor-ui-top {
position: relative;
- border-bottom: 1px solid #c8ccd1;
+ border-bottom: @border-subtle;
}
.wikiEditor-ui-left {
@@ -38,7 +39,7 @@
.wikiEditor-ui-right {
float: right;
- background: #f8f9fa;
+ background: @background-color-neutral-subtle;
overflow: hidden;
}
}
@@ -51,37 +52,37 @@
.wikiEditor-ui-controls {
float: left;
width: 100%;
- background-color: #fff;
+ background-color: @background-color-base;
}
.wikiEditor-ui-tabs {
float: left;
height: 2.5em;
margin-right: -1px;
- background-color: #fff;
- border-left: 1px solid #c8ccd1;
- border-top: 1px solid #c8ccd1;
+ background-color: @background-color-base;
+ border-left: @border-subtle;
+ border-top: @border-subtle;
div {
float: left;
height: 2.5em;
- background-color: #f8f9fa;
- border-right: 1px solid #c8ccd1;
- border-bottom: 1px solid #c8ccd1;
+ background-color: @background-color-interactive-subtle;
+ border-right: @border-subtle;
+ border-bottom: @border-subtle;
a {
display: inline-block;
padding: 0 0.75em;
line-height: 2.5em;
- color: #0645ad;
+ color: @color-progressive;
}
&.current {
border-bottom: 1px solid #fff;
- background-color: #fff;
+ background-color: @background-color-base;
a {
- color: #222;
+ color: @color-base;
&:hover {
text-decoration: none;
@@ -95,7 +96,7 @@
float: right;
height: 2.5em;
margin-right: -1px;
- background-color: #fff;
+ background-color: @background-color-base;
padding-left: 1em;
border-top: 1px solid #fff;
diff --git a/modules/jquery.wikiEditor.toolbar-wikimedia.less b/modules/jquery.wikiEditor.toolbar-wikimedia.less
index dbf79fa1..970375aa 100644
--- a/modules/jquery.wikiEditor.toolbar-wikimedia.less
+++ b/modules/jquery.wikiEditor.toolbar-wikimedia.less
@@ -1,17 +1,18 @@
@import 'mediawiki.mixins';
+@import 'mediawiki.skin.variables.less';
/**
* CSS for WikiEditor Toolbar jQuery plugin
*/
.wikiEditor-ui-toolbar {
- background-color: #f8f9fa;
+ background-color: @background-color-neutral-subtle;
box-shadow: 0 2px 1px 0 rgba( 0, 0, 0, 0.1 );
/* Groups */
.group,
.section-secondary .group {
- border-color: #eaecf0;
+ border-color: @border-color-muted;
}
.group {
@@ -48,7 +49,7 @@
box-shadow: 0 2px 2px 0 rgba( 0, 0, 0, 0.25 );
.option:hover {
- background-color: #eaecf0;
+ background-color: @background-color-interactive;
}
}
}
@@ -58,12 +59,12 @@
.booklet {
> .index {
> :hover {
- background-color: #eaecf0;
+ background-color: @background-color-interactive;
}
> .current {
- background-color: #eaf3ff;
- color: #36c;
+ background-color: @background-color-progressive-subtle;
+ color: @color-progressive;
}
}
}
diff --git a/modules/jquery.wikiEditor.toolbar.js b/modules/jquery.wikiEditor.toolbar.js
index 68ac0394..91529426 100644
--- a/modules/jquery.wikiEditor.toolbar.js
+++ b/modules/jquery.wikiEditor.toolbar.js
@@ -399,7 +399,7 @@ var toolbarModule = {
}
}
$select.append( $( '' )
- .addClass( 'label' )
+ .addClass( 'label skin-invert' )
.text( label )
.data( 'options', $options )
.attr( { role: 'button', tabindex: 0, 'aria-expanded': false, 'aria-controls': menuId, 'aria-haspopup': 'menu' } )
@@ -612,6 +612,7 @@ var toolbarModule = {
var $link =
$( '' )
.addClass( selected === id ? 'current' : null )
+ .addClass( 'skin-invert' )
.attr( {
tabindex: 0,
role: 'button',
diff --git a/modules/jquery.wikiEditor.toolbar.less b/modules/jquery.wikiEditor.toolbar.less
index 92b47c62..ee930246 100644
--- a/modules/jquery.wikiEditor.toolbar.less
+++ b/modules/jquery.wikiEditor.toolbar.less
@@ -1,4 +1,5 @@
@import 'mediawiki.mixins';
+@import 'mediawiki.skin.variables.less';
/**
* CSS for WikiEditor Toolbar jQuery plugin
@@ -22,7 +23,7 @@
.section {
float: left;
width: 100%;
- border-top: 1px solid #c8ccd1;
+ border-top: @border-subtle;
}
.section-hidden {
@@ -47,7 +48,7 @@
line-height: 32px;
a {
- color: #0645ad;
+ color: @color-progressive;
cursor: pointer;
display: block;
height: 32px;
@@ -76,12 +77,12 @@
}
a:visited {
- color: #0645ad;
+ color: @color-progressive;
}
a.current,
a.current:visited {
- color: #222;
+ color: @color-base;
&:hover {
text-decoration: none;
@@ -113,7 +114,7 @@
.group {
padding-right: 0;
margin-left: 6px;
- border-left: 1px solid #c8ccd1;
+ border-left: @border-subtle;
}
}
@@ -123,7 +124,7 @@
display: flex;
min-height: 26px;
padding-right: 6px;
- border-right: 1px solid #c8ccd1;
+ border-right: @border-subtle;
margin: 3px;
/* Toolbar */
@@ -134,7 +135,7 @@
/* stylelint-disable-next-line declaration-property-unit-disallowed-list */
line-height: 22px;
margin: 2px 8px 2px 5px;
- color: #54595d;
+ color: @color-subtle;
cursor: default;
}
@@ -152,9 +153,9 @@
margin: 2px 0 2px 2px;
height: 22px;
cursor: pointer;
- border: 1px solid #c8ccd1;
+ border: @border-subtle;
padding: 0;
- background-color: #fff;
+ background-color: @background-color-base;
.label {
position: relative;
@@ -162,7 +163,7 @@
margin: 0;
cursor: pointer;
text-decoration: none;
- color: #222;
+ color: @color-base;
&::after {
content: '';
@@ -185,15 +186,15 @@
display: none;
margin-left: -1px;
margin-top: 22px;
- border: 1px solid #c8ccd1;
- background-color: #fff;
+ border: @border-subtle;
+ background-color: @background-color-base;
z-index: 1;
.option {
display: block;
padding: 0.5em;
text-decoration: none;
- color: #000;
+ color: @color-base;
white-space: nowrap;
&:hover {
@@ -232,7 +233,7 @@
.group-search {
float: right;
border-right: 0;
- border-left: 1px solid #c8ccd1;
+ border-left: @border-subtle;
}
/* Booklet */
@@ -251,7 +252,7 @@
.wikiEditor-character-highlighted {
background-color: rgba( 41, 98, 204, 0.1 );
- color: #000;
+ color: @color-base;
}
}
@@ -273,12 +274,12 @@
}
th {
- color: #54595d;
+ color: @color-subtle;
}
td {
- color: #000;
- border-top: 1px solid #eaecf0;
+ color: @color-base;
+ border-top: @border-subtle;
}
th,
@@ -335,13 +336,13 @@
div {
span {
- border: 1px solid #eaecf0;
+ border: @border-subtle;
padding: 5px 8px;
margin-left: 5px;
margin-top: 5px;
height: 1em;
display: inline-block;
- color: #202122;
+ color: @color-base;
text-decoration: none;
cursor: pointer;
font-family: monospace, 'Courier';
@@ -349,15 +350,15 @@
line-height: 1;
&:hover {
- background-color: #fff;
+ background-color: @background-color-base;
text-decoration: none;
- border-color: #c8ccd1;
+ border-color: @border-color-interactive;
}
}
.wikiEditor-character-highlighted {
background-color: #7db1c5;
- color: #000;
+ color: @color-base;
}
}
@@ -387,7 +388,7 @@
.ui-widget {
table {
td.wikieditor-toolbar-table-preview-wrapper {
- background: #eaecf0;
+ background: @background-color-neutral;
padding: 10px;
span {
@@ -398,7 +399,7 @@
.wikieditor-toolbar-table-preview-frame {
width: 340px;
- background: #fff;
+ background: @background-color-base;
padding: 10px;
overflow: hidden;
display: block;
diff --git a/modules/realtimepreview/ResizingDragBar.less b/modules/realtimepreview/ResizingDragBar.less
index c8b26a86..30290b1c 100644
--- a/modules/realtimepreview/ResizingDragBar.less
+++ b/modules/realtimepreview/ResizingDragBar.less
@@ -6,10 +6,10 @@
// The dimensions of the UI affordance (the little line in the draggable area).
@affordance-width: 4px;
@affordance-length: 52px;
-@background-color-wikieditor-resizing-dragbar: #eaecf0;
-@background-color-wikieditor-resizing-dragbar-ew: #f8f9fa;
-@background-color-wikieditor-resizing-dragbar-drag: #c8ccd1;
-@background-color-wikieditor-resizing-dragbar-drag--hover: #54595d;
+@background-color-wikieditor-resizing-dragbar: @background-color-interactive;
+@background-color-wikieditor-resizing-dragbar-ew: @background-color-interactive-subtle;
+@background-color-wikieditor-resizing-dragbar-drag: @background-color-disabled;
+@background-color-wikieditor-resizing-dragbar-drag--hover: @color-subtle;
.ext-WikiEditor-ResizingDragBar {
background-color: @background-color-wikieditor-resizing-dragbar;