MediaWiki:Vector.less/sourceeditor.less

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