MediaWiki:Vector-2022.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/*
 * =====================================================
 * EstoriaRO Wiki Background & General Styling
 * =====================================================
 */

/* Global Body Styling (Background & Default Text Color) */
body {
    background-color: #f8f9fa00; /* Fully transparent base color */
    color: #ffffff;             /* Default text color is white */
    font-family: "Baloo Paaji 2", cursive; /* Default font */
    background-image: url("/wiki/images/7/74/Estoria_banner.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-attachment: fixed; /* Background stays put when scrolling */
    background-size: cover;     /* Ensures background covers the entire viewport */
}

/*
 * =====================================================
 * Main Content Container (mw-body)
 * =====================================================
 */

/* Main content container styling */
.mw-body {
    background-color: rgb(34 50 83 / 63%); /* Semi-transparent dark blue/grey */
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 8px 25px rgb(0 0 0); /* Soft shadow for depth */
}

/* Ensure all content inside the body uses the custom font */
.mw-body-content,
.mw-body-content * {
    font-family: "Baloo Paaji 2", cursive;
}

/* Content Area Container and Header/Pin Container Transparency */
.mw-page-container {
    min-width: 18.75em;
    max-width: 99.75rem;
    box-sizing: border-box;
    position: relative;
    z-index: 0;
    margin: 0 auto;
    padding-top: 0.05px;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    background-color: #ffffff00; /* Transparent */
}

.vector-pinned-container {
    background-color: #ffffff13; /* Very slight white transparency */
}

/*
 * =====================================================
 * Headers & Typography
 * =====================================================
 */

/* All headings (H1-H6) styling */
.mw-heading,
h1, h2, h3, h4, h5, h6 {
    color: #f0c75e; /* Soft yellow highlight color */
    font-weight: 800;
    font-family: "Baloo Paaji 2", cursive;
    margin: 0;
    padding-top: 0.5em;
    padding-bottom: 0.17em;
    display: flow-root;
    word-break: break-word;
}

/* Separator under the pinnable header */
.vector-pinnable-header {
    padding-bottom: 6px;
    margin-bottom: 6px;
    border-bottom: 1px solid #f5f6e8;
    line-height: 1.6;
}

/*
 * =====================================================
 * Links
 * =====================================================
 */

/* Normal and Visited link colors within content */
#content a:link,
#content a:visited {
    color: #ffffff;
}

/* Hover link color (soft yellow highlight) */
#content a:hover {
    color: #f0c75e;
}

/* Visited links specifically for where(:not([role='button'])) */
a:where(:not([role='button'])):visited {
    color: #eaecf0; /* Off-white color */
}

/*
 * =====================================================
 * Tables
 * =====================================================
 */

/* Wikitable styling */
.wikitable {
    background-color: #f8f9fa00; /* Transparent */
    color: #ffffff;
    margin: 5em 0;
    border: 0px solid #a2a9b1; /* Removed border */
    border-collapse: collapse;
}

/*
 * =====================================================
 * Navigation & UI Elements
 * =====================================================
 */

/* Vector Header Container (top bar) */
.vector-header-container .mw-header,
.vector-header-container .vector-sticky-header {
    width: 100%;
    min-height: 3.125rem;
    background-color: #ffffff00; /* Transparent */
    min-width: 18.75em;
    max-width: 99.75rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    box-sizing: border-box;
}

/* Dropdown menu styling */
.vector-dropdown .vector-dropdown-content {
    position: absolute;
    top: 100%;
    left: -1px;
    opacity: 0;
    height: 0;
    visibility: hidden;
    overflow: hidden auto;
    z-index: 50;
    background-color: #ffffff17; /* Very light transparent background */
    padding: 16px 16px;
    font-size: var(--font-size-small, 0.875rem);
    box-shadow: 0 2px 6px -1px rgba(0, 0, 0, 0.2);
    transition-property: opacity;
    transition-duration: 100ms;
    width: max-content;
    max-width: 200px;
    max-height: 75vh;
}

/* WikiEditor Textarea */
.wikiEditor-ui textarea {
    width: 75%;
    border: 0;
}

.oo-ui-toolbar-bar {
    background-color: #ffffff00;
    color: #ffffff;
}

textarea {
    display: block;
    box-sizing: border-box;
    width: 100%;
    border: 1px solid #a2a9b1;
    padding: 0.1em;
    background-color: #ffffff00;
}

.wikiEditor-ui-toolbar {
    background-color: #f8f9fa00;
    box-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.1);
}

.editOptions {
    background-color: #eaecf000;
    color: #ffffff;
    border: 1px solid #c8ccd100;
    border-top: 0;
    padding: 1em 1em 1.5em 1em;
    margin-bottom: 2em;
}

.ve-ui-mwNoticesPopupTool-items {
    padding: 0.5em 1em;
    line-height: 1.6em; 
    background-color: #eaecf000;
}

.ve-ui-mwNoticesPopupTool-items {
    padding: 0.5em 1em;
    line-height: 1.6em;
    background-color: #3b4d73;
}

.mw-echo-ui-placeholderItemWidget {
    padding: 2em;
    background-color: #3b4d73;
}

.mw-echo-ui-notificationsInboxWidget-toolbarWrapper {
    min-height: 3.5em;
    position: -webkit-sticky;
    position: sticky;
    padding-bottom: 1em;
    padding-top: 0.5em;
    margin-top: -0.5em;
    top: 0;
    z-index: 2;
    background-color: #ffffff00;
    box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.1);
}

/* Echo */

.mw-echo-ui-notificationItemWidget {
	background-color: #ffffff00;
}

.mw-echo-ui-notificationItemWidget-unread,
.mw-echo-ui-placeholderItemWidget {
  backgroundor: #ffffff00;
}

.mw-echo-ui-notificationItemWidget-unread:hover,
.mw-echo-ui-notificationItemWidget:hover,
.mw-echo-ui-notificationsInboxWidget-toolbarWrapper {
  background-color: #ffffff00;
}

.mw-echo-ui-menuItemWidget > .oo-ui-buttonElement-button > .oo-ui-labelElement-label,
.mw-echo-ui-notificationItemWidget-content-message-body {
  color: #ffffff00;
}

.mw-echo-ui-notificationsListWidget:not(:hover) a,
#p-personal .mw-echo-ui-notificationsListWidget:not(:hover) a.new,
.mw-echo-ui-notificationItemWidget-content-message-header,
.mw-echo-ui-notificationItemWidget-content-actions-timestamp{
  color:var(--wiki-content-text-color);
}

/* special:replacetext */
.ext-replacetext-searchoptions {
    background-color: transparent;
    border: 1px solid var(--wiki-content-border-color);
}

.ext-replacetext-searchoptions .ext-replacetext-divider {
    border-bottom: 1px solid var(--wiki-content-border-color);
}



.mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend {
    background-color: #ffffff00;
    position: relative;
    z-index: 1;
}

.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined {
    background-color: #f8f9fa00;
}

.mw-rcfilters-container .mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle {
    background-color: #ffffff00;
    border: 1px solid #a2a9b100;
    border-bottom: 0;
    border-radius: 2px 2px 0 0;
    padding: 0 0.6em 0.6em 0.6em; 
    color: #ffffff00;
    line-height: normal;
}

.mw-rcfilters-container .mw-rcfilters-ui-filterTagMultiselectWidget-emptyFilters {
    color: #ffffff;
}

.mw-rcfilters-container .mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-content-title {
    font-weight: bold;
    color: #ffffff;
    white-space: nowrap;
}

.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
    background-color: #f8f9fa00;
    color: #ffffff;
    border-color: #a2a9b100;
}

/* special:replacetext */
.ext-replacetext-searchoptions {
    background-color: #ffffff00;
    border: 1px solid var(--wiki-content-border-color);
}

.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
    background-color: #f8f9fa00;
    color: #2f3a89;
    border-color: #a2a9b100;
}

#pagehistory li.selected {
    background-color: #162f478f;
    color: var(--color-base, #202122);
    outline: 1px dashed #a2a9b1;
}





.theme-dark .mw-highlight,
.mw-highlight {
    --pygments-background: var(--wiki-content-background-color--secondary);
    --pygments-err: #fe4242;
    --pygments-c: #4b9797;
    --pygments-k: #00a300;
    --pygments-o: #898989;
    --pygments-ch: #4b9797;
    --pygments-cm: #4b9797;
    --pygments-cp: #c17d00;
    --pygments-cpf: #4b9797;
    --pygments-c1: #4b9797;
    --pygments-cs: #4b9797;
    --pygments-gd: #ff3f3f;
    --pygments-gr: #fe4242;
    --pygments-gh: #7a7aff;
    --pygments-gi: #00a000;
    --pygments-go: #8a8a8a;
    --pygments-gp: #7a7aff;
    --pygments-gu: #f500f5;
    --pygments-gt: #4e84fe;
    --pygments-kc: #00a300;
    --pygments-kd: #00a300;
    --pygments-kn: #00a300;
    --pygments-kp: #00a300;
    --pygments-kr: #00a300;
    --pygments-kt: #fe357e;
    --pygments-m: #898989;
    --pygments-s: #e25e5e;
    --pygments-na: #80932a;
    --pygments-nb: #00a300;
    --pygments-nc: #7a7afe;
    --pygments-no: #ff4040;
    --pygments-nd: #bf5aff;
    --pygments-ni: #999;
    --pygments-ne: #da655f;
    --pygments-nf: #7a7afe;
    --pygments-nl: #a0a000;
    --pygments-nn: #7a7afe;
    --pygments-nt: #00a300;
    --pygments-nv: #8381e7;
    --pygments-ow: #bf5aff;
    --pygments-w: #bbb;
    --pygments-mb: #898989;
    --pygments-mf: #898989;
    --pygments-mh: #898989;
    --pygments-mi: #898989;
    --pygments-mo: #898989;
    --pygments-sa: #e25e5e;
    --pygments-sb: #e25e5e;
    --pygments-sc: #e25e5e;
    --pygments-dl: #e25e5e;
    --pygments-sd: #e25e5e;
    --pygments-s2: #e25e5e;
    --pygments-se: #d07125;
    --pygments-sh: #e25e5e;
    --pygments-si: #c17492;
    --pygments-sx: #00a300;
    --pygments-sr: #c17492;
    --pygments-s1: #e25e5e;
    --pygments-ss: #8381e7;
    --pygments-bp: #00a300;
    --pygments-fm: #7a7afe;
    --pygments-vc: #8381e7;
    --pygments-vg: #8381e7;
    --pygments-vi: #8381e7;
    --pygments-vm: #8381e7;
    --pygments-il: #898989;
}

.mw-highlight .err {
    border-color: var(--pygments-err)
}

.mw-highlight .c {
    color: var(--pygments-c)
}

.mw-highlight .k {
    color: var(--pygments-k)
}

.mw-highlight .o {
    color: var(--pygments-o)
}

.mw-highlight .ch {
    color: var(--pygments-ch)
}

.mw-highlight .cm {
    color: var(--pygments-cm)
}

.mw-highlight .cp {
    color: var(--pygments-cp)
}

.mw-highlight .cpf {
    color: var(--pygments-cpf)
}

.mw-highlight .c1 {
    color: var(--pygments-c1)
}

.mw-highlight .cs {
    color: var(--pygments-cs)
}

.mw-highlight .gd {
    color: var(--pygments-gd)
}

.mw-highlight .gr {
    color: var(--pygments-gr)
}

.mw-highlight .gh {
    color: var(--pygments-gh)
}

.mw-highlight .gi {
    color: var(--pygments-gi)
}

.mw-highlight .go {
    color: var(--pygments-go)
}

.mw-highlight .gp {
    color: var(--pygments-gp)
}

.mw-highlight .gu {
    color: var(--pygments-gu)
}

.mw-highlight .gt {
    color: var(--pygments-gt)
}

.mw-highlight .kc {
    color: var(--pygments-kc)
}

.mw-highlight .kd {
    color: var(--pygments-kd)
}

.mw-highlight .kn {
    color: var(--pygments-kn)
}

.mw-highlight .kp {
    color: var(--pygments-kp)
}

.mw-highlight .kr {
    color: var(--pygments-kr)
}

.mw-highlight .kt {
    color: var(--pygments-kt)
}

.mw-highlight .m {
    color: var(--pygments-m)
}

.mw-highlight .s {
    color: var(--pygments-s)
}

.mw-highlight .na {
    color: var(--pygments-na)
}

.mw-highlight .nb {
    color: var(--pygments-nb)
}

.mw-highlight .nc {
    color: var(--pygments-nc)
}

.mw-highlight .no {
    color: var(--pygments-no)
}

.mw-highlight .nd {
    color: var(--pygments-nd)
}

.mw-highlight .ni {
    color: var(--pygments-ni)
}

.mw-highlight .ne {
    color: var(--pygments-ne)
}

.mw-highlight .nf {
    color: var(--pygments-nf)
}

.mw-highlight .nl {
    color: var(--pygments-nl)
}

.mw-highlight .nn {
    color: var(--pygments-nn)
}

.mw-highlight .nt {
    color: var(--pygments-nt)
}

.mw-highlight .nv {
    color: var(--pygments-nv)
}

.mw-highlight .ow {
    color: var(--pygments-ow)
}

.mw-highlight .w {
    color: var(--pygments-w)
}

.mw-highlight .mb {
    color: var(--pygments-mb)
}

.mw-highlight .mf {
    color: var(--pygments-mf)
}

.mw-highlight .mh {
    color: var(--pygments-mh)
}

.mw-highlight .mi {
    color: var(--pygments-mi)
}

.mw-highlight .mo {
    color: var(--pygments-mo)
}

.mw-highlight .sa {
    color: var(--pygments-sa)
}

.mw-highlight .sb {
    color: var(--pygments-sb)
}

.mw-highlight .sc {
    color: var(--pygments-sc)
}

.mw-highlight .dl {
    color: var(--pygments-dl)
}

.mw-highlight .sd {
    color: var(--pygments-sd)
}

.mw-highlight .s2 {
    color: var(--pygments-s2)
}

.mw-highlight .se {
    color: var(--pygments-se)
}

.mw-highlight .sh {
    color: var(--pygments-sh)
}

.mw-highlight .si {
    color: var(--pygments-si)
}

.mw-highlight .sx {
    color: var(--pygments-sx)
}

.mw-highlight .sr {
    color: var(--pygments-sr)
}

.mw-highlight .s1 {
    color: var(--pygments-s1)
}

.mw-highlight .ss {
    color: var(--pygments-ss)
}

.mw-highlight .bp {
    color: var(--pygments-bp)
}

.mw-highlight .fm {
    color: var(--pygments-fm)
}

.mw-highlight .vc {
    color: var(--pygments-vc)
}

.mw-highlight .vg {
    color: var(--pygments-vg)
}

.mw-highlight .vi {
    color: var(--pygments-vi)
}

.mw-highlight .vm {
    color: var(--pygments-vm)
}

.mw-highlight .il {
    color: var(--pygments-il)
}

.mw-highlight,
.mw-highlight pre {
    background: var(--pygments-background)
}

.mw-content-ltr.mw-highlight-lines pre,
.mw-content-ltr.content .mw-highlight-lines pre {
    padding-left: 3.5em;
    box-shadow: inset 2.75em 0 0 var(--wiki-content-dynamic-color--inverted);
}

.mw-highlight .hll {
    background-color: rgba(var(--wiki-accent-color--rgb), .2)
}


#p-search {
    z-index:2;
}

#p-search .searchButton {
    background-color:transparent;
}



.ace_editor {
    /* this image gradient hack effectively lets the element have 2 layers of background */
    background-image:linear-gradient(var(--wiki-content-dynamic-color), var(--wiki-content-dynamic-color));
    background-color:rgba(var(--wiki-content-dynamic-color--inverted--rgb),0.93);
    color: rgba(var(--wiki-content-dynamic-color--rgb), 0.93);
}

.ace_editor .ace_cursor {
    color: var(--wiki-content-text-color);
}

.ace_editor .ace_marker-layer .ace_selection {
    background: rgba(var(--wiki-content-dynamic-color--rgb), 0.20)
}

.ace_editor.ace_multiselect .ace_selection.ace_start {
    box-shadow: 0 0 3px 0px var(--ace-multiselect-shadow);
}

.ace_editor .ace_marker-layer .ace_step {
    background: var(--ace-step-highlight);
}

.ace_editor .ace_marker-layer .ace_active-line {
    background: rgba(var(--wiki-content-dynamic-color--rgb), 0.031)
}

.ace_editor .ace_gutter-active-line {
    background-color: rgba(var(--wiki-content-dynamic-color--rgb), 0.031)
}

.ace-tm .ace_marker-layer .ace_selected-word {
    background: rgba(var(--wiki-content-dynamic-color--rgb), 0.05);
}

.ace_editor .ace_marker-layer .ace_selection {
    background: rgba(var(--wiki-content-dynamic-color--rgb), 0.1);
}

.ace_editor .ace_marker-layer .ace_selected-word {
    border: 1px solid rgba(var(--wiki-content-dynamic-color--rgb), 0.20)
}

.ace_editor .ace_invisible {
    color: rgba(var(--wiki-content-dynamic-color--rgb), 0.25)
}

.ace_editor .ace_keyword,
.ace_editor .ace_meta {
    color: var(--ace-keywords);
}

.ace_editor .ace_constant,
.ace_editor .ace_constant.ace_numeric,
.ace_editor .ace_constant.ace_character,
.ace_editor .ace_constant.ace_character.ace_escape,
.ace_editor .ace_constant.ace_other,
.ace_editor .ace_heading,
.ace_editor .ace_markup.ace_heading,
.ace_editor .ace_support.ace_constant {
    color: var(--ace-constants);
}

.ace_editor .ace_invalid.ace_illegal {
    color: var(--ace-illegal);
    background-color: var(--ace-illegal-highlight);
}

.ace_editor .ace_invalid.ace_deprecated {
    text-decoration: underline;
    font-style: italic;
    color: var(--ace-deprecated);
}

.ace_editor .ace_support,
.ace_editor .ace_support.ace_type {
    color: var(--ace-support);
}

.ace_editor .ace_fold {
    background-color: rgba(var(--wiki-content-dynamic-color--rgb), 0.1);
    border-color: rgba(var(--wiki-content-dynamic-color--rgb), 0.1);
}

.ace_editor .ace_support.ace_function {
    color: var(--ace-function);
}

.ace_editor .ace_list,
.ace_editor .ace_markup.ace_list,
.ace_editor .ace_storage {
    color: var(--ace-list);
}

.ace_editor .ace_entity.ace_name.ace_function,
.ace_editor .ace_meta.ace_tag,
.ace_editor .ace_variable {
    color: var(--ace-variable);
}

.ace_editor .ace_string {
    color: var(--ace-string);
}

.ace_editor .ace_string.ace_regexp {
    color: var(--ace-regexp);
}

.ace_editor .ace_comment {
    font-style: italic;
    color: rgba(var(--wiki-content-dynamic-color--rgb), 0.3);
}

.ace_editor .ace_xml-pe {
    color: rgba(var(--wiki-content-dynamic-color--rgb), 0.28);
}

.ace_editor .ace_indent-guide {
    background:none;
    border-right:1px solid rgba(var(--wiki-content-dynamic-color--rgb), 0.2);
}

.ace_search {
    background-color: var(--wiki-content-background-color--secondary);
    color: var(--wiki-content-text-color);
    border: 1px solid var(--wiki-content-border-color);
}

.ace_search_field {
    background-color: var(--wiki-content-background-color--secondary);
    border: 1px solid var(--wiki-content-border-color);
    color: var(--wiki-content-text-mix-color);
}

.ace_button {
    color: var(--wiki-content-text-color);
    border: 1px solid var(--wiki-content-border-color);
}

.ace_button:hover {
    background-color: var(--wiki-accent-color--hover);
    color: var(--wiki-accent-label-color);
}

.ace_button.checked {
    background-color: var(--wiki-accent-color);
    color: var(--wiki-accent-label-color);
}

.ace_searchbtn {
    background-color: var(--wiki-accent-color);
    color: var(--wiki-accent-label-color);
    border: 1px solid var(--wiki-content-border-color);
}

.ace_searchbtn:hover {
    background-color: var(--wiki-accent-color--hover);
    color: var(--wiki-accent-label-color);
}

.ace_searchbtn.prev::after,
.ace_searchbtn.next::after {
    border-color: var(--wiki-accent-label-color);
}

.ace_searchbtn_close {
    filter: var(--wiki-icon-general-filter);
}

.wikiEditor-ui .codeEditor-status {
    background-color: var(--wiki-content-background-color--secondary);
    border-color: var(--wiki-content-border-color);
}

.mw-editform #wpTextbox1 {
    background: rgba(var(--wiki-content-background-color--rgb), 0.5);
    color: var(--wiki-content-text-color);
}

.theme-dark .CodeMirror,
.CodeMirror {
    --codemirror-yellow: #ffd700;
    --codemirror-light-blue: #adf;
    --codemirror-blue: #08f;
    --codemirror-green: #ad0;
    --codemirror-red: #f50;
    --codemirror-dark-red: #dd1616;
    --codemirror-purple: #CD4EF9;
    --codemirror-pink: #e0e;
    --codemirror-light-gray: #eee;
    --codemirror-gray: #84a0a0;
}

.theme-light .CodeMirror {
    --codemirror-yellow: #9e8500;
    --codemirror-light-blue: #008ae7;
    --codemirror-blue: #0085f9;
    --codemirror-green: #ad0;
    --codemirror-red: #ef4f00;
    --codemirror-dark-red: #a11;
    --codemirror-purple: #80c;
    --codemirror-pink: #ed00ed;
    --codemirror-light-gray: #858585;
    --codemirror-gray: #6b8a8a;
}

.CodeMirror {
    background-color: rgba(var(--wiki-content-dynamic-color--inverted--rgb),0.85);
    color: var(--wiki-content-text-color)
}

.CodeMirror .CodeMirror-line::selection,
.CodeMirror .CodeMirror-line>span::selection,
.CodeMirror .CodeMirror-line>span>span::selection,
.CodeMirror .CodeMirror-line::-moz-selection,
.CodeMirror .CodeMirror-line>span::-moz-selection,
.CodeMirror .CodeMirror-line>span>span::-moz-selection,
.CodeMirror .CodeMirror-selected {
    background: rgba(var(--wiki-content-link-color--rgb), .3);
}

.CodeMirror-linenumber {
    color: rgba(var(--wiki-content-text-color--rgb), .6)
}

.CodeMirror div.CodeMirror-cursor {
    border-left: 1px solid var(--wiki-content-text-color);
}

.cm-keyword {
    color: var(--codemirror-purple)
}

.cm-def {
    color: var(--codemirror-blue)
}

.cm-comment {
    color: var(--codemirror-yellow)
}

.cm-variable-2 {
    color: var(--codemirror-light-blue)
}

.cm-string {
    color: var(--codemirror-red)
}

.cm-atom {
    color: var(--codemirror-pink)
}

.cm-number {
    color: var(--codemirror-green)
}

.CodeMirror-gutters {
    background-color: var(--wiki-content-background-color--secondary);
    border-right-color: var(--wiki-content-border-color);
    color: var(--wiki-content-text-color)
}

.cm-mw-matching {
    background-color: var(--codemirror-yellow)
}

.cm-mw-skipformatting {
    background-color: var(--codemirror-light-blue)
}

.cm-mw-list {
    color: var(--codemirror-blue)
}

.cm-mw-doubleUnderscore,
.cm-mw-hr,
.cm-mw-signature {
    background-color: var(--wiki-content-background-color--secondary);
    color: var(--codemirror-blue)
}

.cm-mw-indenting {
    color: var(--codemirror-blue)
}

.cm-mw-mnemonic {
    color: var(--codemirror-green)
}

.cm-mw-comment {
    color: var(--codemirror-gray)
}

.cm-mw-apostrophes-bold,
.cm-mw-apostrophes-italic,
.cm-mw-section-header {
    color: var(--codemirror-blue)
}

.cm-mw-template,
.cm-mw-template-argument-name,
.cm-mw-template-bracket,
.cm-mw-template-delimiter,
.cm-mw-template-name {
    color: var(--codemirror-purple);
}

.cm-mw-templatevariable,
.cm-mw-templatevariable-bracket,
.cm-mw-templatevariable-delimiter,
.cm-mw-templatevariable-name {
    color: var(--codemirror-red)
}

.cm-mw-parserfunction-bracket,
.cm-mw-parserfunction-delimiter,
.cm-mw-parserfunction-name {
    color: var(--codemirror-dark-red)
}

.cm-mw-exttag-attribute,
.cm-mw-exttag-bracket,
.cm-mw-exttag-name,
.cm-mw-htmltag-attribute,
.cm-mw-htmltag-bracket,
.cm-mw-htmltag-name {
    color: var(--codemirror-green)
}

.cm-mw-link,
.cm-mw-link-pagename {
    color: var(--wiki-content-link-color)
}

.cm-mw-link-tosection {
    color: var(--codemirror-blue)
}

.cm-mw-extlink,
.cm-mw-extlink-bracket,
.cm-mw-extlink-protocol,
.cm-mw-free-extlink,
.cm-mw-free-extlink-protocol,
.cm-mw-link-bracket,
.cm-mw-link-delimiter {
    color: var(--wiki-content-link-color)
}

.cm-mw-table-bracket,
.cm-mw-table-definition,
.cm-mw-table-delimiter {
    color: var(--codemirror-pink)
}

.cm-mw-matchingbracket {
    background-color: var(--wiki-content-background-color--secondary);
    box-shadow: inset 0 0 1px 1px var(--wiki-content-link-color);
    font-weight: bold;
}

/*************
* End editor *
**************/