MediaWiki:Vector-darkmode.less/sourceeditor.less
/* =============================
Source editor changes ============================== */
/* Pop-up UI modal when selecting an image/link/ref This should change all possible modals everywhere on the wiki, including Source Lots of !important so don't need to be so specific
- /
.ui-dialog, .ui-widget-content { background-color: @dark-infobox-background; border-color: @dark-infobox-border; background-image: none; color: @dark-text;
.ui-dialog-titlebar.ui-widget-header { background-image: none !important; background-color: @dark-infobox-header !important; border-color: @dark-infobox-border !important; }
// Title text in dialog .ui-dialog-titlebar .ui-dialog-title { color: @dark-text; }
// Close button. Currently covered up by existing dark mode things .ui-dialog-titlebar-close { background-color: @dark-infobox-background;
// Close button hover. Unclear if color does anything here &:hover { background: @dark-wikitable-background-lighter; color: @dark-links-lighter; border: none; }
// Actual close button X .ui-icon-closethick { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAA0UlEQVQY013PvS9DURyH8ed7LlEv181ptybNNUh1USEq6dDw7zTRuSMLk5W/xmKql8HQAXcVI27QoeKcn6mReKbP+uj6odxxSu5Axf3V46b3i1rbyscyW/+x0BHAzdPXhYN+tDBwaAG5MzM732ulhwIYjZ594n0hITPmwKbT77eNXjsvHUC323i3aEOgJpFFbNhr5yWAY5Zj/o+qzCyAy9uXapZlhRkRQCKZfH40D3brrw5gNU1PgRoxHEULx0B1aXnlBED/NwG291tjsGa00PkFoDBODlNCW14AAAAASUVORK5CYII=) no-repeat 50% 50% !important; } } }
.wikiEditor-toolbar-dialog {
.wikieditor-toolbar-field-wrapper {
label {
color: @dark-text;
}
input { background: @dark-infobox-background; border: 1px solid @dark-infobox-border; color: @dark-text; border-radius: 3px; }
select { background: @dark-infobox-background; border: 1px solid @dark-infobox-border; color: @dark-text; border-radius: 3px; } }
/* Bottom pane */ .ui-dialog-buttonpane { background-image: none !important; background-color: @dark-infobox-header !important; color: @dark-text; border-color: @dark-infobox-border !important; }
/* Bottom buttons */ .ui-dialog-buttonset button { background-color: @dark-infobox-background !important; background-image: none !important; color: @dark-text; border-color: @dark-infobox-border !important;
/* Bottom buttons hover */ &:hover { background: @dark-wikitable-background-lighter !important; color: @dark-links-lighter; } }
/* Broken link text */ #wikieditor-toolbar-link-int-target-status, /* Text in table preview */ .wikieditor-toolbar-table-preview-wrapper { color: @dark-text; } }
/** Source editor **/ // Add border to top and middle boxes .wikiEditor-ui { .wikiEditor-ui-view, .wikiEditor-ui-top { border-color: @dark-wikitable-border; } }
// Toolbar: Very first bar at the top .wikiEditor-ui-toolbar {
background-color: @dark-wikitable-background; color: @dark-text; border-color: @dark-wikitable-border;
// lighter progressive icons
.oo-ui-iconElement-icon.oo-ui-image-progressive {
filter: brightness(1.5);
}
// 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: @dark-links;
}
span.tab a {
&.current,
&.current:visited {
color: @dark-text;
}
// Arrow icons beside the tabs
&:before {
filter: invert(1);
}
}
}
/*
Button colors
*/
// Border between the buttons
.group {
border-color: @dark-wikitable-border;
// "Heading" dropdown menu in advanced toolbar .tool-select { background-color: @dark-wikitable-background; border-color: @dark-wikitable-border;
.label:after { filter: invert(1); }
.options { border-color: @dark-wikitable-border;
.option:hover { background-color: @dark-wikitable-background-lighter; color: @dark-links-lighter; } }
.option { background-color: @dark-wikitable-background; color: @dark-links; }
}
}
.group-search { border-left-color: @dark-wikitable-border; }
.page-table { td { border-color: @dark-wikitable-border; color: @dark-text; }
th { color: @dark-text; } }
/*
Normal editor button colors
*/
// Advanced tab
.sections {
// border above the box
.section {
border-color: @dark-wikitable-border;
}
// Specifically the advanced tab
.toolbar {
// "Format" and "Insert" labels
.group > .label {
color: @dark-text;
}
// Links
a {
color: @dark-links;
}
// "Heading" label text
.tool > .label {
color: @dark-text;
}
}
}
// Special characters and help tabs
.booklet {
// Selected item in scrolling list
.index > .current {
background-color: @dark-wikitable-background-lighter;
color: @dark-links-lighter;
}
> .index > :hover {
background-color: darken(@dark-wikitable-background-lighter, 5%);
color: @dark-links-lighter;
}
}
// Text inside the button/characters .page-characters div span { background-color: @dark-wikitable-background; border-color: lighten(@dark-wikitable-border, 10%); color: @dark-text;
// On hover of those characters &:hover { color: @dark-links-lighter; border-color: lighten(@dark-wikitable-border, 5%); }
}
}
.mw-editform { // Bottom box (under text box) .editOptions { color: @dark-text; background-color: @cloud-burst; border-color: @dark-wikitable-border; } }
/*
ACE editor changes
- /
// Numbers plus middle .ace_editor {
// Numbers
.ace_gutter {
background: @dark-wikitable-background;
color: @dark-text;
&-cell {
color: @dark-text;
}
}
// Search & Replace
.ace_search {
background-color: @dark-wikitable-background;
color: @dark-text;
border-color: @waikawa-grey;
// "Search for" and replace fields
.ace_search_field {
background-color: @dark-wikitable-background-lighter;
border-color: @dark-wikitable-border;
// Placeholder text color. Just in case, support all browsers.
&::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: @dark-text;
}
&::-ms-input-placeholder { /* Microsoft Edge */
color: @dark-text;
}
}
// Buttons next to search boxes
.ace_searchbtn {
border-color: @dark-wikitable-border;
background-color: @dark-wikitable-background-lighter;
color: @dark-text;
// < > arrows
&::after {
border-color: @dark-text;
}
// All buttons hover action
&:hover {
background-color: lighten(@dark-wikitable-background-lighter, 5%);
}
// Close button
&_close:hover {
background-color: @dark-wikitable-background-lighter;
color: @dark-text;
}
}
// Buttons at the bottom left and bottom right
.ace_button {
color: @dark-text;
border-color: lighten(@dark-wikitable-border, 25%);
// Hover action to show where you're at
&:hover {
background-color: @dark-wikitable-background-lighter;
}
}
// When checked, make sure it looks checked
.ace_button.checked {
border-color: @dark-wikitable-border;
background-color: lighten(@dark-wikitable-background, 10%);
}
}
}
// Status bar under text box in the middle .codeEditor-status { border-color: @dark-wikitable-border; background-color: @dark-wikitable-background; }
.codeEditor-status-message { border-color: @dark-wikitable-border; }
.CodeMirror-gutters { background-color: @pickled-bluewood; border-color: @dark-wikitable-border; }
.CodeMirror-linenumber { color: @dark-text; }
/* --------------------------
CodeMirror vars -------------------------- */
@codemirror-background: @cloud-burst; @codemirror-text-color: @dark-text; @codemirror-selection-color: @portage; @codemirror-bracket-matcher-background: @dark-wikitable-background;
// Import style sheet @import '@{dir}/darksyntax.less';
/* ===========================
source editor without
CodeMirror turned on
=========================== */
.mw-editform #wpTextbox1 { color: @dark-text; background: @cloud-burst; border-color: @big-stone; }
//edit tools .mw-editTools {
select { &#std-preload-list { background-color: @ooui-input; border: 1px solid @ooui-input-border; color: @ooui-text; } }
input { &#cust-preload-input { background-color: @ooui-input; border: 1px solid @ooui-input-border; color: @ooui-text; padding: 2px 1px; }
&#cust-preload-button { background-color: @ooui-normal; border: 1px solid @ooui-normal-border; border-left: none; color: @ooui-text; padding: 2px 7px; cursor: pointer;
&:hover { background-color: @ooui-normal--hover; border: 1px solid @ooui-normal-border--hover; border-left: none; } } } }