MediaWiki:Vector.less/sourceeditor.less

/* =============================

          Source editor
  ============================== */

// repurposed from MediaWiki:Vector-darkmode.less/sourceeditor.less

.ui-dialog, .ui-widget-content { background-color: var(--body-light); border-color: var(--body-border); background-image: none; color: var(--text-color);

.ui-dialog-titlebar.ui-widget-header { background-image: none !important; background-color: var(--body-dark) !important; border-color: var(--body-border) !important; }

// Title text in dialog .ui-dialog-titlebar .ui-dialog-title { color: var(--text-color); }

// Close button. Currently covered up by existing dark mode things .ui-dialog-titlebar-close { background-color: var(--body-light);

// Close button hover. Unclear if color does anything here &:hover { // background: @dark-wikitable-background-lighter; border: var(--link-color); } } }

// Add border to top and middle boxes .wikiEditor-ui { .wikiEditor-ui-view, .wikiEditor-ui-top { border-color: var(--body-mid); } }

// Toolbar: Very first bar at the top .wikiEditor-ui-toolbar {

   background-color: var(--body-light);

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

           // Arrow icons beside the tabs
           &:before {

// filter: invert(1);

           }

       }

   }

   /*
       Button colors
   */

// Border between the buttons

   .group {
       border-color: var(--body-mid);

// "Heading" dropdown menu in advanced toolbar .tool-select { background-color: var(--body-light); border-color: var(--body-mid);

.label:after { // filter: invert(1); }

.options { border-color: var(--body-mid); background-color: var(--body-main);

.option { color: var(--link-color); } .option:hover { background-color: var(--wikitable-bg-lighter); color: var(--link-color); } }

       }

   }

.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; }

}

}

/* --------------------------

          ACE EDITOR
  -------------------------- */

root {

--sourceeditor-bg: white; }

// highlighter .ace-tm { background-color: var(--sourceeditor-bg); 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); }

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

/* ---------------------------

     CodeMirror adjustments
  --------------------------- */

// same as no syntaxhighlight .CodeMirror { background: var(--sourceeditor-bg);

// text color pre { color: var(--text-color); }

}

// Status bar under text box in the middle .codeEditor-status { border-color: var(--body-mid); background-color: var(--body-light); }

.codeEditor-status-message { border-color: var(--body-mid); }

.CodeMirror-gutters { background-color: var(--body-mid); border-color: var(--body-mid); }

.CodeMirror-linenumber { color: var(--text-color); }

/* ===========================

     source editor without
     CodeMirror turned on
  =========================== */

.mw-editform #wpTextbox1 { color: var(--text-color); background: var(--sourceeditor-bg); border-color: var(--body-mid); } /* // 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; } } } }

• /