MediaWiki:Vector-darkmode.less/sourceeditor.less
Jump to navigation
Jump to search
// <pre>
/* =============================
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;
background-image: none;
color: @dark-text;
border-color: @dark-wikitable-border;
/* ===================================
TESTING INVERTING ICON COLORS
WITH A CSS FILTER INSTEAD OF
ALL THIS OOUI BULLSHIT
=================================== */
.oo-ui-iconElement-icon:not(.oo-ui-image-progressive) {
// filter: invert(1); commented as there's now a general filter in /ooui.less
}
.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
a, .tabs > .tab > a {
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 { /* Internet Explorer 10-11 */
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;
}
/* ==========================
Extension:CodeMirror syntax highlighting
Classes explained here:
<https://meta.wikimedia.org/wiki/Community_Tech/Wikitext_editor_syntax_highlighting>
Colors based on the One Dark syntax theme:
<https://github.com/atom/atom/tree/master/packages/one-dark-syntax>
========================== */
/* --------------------------
COLORS
-------------------------- */
@codemirror-red: #df6c75;
@codemirror-orange: #ca9564;
@codemirror-yellow: #e5c07b;
@codemirror-green: #98c379;
@codemirror-cyan: #56b6c2;
@codemirror-blue: #61afef;
@codemirror-purple: #c678dd;
.codemirror-lighten(@codemirror-color) {
color: desaturate( lighten( @codemirror-color, 7% ), 5% );
}
.codemirror-darken(@codemirror-color) {
color: saturate( darken( @codemirror-color, 7% ), 5% );
}
/* --------------------------
EDITOR
-------------------------- */
.CodeMirror {
background: @cloud-burst;
caret-color: @codemirror-blue; // cursor color
// text color
pre {
color: @dark-text;
}
}
// cursor color (again??)
.CodeMirror-cursor {
border-left-color: @codemirror-blue;
}
/* --------------------------
HEADINGS
-------------------------- */
pre.cm-mw-section- {
&1,
&2,
&3,
&4,
&5,
&6 {
color: @white;
}
&1 {
font-size: 1.7em;
}
&2 {
font-size: 1.35em;
}
&3 {
font-size: 1.1em;
}
}
// equals signs
.cm-mw-section-header {
.codemirror-darken( @codemirror-green );
}
/* --------------------------
PUNCTUATION
-------------------------- */
.cm-mw-apostrophes-bold,
.cm-mw-apostrophes-italic,
.cm-mw-doubleUnderscore,
.cm-mw-indenting,
.cm-mw-signature,
.cm-mw-hr,
.cm-mw-list {
.codemirror-darken( @codemirror-blue );
}
.cm-mw-doubleUnderscore,
.cm-mw-indenting,
.cm-mw-signature,
.cm-mw-hr,
.cm-mw-list {
background: fade( @codemirror-blue, 10% );
}
.cm-mw-skipformatting {
background: fade( @codemirror-blue, 50% );
}
.cm-mw-mnemonic {
color: @codemirror-green;
}
.cm-mw-comment {
color: @dark-text;
opacity: .7;
}
/* --------------------------
LINKS
-------------------------- */
.cm-mw-link-pagename,
.cm-mw-link,
.cm-mw-extlink,
.cm-mw-free-extlink {
color: @codemirror-blue;
}
.cm-mw-link-tosection,
.cm-mw-extlink-protocol,
.cm-mw-free-extlink-protocol {
.codemirror-lighten( @codemirror-blue );
}
.cm-mw-link-bracket,
.cm-mw-link-delimiter,
.cm-mw-extlink-bracket {
.codemirror-darken( @codemirror-blue );
}
/* --------------------------
TEMPLATES
-------------------------- */
.cm-mw-template-bracket,
.cm-mw-template-delimiter {
.codemirror-darken( @codemirror-orange );
}
.cm-mw-template-name,
.cm-mw-template-argument-name {
color: @codemirror-orange;
}
.cm-mw-template {
.codemirror-lighten( @codemirror-orange );
}
/* --------------------------
TABLES
-------------------------- */
.cm-mw-table-bracket,
.cm-mw-table-delimiter {
.codemirror-darken( @codemirror-cyan );
}
.cm-mw-table-definition {
color: @codemirror-cyan;
}
/* --------------------------
VARIABLES
-------------------------- */
.cm-mw-templatevariable-bracket,
.cm-mw-templatevariable-delimiter {
.codemirror-darken( @codemirror-purple );
}
.cm-mw-templatevariable-name,
.cm-mw-templatevariable {
color: @codemirror-purple;
}
/* --------------------------
PARSER FUNCTIONS
-------------------------- */
.cm-mw-parserfunction-bracket {
.codemirror-darken( @codemirror-red );
}
.cm-mw-parserfunction-name,
.cm-mw-parserfunction-delimiter {
color: @codemirror-red;
}
/* --------------------------
TEXT SELECTION
-------------------------- */
// selected text
.CodeMirror-selected {
background-color: fade( @portage, 10% );
.CodeMirror-focused & {
background-color: fade( @portage, 20% );
}
}
// don't combine these two groups
.CodeMirror-line::selection,
.CodeMirror-line > span::selection,
.CodeMirror-line > span > span::selection {
background: fade( @portage, 20% );
}
.CodeMirror-line::-moz-selection,
.CodeMirror-line > span::-moz-selection,
.CodeMirror-line > span > span::-moz-selection {
background: fade( @portage, 20% );
}
/* --------------------------
HTML TAGS
-------------------------- */
.cm-mw-htmltag-bracket,
.cm-mw-exttag-bracket {
.codemirror-darken( @codemirror-green );
}
.cm-mw-htmltag-name,
.cm-mw-htmltag-attribute,
.cm-mw-exttag-name,
.cm-mw-exttag-attribute {
color: @codemirror-green;
}
pre.cm-mw-exttag {
background: fade( @white, 5% );
}
/* --------------------------
BRACKET MATCHING
-------------------------- */
.cm-mw-matchingbracket {
background-color: @dark-wikitable-background;
box-shadow: inset 0 0 1px 1px @codemirror-blue;
}
/* ===========================
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;
}
}
}
}