MediaWiki:Common.css
Jump to navigation
Jump to search
CSS and Javascript changes must comply with the wiki design rules.
Note: After saving, 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: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Go to Menu → Settings (Opera → Preferences on a Mac) and then to Privacy & security → Clear browsing data → Cached images and files.
/* font */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond&family=Roboto:wght@300&display=swap');
body.mediawiki {
font-family: Helvetica, Arial, sans-serif;
}
/***********************************************************************************************************
* css reset for browser default rules and MediaWiki internal rules
***********************************************************************************************************/
*:focus {
outline-color: var(--theme-focus-outline-color) !important;
outline-style: var(--theme-focus-outline-style) !important;
outline-offset: var(--theme-focus-outline-offset) !important;
outline-width: var(--theme-focus-outline-width) !important;
}
table {
display: table;
white-space: unset; /* be set to `nowrap` in MW internal css */
}
html {
font-size: 18px; /* reset rem size */
}
body {
font-size: var(--font-size);
line-height: var(--line-height);
}
body, code {
background: none;
}
pre {
margin: 0;
}
h1, h2, h3, h4, h5, h6 {
padding: 0;
border: 0 solid transparent;
}
small {
font-size: var(--font-size-s);
line-height: var(--line-height-s);
}
sup, sub {
font-size: var(--font-size-s);
}
:root {
--font-size: 0.875rem;
--line-height: 1.5;
--font-size-s: 0.75rem;
--line-height-s: 1.5;
--font-size-l: 1rem;
--line-height-l: 1.5;
--font-size-xs: 0.625rem;
--line-height-xs: 1.5;
}
/************************************
* Utility Classes
************************************/
.small {
font-size: var(--font-size-s);
}
.fullwidth, .full-width {
width: 100%;
}
.nowrap {
white-space: nowrap;
}
/* ".center" has width=100% rule, we don't want it, so use a different class name. */
.aligncenter,
.align-center {
text-align: center;
}
.alignleft,
.align-left {
text-align: left;
}
.alignright,
.align-right {
text-align: right;
}
/* clear fix for float block */
.clearfix {
*zoom: 1;
}
.clearfix::before,
.clearfix::after {
content: " ";
display: table;
}
.clearfix::after {
clear: both;
}
/* floating */
.float-right {
float: right;
}
.float-left {
float: left;
}
.block {
display: block;
}
.inline {
display: inline;
}
.inline-block {
display: inline-block;
}
/* Invert class */
.invert,
.dark-invert {
filter: invert(1);
}
/** responsive styling */
.mobileonly {
display: none;
}
@media screen and (max-width: 479px) {
.mobileonly {
display: block;
}
.mobileinline {
display: inline;
}
.mobileflex {
display: flex;
}
.nomobile {
display: none;
}
/** nest this so we have enough specificity to take precedence over default styles */
.mediawiki .mobile-w-full, .mediawiki .portable-infobox, .mediawiki .toc {
float: none;
width: 100%;
margin-left: auto;
margin-right: auto;
}
}
/** Main Page Flex stuff **/
#fp-container {
display:grid;
grid-template-areas:"a" "b" "c";
grid-template-columns:100%
}
@media screen and (min-width:990px) {
#fp-container {
grid-template-areas:"a b" "c c";
grid-template-columns:50% 50%
}
}
@media screen and (min-width:1350px) {
#fp-container {
grid-template-areas:"a b" "c c";
grid-template-columns:auto 520px
}
}
.fpimg {
width: 22.125em;
text-decoration: none;
display: block;
background: var(--theme-site-mp-image);
background-position: center;
background-size: 22.125em;
background-repeat: no-repeat
}
.fpbox {
width:calc(100% - 2px);
box-sizing:border-box;
}
.fp-section {
display:flex;
flex-wrap:wrap;
overflow:hidden
}
#fp-top {
grid-area:a
}
#fp-flex {
grid-area:b
}
#fp-bottom {
grid-area:c
}