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,
   .section-secondary .group {
       border-color: var(--sourceeditor-border);
   }

.group { // "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; }

// resize drag bar (thats what it says) .ext-WikiEditor { &-ResizingDragBar { &, &-ew { background-color: var(--sourceeditor-background-secondary); }

&-ns { border-color: var(--sourceeditor-border); }

span { background-color: var(--byline-color);

&:hover { background-color: var(--text-color); } } }

&-twopanes-TwoPaneLayout .ext-WikiEditor-twopanes-pane1, &-twopanes-TwoPaneLayout .ext-WikiEditor-twopanes-pane2 { border-color: var(--sourceeditor-border); }

// realtime preview &-realtimepreview { &-loadingbar div { background-color: var(--ooui-accent); }

&-button { &:hover { background-color: var(--ooui-normal--hover); }

&.oo-ui-toggleWidget-on .oo-ui-labelElement-label { color: var(--ooui-accent); } } } }

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

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