MediaWiki:Common.css

/* CSS placed here will be applied to all skins */

body { overflow: auto }

/* Logo margin */

margin-top: 9px; }
 * 1) p-logo {

/* Tooltip fix */

.simple-tooltip-img { border: none; }

.simple-tooltip-img:not(client-darkmode) { filter: invert(1) hue-rotate(180deg); -webkit-filter: invert(1) hue-rotate(180deg); }

/* Kanit font for headers */ @font-face { font-family: 'Kanit'; src: url('https://fonts.gstatic.com/s/kanit/v12/nKKZ-Go6G5tXcraVGwWKd6xB.ttf'); font-weight: 300,500,600,700,800,900; }

/* Style h1 headers */ .firstHeading, .vector-body h1, .mw-body h1, .mw-body-content h1 { font-family: 'Kanit', sans-serif; font-weight: 900; font-size: 2em; }

/* Style h2 headers */ .vector-body h2, .mw-body h2, .mw-body-content h2 { font-family: 'Kanit', sans-serif; font-weight: 800; font-size: 1.6em; }

/* Style h3 headers */ .vector-body h3, .mw-body h3, .mw-body-content h3 { font-family: 'Kanit', sans-serif; font-weight: 700; font-size: 1.4em; margin-bottom: 16px; }

/* Style h4 headers */ .vector-body h5, .mw-body h4, .mw-body-content h4 { font-family: 'Kanit', sans-serif; font-size: 1.2em; font-weight: 600; }

/* Style h5 headers */ .vector-body h5, .mw-body h5, .mw-body-content h5 { font-family: 'Kanit', sans-serif; font-size: 1.2em; font-weight: 500; }

/* Style h6 headers */ .vector-body h6, .mw-body h6, .mw-body-content h6 { font-family: 'Kanit', sans-serif; font-size: 1.1em; font-weight: 300; }

.vector-body h1 { margin-top: 0.2em; } .vector-body h2 { margin-top: 0.2em; } .vector-body h3 { padding-top: 0; margin-bottom: 0; } .vector-body h4 { padding-top: 0; margin-top: 0.3em; } .vector-body h5 { padding-top: 0; } .vector-body h6 { padding-top: 0; }

.wikitable > tbody > tr > td > h1, h2, h3, h4, h5, h6 { margin-top: 0; }

/* Element animator */

display: none }	display: inline-block; }	display: block; }
 * 1) mw-content-text .animated > *:not(.animated-active),
 * 2) mw-content-text .animated > .animated-subframe > *:not(.animated-active) {
 * 1) mw-content-text span.animated,
 * 2) mw-content-text span.animated.animated-visible > *,
 * 3) mw-content-text span.animated.animated-visible > .animated-subframe > * {
 * 1) mw-content-text div.animated.animated-visible > *,
 * 2) mw-content-text div.animated.animated-visible > .animated-subframe > * {

/* End of Element animator */

/* Horizontally centre animated images */

display: inline-flex; align-items: center; }
 * 1) mw-content-text .infobox-imagearea .animated {

.notaninfobox .infobox-rows { display: table; margin: 0 !important; width: 100% !important; border-collapse: separate !important; border-spacing: 1px !important; } .infobox-rows > tbody > tr > th { text-align: left; vertical-align: middle; white-space: nowrap; }	margin: 0; }
 * 1) mw-content-text .infobox-rows p {

/* End of Horizontally centre animated images */

/* Start of Template reskin; bother Xaph if you have any questions */

.notaninfobox { position: relative; clear: right; margin: 0 0 1em 1em; width: 300px; font-size: 90%; background: #FFF; border-radius: 10px; float: right; border: 1px solid #f3f3f3; background: rgb(240, 240, 241); background: -moz-linear-gradient(180deg, rgba(240, 240, 241, 1) 0%, rgba(255, 255, 255, 1) 100%); background: -webkit-linear-gradient(180deg, rgba(240, 240, 241, 1) 0%, rgba(255, 255, 255, 1) 100%); background: linear-gradient(180deg, rgba(240, 240, 241, 1) 0%, rgba(255, 255, 255, 1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f0f0f1", endColorstr="#ffffff", GradientType=1); padding: 2px 2px 5px 2px; overflow: auto; z-index: 1; }

.notaninfobox .mcwiki-header { background: rgb(239 239 239); background: -moz-linear-gradient(180deg,rgb(230 230 230) 0%,rgb(255 255 255) 100%); background: -webkit-linear-gradient(180deg,rgb(230 230 230) 0%,rgb(255 255 255) 100%); background: linear-gradient(180deg,rgb(230 230 230) 0%,rgb(255 255 255) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#525a6e",endColorstr="#1d1d1d",GradientType=1); color: #202122; border-radius: 10px 10px 3px 3px; letter-spacing: 0.04em; padding: 7px; border: 1px solid transparent; border-bottom: 2px solid #d3d3d3; }

.client-darkmode .notaninfobox .mcwiki-header { background: rgb(0, 0, 0); background: -moz-linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(12, 12, 13, 1) 100%); background: -webkit-linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(12, 12, 13, 1) 100%); background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(12, 12, 13, 1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000", endColorstr="#0c0c0d", GradientType=1); border-color: #1c1c1d; border-bottom: 2px solid #292732; color: #abacb0; -webkit-filter: invert(1) hue-rotate(180deg); }

@media all and (max-width:511px) { .notaninfobox { float: none; margin-left: 0; width: auto } }

@media all and (max-width:337px) { .notaninfobox { margin-left: -16px; margin-right: -16px; border-left: none; border-right: none } }

.notaninfobox>.infobox-title { font-weight: bold; text-align: center; font-size: 120% }

.infobox-imagearea { text-align: center; padding: 4px }

.infobox-imagearea>div:not(:first-child) { padding-top: 1em }

display: inline-flex; align-items: center }
 * 1) mw-content-text .infobox-imagearea .animated {

.notaninfobox table.infobox-rows { display: table; margin: 0; width: 100%; border-collapse: separate; border-spacing: 0px 1px; }

.notaninfobox .infobox-rows>tbody>tr { background: #b6b6bb1f; }

.notaninfobox .infobox-rows>tbody>tr:nth-child(even) { background: #dcdcdc1f; }

.infobox-rows>tbody>tr>th { text-align: left; white-space: nowrap; }

margin: 0 }
 * 1) mw-content-text .infobox-rows p {

.infobox-rows dl+dl { margin-top: -0.4em }

.infobox-rows dl:last-child { margin-bottom: 0.2em }

.infobox-footer { text-align: center }

table.infobox-rows, client-darkmode table.infobox-rows { background-color: transparent; }

/* End of Template reskin, bother Xaph if you have any questions */

/* Done by Crec0. Bother him */ table { background-color: transparent!important; }

th, td { padding:2px 10px 2px; }

th,td { vertical-align: middle; }

.mw-gallery-slideshow-img-container img { max-width: 800px; width:100%; height: auto; border-radius: 10px; object-fit: contain; }

ul.gallery.mw-gallery-slideshow { margin: 0; }

mw-gallery-slideshow-buttons { padding: 0 0 0.5em 0 }

.yeet-title { display:none; }

.client-darkmode #mw-content-text .mw-parser-output div table tbody td p span { filter: hue-rotate(-180deg) invert(1); -webkit-filter: hue-rotate(-180deg) invert(1); }

/* Crec0's deeds are done */

/* Start of Darkmode fixes; bother Xaph if you have any questions */

html.client-darkmode { overflow-y: auto; }

html.client-darkmode div#mw-head { background: rgb(255, 255, 255); background: -moz-linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 100%); background: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 100%); background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#f6f6f6", GradientType=1); z-index: 1; margin-right: 18px; }

html.client-darkmode #left-navigation>nav{ margin-left: 18px; }

html.client-darkmode #mw-panel { position: absolute; z-index: 2; }

html.client-darkmode .mw-indicators { z-index: 0; }

html.client-darkmode .mw-wiki-logo { filter: invert(1) hue-rotate(180deg); -webkit-filter: invert(1) hue-rotate(180deg); }

html.client-darkmode .ve-ui-mwGalleryDialog-highlighted-image, html.client-darkmode .ve-ui-mwGalleryDialog-image-container, html.client-darkmode #msupload-list .file-type.file-load { filter: invert(1) hue-rotate(180deg); -webkit-filter: invert(1) hue-rotate(180deg); }

html.client-darkmode .ve-ui-mwGalleryDialog-highlighted-image { background-color: #000000; }

video:fullscreen, html.client-darkmode video:fullscreen{ filter: none!important; -webkit-filter: none!important; }

.client-darkmode #mw-content-text .mw-parser-output div table tbody td p span.pixel-image, .client-darkmode #mw-content-text .mw-parser-output div table tbody td p span.mc-hearts { filter: none; -webkit-filter: none; }

.client-darkmode .vector-menu-tabs, .client-darkmode .vector-menu-tabs a, .client-darkmode #mw-head .vector-menu-dropdown .vector-menu-heading { background-image: linear-gradient(to bottom,rgb(48 52 57 / 0%) 0,#bfbfbf 100%); }

.client-darkmode .vector-menu-tabs li { background-image: linear-gradient(to top,#ffffff 0,#ffffff 0px,#ffffff 100%) }

.client-darkmode .ve-ui-toolbar { position: fixed; z-index: 100; background: #fff; }

/* End of Darkmode fixes, bother Xaph if you have any questions */

/* Start of small graphical fixes, bother Xaph if you have any questions */

padding-top: 16px; }
 * 1) content>#firstHeading.firstHeading {

color: #5099c2; }
 * 1) bodyContent a {

color: #dd3333; }
 * 1) bodyContent a.new, #bodyContent a.new:visited {

color: #b582e8; }
 * 1) bodyContent a:visited {

html.client-darkmode #bodyContent a { color: #5088e4; }

html.client-darkmode #bodyContent a.new, html.client-darkmode #bodyContent a.new:visited { color: #ff6e6e; }

html.client-darkmode #bodyContent a:visited { color: #9a79c9; }

div.notaninfobox { min-width: 300px; width: auto; }

div img.thumbimage { background-color:transparent; }

/* End of small graphical fixes, bother Xaph if you have any questions */

/* Start of left column tools and administration showing only on hover, in both dark and light mode, bother Xaph if you have any questions*/

nav.vector-menu-portal:nth-child(n+3) .vector-menu-content{ overflow-y: hidden; transform: scaleY(0); transform-origin: top center; }

nav.vector-menu-portal:nth-child(n+3) { height: 2em; }

nav.vector-menu-portal:nth-child(n+3):hover .vector-menu-content{ transform: scaleY(1); }

nav.vector-menu-portal:nth-child(n+3):hover { height: auto; }

/* End of left column tools and administration showing only on hover, in both dark and light mode, bother Xaph if you have any questions*/

/* Start of Template:hp styling. This is hackery! MC Wiki did it first */

.mc-hearts::before { content: ' ('; } .mc-hearts::after {	content: ')'; }

/* End of Template:hp styling */

/* Start of custom classes and their styles, their names should be self-explanatory */

html.client-darkmode .darkmode-invert { filter: invert(1) hue-rotate(180deg); -webkit-filter: invert(1) hue-rotate(180deg); }

.lightmode-invert:not(client-darkmode) { filter: invert(1) hue-rotate(180deg); -webkit-filter: invert(1) hue-rotate(180deg); }

.full-width-image, .full-width-image img { width: 100%; height: auto; }

/* End of custom classes and their styles, their names should be self-explanatory */

/* Start of Tera trying stuff in CSS */

.discord-banner { background-image: url(https://discordapp.com/api/guilds/738046951236567162/embed.png?style=banner2); background-size: cover; background-repeat: no-repeat; float: right; filter: none; border-radius: 5% / 20%; margin-top: 5px; margin-bottom: 15px; aspect-ratio: 21/5; width: 100%; }

.discord-bebby { background-image: url(https://discordapp.com/api/guilds/738046951236567162/widget.png?style=shield); background-repeat: no-repeat; filter: none; aspect-ratio: 119/20; width: 119px; }

/* to make the following work, replace with */

.float-toc .toc { float: left; margin-right: 10px; }

/* Start of dark mode fixes */

.mwe-popups .mwe-popups-thumbnail { object-fit: contain; }

.mwe-popups.mwe-popups-is-not-tall .mwe-popups-thumbnail { height: auto; }

.client-darkmode .embedvideowrap { filter: invert(1) hue-rotate(180deg); }

.client-darkmode .embedvideowrap iframe { filter: none; }

/* End of dark mode fixes */

/* Start of new background image */


 * root:not(.client-darkmode) body {

background-image: url(https://static.miraheze.org/stardustlabswiki/0/0f/Wiki_background.jpg); background-size: cover; background-attachment: fixed; }

.client-darkmode body { background-image: url(https://static.miraheze.org/stardustlabswiki/8/8e/Wiki_background_inverted.jpg); background-size: cover; background-attachment: fixed; }

div#mw-head-base { background: white; }

div#mw-page-base { background: transparent; }

div#mw-head { background: transparent !important; }

html:not(.client-darkmode) .vector-menu-portal .vector-menu-content li a { filter: hue-rotate(180deg) invert(1); }

.vector-menu-portal .vector-menu-heading { color: #ffffff; }

html.client-darkmode .vector-menu-portal .vector-menu-heading { filter: invert(1); }

html:not(.client-darkmode) ul#footer-places li a { filter: hue-rotate(180deg) invert(1); }

@media screen { .client-darkmode { background: none; /* Just remove instead, should only have this line according to Inspector anyway */ } }

/* End of new background image */

.seo { display:none; }

.toc li > ul > li { font-size:90%; }

.mw-collapsible-toggle { float: none !important; }

.wikitable h5 { margin-top:0; padding-top: 0; }

.notaninfobox th, td { vertical-align: top; }

/* End of Tera trying stuff in CSS */

/* Fix for top bar going in front of text */

html.client-darkmode { overflow-y: visible; }

html, body { height: auto; min-height: 100%; }

display: flex; flex-wrap: wrap; }
 * 1) footer-places, #footer-icons {

justify-content: flex-end; float: none; }
 * 1) footer-icons {

float: none; }
 * 1) footer-icons li {

margin-left: 0.5em; }
 * 1) footer-icons li a {

/* Fix for toolbar not following window */

position: fixed; }
 * 1) mw-panel, html.client-darkmode #mw-panel {

/* Fix for top bar changing shape when changing theme */

margin-left: 18px; }
 * 1) left-navigation > nav {

html.client-darkmode div#mw-head { margin-right: 0; }

/* Prevent footer on light mode being unreadable */

html:not(.client-darkmode) .mw-footer li { color: #dfdedd; }

/* Box-shadow class for elements */ .box-shadow { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); }

/* these removes all brackets & dividers */ .mw-editsection-bracket, .mw-editsection-divider, .toctogglespan::before, .toctogglespan::after, .mw-editsection .hidesection-all { display: none; } /* this sets the margin to half an em's width on the editsection and toc show/hide */ .mw-body-content .mw-editsection, .toctogglespan { margin-left: 0.5em; } /* this is what will set up the position of the links, hide the overflow, set up the size, and make the background images fully centered */ .mw-editsection a, .toctogglelabel { display: block; position: absolute; overflow: hidden; top: 0; height: 16px; width: 16px; background-position: center; background-repeat: no-repeat; background-size: 16px 16px; } /* this makes the links invisible (for real this time) */ html.client-darkmode #bodyContent .mw-editsection a, html.client-darkmode #bodyContent .mw-editsection a:visited, .toctogglelabel, .client-darkmode .toctogglelabel { color: transparent; } /* this positions the visual editor edit link first, and also the table of contents */ a.mw-editsection-visualeditor, .toctogglelabel { left: 0; } /* this positions the source editor edit link second with 2 pixels apart from the VE edit link */ .mw-editsection a:nth-of-type(2) { left: 18px; } /* this positions the hide/show section link third, 2 pixels apart from source edit */ .mw-editsection .hidesection-link { left: 38px; }
 * 1) bodyContent .mw-editsection a, #bodyContent .mw-editsection a:visited,

/* this sets up the edit image */ a.mw-editsection-visualeditor { background-image: url(//static.miraheze.org/stardustlabswiki/thumb/4/4c/Edit_logo.png/16px-Edit_logo.png); }

.mw-editsection a:nth-of-type(2) { background-image: url(//static.miraheze.org/stardustlabswiki/thumb/f/f6/Source_edit_logo.png/16px-Source_edit_logo.png); }

/* this sets up the hide image on TOC */ .toctogglecheckbox:not(:checked) + .toctitle .toctogglelabel { background-image: url(//static.miraheze.org/stardustlabswiki/thumb/c/c0/Hide_logo.png/16px-Hide_logo.png); } /* this sets up the show image on TOC */ .toctogglecheckbox:checked + .toctitle .toctogglelabel { background-image: url(//static.miraheze.org/stardustlabswiki/thumb/c/c0/Hide_logo.png/16px-Hide_logo.png); }

/* this sets up the show image on header */ .hidesection-link { background-image: url(//static.miraheze.org/stardustlabswiki/thumb/c/c0/Hide_logo.png/16px-Hide_logo.png); }

/* this inverts the inversion */ .mw-editsection a, .hidesection-link, .toctogglelabel { filter: invert(1) hue-rotate(180deg); -webkit-filter: invert(1) hue-rotate(180deg); }