MediaWiki:Vector.less/sourceeditor.less
Jump to navigation
Jump to search
/* =============================
Source editor
============================== */
// repurposed from [[MediaWiki:Vector-darkmode.less/sourceeditor.less]]
// Add border to top and middle boxes
.wikiEditor-ui {
.wikiEditor-ui-view,
.wikiEditor-ui-top {
border-color: var(--sourceeditor-border);
}
}
// Toolbar: Very first bar at the top
.wikiEditor-ui-toolbar {
background-color: var(--sourceeditor-background);
/* comment out until we figure out a decent ooui
// What are these elements??
.oo-ui-popupToolGroup-handle:hover,
.oo-ui-popupToolGroup.oo-ui-popupToolGroup-active > .oo-ui-popupToolGroup-handle {
background-color: @dark-wikitable-background-lighter;
}
// When clicking the crayon, new menu, customize
.oo-ui-toolGroup-tools.oo-ui-clippableElement-clippable {
border-color: @dark-wikitable-border;
background-color: @dark-wikitable-background;
// Main element
.oo-ui-tool-name-editModeVisual {
background-color: @dark-wikitable-background;
&:hover {
background-color: @dark-wikitable-background-lighter;
}
}
// Source button
.oo-ui-tool-name-editModeSource {
background-color: @dark-wikitable-background-lighter;
.oo-ui-tool-title {
color: @dark-links-lighter;
}
}
} */
.tabs {
// Some links were hard-coded
span.tab > a,
span.tab > a:visited {
color: var(--link-color);
}
// Hardcoded text colour
span.tab a {
&.current,
&.current:visited {
color: var(--text-colour);
}
}
}
/*
Button colors
*/
// Border between the buttons
.group {
border-color: var(--sourceeditor-border);
// "Heading" dropdown menu in advanced toolbar
.tool-select {
background-color: var(--sourceeditor-background);
border-color: var(--sourceeditor-border);
.options {
border-color: var(--sourceeditor-border);
background-color: var(--body-main);
.option {
color: var(--link-color);
}
}
.menu .options .option:hover {
background-color: var(--ooui-normal--hover);
}
}
}
.group-search {
border-left-color: var(--body-mid);
}
.page-table {
td {
border-color: var(--body-mid);
color: var(--text-color);
}
th {
color: var(--text-color);
}
}
/*
Normal editor button colors
*/
// Advanced tab
.sections {
// border above the box
.section {
border-color: var(--body-mid);
}
// Specifically the advanced tab
.toolbar {
// "Format" and "Insert" labels
.group > .label {
color: var(--text-color);
}
// "Heading" label text
.tool > .label {
color: var(--text-color);
}
}
}
// Special characters and help tabs
.booklet {
// Hovered item in list
> .index > :hover {
background-color: var(--body-mid);
color: var(--text-color);
}
.index > .current {
background-color: var(--body-mid);
color: var(--link-color);
}
}
// Text inside the button/characters
.page-characters div span {
border-color: var(--body-mid);
color: var(--text-color);
// On hover of those characters
&:hover {
border-color: var(--body-dark);
background-color: transparent;
}
}
}
// changing arrow on tabs and "Heading" to use masking
.wikiEditor-ui-toolbar .tabs span.tab a:before,
.wikiEditor-ui-toolbar .group .tool-select .label:after {
background: var(--text-color);
-webkit-mask: var(--arrow-down) center no-repeat; // chrome support
mask: var(--arrow-down) center no-repeat;
}
/* --------------------------
ACE EDITOR
-------------------------- */
// highlighter
.ace-tm {
background-color: var(--sourceeditor-input-background);
color: var(--text-color);
// Numbers
.ace_gutter {
background: var(--body-mid);
color: var(--text-color);
&-cell {
color: var(--text-color);
}
}
.ace_gutter-active-line {
background-color: var(--body-light);
}
}
// Search & Replace
.ace_search {
background-color: var(--body-light);
color: var(--text-color);
border-color: var(--body-mid);
}
// input
.ace_search_field {
background-color: var(--ooui-input);
color: var(--ooui-text);
border-color: var(--ooui-input-border);
}
// buttons beside input
.ace_searchbtn {
border-color: var(--ooui-normal-border);
background-color: var(--ooui-normal);
color: var(--ooui-text);
&:last-child {
border-color: var(--ooui-normal-border);
}
&:hover {
background-color: var(--ooui-normal--hover);
}
// < > arrows
&.prev:after,
&.next:after {
border-color: var(--ooui-text);
}
}
// search buttons
.ace_button {
color: var(--text-color);
&:hover {
// same as sourceeditor toolbar
background-color: rgba(0, 23, 70, 0.086);
}
&:active {
background-color: rgba(0, 23, 70, 0.06);
}
&.checked {
border-color: var(--ooui-accent)
}
}
/* ---------------------------
CodeMirror adjustments
--------------------------- */
// same as no syntaxhighlight
.CodeMirror {
background: var(--sourceeditor-input-background);
// text color
pre {
color: var(--text-color);
}
}
// Status bar under text box in the middle
.codeEditor-status {
border-color: var(--sourceeditor-border);
background-color: var(--sourceeditor-background);
}
.codeEditor-status-message {
border-color: var(--sourceeditor-border);
}
.CodeMirror-gutters {
background-color: var(--codemirror-gutter-background);
border-color: var(--sourceeditor-border);
}
.CodeMirror-linenumber {
color: var(--text-color);
}
// VE source editor
.ve-init-mw-desktopArticleTarget .CodeMirror-linenumber {
color: var(--byline-color);
}
/* ===========================
source editor without
CodeMirror turned on
=========================== */
.mw-editform #wpTextbox1 {
color: var(--text-color);
background: var(--sourceeditor-input-background);
border-color: var(--sourceeditor-border);
}