MediaWiki:Vector-darkmode.less/sourceeditor.less
Jump to navigation
Jump to search
//
/* ============================= 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; } } } }