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 */ body .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; } } } } // Source editor selector .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; // "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 .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 color // 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% ); } /* -------------------------- 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; } } } }