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 */
/* -------------------------------------------------------------------------- */
/* Windows 98 Font */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* -------------------------------------------------------------------------- */
/* Thank you Hummel009 for the base CSS and JS code! */
/* https://dev.fandom.com/wiki/BalancedTabber */
/* https://dev.fandom.com/wiki/MediaWiki:BalancedTabber.css */
/* -------------------------------------------------------------------------- */
/* Themed CSS */
.tabs__caption {
display: flex;
list-style: none !important;
margin-left: 6px !important; /*Basically moves all the tabs to the right because fuck you, left is now right!*/
color: black; /*Getting rid of the default grey*/
}
.tabs__caption .active {
border: none; /*Getting rid of the default blue*/
color: black; /*Why tf does fandom push their theme when its different in HTML??*/
z-index: 3 !important; /*Layer 3 (top)*/
}
.tabs__caption li {
font-weight: normal;
text-transform: none !important; /*No fandom, I don't want the tabs to be all caps. Yes fandom, I'm sure.*/
margin-bottom: -4px !important; /*Have the tabs be layered, active ontop and inactive under contents*/
padding: 0px !important;
z-index: 1 !important; /*Layer 1 (bottom)*/
}
.tabs__caption li:not(.active) {
cursor: pointer !important; /*Actually lets you click the tabs*/
}
.tabs__content {
display: none; /*Hide tabs when not active*/
}
.tabs__content.active {
display: block !important;
z-index: 2 !important; /*Layer 2 (mid)*/
margin-top: 0px !important; /*Don't delete this, fucks everything up when gone*/
}
/* CSS by moonieexx */
/* -------------------------------------------------------------------------- */
/* Mobile main page right column */
@media screen and (max-width:720px) {
.mpright {
min-width: 100%;
}
}
/* Auto-resize front page video for mobile */
.mpvideo figure {
width: 100%!important;
max-width: 500px;
}
.mpvideo figure iframe {
width: 100%!important;
}
/****************************
* Simple dark api.php pages *
*****************************/
@media (prefers-color-scheme: dark) {
body {
background-color:#20211f;
border-color: #7b7261;
color: #f6ecdb;
}
h1, h2, h3, h4, h5, h6 {
color: rgb(234, 224, 207);
border-color: rgb(83, 84, 81);
}
.mw-highlight .s2 {
color: rgb(206, 99, 91);
}
a {
color: rgb(133, 180, 221);
}
a:visited {
color: rgb(141, 127, 218);
}
pre, code, .mw-code {
background-color: rgb(34, 35, 33);
color: rgb(234, 224, 207);
border-color: rgb(63, 64, 62);
}
}
/***************
* End dark API *
****************/
/********************************
* Miscellaneous utility classes *
*********************************/
.responsive-image {
max-width:100%;
height:auto;
}
.view-dark .invert-on-dark,
.view-light .invert-on-light {
filter:invert(100%);
}
.pixelated {
image-rendering:pixelated;
}
@media screen and (min-width:720px){
.mobileonly {
display:none;
}
}
@media screen and (max-width:720px) {
.nomobile {
display:none;
}
}
/***************************
* End misc utility classes *
****************************/
/*******************
* Main page layout *
* [[ENA Wiki]] *
********************/
#mp-welcome-box {grid-area:welcome;}
#mp-featured-box {grid-area:featured;}
#mp-discord-box {grid-area:discord;}
#mp-twitter-box {grid-area:twitter}
#mp-links-box {grid-area:links;}
.mp-container {
display:grid;
grid-template-areas:"welcome" "featured" "discord" "twitter" "links";
grid-template-columns:100%;
gap:5px;
}
@media screen and (min-width:990px) {
.mp-container {
grid-template-areas:"welcome welcome" "featured links" "discord twitter";
grid-template-columns:1fr 1fr;
}
}
@media screen and (min-width:1350px) {
.mp-container {
grid-template-areas:"welcome discord" "welcome twitter" "featured links";
grid-template-columns:1fr 300px;
}
}
.mp-box {
display:flex;
flex-flow:column nowrap;
width: calc(100% - 2px);
box-sizing: border-box;
padding:5px;
}
.mp-box.centered-content .mp-body {
height: 100%;
display: flex;
flex-flow: column nowrap;
justify-content: space-evenly;
}
.mp-box#mp-welcome-box {
text-align:center;
}
.mp-heading {
border-bottom: 1px solid var(--wiki-content-border-color);
text-align:center;
font-size: 150%;
font-family:var(--wiki-heading-font-family);
color:var(--wiki-heading-color);
margin: 0 0 10px 0;
padding: 0 0 5px 0;
}
.mp-box .welcome-message {
border-bottom: 1px solid var(--wiki-content-border-color);
font-family:var(--wiki-heading-font-family);
font-size: 200%;
margin: 0 0 10px;
padding: 0 0 5px;
}
.mp-gallery {
display:flex;
flex-flow:row wrap;
align-items:center;
justify-content:space-evenly;
gap:10px;
margin:10px;
}
.mp-gallery__item {
flex:clamp(300px, calc(33% - 10px), 500px) 0 1;
height:300px;
display:flex;
align-items:center;
justify-content: center;
position:relative;
overflow:hidden;
background-color:rgba(var(--wiki-content-background-color--secondary--rgb), 0.9);
border:1px solid var(--wiki-content-border-color);
box-sizing:border-box;
}
.mp-gallery__item img {
width:100%;
height:auto;
}
.mp-gallery__caption {
position:absolute;
bottom:0;
width:100%;
background-color:rgba(var(--wiki-content-background-color--rgb), 0.9);
box-sizing:border-box;
padding:10px;
}
.mp-gallery > hr { /* break point */
width: 0;
height: 0;
flex-basis: 100%;
}
/***********************
* End main page layout *
************************/
/**************************
* [[Template:Doc]] styles *
***************************/
.documentation {
margin: 0em auto 1em;
background-color: rgba(var(--wiki-content-dynamic-color--inverted--rgb), 0.1);
border: 2px solid var(--wiki-content-border-color);
border-radius: 1em;
padding: 1em;
}
.documentation-header {
padding-bottom: 3px;
border-bottom: 1px solid var(--wiki-content-border-color);
margin-bottom: 1ex;
}
/**************************
* End Template:Doc styles *
***************************/
/***********************
* [[Template:License]] *
************************/
.license {
display:flex;
flex-flow:row nowrap;
background-color:var(--wiki-content-background-color--secondary);
border:1px solid var(--wiki-content-border-color);
padding:0.1em;
margin:0.5em 0 0.5em 0;
}
.copyright-logo {
filter:var(--wiki-icon-general-filter);
}
/***********************
* End Template:License *
************************/
/************************************
* Used by [[Template:HeaderWindow]] *
*************************************/
.header-window {
background: var(--wiki-content-background-color--secondary);
border-color:
#dfdfdfa0
#000000a0
#000000a0
#dfdfdfa0;
border-width: 2px;
border-style: solid;
}
.header-window--inner-border {
margin:10px;
position: relative;
z-index:3;
border-color:
#808080a0
#ffffffa0
#ffffffa0
#808080a0;
border-width: 2px;
border-style: solid;
}
.header-window--content {
padding: 2px 6px;
border-color:
#000000a0
#dfdfdfa0
#dfdfdfa0
#000000a0;
border-width: 2px;
border-style: solid;
font-size: 1.5em;
text-align:center;
text-transform: uppercase;
background:var(--wiki-content-dynamic-color--inverted);
}
.header-window--content h2 {
color: var(--wiki-content-heading-color);
border-bottom: 0!important;
margin: 0.5em 0;
padding-top: 2px;
}
/****************************
* End Template:HeaderWindow *
*****************************/
/************
* Infoboxes *
*************/
/* portable infoboxes */
: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 {
border:4px solid var(--pi-border-color);
}
.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.13);
}
.portable-infobox .pi-image {
padding: 8px;
}
.pi-image-thumbnail {
max-width:100%;
}
.pi-caption {
color: rgba(var(--wiki-content-text-color--rgb), 0.8);
}
.view-dark .pi-caption {
color: rgba(var(--wiki-content-text-color--rgb), 0.6);
}
.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 infoboxes *
*****************/
/********************************************
* Utility classes for standard MW galleries *
*********************************************/
/* it's important that spaced comes before centered in the sheet */
.gallery.gallery.gallery.spaced {
display:flex;
flex-flow:row wrap;
justify-content:space-evenly;
margin-left:unset;
}
.gallery.centered {
text-align:center;
}
/**********************
* End gallery classes *
***********************/
/******************************
* Used by [[Template:Notice]] *
*******************************/
.notice.spoiler {
--notice-color:#7D378C;
--notice-text-color:#ffffff;
}
.notice.speculation {
--notice-color:#3A7726;
--notice-text-color:#ffffff;
}
.notice.name {
--notice-color:#989A9C;
--notice-text-color:#000000;
}
.notice.stub {
--notice-color:#00cccc;
--notice-text-color:#000000;
}
.notice.disambiguation {
--notice-color:#66B54A;
--notice-text-color:#000000;
}
.notice {
display:flex;
flex-flow:row nowrap;
width:100%;
background:var(--wiki-content-background-color--secondary);
border:1px solid var(--notice-color);
border-radius:10px;
overflow:hidden;
margin-bottom:5px;
font-family:monospace, sans-serif;
}
.notice__image {
border-radius:10px;
overflow:hidden;
}
.notice__content {
width:80%;
margin:0 5%;
}
.notice__text {
margin:0 2em;
}
.notice__heading {
background-color:var(--notice-color);
color:var(--notice-text-color);
text-align:center;
padding:4px;
border-radius:10px;
}
@media screen and (max-width:720px) {
.notice {
flex-flow:column nowrap;
align-items:center;
}
.notice__content {
width:100%;
}
.notice__text {
margin:0 0.5em;
}
}
/**********************
* End Template:Notice *
***********************/