Merge "styles: Replace 'mediawiki.ui/variables' call with skin variables"

This commit is contained in:
jenkins-bot 2023-03-29 15:38:31 +00:00 committed by Gerrit Code Review
commit bc7a740b5f
7 changed files with 49 additions and 36 deletions

View file

@ -13,7 +13,7 @@
"license-name": "GPL-2.0-or-later",
"type": "editor",
"requires": {
"MediaWiki": ">= 1.39.0"
"MediaWiki": ">= 1.41.0"
},
"MessagesDirs": {
"WikiEditor": [

View file

@ -1,6 +1,6 @@
@import 'mediawiki.ui/variables.less';
@import 'mediawiki.skin.variables.less';
.mw-wikiEditor-InsertLink-TitleInputField .oo-ui-messageWidget {
color: @color-base--subtle;
font-weight: normal;
color: @color-subtle;
font-weight: @font-weight-normal;
}

View file

@ -1,11 +1,13 @@
@import 'mediawiki.ui/variables.less';
@import 'mediawiki.skin.variables.less';
.ext-WikiEditor-realtimepreview-ErrorLayout {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
background-color: @colorGray15;
// TODO: Currently, `#f8f9fa` is only available as `@background-color-interactive-subtle`,
// which would be wrongly applied here. Revisit with appropriate Codex token.
background-color: #f8f9fa;
height: 100%;
width: 100%;
text-align: center;

View file

@ -1,13 +1,15 @@
@import 'mediawiki.ui/variables';
@import 'mediawiki.skin.variables.less';
.ext-WikiEditor-ManualWidget {
background-color: @colorGray14;
// TODO: The only background-color token carrying `#eaecf0` right now is
// `@background-color-interactive`, which shouldn't be used here.
background-color: #eaecf0;
display: flex;
align-items: center;
justify-content: space-between;
border-color: @colorGray12;
border-width: 1px 0;
border-style: solid;
border-color: @border-color-subtle;
border-width: @border-width-base 0;
border-style: @border-style-base;
padding: 14px 24px;
position: relative;
color: inherit;
@ -23,12 +25,12 @@
.ext-WikiEditor-realtimepreview-manual-reload {
margin-left: auto;
font-weight: bolder;
color: @color-primary;
font-weight: @font-weight-bold;
color: @color-progressive;
}
&.oo-ui-widget-disabled .ext-WikiEditor-realtimepreview-manual-reload {
color: @colorDisabledText;
color: @color-disabled;
}
&.oo-ui-widget-disabled:active {

View file

@ -1,11 +1,11 @@
@import 'mediawiki.ui/variables.less';
@import 'mediawiki.skin.variables.less';
.ext-WikiEditor-realtimepreview-button:hover {
background-color: @colorGray14;
background-color: @background-color-interactive;
}
.ext-WikiEditor-realtimepreview-button.oo-ui-toggleWidget-on .oo-ui-labelElement-label {
color: @color-primary;
color: @color-progressive;
}
/* stylelint-disable selector-max-id */
@ -27,10 +27,10 @@
}
.ext-WikiEditor-ResizingDragBar-ns {
border-top: 1px solid @colorGray12;
border-top: @border-width-base @border-style-base @border-color-subtle;
}
@loadingbar-width: 20%;
@width-loading-bar: 20%;
.ext-WikiEditor-realtimepreview-loadingbar div {
position: absolute;
@ -38,22 +38,22 @@
display: block;
opacity: 1;
content: ' ';
background-color: @color-primary;
width: @loadingbar-width;
background-color: @background-color-progressive;
width: @width-loading-bar;
height: 4px;
// Hide the loading bar to start with; it'll be shown if the loading state persists for more than 1s.
visibility: hidden;
animation: loadingbar 1.5s 1s infinite linear alternate;
animation: loading-bar 1.5s 1s infinite linear alternate;
}
@keyframes loadingbar {
@keyframes loading-bar {
0% {
visibility: visible;
left: 0;
}
100% {
left: calc( 100% - @loadingbar-width );
left: calc( 100% - @width-loading-bar );
}
}

View file

@ -1,11 +1,18 @@
@import 'mediawiki.ui/variables.less';
@import 'mediawiki.skin.variables.less';
// TODO: Replace static color values as soon as a drag bar and its design tokens
// have been defined in Codex.
// 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;
.ext-WikiEditor-ResizingDragBar {
background-color: @colorGray14;
background-color: @background-color-wikieditor-resizing-dragbar;
display: flex;
align-items: center;
justify-content: center;
@ -17,24 +24,24 @@
.ext-WikiEditor-ResizingDragBar-ew {
cursor: ew-resize;
background-color: @colorGray15;
background-color: @background-color-wikieditor-resizing-dragbar-ew;
}
.ext-WikiEditor-ResizingDragBar span {
width: @affordance-length;
height: @affordance-width;
background-color: @colorGray12;
border-radius: 2px;
background-color: @background-color-wikieditor-resizing-dragbar-drag;
border-radius: @border-radius-base;
display: block;
margin: 2px;
}
.ext-WikiEditor-ResizingDragBar:hover span {
background-color: @colorGray5;
background-color: @background-color-wikieditor-resizing-dragbar-drag--hover;
}
.ext-WikiEditor-ResizingDragBar-ew span {
height: @affordance-length;
width: @affordance-width;
border-width: 0 1px;
border-width: 0 @border-width-base;
}

View file

@ -1,19 +1,21 @@
@import 'mediawiki.ui/variables.less';
@import 'mediawiki.skin.variables.less';
.ext-WikiEditor-twopanes-TwoPaneLayout {
display: flex;
.ext-WikiEditor-twopanes-pane1 {
border: 1px solid @colorGray12;
border-width: 0 1px 0 0;
border-color: @border-color-subtle;
border-style: @border-style-base;
border-width: 0 @border-width-base 0 0;
// Offset by half the difference in padding and the UI affordance.
width: ~'calc( 50% - 9px )';
}
.ext-WikiEditor-twopanes-pane2 {
position: relative;
border: 1px solid @colorGray12;
border-width: 0 0 0 1px;
border-color: @border-color-subtle;
border-style: @border-style-base;
border-width: 0 0 0 @border-width-base;
flex: 1 1 0;
padding: 0;
display: flex;