MediaWiki:Vector-darkmode.less/sourceeditor.less

From Old School RuneScape Wiki
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;
			}
		}
	}
}