Alex: Created page with "/* ============================= 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 de..."

2024-10-16T23:11:32Z

Created page with "============================= 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 de..."

New page

/* =============================
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,
.section-secondary .group {
border-color: var(--sourceeditor-border);
}

.group {
// "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;
}

// resize drag bar (thats what it says)
.ext-WikiEditor {
&-ResizingDragBar {
&,
&-ew {
background-color: var(--sourceeditor-background-secondary);
}

&-ns {
border-color: var(--sourceeditor-border);
}

span {
background-color: var(--byline-color);

&:hover {
background-color: var(--text-color);
}
}
}

&-twopanes-TwoPaneLayout .ext-WikiEditor-twopanes-pane1,
&-twopanes-TwoPaneLayout .ext-WikiEditor-twopanes-pane2 {
border-color: var(--sourceeditor-border);
}

// realtime preview
&-realtimepreview {
&-loadingbar div {
background-color: var(--ooui-accent);
}

&-button {
&:hover {
background-color: var(--ooui-normal--hover);
}

&.oo-ui-toggleWidget-on .oo-ui-labelElement-label {
color: var(--ooui-accent);
}
}
}
}

/* --------------------------
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);
}

MediaWiki:Vector.less/sourceeditor.less - Revision history