mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/WikiEditor
synced 2024-11-27 17:50:44 +00:00
Merge "styles: Replace 'mediawiki.ui/variables' call with skin variables"
This commit is contained in:
commit
bc7a740b5f
|
@ -13,7 +13,7 @@
|
|||
"license-name": "GPL-2.0-or-later",
|
||||
"type": "editor",
|
||||
"requires": {
|
||||
"MediaWiki": ">= 1.39.0"
|
||||
"MediaWiki": ">= 1.41.0"
|
||||
},
|
||||
"MessagesDirs": {
|
||||
"WikiEditor": [
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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 );
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in a new issue