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