MediaWiki:Vector-darkmode.less/sourceeditor.less

De RuneScape Wiki
Ir para: navegação, pesquisa
// <pre>
/* =============================
      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
*/

.ui-dialog, .ui-widget-content {
    background-color: @dark-infobox-background;
   	border-color: @dark-infobox-border;
   	background-image: none;

    // Middle part
    .ui-dialog-content {
        background-color: @dark-infobox-background;
        border-color: @dark-infobox-border;
    }

    /* Top and bottom boxes
        * background-image and background-colour require !important else
          the top part won't change (as it's !important)
        * border-color require !important as there's a border-top
          with !important for the bottom box
    */
    .ui-widget-header, .ui-dialog-buttonpane {
        background-image: none !important;
        background-color: @dark-infobox-header !important;
        color: @dark-text;
        border-color: @dark-infobox-border !important;
    }

    // X button
    .ui-widget-header > .ui-dialog-titlebar-close {
        background-color: @dark-infobox-background;
        background-image: none;

        // On hover of the button
        &:hover {
            background-color: @dark-wikitable-background-lighter;
            color: @dark-links-lighter;
            border: none;
        }

        // Change the X to be coloured
        .ui-icon-closethick {
            background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAA0UlEQVQY013PvS9DURyH8ed7LlEv181ptybNNUh1USEq6dDw7zTRuSMLk5W/xmKql8HQAXcVI27QoeKcn6mReKbP+uj6odxxSu5Axf3V46b3i1rbyscyW/+x0BHAzdPXhYN+tDBwaAG5MzM732ulhwIYjZ594n0hITPmwKbT77eNXjsvHUC323i3aEOgJpFFbNhr5yWAY5Zj/o+qzCyAy9uXapZlhRkRQCKZfH40D3brrw5gNU1PgRoxHEULx0B1aXnlBED/NwG291tjsGa00PkFoDBODlNCW14AAAAASUVORK5CYII=) no-repeat 50% 50% !important;

            &:hover {
                background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAA0ElEQVQY012PsUrDYBhFz/1rm0YQTeOiCEWRZhAdhPo84iboM+iik2v7Uh1LKAStFbR0ULSFYAzk/5zi4JkOh7tcPb7kp42WG0lk76/p8TQMdRYfjM04rMz3BfA8/x7K6dK8vzYpcNKDmQ32d8IrAaTpMlqPgwyQzNZAP6uySE66W1/UTOf5xWxR2GxR2NNbfl53V4tJzb+1U7tWAUwmq047amUCD2BYo1x+9pJk98MBhJvNe0Hszd/4yt8KdYKN6A5A/28CbO8djc3oVaXv/wJSoVb/a7Dn4QAAAABJRU5ErkJggg==) no-repeat 50% 50% !important;
            }
        }
    }

    // Odd selector
    .ui-widget-content {
        color: @dark-text;

        /* Buttons
            * background-image, background-colour and border-color require !important else
              the buttons won't change (as it's !important)
        */
        .ui-dialog-buttonset > .ui-button {
            background-color: @dark-infobox-background !important;
            background-image: none !important;
            color: @dark-text;
            border-color: @dark-infobox-border !important;

            // On hover of those button. background-color same issue
            &:hover {
                background-color: @dark-wikitable-background-lighter !important;
                color: @dark-links-lighter;
            }
        }
    }
}

ul.ui-autocomplete {
	list-style-image: none;
}

// Source editor selector
#mw-content-text .wikiEditor-ui,
.mw-editform {
    // Add border to top and middle boxes
    .wikiEditor-ui-view, .wikiEditor-ui-top {
        border-color: @dark-wikitable-border;
    }

    // Customize top part
    .wikiEditor-ui-top {

        // Toolbar: Very first bar at the top
        .wikiEditor-ui-toolbar {
            background-color: @dark-wikitable-background;
            background-image: none;
            color: @dark-text;
            border-color: @dark-wikitable-border;

            /* ===================================
                  TESTING INVERTING ICON COLORS
                  WITH A CSS FILTER INSTEAD OF
                  ALL THIS OOUI BULLSHIT
               =================================== */
            .oo-ui-iconElement-icon:not(.oo-ui-image-progressive) {
                filter: invert(1);
            }
            .oo-ui-iconElement-icon.oo-ui-image-progressive {
                filter: brightness(1.5);
            }

            // Change editor button (top right)
            .oo-ui-popupToolGroup-handle {

                // Pencil icon
                .oo-ui-icon-edit {
                   // background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='@{dark-links-escape}'%3E%3Ctitle%3Eedit%3C/title%3E%3Cpath d='M16.77 8l1.94-2a1 1 0 0 0 0-1.41l-3.34-3.3a1 1 0 0 0-1.41 0L12 3.23zm-5.81-3.71L1 14.25V19h4.75l9.96-9.96-4.75-4.75z'/%3E%3C/svg%3E");
                    &:hover {
                    //    background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='@{dark-links-lighter-escape}'%3E%3Ctitle%3Eedit%3C/title%3E%3Cpath d='M16.77 8l1.94-2a1 1 0 0 0 0-1.41l-3.34-3.3a1 1 0 0 0-1.41 0L12 3.23zm-5.81-3.71L1 14.25V19h4.75l9.96-9.96-4.75-4.75z'/%3E%3C/svg%3E");
                    }
                }

                // Down arrow
                .oo-ui-indicator-down {
                    background-image: linear-gradient(transparent, transparent), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='@{dark-links-escape}'%3E%3Ctitle%3Edown%3C/title%3E%3Cpath d='M11.05 3.996l-.965-1.053-4.035 3.86-3.947-3.86L1.05 3.996l5 5 5-5'/%3E%3C/svg%3E");
                    &:hover {
                        background-image: linear-gradient(transparent, transparent), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='@{dark-links-lighter-escape}'%3E%3Ctitle%3Edown%3C/title%3E%3Cpath d='M11.05 3.996l-.965-1.053-4.035 3.86-3.947-3.86L1.05 3.996l5 5 5-5'/%3E%3C/svg%3E");
                    }
                }
            }

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

                    // VE button
                    .oo-ui-tool-title {
                        color: @dark-links;

                        &:hover {
                            color: @dark-links-lighter;
                        }
                    }

                    // VE icon
                    .oo-ui-icon-eye {
                       // background-image: linear-gradient(transparent, transparent), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='@{dark-links-escape}'%3E%3Ctitle%3Eeye%3C/title%3E%3Cpath d='M10 7.5a2.5 2.5 0 1 0 2.5 2.5A2.5 2.5 0 0 0 10 7.5zm0 7a4.5 4.5 0 1 1 4.5-4.5 4.5 4.5 0 0 1-4.5 4.5zM10 3C3 3 0 10 0 10s3 7 10 7 10-7 10-7-3-7-10-7z'/%3E%3C/svg%3E");
                        &:hover {
                           // background-image: linear-gradient(transparent, transparent), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='@{dark-links-lighter-escape}'%3E%3Ctitle%3Eeye%3C/title%3E%3Cpath d='M10 7.5a2.5 2.5 0 1 0 2.5 2.5A2.5 2.5 0 0 0 10 7.5zm0 7a4.5 4.5 0 1 1 4.5-4.5 4.5 4.5 0 0 1-4.5 4.5zM10 3C3 3 0 10 0 10s3 7 10 7 10-7 10-7-3-7-10-7z'/%3E%3C/svg%3E");
                        }
                    }
                }

                // Source button
                .oo-ui-tool-name-editModeSource {
                    background-color: @dark-wikitable-background-lighter;

                    .oo-ui-tool-title {
                        color: @dark-links-lighter;
                    }

                    .oo-ui-icon-wikiText {
                       // background-image: linear-gradient(transparent, transparent), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='@{dark-links-lighter-escape}'%3E%3Ctitle xmlns:default='http://www.w3.org/2000/svg'%3EWikitext%3C/title%3E%3Cpath xmlns:default='http://www.w3.org/2000/svg' d='M1 3v14h3v-2H3V5h1V3H1zm4 0v14h4v-2H7V5h2V3H5zm12 0h-1v2h1v10h-1v2h3V3h-2zm-6 0v2h2v10h-2v2h4V3h-4z'/%3E%3C/svg%3E");
                    }
                }
            }

            // When switching from VE to source, a window pops up
            .oo-ui-popupWidget-popup {
                background-color: @dark-wikitable-background;
                border-color: @dark-wikitable-border;
                color: @dark-text;

                // X button
                .oo-ui-buttonElement-button {
                    background-color: @dark-infobox-background;
                    background-image: none;

                    // On hover of the button
                    &:hover {
                        background-color: @dark-wikitable-background-lighter;
                        color: @dark-links-lighter;
                        border: none;
                    }

                    // Change the X to be coloured
                    .oo-ui-icon-close {
                        background-image: linear-gradient(transparent, transparent), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='@{dark-links-escape}'%3E%3Ctitle%3Eclose%3C/title%3E%3Cpath d='M3.636 2.224l14.142 14.142-1.414 1.414L2.222 3.638z'/%3E%3Cpath d='M17.776 3.636L3.634 17.778 2.22 16.364 16.362 2.222z'/%3E%3C/svg%3E");

                        &:hover {
                            background-image: linear-gradient(transparent, transparent), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='@{dark-links-lighter-escape}'%3E%3Ctitle%3Eclose%3C/title%3E%3Cpath d='M3.636 2.224l14.142 14.142-1.414 1.414L2.222 3.638z'/%3E%3Cpath d='M17.776 3.636L3.634 17.778 2.22 16.364 16.362 2.222z'/%3E%3C/svg%3E");
                        }
                    }
                }
            }

            // Little triangle in the menu from above 
            .oo-ui-popupWidget-anchor {
                &::before {
                    border-bottom-color: @dark-wikitable-border;
                }

                &::after {
                    border-bottom-color: @dark-wikitable-background-lighter;
                }
            }

            // Some links were hard-coded
            .tabs a, .tabs > .tab > a  {
                color: @dark-links;
            }

            /*
                Button colors
            */

            // Change "toggle source code" button when editing MW pages
            .group > .tool.tool-active.oo-ui-buttonElement-frameless.oo-ui-iconElement, .oo-ui-iconElement-icon.oo-ui-icon-markup {
                background-color: transparent;
                box-shadow: none;
                outline: none;

                &:hover {
                    background-color: @dark-wikitable-background-lighter;
                    color: @dark-links-lighter;
                }
            }

            // Changes "toggle source code" button colors
            .oo-ui-image-progressive.oo-ui-icon-markup, .oo-ui-iconElement-icon.oo-ui-icon-markup {
                background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cg fill='@{dark-links-escape}'%3E%3Ctitle xmlns:default='http://www.w3.org/2000/svg'%3Emarkup%3C/title%3E%3Cpath xmlns:default='http://www.w3.org/2000/svg' d='M6.5 3.5l-5 5L0 10l1.5 1.5 5 5L8 15l-5-5 5-5-1.5-1.5zm12 5l-5-5L12 5l5 5-5 5 1.5 1.5 5-5L20 10l-1.5-1.5z'/%3E%3C/g%3E%3C/svg%3E");

                &:hover {
                    background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cg fill='@{dark-links-lighter-escape}'%3E%3Ctitle xmlns:default='http://www.w3.org/2000/svg'%3Emarkup%3C/title%3E%3Cpath xmlns:default='http://www.w3.org/2000/svg' d='M6.5 3.5l-5 5L0 10l1.5 1.5 5 5L8 15l-5-5 5-5-1.5-1.5zm12 5l-5-5L12 5l5 5-5 5 1.5 1.5 5-5L20 10l-1.5-1.5z'/%3E%3C/g%3E%3C/svg%3E");
                }
            }
            /*
                Normal editor button colors
            */

            // Bold
            .oo-ui-icon-bold {
              //  background-image: linear-gradient(transparent, transparent), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='@{dark-links-escape}'%3E%3Ctitle%3Ebold%3C/title%3E%3Cpath d='M9.93 3a9.34 9.34 0 0 1 2.39.27 4.53 4.53 0 0 1 1.62.73 2.87 2.87 0 0 1 .91 1.18 4 4 0 0 1 .29 1.55 3.09 3.09 0 0 1-.14.93 2.77 2.77 0 0 1-.43.83 3.21 3.21 0 0 1-.75.71 4.56 4.56 0 0 1-1.09.54 4 4 0 0 1 2.1 1.1 2.86 2.86 0 0 1 .68 2 4 4 0 0 1-.34 1.65 3.73 3.73 0 0 1-1 1.32 4.66 4.66 0 0 1-1.6.87 7 7 0 0 1-2.19.31H5V3zM7.87 5.2V9h1.89a5.1 5.1 0 0 0 1.07-.1 2.13 2.13 0 0 0 .78-.32A1.44 1.44 0 0 0 12.1 8a2.07 2.07 0 0 0 .17-.87 2.51 2.51 0 0 0-.14-.89 1.31 1.31 0 0 0-.43-.59 1.86 1.86 0 0 0-.7-.35 4.72 4.72 0 0 0-1-.1zm2.46 9.58a3.24 3.24 0 0 0 1.13-.17 1.91 1.91 0 0 0 .71-.45 1.54 1.54 0 0 0 .37-.64 2.66 2.66 0 0 0 .11-.75 2.2 2.2 0 0 0-.12-.76 1.36 1.36 0 0 0-.4-.57 1.89 1.89 0 0 0-.72-.36 4.09 4.09 0 0 0-1.1-.13H7.87v3.83z'/%3E%3C/svg%3E");
            }

            // Italic
            .oo-ui-icon-italic {
              //  background-image: linear-gradient(transparent, transparent), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='@{dark-links-escape}'%3E%3Ctitle%3Eitalic%3C/title%3E%3Cpath d='M14 3v1l-1.32.08-.33.29-2.11 11.23.25.29L12 16v1H6v-1l1.32-.1.31-.31L9.74 4.38l-.21-.29L8 4V3z'/%3E%3C/svg%3E");
            }

            // Link
            .oo-ui-icon-link {
             //   background-image: linear-gradient(transparent, transparent), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='@{dark-links-escape}'%3E%3Ctitle%3Elink%3C/title%3E%3Cpath d='M4.83 15h2.91a4.88 4.88 0 0 1-1.55-2H5a3 3 0 1 1 0-6h3a3 3 0 0 1 2.82 4h2.1a4.82 4.82 0 0 0 .08-.83v-.34A4.83 4.83 0 0 0 8.17 5H4.83A4.83 4.83 0 0 0 0 9.83v.34A4.83 4.83 0 0 0 4.83 15z'/%3E%3Cpath d='M15.17 5h-2.91a4.88 4.88 0 0 1 1.55 2H15a3 3 0 1 1 0 6h-3a3 3 0 0 1-2.82-4h-2.1a4.82 4.82 0 0 0-.08.83v.34A4.83 4.83 0 0 0 11.83 15h3.34A4.83 4.83 0 0 0 20 10.17v-.34A4.83 4.83 0 0 0 15.17 5z'/%3E%3C/svg%3E");
            }

            // Image
            .oo-ui-icon-image {
              //  background-image: linear-gradient(transparent, transparent), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='@{dark-links-escape}'%3E%3Ctitle%3Eimage%3C/title%3E%3Cpath d='M18 2H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2zM1.83 15l4.09-5.25 2.92 3.51L12.92 8l5.25 7z'/%3E%3C/svg%3E");
            }

            // Book
            .oo-ui-icon-book {
              //  background-image: linear-gradient(transparent, transparent), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='@{dark-links-escape}'%3E%3Ctitle%3Ebook%3C/title%3E%3Cpath d='M15 2a7.65 7.65 0 0 0-5 2 7.65 7.65 0 0 0-5-2H1v15h4a7.65 7.65 0 0 1 5 2 7.65 7.65 0 0 1 5-2h4V2zm2.5 13.5H14a4.38 4.38 0 0 0-3 1V5s1-1.5 4-1.5h2.5z'/%3E%3Cpath d='M9 3.5h2v1H9z'/%3E%3C/svg%3E");
            }

            // Advanced tab
            .sections {

                // Specifically the advanced tab
                .toolbar {
                    background-color: @dark-wikitable-background;
                    color: @dark-text;
                    border-color: @dark-wikitable-border;

                    // "Format" and "Insert" labels
                    .group > .label {
                        color: @dark-text;
                    }

                    // Links
                    a {
                        color: @dark-links;
                    }

                    // "Heading" label text
                    .tool > .label {
                        color: @dark-text;
                    }

                    // "Heading" dropdown menu
                    .tool {
                            background-color: @dark-wikitable-background;
                            border-color: @dark-wikitable-border;

                        .options {
                            border-color: @dark-wikitable-border;
                        }

                        .option {
                            background-color: @dark-wikitable-background;

                            &:hover {
                                background-color: @dark-wikitable-background-lighter;
                                color: @dark-links-lighter;
                            }
                        }
                    }

                    /*
                        Button colors
                    */

                    // List bullet
                    .oo-ui-icon-listBullet {
                      //  background-image: linear-gradient(transparent, transparent), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='@{dark-links-escape}'%3E%3Ctitle%3Ebullet list%3C/title%3E%3Cpath d='M7 15h12v2H7zm0-6h12v2H7zm0-6h12v2H7z'/%3E%3Ccircle cx='3' cy='4' r='2'/%3E%3Ccircle cx='3' cy='10' r='2'/%3E%3Ccircle cx='3' cy='16' r='2'/%3E%3C/svg%3E");
                    }

                    // List numbered
                    .oo-ui-icon-listNumbered {
                      // background-image: linear-gradient(transparent, transparent), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='@{dark-links-escape}'%3E%3Ctitle%3Enumbered list%3C/title%3E%3Cpath d='M7 15h12v2H7zm0-6h12v2H7zm0-6h12v2H7zM2 6h1V1H1v1h1v4zm-1 9h2v1H2v1h1v1H1v1h3v-5H1v1zm2.5-7H1v1h2v1H1.5a.5.5 0 0 0-.5.5V13h3v-1H2v-1h1.5a.5.5 0 0 0 .5-.5v-2a.5.5 0 0 0-.5-.5z'/%3E%3C/svg%3E");
                    }

                    // No wiki text
                    .oo-ui-icon-noWikiText {
                      //  background-image: linear-gradient(transparent, transparent), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='@{dark-links-escape}'%3E%3Ctitle%3Eno WikiText%3C/title%3E%3Cpath d='M16 3v2h1v10l2 2V3zM9 5V3H5l2 2zM1 1L0 2l1 1v14h3v-2H3V5l2 2v10h4v-2H7V9l6 6h-2v2h4l3 3 1-1-3-3zm12 10l2 2V3h-4v2h2z'/%3E%3C/svg%3E");
                    }

                    // New line
                    .oo-ui-icon-newline {
                      //  background-image: linear-gradient(transparent, transparent), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='@{dark-links-escape}'%3E%3Ctitle%3Enewline%3C/title%3E%3Cpath d='M17 4v6H7V6l-6 5 6 5v-4h12V4h-2z'/%3E%3C/svg%3E");
                    }

                    // Bigger
                    .oo-ui-icon-bigger {
                      //  background-image: linear-gradient(transparent, transparent), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='@{dark-links-escape}'%3E%3Ctitle%3Ebigger%3C/title%3E%3Cpath d='M14 18h-1.57a.66.66 0 0 1-.44-.13.87.87 0 0 1-.25-.34l-1-2.77H5.3l-1 2.77a.83.83 0 0 1-.24.32.65.65 0 0 1-.44.15H2L7 5.47h2zm-3.85-4.7L8.42 8.72A12.66 12.66 0 0 1 8 7.37q-.1.41-.21.75t-.21.6L5.85 13.3zM15 2l3 4h-6l3-4z'/%3E%3C/svg%3E");
                    }

                    // Smaller
                    .oo-ui-icon-smaller {
                      //  background-image: linear-gradient(transparent, transparent), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='@{dark-links-escape}'%3E%3Ctitle%3Esmaller%3C/title%3E%3Cpath d='M12 16h-1.05a.44.44 0 0 1-.29-.09.58.58 0 0 1-.17-.22l-.7-1.84H6.2l-.7 1.84a.56.56 0 0 1-.16.21.43.43 0 0 1-.29.1H4l3.31-8.35h1.38zm-2.57-3.13L8.28 9.82a8.5 8.5 0 0 1-.28-.9q-.06.27-.14.5l-.14.4-1.15 3zM15 6l3-4h-6l3 4z'/%3E%3C/svg%3E");
                    }

                    // Superscript
                    .oo-ui-icon-superscript {
                      //  background-image: linear-gradient(transparent, transparent), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='@{dark-links-escape}'%3E%3Ctitle%3Esuperscript%3C/title%3E%3Cpath d='M17.5 1h.5V0h-.5a1.49 1.49 0 0 0-1 .39 1.49 1.49 0 0 0-1-.39H15v1h.5a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-.5.5H15v1h.5a1.49 1.49 0 0 0 1-.39 1.49 1.49 0 0 0 1 .39h.5V8h-.5a.5.5 0 0 1-.5-.5v-6a.5.5 0 0 1 .5-.5zm-3.82 15h-2.42a.67.67 0 0 1-.46-.15 1.33 1.33 0 0 1-.28-.34l-2.77-4.44a2.65 2.65 0 0 1-.28.69L5 15.51a2.22 2.22 0 0 1-.29.34.58.58 0 0 1-.42.15H2l4.15-6.19L2.17 4h2.42a.81.81 0 0 1 .41.09.8.8 0 0 1 .24.26L8 8.59a2.71 2.71 0 0 1 .33-.74L10.6 4.4a.69.69 0 0 1 .6-.4h2.32l-4 5.71z'/%3E%3C/svg%3E");
                    }

                    // Subscript
                    .oo-ui-icon-subscript {
                      //  background-image: linear-gradient(transparent, transparent), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='@{dark-links-escape}'%3E%3Ctitle%3Esubscript%3C/title%3E%3Cpath d='M13.68 16h-2.42a.67.67 0 0 1-.46-.15 1.33 1.33 0 0 1-.28-.34l-2.77-4.44a2.65 2.65 0 0 1-.28.69L5 15.51a2.22 2.22 0 0 1-.29.34.58.58 0 0 1-.42.15H2l4.15-6.19L2.17 4h2.42a.81.81 0 0 1 .41.09.8.8 0 0 1 .24.26L8 8.59a2.71 2.71 0 0 1 .33-.74L10.6 4.4a.69.69 0 0 1 .6-.4h2.32l-4 5.71zm3.82-4h.5v-1h-.5a1.49 1.49 0 0 0-1 .39 1.49 1.49 0 0 0-1-.39H15v1h.5a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-.5.5H15v1h.5a1.49 1.49 0 0 0 1-.39 1.49 1.49 0 0 0 1 .39h.5v-1h-.5a.5.5 0 0 1-.5-.5v-6a.5.5 0 0 1 .5-.5z'/%3E%3C/svg%3E");
                    }

                    // Image gallery
                    .oo-ui-icon-imageGallery {
                      //  background-image: linear-gradient(transparent, transparent), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='@{dark-links-escape}'%3E%3Ctitle%3Eimage gallery%3C/title%3E%3Cpath d='M17 5H3a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2zM3 16l3.5-4.5 2.5 3 3.5-4.5 4.5 6zM4 2h12a2 2 0 0 1 2 2H2a2 2 0 0 1 2-2z'/%3E%3C/svg%3E");
                    }

                    // Article redirect
                    .oo-ui-icon-articleRedirect {
                      //  background-image: linear-gradient(transparent, transparent), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='@{dark-links-escape}'%3E%3Ctitle%3Earticle redirect%3C/title%3E%3Cpath d='M15 1H5a2 2 0 0 0-2 2v1c0 5 2 8 7 8V9l5 4-5 4v-3c-3.18 0-5.51-.85-7-2.68V17a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2z'/%3E%3C/svg%3E");
                    }

                    // Table
                    .oo-ui-icon-table {
                      //  background-image: linear-gradient(transparent, transparent), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='@{dark-links-escape}'%3E%3Ctitle%3Etable%3C/title%3E%3Cpath d='M19.66 2.88a2 2 0 0 0-.54-.54A2 2 0 0 0 18 2H2a2 2 0 0 0-1.12.34 2 2 0 0 0-.54.54A2 2 0 0 0 0 4v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V4a2 2 0 0 0-.34-1.12zM2 6h7v4H2zm0 10v-4h7v4zm16 0h-7v-4h7zm0-6h-7V6h7z'/%3E%3C/svg%3E");
                    }
                }
            }
        }

        // Special characters and help tabs
        .booklet {
            background-color: @dark-wikitable-background;
            background-image: none;
            color: @dark-text;
            border-color: @dark-wikitable-border;

            // Each item in the scrolling list at the left
            a, .index > div {
                color: @dark-links;
            }

            // Selected item in scrolling list
            .index > div.current {
                background-color: @dark-wikitable-background-lighter;
                color: @dark-links-lighter;
            }

            // Styling for right box
            .pages {
                background-color: @dark-wikitable-background;

                // Text inside the characters
                .page-characters span {
                    color: @dark-text;

                    // On hover of those characters
                    &:hover {
                        background-color: @dark-wikitable-background-lighter;
                        color: @dark-links-lighter;
                        border-color: lighten(@dark-wikitable-border, 10%);
                    }
                }

                // Header stiling for Help tab
                th {
                    color:@default-page;
                }
            }

            // Color for the help tab's table
            .pages > .page-table > table span {
                color: @dark-text;
            }
        }
    }

    // Bottom box (under text box)
    .editOptions {
    	color: @dark-text;
        background-color: @cloud-burst;
        border-color: @dark-infobox-border;
    }

    // Copyright license text
    #editpage-copywarn {
        color: @dark-text;
    }


    /*
        ACE editor changes
    */

    // Main element
    .wikiEditor-ui-left {

        // Numbers plus middle
        .ace_editor {

            // Numbers
            .ace_gutter {
                background: @dark-wikitable-background;
                color: @dark-text;
            }

            // Highlighted number
            .ace_gutter-active-line {
                background: @dark-wikitable-background-lighter;
            }

            // 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 { /* Internet Explorer 10-11 */
                        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%);
                    }
                }

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

// Popup window when you upload a file using source editor's menu
&.action-edit .oo-ui-window-content {
    background-color: @dark-wikitable-background;

    .oo-ui-window-body, .oo-ui-window-head {
        outline-color: @dark-wikitable-border;
    }

    // Middle dropfiles menu
    .oo-ui-selectFileWidget-empty.oo-ui-widget-enabled.oo-ui-selectFileWidget-dropTarget, .oo-ui-selectFileWidget-dropTarget, .oo-ui-selectFileWidget-info {
        background-color: lighten(@dark-wikitable-background, 5%);

        .oo-ui-selectFileWidget-dropLabel {
            color: @dark-text;
        }
    }

    // "I confirm that...."
    .mw-foreignStructuredUpload-bookletLayout-license {
        color: @dark-text;
    }

    // Buttons
    .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
        background-color: @dark-wikitable-background-lighter;
        border-color: @dark-wikitable-border;
    }

    .oo-ui-buttonElement-framed.oo-ui-widget-disabled > .oo-ui-buttonElement-button {
        background-color: @dark-wikitable-background;
        border-color: @dark-wikitable-border;
    }

    // In ACE editor, "Go to line number" has a diff box. This recolors the missing parts
    .oo-ui-actionWidget, .oo-ui-window-foot {
        border-color: @dark-wikitable-border;
        outline-color: @dark-wikitable-border;
    }

    // Hover button colors
    .oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-widget-enabled .oo-ui-buttonElement-button:hover{
        background-color: @dark-wikitable-background-lighter;
    }
}

// For some super odd reasons, this will recolor the top part of the menu above
.oo-ui-windowManager-modal.oo-ui-windowManager-floating > .oo-ui-dialog > .oo-ui-window-frame {
    border-color: @dark-wikitable-border;
}

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

	Extension:CodeMirror syntax highlighting

	Classes explained here:
	<https://meta.wikimedia.org/wiki/Community_Tech/Wikitext_editor_syntax_highlighting>
	Colors based on the One Dark syntax theme:
	<https://github.com/atom/atom/tree/master/packages/one-dark-syntax>

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

/* --------------------------
            COLORS
   -------------------------- */

@codemirror-red:     #df6c75;
@codemirror-orange:  #ca9564;
@codemirror-yellow:  #e5c07b;
@codemirror-green:   #98c379;
@codemirror-cyan:    #56b6c2;
@codemirror-blue:    #61afef;
@codemirror-purple:  #c678dd;

.codemirror-lighten(@codemirror-color) {
	color: desaturate( lighten( @codemirror-color, 7% ), 5% );
}

.codemirror-darken(@codemirror-color) {
	color: saturate( darken( @codemirror-color, 7% ), 5% );
}

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

.CodeMirror {
	background: @cloud-burst;
	caret-color: @codemirror-blue; //cursor colour

	// text color
	pre {
		color: @dark-text;
	}

}
	
// cursor color (again??)
.CodeMirror-cursor {
	border-left-color: @codemirror-blue;
}

/* --------------------------
            HEADINGS
   -------------------------- */

pre.cm-mw-section- {

	&1,
	&2,
	&3,
	&4,
	&5,
	&6 {
		color: @white;
	}

	&1 {
		font-size: 1.7em;
	}

	&2 {
		font-size: 1.35em;
	}

	&3 {
		font-size: 1.1em;
	}

}

// equals signs
.cm-mw-section-header {
	.codemirror-darken( @codemirror-green );
}

/* --------------------------
          PUNCTUATION
   -------------------------- */

.cm-mw-apostrophes-bold,
.cm-mw-apostrophes-italic,
.cm-mw-doubleUnderscore,
.cm-mw-indenting,
.cm-mw-signature,
.cm-mw-hr,
.cm-mw-list {
	.codemirror-darken( @codemirror-blue );
}

.cm-mw-doubleUnderscore,
.cm-mw-indenting,
.cm-mw-signature,
.cm-mw-hr,
.cm-mw-list {
	background: fade( @codemirror-blue, 10% );
}

.cm-mw-skipformatting {
	background: fade( @codemirror-blue, 50% );
}

.cm-mw-mnemonic {
	color: @codemirror-green;
}

.cm-mw-comment {
	color: #cbd9f4;
	opacity: .7;
}

/* --------------------------
             LINKS
   -------------------------- */

.cm-mw-link-pagename,
.cm-mw-link,
.cm-mw-extlink,
.cm-mw-free-extlink {
	color: @codemirror-blue;
}

.cm-mw-link-tosection,
.cm-mw-extlink-protocol,
.cm-mw-free-extlink-protocol {
	.codemirror-lighten( @codemirror-blue );
}

.cm-mw-link-bracket,
.cm-mw-link-delimiter,
.cm-mw-extlink-bracket {
	.codemirror-darken( @codemirror-blue );
}

/* --------------------------
           TEMPLATES
   -------------------------- */

.cm-mw-template-bracket,
.cm-mw-template-delimiter {
	.codemirror-darken( @codemirror-orange );
}

.cm-mw-template-name,
.cm-mw-template-argument-name {
	color: @codemirror-orange;
}

.cm-mw-template {
	.codemirror-lighten( @codemirror-orange );
}

/* --------------------------
            TABLES
   -------------------------- */

.cm-mw-table-bracket,
.cm-mw-table-delimiter {
	.codemirror-darken( @codemirror-cyan );
}

.cm-mw-table-definition {
	color: @codemirror-cyan;
}

/* --------------------------
           VARIABLES
   -------------------------- */

.cm-mw-templatevariable-bracket,
.cm-mw-templatevariable-delimiter {
	.codemirror-darken( @codemirror-purple );
}

.cm-mw-templatevariable-name,
.cm-mw-templatevariable {
	color: @codemirror-purple;
}

/* --------------------------
        PARSER FUNCTIONS
   -------------------------- */

.cm-mw-parserfunction-bracket {
	.codemirror-darken( @codemirror-red );
}

.cm-mw-parserfunction-name,
.cm-mw-parserfunction-delimiter {
	color: @codemirror-red;
}

/* --------------------------
        TEXT SELECTION
   -------------------------- */
// selected text
.CodeMirror-selected {
	background-color: fade( @portage, 10% );
	.CodeMirror-focused & {
		background-color: fade( @portage, 20% );
	}
}

// don't combine these two groups
.CodeMirror-line::selection,
.CodeMirror-line > span::selection,
.CodeMirror-line > span > span::selection {
	background: fade( @portage, 20% );
}

.CodeMirror-line::-moz-selection,
.CodeMirror-line > span::-moz-selection,
.CodeMirror-line > span > span::-moz-selection {
	background: fade( @portage, 20% );
}
pre.CodeMirror-line {
	background: none;
}

/* --------------------------
           HTML TAGS
   -------------------------- */

.cm-mw-htmltag-bracket,
.cm-mw-exttag-bracket {
	.codemirror-darken( @codemirror-green );
}

.cm-mw-htmltag-name,
.cm-mw-htmltag-attribute,
.cm-mw-exttag-name,
.cm-mw-exttag-attribute {
	color: @codemirror-green;
}

pre.cm-mw-exttag {
	background: fade( @white, 5% );
}

/* ===========================
      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;
			}
		}
	}
}
//Transclusion window
.ve-ui-mwTransclusionDialog-multiple {
	
	.oo-ui-outlineControlsWidget {
		background: none;
	}
	.oo-ui-outlineOptionWidget.oo-ui-optionWidget-selected,
	.oo-ui-outlineOptionWidget.oo-ui-optionWidget-highlighted, {
		background-color: #3f5073;
	}
	
	.oo-ui-bookletLayout-outlinePanel > .oo-ui-outlineControlsWidget,
	.oo-ui-searchWidget-query,
	.ve-ui-mwTransclusionDialog-addParameterFieldset .ve-ui-mwParameterSearchWidget {
		border-color: @waikawa-grey;
	}
}