MediaWiki:Vector-darkmode.less/sourceeditor.less

From RuneRealm Wiki
< MediaWiki:Vector-darkmode.less

This is the current revision of this page, as edited by Alex (talk | contribs) at 00:11, 17 October 2024 (Created page with "→‎============================= 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-wi..."). The present address (URL) is a permanent link to this version.

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
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; } } } }

Retrieved from "https://wiki2.runerealm.org/index.php?title=MediaWiki:Vector-darkmode.less/sourceeditor.less&oldid=34868"