MediaWiki:Common.css

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

body { overflow: auto }

/* Tooltip fix */

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

.simple-tooltip-img:not(client-darkmode) {f 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; }

/* Page name font */ .mw-page-title-main, .mw-page-title-namespace, .mw-page-title-separator .mw-logo-wordmark { font-family: 'Kanit', sans-serif !important; font-weight: 900 !important; font-size: 1.7em !important; }

padding-right: 0.5em; }
 * 1) right-navigation {

.vector-menu-content-list { padding-right: 0.5em; }

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

/* 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 */

/* Done by Crec0. Bother him */

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-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, .client-darkmode #mw-content-text .mw-parser-output div table tbody td p span.simple-tooltip-inline { filter: none; -webkit-filter: none; }

/* 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/6/61/Default_mode-background.png); 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; }

/* 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 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, hides hide/show all */ .mw-editsection-bracket, .mw-editsection-divider, .toctogglespan::before, .toctogglespan::after, .mw-editsection .hidesection-all, :is(h4, h5, h6, table) .mw-editsection { display: none; }

/* this sets up the edit section and table of contents hide/show toggle as the element your "edit" and "hide/show" links will be positioned relative to */ .mw-editsection, .toctogglespan { position: relative; }

/* this sets the margin to half an em's width on the editsection and toc show/hide */ .mw-body-content .mw-editsection, .toctogglespan { padding-top: 0.2em; }

.mw-body-content .mw-editsection { margin-left: 0.5em; }

.toctogglespan { margin-left: -0.9em; }

/* 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; }
 * 1) bodyContent .mw-editsection a, #bodyContent .mw-editsection a:visited,

/* 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; }

/* 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); }

/* always add more padding to the TOC's header than the image size will be, in this case 4 extra pixels are added */ .toctitle { padding-right: 20px; }

/* 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/c8/Show_logo.png/16px-Show_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); }

.hidesection-link.hidden { background-image: url(//static.miraheze.org/stardustlabswiki/thumb/c/c8/Show_logo.png/16px-Show_logo.png); }

padding-left: 0.5em; }
 * 1) mw-toc-heading {

.toctitle { padding-right: 25px; }

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

.wikitable { border-radius: 1em; border-collapse: unset; }

.wikitable > tr > th, .wikitable > tr > td, .wikitable > * > tr > th, .wikitable > * > tr > td { border: none; }

/* Center/align text in table cells */ .wikitable th, .wikitable td { vertical-align: middle; }

.gallerybox .thumb div { margin: 15px 15px !important; }

/* New Discord Banner */ .discordBanner > a { position: relative; aspect-ratio: 18/4; width: 100%; max-width: 700px; border-radius: 1em; background: rgb(115,139,215); background: linear-gradient(114deg, rgba(105,126,196,1) 50%, rgba(115,139,215,1) 50%) !important; text-decoration: none; padding: 0 !important; display: grid; grid-template-columns: 1fr 2fr 0.25fr 2.25fr 0.25fr; grid-template-rows: 1fr; grid-column-gap: 3px; grid-row-gap: 0px; } .discordBanner > pre { background-color: rgba(0,0,0,0) !important; border: none !important; }

.guildIcon { grid-column: 1; height: 3.5em; width: auto; justify-self: center; align-self: center; margin: auto; border-radius: 100%; border-color: rgb(115,139,215); border-style: solid; border-width: 3px; }

.guildInfo { grid-column: 2; font-family: Arial, Helvetica, sans-serif; align-self: center; text-decoration: none; }

.guildName { padding: 0 !important; margin: 0 !important; border: none !important; color: aliceblue !important; }

.guildMemberCount { padding: 0 !important; margin: 0 !important; color: aliceblue !important; }

.discordLogo { grid-column: 4; align-self: center; width: 100%; background-color: rgba(0,0,0,0) !important; }