mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/WikiEditor
synced 2024-11-24 00:06:49 +00:00
dafd7515b3
Replaces hardcoded CSS colors with Codex design tokens for the purposes of improving dark-mode support. These changes resolves issues where text was illegible in dark-mode (white text on white background). Bug: T367362 Change-Id: I6314c8013839ac1e9a67178be7d1cb4bc45a3321
55 lines
1.5 KiB
Plaintext
55 lines
1.5 KiB
Plaintext
@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: @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;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
&-ns {
|
|
cursor: ns-resize;
|
|
}
|
|
|
|
span {
|
|
width: @affordance-length;
|
|
height: @affordance-width;
|
|
background-color: @background-color-wikieditor-resizing-dragbar-drag;
|
|
border-radius: @border-radius-base;
|
|
display: block;
|
|
margin: 2px;
|
|
}
|
|
|
|
&:hover span {
|
|
background-color: @background-color-wikieditor-resizing-dragbar-drag--hover;
|
|
}
|
|
|
|
&-ew {
|
|
cursor: ew-resize;
|
|
background-color: @background-color-wikieditor-resizing-dragbar-ew;
|
|
|
|
span {
|
|
height: @affordance-length;
|
|
width: @affordance-width;
|
|
border-width: 0 @border-width-base;
|
|
}
|
|
}
|
|
}
|
|
|
|
// This is needed to make the CodeMirror editor height constrained to .wikiEditor-ui-text
|
|
// This only is needed when the ResizingDragBar is enabled.
|
|
.cm-editor {
|
|
// stylelint-disable-next-line declaration-no-important
|
|
height: 100% !important;
|
|
}
|