MediaWiki:Common.css
Jump to navigation
Jump to search
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)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/* CSS placed here will be applied to all skins */
a {
text-decoration: underline;
}
.nowrap, .nowraplinks a {
white-space: nowrap;
}
.treeview ul {
padding: 0;
margin: 0;
}
.treeview li {
padding: 0;
margin: 0;
list-style-type: none;
list-style-image: none;
}
.treeview li li {
background: url("https://upload.wikimedia.org/wikipedia/commons/f/f2/Treeview-grey-line.png") no-repeat 0 -2981px;
/* @noflip */
padding-left: 21px;
text-indent: 0.3em;
}
.treeview li li:last-child {
background-position: 0 -5971px
}
/* first line here deals with new situation after RemexHTML switch,
* where emptyline cause the first child to become the 2nd child. Such a mess
*/
.treeview li.emptyline > ul > .mw-empty-elt:first-child + .emptyline,
.treeview li.emptyline > ul > li:first-child {
background-position: 0 9px
}
:root,
.theme-light {
--wiki-body-background-image: none;
--wiki-body-background-color: #f6f6f6; /* Matches @app body background color */
--wiki-body-background-color--rgb: 246,246,246; /* Matches @app body background color in RGB */
--wiki-body-background-color--secondary: #ffffff; /* Matches @app secondary background color */
--wiki-body-background-color--secondary--rgb: 255,255,255; /* Matches @app secondary background color in RGB */
--wiki-body-dynamic-color: #000000; /* Matches @app primary text color */
--wiki-body-dynamic-color--rgb: 0,0,0; /* Matches @app primary text color in RGB */
--wiki-body-dynamic-color--inverted: #ffffff; /* Matches @app inverted text color */
--wiki-body-dynamic-color--inverted--rgb: 255,255,255; /* Matches @app inverted text color in RGB */
--wiki-body-dynamic-color--secondary: #333333; /* Matches @app secondary text color */
--wiki-body-dynamic-color--secondary--rgb: 51,51,51; /* Matches @app secondary text color in RGB */
--wiki-body-dynamic-color--secondary--inverted: #dddddd; /* Matches @app secondary inverted text color */
--wiki-body-dynamic-color--secondary--inverted--rgb: 221,221,221; /* Matches @app secondary inverted text color in RGB */
--wiki-content-background-color: #ffffff; /* Matches @app content background color */
--wiki-content-background-color--rgb: 255, 255, 255; /* Matches @app content background color in RGB */
--wiki-content-background-opacity: 1; /* Matches @app content background opacity */
--wiki-content-background-color--secondary: #fbfbfb; /* Matches @app secondary content background color */
--wiki-content-background-color--secondary--rgb: 251, 251, 251; /* Matches @app secondary content background color in RGB */
--wiki-content-border-color: #aaaaaa; /* Matches @app dark theme content border color */
--wiki-content-border-color--rgb: 170,170,170; /* Matches @app dark theme content border color in RGB */
--wiki-content-text-color: #111111; /* Matches @app content text color */
--wiki-content-text-color--rgb: 17, 17, 17; /* Matches @app content text color in RGB */
--wiki-content-link-color: #0645ad; /* Matches @app link color */
--wiki-content-link-color--rgb: 6, 69, 173; /* Matches @app link color in RGB */
--wiki-content-link-label-color: #ffffff; /* Matches @app link label color */
--wiki-content-link-label-color--rgb: 255,255,255; /* Matches @app link label color in RGB */
--wiki-content-link-color--visited: var(--wiki-content-link-color); /* Matches @app visited link color */
--wiki-content-link-color--visited--rgb: var(--wiki-content-link-color--rgb); /* Matches @app visited link color in RGB */
--wiki-content-link-color--hover: var(--wiki-content-link-color); /* Matches @app link hover color */
--wiki-content-link-color--hover--rgb: var(--wiki-content-link-color--rgb); /* Matches @app link hover color in RGB */
--wiki-content-redlink-color: #ba0000; /* Matches @app redlink color */
--wiki-content-redlink-color--rgb: 186,0,0; /* Matches @app redlink color in RGB */
--wiki-content-text-mix-color: #8a8b8b; /* Matches @app mixed text color */
--wiki-content-text-mix-color--rgb: 138,139,139; /* Matches @app mixed text color in RGB */
--wiki-content-text-mix-color-95: #eef0f0; /* Matches @app mixed text color at 95% */
--wiki-content-text-mix-color-95--rgb: 238,240,240; /* Matches @app mixed text color at 95% in RGB */
--wiki-content-dynamic-color: #000000; /* Matches @app dynamic content color */
--wiki-content-dynamic-color--rgb: 0,0,0; /* Matches @app dynamic content color in RGB */
--wiki-content-dynamic-color--inverted: #ffffff; /* Matches @app inverted dynamic content color */
--wiki-content-dynamic-color--inverted--rgb: 255,255,255; /* Matches @app inverted dynamic content color in RGB */
--wiki-content-dynamic-color--secondary: #333333; /* Matches @app secondary dynamic content color */
--wiki-content-dynamic-color--secondary--rgb: 51,51,51; /* Matches @app secondary dynamic content color in RGB */
--wiki-content-dynamic-color--secondary--inverted: #dddddd; /* Matches @app secondary inverted dynamic content color */
--wiki-content-dynamic-color--secondary--inverted--rgb: 221,221,221; /* Matches @app secondary inverted dynamic content color in RGB */
--wiki-heading-color: var(--wiki-content-text-color); /* Matches @app heading color */
--wiki-heading-color--rgb: var(--wiki-content-text-color--rgb); /* Matches @app heading color in RGB */
--wiki-heading-font-family: 'Linux Libertine','Georgia','Times',serif; /* Matches @app heading font family */
--wiki-zebra-table-color: #DFE6E7; /* Matches @app zebra table color */
--wiki-accent-color: #e6c28c; /* Matches @app accent color */
--wiki-accent-color--rgb: 230, 194, 140; /* Matches @app accent color in RGB */
--wiki-accent-color--hover: #eacfa6; /* Matches @app accent hover color */
--wiki-accent-color--hover--rgb: 234, 207, 166; /* Matches @app accent hover color in RGB */
--wiki-accent-label-color: #ffffff; /* Matches @app accent label color */
--wiki-accent-label-color--rgb: 255, 255, 255; /* Matches @app accent label color in RGB */
--wiki-accent-link-color: #22214d; /* Matches @app accent link color */
--wiki-accent-link-color--rgb: 34, 33, 77; /* Matches @app accent link color in RGB */
--wiki-sidebar-background-color: var(--wiki-content-background-color); /* Matches @app sidebar background color */
--wiki-sidebar-background-color--rgb: var(--wiki-content-background-color--rgb); /* Matches @app sidebar background color in RGB */
--wiki-sidebar-background-opacity: 0.0; /* Matches @app sidebar background opacity */
--wiki-sidebar-border-color: var(--wiki-body-background-color); /* Matches @app sidebar border color */
--wiki-sidebar-border-color--rgb: var(--wiki-body-background-color--rgb); /* Matches @app sidebar border color in RGB */
--wiki-sidebar-link-color: var(--wiki-content-link-color); /* Matches @app sidebar link color */
--wiki-sidebar-link-color--rgb: var(--wiki-content-link-color--rgb); /* Matches @app sidebar link color in RGB */
--wiki-sidebar-heading-color: var(--wiki-heading-color); /* Matches @app sidebar heading color */
--wiki-sidebar-heading-color--rgb: var(--wiki-heading-color--rgb); /* Matches @app sidebar heading color in RGB */
--wiki-icon-general-filter: invert(100%); /* Matches @app light theme icon general filter */
--wiki-icon-to-link-filter: invert(18%) sepia(70%) saturate(2435%) hue-rotate(208deg) brightness(103%) contrast(106%); /* Matches @app light theme icon to link filter */
}
.theme-dark {
--wiki-body-background-image: none;
--wiki-body-background-color: #030303; /* Updated to match @app dark theme background color */
--wiki-body-background-color--rgb: 3, 3, 3; /* Updated to match @app dark theme background color in RGB */
--wiki-body-dynamic-color: #ffffff; /* Matches @app dark theme dynamic color */
--wiki-body-dynamic-color--rgb: 255,255,255; /* Matches @app dark theme dynamic color in RGB */
--wiki-body-dynamic-color--inverted: #000000; /* Matches @app dark theme inverted dynamic color */
--wiki-body-dynamic-color--inverted--rgb: 0,0,0; /* Matches @app dark theme inverted dynamic color in RGB */
--wiki-body-dynamic-color--secondary: #dddddd; /* Matches @app dark theme secondary dynamic color */
--wiki-body-dynamic-color--secondary--rgb: 221,221,221; /* Matches @app dark theme secondary dynamic color in RGB */
--wiki-body-dynamic-color--secondary--inverted: #333333; /* Matches @app dark theme secondary inverted dynamic color */
--wiki-body-dynamic-color--secondary--inverted--rgb: 51,51,51; /* Matches @app dark theme secondary inverted dynamic color in RGB */
--wiki-content-background-color: #202020; /* Matches @app dark theme content background color */
--wiki-content-background-color--rgb: 32,32,32; /* Matches @app dark theme content background color in RGB */
--wiki-content-background-opacity: 1.0; /* Matches @app dark theme content background opacity */
--wiki-content-background-color--secondary: #2b2b2b; /* Matches @app dark theme content background secondary color */
--wiki-content-background-color--secondary--rgb: 43,43,43; /* Matches @app dark theme content background secondary color in RGB */
--wiki-content-border-color: #ccc; /* Matches @app dark theme content border color */
--wiki-content-border-color--rgb: 153,26,81; /* Matches @app dark theme content border color in RGB */
--wiki-content-text-color: #ededed; /* Matches @app dark theme content text color */
--wiki-content-text-color--rgb: 237,237,237; /* Matches @app dark theme content text color in RGB */
--wiki-content-link-color: #fff; /* Matches @app dark theme link color */
--wiki-content-link-color--rgb: 109,138,251; /* Matches @app dark theme link color in RGB */
--wiki-content-link-label-color: #000000; /* Matches @app dark theme link label color */
--wiki-content-link-label-color--rgb: 0,0,0; /* Matches @app dark theme link label color in RGB */
--wiki-content-link-color--visited: var(--wiki-content-link-color); /* Matches @app dark theme visited link color */
--wiki-content-link-color--visited--rgb: var(--wiki-content-link-color--rgb); /* Matches @app dark theme visited link color in RGB */
--wiki-content-link-color--hover: var(--wiki-content-link-color); /* Matches @app dark theme link hover color */
--wiki-content-link-color--hover--rgb: var(--wiki-content-link-color--rgb); /* Matches @app dark theme link hover color in RGB */
--wiki-content-redlink-color: #FC3B2C; /* Matches @app dark theme redlink color */
--wiki-content-redlink-color--rgb: 252,59,44; /* Matches @app dark theme redlink color in RGB */
--wiki-content-text-mix-color: #868686; /* Matches @app dark theme mixed text color */
--wiki-content-text-mix-color--rgb: 134,134,134; /* Matches @app dark theme mixed text color in RGB */
--wiki-content-text-mix-color-95: #2a2a2a; /* Matches @app dark theme mixed text color at 95% */
--wiki-content-text-mix-color-95--rgb: 42,42,42; /* Matches @app dark theme mixed text color at 95% in RGB */
--wiki-content-dynamic-color: #ffffff; /* Matches @app dark theme dynamic content color */
--wiki-content-dynamic-color--rgb: 255, 255, 255; /* Matches @app dark theme dynamic content color in RGB */
--wiki-content-dynamic-color--inverted: #000000; /* Matches @app dark theme inverted dynamic content color */
--wiki-content-dynamic-color--inverted--rgb: 0, 0, 0; /* Matches @app dark theme inverted dynamic content color in RGB */
--wiki-content-dynamic-color--secondary: #dddddd; /* Matches @app dark theme secondary dynamic content color */
--wiki-content-dynamic-color--secondary--rgb: 221, 221, 221; /* Matches @app dark theme secondary dynamic content color in RGB */
--wiki-content-dynamic-color--secondary--inverted: #333333; /* Matches @app dark theme secondary inverted dynamic content color */
--wiki-content-dynamic-color--secondary--inverted--rgb: 51, 51, 51; /* Matches @app dark theme secondary inverted dynamic content color in RGB */
--wiki-heading-color: var(--wiki-content-text-color); /* Matches @app dark theme heading color */
--wiki-heading-color--rgb: var(--wiki-content-text-color--rgb); /* Matches @app dark theme heading color in RGB */
--wiki-heading-font-family: 'Linux Libertine','Georgia','Times',serif; /* Matches @app dark theme heading font family */
--wiki-zebra-table-color: #171717; /* Matches @app dark theme zebra table color */
--wiki-accent-color: #e6c28c; /* Matches @app dark theme accent color */
--wiki-accent-color--rgb: 230, 194, 140; /* Matches @app dark theme accent color in RGB */
--wiki-accent-color--hover: #eacfa6; /* Matches @app dark theme accent hover color */
--wiki-accent-color--hover--rgb: 234, 207, 166; /* Matches @app dark theme accent hover color in RGB */
--wiki-accent-label-color: #000000; /* Matches @app dark theme accent label color */
--wiki-accent-label-color--rgb: 0,0,0; /* Matches @app dark theme accent label color in RGB */
--wiki-accent-link-color: #22214d; /* Matches @app dark theme accent link color */
--wiki-accent-link-color--rgb: 34, 33, 77; /* Matches @app dark theme accent link color in RGB */
--wiki-sidebar-background-color: var(--wiki-content-background-color); /* Matches @app dark theme sidebar background color */
--wiki-sidebar-background-color--rgb: var(--wiki-content-background-color--rgb); /* Matches @app dark theme sidebar background color in RGB */
--wiki-sidebar-background-opacity: var(--wiki-content-background-opacity); /* Matches @app dark theme sidebar background opacity */
--wiki-sidebar-border-color: var(--wiki-content-border-color); /* Matches @app dark theme sidebar border color */
--wiki-sidebar-border-color--rgb: var(--wiki-content-border-color--rgb); /* Matches @app dark theme sidebar border color in RGB */
--wiki-sidebar-link-color: var(--wiki-content-link-color); /* Matches @app dark theme sidebar link color */
--wiki-sidebar-link-color--rgb: var(--wiki-content-link-color--rgb); /* Matches @app dark theme sidebar link color in RGB */
--wiki-sidebar-heading-color: var(--wiki-heading-color); /* Matches @app dark theme sidebar heading color */
--wiki-sidebar-heading-color--rgb: var(--wiki-heading-color--rgb); /* Matches @app dark theme sidebar heading color in RGB */
--wiki-navigation-background-color: var(--wiki-content-border-color); /* Matches @app dark theme navigation background color */
--wiki-navigation-background-color--rgb: var(--wiki-content-border-color--rgb); /* Matches @app dark theme navigation background color in RGB */
--wiki-navigation-background-color--secondary: var(--wiki-content-background-color--secondary); /* Matches @app dark theme navigation background secondary color */
--wiki-navigation-background-color--secondary--rgb: var(--wiki-content-background-color--secondary--rgb); /* Matches @app dark theme navigation background secondary color in RGB */
--wiki-navigation-border-color: var(--wiki-content-border-color); /* Matches @app dark theme navigation border color */
--wiki-navigation-border-color--rgb: var(--wiki-content-border-color--rgb); /* Matches @app dark theme navigation border color in RGB */
--wiki-navigation-text-color: var(--wiki-content-link-color); /* Matches @app dark theme navigation text color */
--wiki-navigation-text-color--rgb: var(--wiki-content-link-color--rgb); /* Matches @app dark theme navigation text color in RGB */
--wiki-navigation-selected-background-color: var(--wiki-content-background-color); /* Matches @app dark theme navigation selected background color */
--wiki-navigation-selected-background-color--rgb: var(--wiki-content-background-color--rgb); /* Matches @app dark theme navigation selected background color in RGB */
--wiki-navigation-selected-border-color: var(--wiki-navigation-border-color); /* Matches @app dark theme navigation selected border color */
--wiki-navigation-selected-border-color-rgb: var(--wiki-navigation-border-color--rgb); /* Matches @app dark theme navigation selected border color in RGB */
--wiki-navigation-selected-text-color: var(--wiki-content-text-color); /* Matches @app dark theme navigation selected text color */
--wiki-navigation-selected-text-color-rgb: var(--wiki-content-text-color--rgb); /* Matches @app dark theme navigation selected text color in RGB */
--wiki-alert-color: #ce0018; /* Matches @app dark theme alert color */
--wiki-alert-color--rgb: 206,0,24; /* Matches @app dark theme alert color in RGB */
--wiki-alert-label-color: #000000; /* Matches @app dark theme alert label color */
--wiki-alert-label-color--rgb: 0,0,0; /* Matches @app dark theme alert label color in RGB */
--wiki-warning-color:#cf721c; /* Matches @app dark theme warning color */
--wiki-warning-color--rgb: 207,114,28; /* Matches @app dark theme warning color in RGB */
--wiki-warning-label-color: #000000; /* Matches @app dark theme warning label color */
--wiki-warning-label-color--rgb: 0, 0, 0; /* Matches @app dark theme warning label color in RGB */
--wiki-success-color: #0c742f; /* Matches @app dark theme success color */
--wiki-success-color--rgb: 12,116,47; /* Matches @app dark theme success color in RGB */
--wiki-success-label-color: #000000; /* Matches @app dark theme success label color */
--wiki-success-label-color--rgb: 0,0,0; /* Matches @app dark theme success label color in RGB */
--wiki-icon-general-filter: invert(100%); /* Matches @app dark theme icon general filter */
--wiki-icon-to-link-filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(132deg) brightness(104%) contrast(102%); /* Matches @app dark theme icon to link filter */
}
/*****************************
* Dark mode Syntax highlight *
******************************/
.theme-dark .mw-highlight .hll { background-color: #49483e }
.theme-dark .mw-highlight { background: #272822; color: #f8f8f2 }
.theme-dark .mw-highlight .c { color: #75715e } /* Comment */
.theme-dark .mw-highlight .err { color: #960050; background-color: #1e0010 } /* Error */
.theme-dark .mw-highlight .k { color: #66d9ef } /* Keyword */
.theme-dark .mw-highlight .l { color: #ae81ff } /* Literal */
.theme-dark .mw-highlight .n { color: #f8f8f2 } /* Name */
.theme-dark .mw-highlight .o { color: #f92672 } /* Operator */
.theme-dark .mw-highlight .p { color: #f8f8f2 } /* Punctuation */
.theme-dark .mw-highlight .ch { color: #75715e } /* Comment.Hashbang */
.theme-dark .mw-highlight .cm { color: #75715e } /* Comment.Multiline */
.theme-dark .mw-highlight .cp { color: #75715e } /* Comment.Preproc */
.theme-dark .mw-highlight .cpf { color: #75715e } /* Comment.PreprocFile */
.theme-dark .mw-highlight .c1 { color: #75715e } /* Comment.Single */
.theme-dark .mw-highlight .cs { color: #75715e } /* Comment.Special */
.theme-dark .mw-highlight .gd { color: #f92672 } /* Generic.Deleted */
.theme-dark .mw-highlight .ge { font-style: italic } /* Generic.Emph */
.theme-dark .mw-highlight .gi { color: #a6e22e } /* Generic.Inserted */
.theme-dark .mw-highlight .gs { font-weight: bold } /* Generic.Strong */
.theme-dark .mw-highlight .gu { color: #75715e } /* Generic.Subheading */
.theme-dark .mw-highlight .kc { color: #66d9ef } /* Keyword.Constant */
.theme-dark .mw-highlight .kd { color: #66d9ef } /* Keyword.Declaration */
.theme-dark .mw-highlight .kn { color: #f92672 } /* Keyword.Namespace */
.theme-dark .mw-highlight .kp { color: #66d9ef } /* Keyword.Pseudo */
.theme-dark .mw-highlight .kr { color: #66d9ef } /* Keyword.Reserved */
.theme-dark .mw-highlight .kt { color: #66d9ef } /* Keyword.Type */
.theme-dark .mw-highlight .ld { color: #e6db74 } /* Literal.Date */
.theme-dark .mw-highlight .m { color: #ae81ff } /* Literal.Number */
.theme-dark .mw-highlight .s { color: #e6db74 } /* Literal.String */
.theme-dark .mw-highlight .na { color: #a6e22e } /* Name.Attribute */
.theme-dark .mw-highlight .nb { color: #f8f8f2 } /* Name.Builtin */
.theme-dark .mw-highlight .nc { color: #a6e22e } /* Name.Class */
.theme-dark .mw-highlight .no { color: #66d9ef } /* Name.Constant */
.theme-dark .mw-highlight .nd { color: #a6e22e } /* Name.Decorator */
.theme-dark .mw-highlight .ni { color: #f8f8f2 } /* Name.Entity */
.theme-dark .mw-highlight .ne { color: #a6e22e } /* Name.Exception */
.theme-dark .mw-highlight .nf { color: #a6e22e } /* Name.Function */
.theme-dark .mw-highlight .nl { color: #f8f8f2 } /* Name.Label */
.theme-dark .mw-highlight .nn { color: #f8f8f2 } /* Name.Namespace */
.theme-dark .mw-highlight .nx { color: #a6e22e } /* Name.Other */
.theme-dark .mw-highlight .py { color: #f8f8f2 } /* Name.Property */
.theme-dark .mw-highlight .nt { color: #f92672 } /* Name.Tag */
.theme-dark .mw-highlight .nv { color: #f8f8f2 } /* Name.Variable */
.theme-dark .mw-highlight .ow { color: #f92672 } /* Operator.Word */
.theme-dark .mw-highlight .w { color: #f8f8f2 } /* Text.Whitespace */
.theme-dark .mw-highlight .mb { color: #ae81ff } /* Literal.Number.Bin */
.theme-dark .mw-highlight .mf { color: #ae81ff } /* Literal.Number.Float */
.theme-dark .mw-highlight .mh { color: #ae81ff } /* Literal.Number.Hex */
.theme-dark .mw-highlight .mi { color: #ae81ff } /* Literal.Number.Integer */
.theme-dark .mw-highlight .mo { color: #ae81ff } /* Literal.Number.Oct */
.theme-dark .mw-highlight .sa { color: #e6db74 } /* Literal.String.Affix */
.theme-dark .mw-highlight .sb { color: #e6db74 } /* Literal.String.Backtick */
.theme-dark .mw-highlight .sc { color: #e6db74 } /* Literal.String.Char */
.theme-dark .mw-highlight .dl { color: #e6db74 } /* Literal.String.Delimiter */
.theme-dark .mw-highlight .sd { color: #e6db74 } /* Literal.String.Doc */
.theme-dark .mw-highlight .s2 { color: #e6db74 } /* Literal.String.Double */
.theme-dark .mw-highlight .se { color: #ae81ff } /* Literal.String.Escape */
.theme-dark .mw-highlight .sh { color: #e6db74 } /* Literal.String.Heredoc */
.theme-dark .mw-highlight .si { color: #e6db74 } /* Literal.String.Interpol */
.theme-dark .mw-highlight .sx { color: #e6db74 } /* Literal.String.Other */
.theme-dark .mw-highlight .sr { color: #e6db74 } /* Literal.String.Regex */
.theme-dark .mw-highlight .s1 { color: #e6db74 } /* Literal.String.Single */
.theme-dark .mw-highlight .ss { color: #e6db74 } /* Literal.String.Symbol */
.theme-dark .mw-highlight .bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */
.theme-dark .mw-highlight .fm { color: #a6e22e } /* Name.Function.Magic */
.theme-dark .mw-highlight .vc { color: #f8f8f2 } /* Name.Variable.Class */
.theme-dark .mw-highlight .vg { color: #f8f8f2 } /* Name.Variable.Global */
.theme-dark .mw-highlight .vi { color: #f8f8f2 } /* Name.Variable.Instance */
.theme-dark .mw-highlight .vm { color: #f8f8f2 } /* Name.Variable.Magic */
.theme-dark .mw-highlight .il { color: #ae81ff } /* Literal.Number.Integer.Long */
/*****************************
* End syntax highlight *
******************************/
/*****************************
* PortableInfoboxes *
******************************/
:root {
--pi-background: var(--wiki-content-background-color);
--pi-secondary-background: var(--wiki-accent-color);
--pi-secondary-background--rgb: var(--wiki-accent-color--rgb);
--pi-secondary-background-label: var(--wiki-accent-label-color);
--pi-border-color: rgba(var(--pi-secondary-background--rgb),0.5);
}
.portable-infobox .pi-title,
.portable-infobox .pi-header {
text-align:center;
font-size:1.5em;
background:rgba(var(--pi-secondary-background--rgb), 0.75);
color:var(--pi-secondary-background-label);
}
.portable-infobox .pi-data {
background:rgba(var(--pi-secondary-background--rgb), 0.18);
}
.portable-infobox .pi-image {
padding: 8px;
}
.pi-image-thumbnail {
max-width:100%;
}
.pi-section-navigation .pi-section-tab.pi-section-active,
.pi-section-navigation .pi-section-tab.current,
.pi-media-collection .pi-tab-link.current {
background: var(--pi-secondary-background);
color: var(--pi-secondary-background-label);
}
/* overqualify these to overwrite normal content heading styles */
.mw-body .portable-infobox h2,
.mw-body .portable-infobox h3 {
border-bottom: 0;
font-family: inherit;
font-weight: 700;
margin: 0;
}
/*****************************
* End PortableInfoboxes *
******************************/
/*****************************
* Used by [[Template:Ambox]] *
******************************/
.ambox {
background-color: var(--wiki-content-background-color--secondary);
border: 1px solid var(--wiki-content-border-color);
border-collapse: collapse;
font-size: 95%;
margin: 0 auto 2px auto;
width: 80%;
}
.ambox-gray {
border-left-color: #383838;
}
.ambox + .ambox {
margin-top: -2px;
}
.ambox-text {
padding: 0.25em 0.5em;
}
.ambox-image {
padding: 2px 0px 2px 0.5em;
text-align: center;
width: 60px;
}
.ambox-tiny .ambox-image {
padding: 2px 0.5em;
text-align: left;
width: auto;
}
/* Ambox colors */
.ambox-blue {
border-left: 10px solid #1e90ff;
}
.ambox-red {
border-left: 10px solid #b22222;
}
.ambox-orange {
border-left: 10px solid #f28500;
}
.ambox-yellow {
border-left: 10px solid #f4c430;
}
.ambox-purple {
border-left: 10px solid #9932cc;
}
.ambox-gray {
border-left: 10px solid #bba;
}
.ambox-green {
border-left: 10px solid #228b22;
}
/*********************
* End Template:Ambox *
**********************/
/****************************************
* Semantically-correct horizontal lists *
****************************************/
.hlist dl,
.hlist ol,
.hlist ul {
margin: 0;
padding: 0;
}
/* Display list items inline */
.hlist dd,
.hlist dt,
.hlist li {
/*
* don't trust the note that says margin doesn't work with inline
* removing margin: 0 makes dds have margins again
* We also want to reset margin-right in Minerva
*/
margin: 0;
display: inline;
}
/* Display requested top-level lists inline */
.hlist.inline,
.hlist.inline dl,
.hlist.inline ol,
.hlist.inline ul,
/* Display nested lists inline */
.hlist dl dl,
.hlist dl ol,
.hlist dl ul,
.hlist ol dl,
.hlist ol ol,
.hlist ol ul,
.hlist ul dl,
.hlist ul ol,
.hlist ul ul {
display: inline;
}
/* Hide empty list items */
.hlist .mw-empty-li {
display: none;
}
/* TODO: :not() can maybe be used here to remove the later rule. naive test
* seems to work. more testing needed. like so: */
.hlist dt:not(:last-child)::after {
content: ": ";
}
.hlist dd:not(:last-child)::after,
.hlist li:not(:last-child)::after {
content: " · ";
font-weight: bold;
}
/* Add parentheses around nested lists */
.hlist dd dd:first-child::before,
.hlist dd dt:first-child::before,
.hlist dd li:first-child::before,
.hlist dt dd:first-child::before,
.hlist dt dt:first-child::before,
.hlist dt li:first-child::before,
.hlist li dd:first-child::before,
.hlist li dt:first-child::before,
.hlist li li:first-child::before {
content: " (";
font-weight: normal;
}
.hlist dd dd:last-child::after,
.hlist dd dt:last-child::after,
.hlist dd li:last-child::after,
.hlist dt dd:last-child::after,
.hlist dt dt:last-child::after,
.hlist dt li:last-child::after,
.hlist li dd:last-child::after,
.hlist li dt:last-child::after,
.hlist li li:last-child::after {
content: ")";
font-weight: normal;
}
/* Put ordinals in front of ordered list items */
.hlist ol {
counter-reset: listitem;
}
.hlist ol > li {
counter-increment: listitem;
}
.hlist ol > li::before {
content: " " counter(listitem) "\a0";
}
.hlist dd ol > li:first-child::before,
.hlist dt ol > li:first-child::before,
.hlist li ol > li:first-child::before {
content: " (" counter(listitem) "\a0";
}
/********************************************
* End semantically-correct horizontal lists *
*********************************************/
/******************
* Template:Navbox *
*******************/
.navbox {
clear: both;
margin: 1em 0;
padding: 3px;
font-size: 90%;
width: 100%;
border: 1px solid var(--wiki-content-border-color);
box-sizing: border-box;
}
.navbox-inner,
.navbox-subgroup {
border-spacing: 0;
width: 100%;
}
/* Reduce spacing between adjacent navboxes */
.navbox + .navbox {
margin-top: -1px;
}
/* Spacing between rows */
.navbox-spacer {
height: 2px;
}
/* Title bars and labels */
.navbox-title {
font-weight: bold;
font-size: 115%;
padding: 0.25em 0.6em;
line-height: 1.5em;
color: var(--wiki-accent-label-color);
background: var(--wiki-accent-color);
}
.navbox-title,
.navbox-abovebelow {
padding-left: 1em;
padding-right: 1em;
text-align: center;
}
.navbox-abovebelow,
.navbox-group,
.navbox-subgroup .navbox-title {
background: rgba(var(--wiki-accent-color--rgb), 0.8);
color: var(--wiki-accent-label-color);
border: 1px solid var(--wiki-content-border-color);
}
.navbox .navbox-title a,
.navbox .navbox-title a:visited,
.navbox .navbox-title a.external,
.navbox .navbox-title a.external:visited {
color: var(--wiki-accent-link-color);
}
.navbox-title .mw-collapsible-toggle {
font-weight: normal;
text-align: right;
}
.navbox-title-text {
font-size: 105%;
}
/* Navbox-related links */
.navbox-title .navbar {
float: left;
margin-right: 0.5em;
}
.navbox-title .navbar a.external::after {
content: unset;
}
/* Groups */
.navbox-group {
font-weight: bold;
padding: 0 0.5em;
white-space: nowrap;
text-align: center;
}
/* Zebra colouring for rows */
.navbox-even {
background: #fff1;
}
/* Subgroups: equal group labels between different child navboxes */
.navbox-subgroup > tbody > tr {
display: flex;
}
.navbox-subgroup .navbox-group {
display: flex;
align-items: center;
justify-content: center;
flex-basis: 11em;
flex-grow: 1;
flex-shrink: 0;
white-space: normal;
}
/* Lists */
.navbox-list {
width: 100%;
}
/* Mobile adjustments */
@media screen and (max-width: 1280px) {
.mw-body .navbox-inner table {
display: table;
}
}
@media screen and (max-width: 720px) {
.mw-body .navbox {
display: none;
}
}
/**********************
* End Template:Navbox *
***********************/
/*******************
* Main page layout *
********************/
#mp-welcome-box {grid-area:welcome;}
#mp-about-box {grid-area:about;}
#mp-featured-box {grid-area:featured;}
#mp-big-four-box {grid-area:four;}
#mp-priority-projects-box {grid-area:priority;}
#mp-projects-box {grid-area:projects;}
#mp-wiki-box {grid-area:wiki;}
#mp-container {
display:grid;
grid-template-areas:
"welcome"
"about"
"featured"
"four"
"priority"
"projects"
"wiki";
grid-template-columns:100%;
gap:10px;
}
@media screen and (min-width:990px) {
#mp-container {
grid-template-areas:
"welcome welcome"
"about about"
"featured four"
"priority projects"
"wiki wiki";
grid-template-columns:1fr 1fr;
}
}
@media screen and (min-width:1350px) {
#mp-container {
grid-template-areas:
"welcome welcome welcome"
"about about four"
"featured featured four"
"priority projects projects"
"wiki wiki wiki";
grid-template-columns:2fr 1fr 2fr;
}
}
.mp-box {
display:flex;
flex-flow:column nowrap;
width: calc(100% - 2px);
box-sizing: border-box;
background:rgba(var(--wiki-content-background-color--secondary--rgb), 0.25);
border:1px solid var(--wiki-content-border-color);
padding:0px;
}
.mp-body {
height: 100%;
display: flex;
padding:0.5em;
flex-flow: column nowrap;
}
.mp-box.centered-content .mp-body {
height: 100%;
display: flex;
flex-flow: column nowrap;
justify-content: space-evenly;
}
.mp-box.has-floating-image {
display:block;
}
.mp-box.has-floating-image .mp-body {
height:unset;
display:block;
}
.mp-box .mp-heading,
.mp-box .welcome-message {
text-align:center;
font-weight:bold;
font-family:var(--wiki-heading-font-family);
overflow: initial;
}
.mp-box .mp-heading {
border-bottom: 1px solid var(--wiki-content-border-color);
font-size: 150%;
margin: 0 0 10px 0;
padding: 5px 0;
color:var(--wiki-heading-color);
}
.mp-box .welcome-message {
font-size: 200%;
margin: 0;
padding: 5px 0;
color: #fff;
filter: drop-shadow(0px 2px 3px #000);
}
#mp-banner-container {
position: relative;
}
#mp-welcome-box {
text-align:center;
position:relative;
overflow:hidden;
}
#mp-welcome {
position: relative;
font-family: var(--wiki-heading-font-family);
z-index: 2;
box-sizing: border-box;
}
#mp-welcome .welcome-subtitle {
background:rgba(var(--wiki-content-dynamic-color--inverted--rgb), 0.85);
padding:0.5em;
}
#mp-banner {
position: absolute;
width: 100%;
height: 100%;
filter: blur(5px);
z-index: 1;
background: url(/images/e/e0/MP_banner.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: top center;
}
.theme-dark #mp-banner {
filter: blur(5px) brightness(50%);
}
.theme-light #mp-banner {
filter: blur(5px) contrast(50%);
}
.mp-links {
--gap:10px;
}
.mp-links > ul {
display: flex;
flex-flow: row wrap;
justify-content: space-evenly;
margin: 2px;
gap:var(--gap);
}
.mp-links > ul > li {
display:flex;
flex-flow:column nowrap;
align-items:stretch;
text-align: center;
box-sizing:border-box;
flex: max(calc(50% - var(--gap)), 5em) 1 1;
outline:1px solid var(--wiki-content-link-color);
transition:0.1s ease-in;
}
.mp-links > ul > li:hover {
background-color:rgba(var(--wiki-content-link-color--rgb), 0.2);
}
.mp-links.columns-1 > ul > li {flex: max(calc(100% - var(--gap)), 5em) 1 1;}
.mp-links.columns-2 > ul > li {flex: max(calc(50% - var(--gap)), 5em) 1 1;}
.mp-links.columns-3 > ul > li {flex: max(calc((100% / 3) - var(--gap)), 5em) 1 1;}
.mp-links.columns-4 > ul > li {flex: max(calc(25% - var(--gap)), 5em) 1 1;}
.mp-links.columns-5 > ul > li {flex: max(calc(20% - var(--gap)), 5em) 1 1;}
.mp-links.columns-6 > ul > li {flex: max(calc((100% / 6) - var(--gap)), 5em) 1 1;}
.mp-links.columns-7 > ul > li {flex: max(calc((100% / 7) - var(--gap)), 5em) 1 1;}
.mp-links > ul > li a {
text-decoration: underline;
}
.mp-links > ul > li:hover a {
text-decoration: underline;
}
.mp-links > ul > li > a {
display: flex;
align-items: center;
justify-content: center;
height:100%;
flex:1 1 auto;
box-sizing:border-box;
padding:5px;
}
.mp-links > ul > li > a:first-child {
height:100%;
}
.mp-links > ul > li > a:last-child:not(:first-child) {
height:unset;
}
.mp-links.stretch,
.mp-links.stretch > ul {
height:100%;
}
.mp-links.side-image li {
flex-flow:row nowrap;
}
/***********************
* End main page layout *
************************/
/***********************
* Start DRUID infoboxes *
************************/
.druid-container {
/* These variables are designed to inherit from your wiki's color variables.
If your wiki uses a different naming scheme, change the inner names to match yours.
If your wiki doesn't use color variables you should consider doing so,
otherwise you can replace the inner variables or the fallback values with colors that match your wiki.
*/
--druid-background-color: var(--wiki-content-background-color, #ffffff);
--druid-background-color--rgb: var(--wiki-content-background-color--rgb, 255, 255, 255);
--druid-secondary-background-color: var(--wiki-accent-color, #36c);
--druid-secondary-background-color--rgb: var(--wiki-accent-color--rgb, 51, 102, 204);
--druid-secondary-background-label-color: var(--wiki-accent-label-color, #fff);
--druid-secondary-background-label-color--rgb: var(--wiki-accent-label-color--rgb, 255, 255, 255);
--druid-tertiary-background-color: var(--wiki-content-background-color--secondary, #eaecf0);
--druid-tertiary-background-color--rgb: var(--wiki-content-background-color--secondary--rgb, 234, 236, 240);
--druid-border-color: var(--wiki-content-border-color, #a7d7f9);
--druid-border-color--rgb: var(--wiki-content-border-color--rgb, 167, 215, 249);
--druid-link-color: var(--wiki-content-link-color, #0645ad);
--druid-link-color--rgb: var(--wiki-content-link-color--rgb, 6, 69, 173);
--druid-link-label-color: var(--wiki-content-link-label-color, #fff);
--druid-link-label-color--rgb: var(--wiki-content-link-label-color--rgb, 255, 255, 255);
}
.druid-container {
border:4px solid var(--druid-border-color);
background:var(--druid-background-color);
float: right;
clear: right;
margin: 0 0 1em 1em;
width: 16.875em;
box-sizing:border-box;
border-collapse:collapse;
}
@media screen and (max-width: 450px) {
.druid-container {
width:100%;
}
}
@media screen and (max-width: 720px) {
.druid-container {
float: none;
margin: 0.5rem auto;
}
}
.druid-main-images-file,
.druid-main-image {
text-align:center;
}
.druid-title,
.druid-section {
background:rgba(var(--druid-secondary-background-color--rgb), 0.75);
color:var(--druid-secondary-background-label-color);
text-align:center;
font-size:1.5em;
}
.druid-section {
font-size:1.25em;
}
.druid-label {
font-weight:bold;
}
.druid-main-images {
padding:5px;
}
.druid-main-images img {
max-width:100%;
height:auto;
}
.druid-main-images-labels {
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content: space-evenly;
margin:0.25em;
gap:0.25em;
}
.druid-main-images-label {
cursor:pointer;
flex:1 1 auto;
text-align:center;
transition:.1s ease-in;
outline:1px solid var(--druid-link-color);
}
.druid-main-images-label.focused {
background:var(--druid-link-color);
color:var(--druid-link-label-color);
}
.druid-main-images-label:not(.focused):hover {
background:rgba(var(--druid-link-color--rgb), 0.25);
}
.druid-toggleable-data,
.druid-main-images-file {
display:none;
}
.druid-toggleable-data.focused,
.druid-main-images-file.focused {
display:block;
}
.druid-row:not(:has(.druid-grid)):has(.druid-toggleable-data-empty.focused) {
display:none;
}
.druid-section:has(.druid-toggleable-heading-empty.focused) {
display:none;
}
.druid-grid {
display:grid;
}
.druid-grid-item {
background:var(--druid-tertiary-background-color);
margin:0.25em;
padding:0.25em;
border:1px solid rgba(var(--druid-border-color--rgb), 0.5);
}
/***********************
* End DRUID infoboxes *
************************/