Cobblemon Wiki - User contributions [en]

User:Miasmus/common.css

2025-03-31T21:23:40Z

Miasmus:

/* Copied from https://minecraft.wiki/w/MediaWiki:Common.css for testing */

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

/**
* See [[MediaWiki:Vector.css]] for desktop theme related styles.
* See [[MediaWiki:Vector-theme-dark.css]] for desktop dark theme related styles.
*
* See [[MediaWiki:Minerva.css]] for mobile theme related styles.
* See [[MediaWiki:Minerva-theme-dark.css]] for mobile dark theme related styles.
*/

/* Minecraft font
* [[File:Minecraft.woff2]] [[File:Minecraft.woff]]
*/
@font-face {
font-family: Minecraft;
src: url('filepath://Minecraft.woff2') format('woff2'),
url('filepath://Minecraft.woff') format('woff');
}

body {
font-family: "Liberation Sans", Arial, Helvetica, FreeSans, sans-serif;
}

/** Color variables for tweaking by different themes **/
:root {
--navbox-background-color: #FFF;
--navbox-border-color: #CCC;
--navbox-header-color: #CCC;
--navbox-secondary-header-color: #DDD;
--navbox-tertiary-header-color: #EEE;
--navbox-section-color: #EEE;
}

body.wgl-theme-dark {
--navbox-background-color: #333;
--navbox-border-color: #444;
--navbox-header-color: #111;
--navbox-secondary-header-color: #181818;
--navbox-tertiary-header-color: #222;
--navbox-section-color: #222;
}

/* Page display title */
.mw-page-title-separator {
margin-right: 0.25em;
}

.ns-10000 .mw-page-title-namespace,
.ns-10002 .mw-page-title-namespace,
.ns-10004 .mw-page-title-namespace,
.ns-10006 .mw-page-title-namespace,
.ns-10012 .mw-page-title-namespace {
font-style: italic;
margin-right: 1px;
}

/** Main page stylings **/
/** Only used for styling of elements, main page layout is defined at [[Minecraft_Wiki/styles.css]] **/
.fp-section {
background-color: #FCFCFC;
border: 1px solid #ccc;
vertical-align: top;
margin: 1px;
}

.fp-banner-image {
margin: 0 auto;
}

.fp-banner-content {
display: flex;
gap: 10px;
margin: 10px 0;
flex-wrap: wrap;
align-items: center;
}

@media screen and (min-width: 480px) {
.fp-banner-content {
flex-wrap: nowrap;
}

.fp-banner-image {
margin: 0;
}
}

#fp-header-file {
margin: auto;
}
@media screen and (min-width:990px) {
#fp-header-file {
margin: auto 0;
}
}

#fp-header-links {
margin: auto 0;
}

#fp-header-links ul {
-ms-columns: 160px;
-moz-columns: 160px;
-webkit-columns: 160px;
columns: 160px;
-ms-column-count: 3;
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
margin-top: 0;
}

/** Main page stylings **/
.mcw-mainpage-icons {
padding: 10px;
display: flex;
flex-wrap: wrap;
row-gap: 20px;
justify-content: center;
}

@media screen and (min-width:1400px) and (max-width:2400px) {
#fp-2 .mcw-mainpage-icons {
max-width: 750px;
margin: auto;
}
}

.mcw-mainpage-icon {
flex: 0 0 auto;
width: 90px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}

.mcw-mainpage-icon-img {
height: 60px;
width: 60px;
/* Make sure icon is correctly centered */
display: flex;
align-items: center;
justify-content: center;
}

.mcw-mainpage-icon a {
word-wrap: normal;
}

.mcw-mainpage-platforms {
display: flex;
gap: 10px;
flex-wrap: wrap;
justify-content: center;
margin-top: 5px;
}

.mcw-mainpage-platform {
display: flex;
gap: 5px;
flex-direction: column;
padding: 5px;
}

@media screen and (max-width:989px) {
.mcw-mainpage-platform {
flex: 1 1 200px;
}

.mcw-mainpage-platform {
flex-direction: row;
flex-wrap: wrap;
}
}

/** Template stylings **/
/* [[Template:Navbox]] */
.navbox {
background: var(--navbox-background-color);
border: 1px solid var(--navbox-border-color);
margin: 1em auto 0;
width: 100%;
}

.navbox table {
background: var(--navbox-background-color);
margin-left: -4px;
margin-right: -2px;
}

.navbox table:first-child {
margin-top: -2px;
}

.navbox table:last-child {
margin-bottom: -2px;
}

.navbox .navbox-top {
white-space: nowrap;
background-color: var(--navbox-header-color);
padding: 0 3px;
text-align: center;
}

.navbox tr:not(:first-child) .navbox-top,
.navbox .navbox .navbox-top {
background-color: var(--navbox-secondary-header-color);
}

.navbox .navbox tr:not(:first-child) .navbox-top {
background-color: var(--navbox-tertiary-header-color);
}

.navbox-navbar,
.navbox-navbar-mini {
float: left;
font-size: 80%;
position: absolute;
}

.navbox-title {
padding: 0 10px;
font-size: 110%;
}

.navbox th {
background-color: var(--navbox-section-color);
padding: 0 10px;
white-space: nowrap;
text-align: right;
}

.navbox td {
width: 100%;
padding: 0 0 0 2px;
}

/* Clear before navboxes and their section */
h2:has(#Navigation):has(+ table.navbox) {
clear: both;
}

/* [[Template:LoadBox]]*/
.load-page {
background-color: rgba(255, 255, 255, .5);
border: 1px solid #CCC;
margin-bottom: 0.5em;
padding: 0 0.5em;
}
body.wgl-theme-dark .load-page {
background-color: #222;
border-color: #111;
}
body.wgl-theme-dark .load-page .mw-spinner {
filter: invert(1);
}

/* Hatnotes and disambiguation notices */
.hatnote {
font-style: italic;
}

.hatnote i {
font-style: normal;
}

div.hatnote {
padding-left: 1.6em;
margin-bottom: 0.5em;
}

div.hatnote + div.hatnote {
margin-top: -0.5em;
}

/* [[Template:Layered blueprint]] */
@-webkit-keyframes layered-blueprint-fade-in {
0% {
opacity: 0;
visibility: hidden;
}
100% {
opacity: 1;
visibility: visible;
}
}

@keyframes layered-blueprint-fade-in {
0% {
opacity: 0;
visibility: hidden;
}
100% {
opacity: 1;
visibility: visible;
}
}

.layered-blueprint-layer {
-webkit-animation: layered-blueprint-fade-in 200ms;
animation: layered-blueprint-fade-in 200ms;
}

@-webkit-keyframes layered-blueprint-fade-out {
0% {
opacity: 1;
visibility: visible;
}
100% {
opacity: 0;
visibility: hidden;
}
}

@keyframes layered-blueprint-fade-out {
0% {
opacity: 1;
visibility: visible;
}
100% {
opacity: 0;
visibility: hidden;
}
}

.layered-blueprint-radio:checked + .layered-blueprint-tab + .layered-blueprint-layer ~ .layered-blueprint-layer {
-webkit-animation: layered-blueprint-fade-out 200ms;
animation: layered-blueprint-fade-out 200ms;
}

/* [[Template:YouTube]] */
.youtube-video {
display: block;
}

/* Prevent page jump from the toolbar loading */
.client-js #editform {
/* To disable margin collapsing */
overflow: hidden;
}

.client-js .mw-editform > #wpTextbox1 {
margin-top: 73px;
}

.wikiEditor-ui-toolbar .tabs span.tab a:before {
filter: invert(1);
}

/* Alternating cell background */
.alternatecells:nth-child(odd) {
background-color: #F9F9F9;
}
body.wgl-theme-dark .alternatecells:nth-child(odd) {
background-color: #222;
}

/* Alternating table rows, primarily used with [[Template:Infobox row]] */
.alternaterows tr:nth-child(even),
.infobox-rows tr:nth-child(even) {
background-color: #F9F9F9;
}
body.wgl-theme-dark .alternaterows tr:nth-child(even),
body.wgl-theme-dark .infobox-rows tr:nth-child(even) {
background-color: #222;
}

/* Scale file page image to the width of the page */
.dynamic-video video,
.dynamic-image img,
#file video,
#file img {
max-width: 100%;
height: auto;
}

/* Fix bad codex default styles */
.cdx-message__content {
hyphens: manual !important;
}

/* Highlight clicked reference in blue to help navigation */
ol.references li:target,
sup.reference:target,
span.citation:target {
background-color: #C1DAF2;
}

/* Allow parts of toc to be hidden */
/* Section levels */
.toc-hidelevel2 .toclevel-1 ul,
.toc-hidelevel3 .toclevel-2 ul,
.toc-hidelevel4 .toclevel-3 ul,
/* Numbers */
.toc-nonumbers .tocnumber {
display: none;
}

/* Adjust styles for small screens */
@media (max-width: 500px) {
#content div.thumb {
float: none;
}
}

/* Simulate link styling for JS only links */
.jslink {
color: #0645AD;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

.jslink:hover {
text-decoration: underline;
cursor: pointer;
}

.jslink:active {
color: #FAA700;
}

/* Try to use nearest neighbour scaling for pixelated images */
.mcwiki-header-grass,
.ns-special .gallerybox img,
.ns-14 .gallerybox img,
.filehistory a img,
.pixel-image,
.invslot-item-image,
.sprite {
image-rendering: optimizeSpeed;
image-rendering: -webkit-optimize-contrast;
image-rendering: optimize-contrast;
image-rendering: -moz-crisp-edges;
image-rendering: -o-crisp-edges;
image-rendering: crisp-edges;
image-rendering: pixelated;
-ms-interpolation-mode: nearest-neighbor;
}

/* User link icons */

/* Weird Gloop */
/* [[File:Weird Gloop.png]] light mode */
.mw-userlink[href="/w/User:Jayden"], .mw-userlink[href="/w/User:Jayden?action=edit&redlink=1"],
.mw-userlink[href="/w/User:Cook_Me_Plox"], .mw-userlink[href="/w/User:Cook_Me_Plox?action=edit&redlink=1"],
.mw-userlink[href="/w/User:TehKittyCat"], .mw-userlink[href="/w/User:TehKittyCat?action=edit&redlink=1"],
.mw-userlink[href="/w/User:BigDiesel2m"], .mw-userlink[href="/w/User:BigDiesel2m?action=edit&redlink=1"],
.mw-userlink[href="/w/User:Gaz_Lloyd"], .mw-userlink[href="/w/User:Gaz_Lloyd?action=edit&redlink=1"],
.mw-userlink[href="/w/User:Weird_Gloop"], .mw-userlink[href="/w/User:Weird_Gloop?action=edit&redlink=1"],
.mw-userlink[href="/w/User:Isobel"], .mw-userlink[href="/w/User:Isobel?action=edit&redlink=1"] {
padding-left: 17px;
background: url('filepath://Weird_Gloop.png') no-repeat left center;
background-size: 14px 14px;
}

/* [[File:Weird Gloop dark.png]] dark mode */
.wgl-theme-dark .mw-userlink[href="/w/User:Jayden"], .wgl-theme-dark .mw-userlink[href="/w/User:Jayden?action=edit&redlink=1"],
.wgl-theme-dark .mw-userlink[href="/w/User:Cook_Me_Plox"], .wgl-theme-dark .mw-userlink[href="/w/User:Cook_Me_Plox?action=edit&redlink=1"],
.wgl-theme-dark .mw-userlink[href="/w/User:TehKittyCat"], .wgl-theme-dark .mw-userlink[href="/w/User:TehKittyCat?action=edit&redlink=1"],
.wgl-theme-dark .mw-userlink[href="/w/User:BigDiesel2m"], .wgl-theme-dark .mw-userlink[href="/w/User:BigDiesel2m?action=edit&redlink=1"],
.wgl-theme-dark .mw-userlink[href="/w/User:Gaz_Lloyd"], .wgl-theme-dark .mw-userlink[href="/w/User:Gaz_Lloyd?action=edit&redlink=1"],
.wgl-theme-dark .mw-userlink[href="/w/User:Weird_Gloop"], .wgl-theme-dark .mw-userlink[href="/w/User:Weird_Gloop?action=edit&redlink=1"],
.wgl-theme-dark .mw-userlink[href="/w/User:Isobel"], .wgl-theme-dark .mw-userlink[href="/w/User:Isobel?action=edit&redlink=1"] {
background-image: url('filepath://Weird_Gloop_dark.png');
}

/* Mojang */
/* Add [[File:Mojang logo.svg]] to known Mojang employee userlinks */
.mw-userlink[href="/w/User:Dinnerbone-gpuser"], .mw-userlink[href="/w/User:Dinnerbone-gpuser?action=edit&redlink=1"],
.mw-userlink[href="/w/User:Jeb_mojang"], .mw-userlink[href="/w/User:Jeb_mojang?action=edit&redlink=1"],
.mw-userlink[href="/w/User:MidnightEnforcer"], .mw-userlink[href="/w/User:MidnightEnforcer?action=edit&redlink=1"],
.mw-userlink[href="/w/User:Minecraft_Staff"], .mw-userlink[href="/w/User:Minecraft_Staff?action=edit&redlink=1"],
.mw-userlink[href="/w/User:Mojang_tommo"], .mw-userlink[href="/w/User:Mojang_tommo?action=edit&redlink=1"],
.mw-userlink[href="/w/User:Slicedlime"], .mw-userlink[href="/w/User:Slicedlime?action=edit&redlink=1"],
.mw-userlink[href="/w/User:IP_Justice"], .mw-userlink[href="/w/User:IP_Justice?action=edit&redlink=1"],
.mw-userlink[href="/w/User:Cornerhard"], .mw-userlink[href="/w/User:Cornerhard?action=edit&redlink=1"],
.mw-userlink[href="/w/User:CornerHard"], .mw-userlink[href="/w/User:CornerHard?action=edit&redlink=1"],

/* legacy/deleted */
.mw-userlink[href="/w/User:MidnightEnforcer43458@legacy41488102"], .mw-userlink[href="/w/User:MidnightEnforcer43458@legacy41488102?action=edit&redlink=1"],
/* previously User:Jonkagstrom47437 */
.mw-userlink[href="/w/User:@DeletedUser40286849"], .mw-userlink[href="/w/User:@DeletedUser40286849?action=edit&redlink=1"],
/* previously User:shoghicp */
.mw-userlink[href="/w/User:@DeletedUser40317681"], .mw-userlink[href="/w/User:@DeletedUser40317681?action=edit&redlink=1"] {
padding-left: 17px;
background: url('filepath://Mojang_logo.svg') no-repeat left center;
background-size: 14px 14px;
}

/* Add [[File:Grass Block JE7 BE6.png]] to known Minecraft/Mojang-related contractor employee userlinks */
.mw-userlink[href="/w/User:C418bla"], .mw-userlink[href="/w/User:C418bla?action=edit&redlink=1"],
.mw-userlink[href="/w/User:Jocopa3"], .mw-userlink[href="/w/User:Jocopa3?action=edit&redlink=1"] {
padding-left: 17px;
background: url('filepath://Grass_Block_JE7_BE6.png') no-repeat left center;
background-size: 14px 14px;
}

/* Add [[File:Gray Mojang Thing.png]] to known ex-Mojang employee userlinks */
.mw-userlink[href="/w/User:EvilSeph"], .mw-userlink[href="/w/User:EvilSeph?action=edit&redlink=1"],
.mw-userlink[href="/w/User:ExcitedZe"], .mw-userlink[href="/w/User:ExcitedZe?action=edit&redlink=1"],
.mw-userlink[href="/w/User:Neon_Master"], .mw-userlink[href="/w/User:Neon_Master?action=edit&redlink=1"],
.mw-userlink[href="/w/User:RazzleberryFox"], .mw-userlink[href="/w/User:RazzleberryFox?action=edit&redlink=1"],
.mw-userlink[href="/w/User:Tahg"], .mw-userlink[href="/w/User:Tahg?action=edit&redlink=1"],
.mw-userlink[href="/w/User:Tamerjeison"], .mw-userlink[href="/w/User:Tamerjeison?action=edit&redlink=1"],
.mw-userlink[href="/w/User:HelenAngel"], .mw-userlink[href="/w/User:HelenAngel?action=edit&redlink=1"],
/* previously User:ProfMobius */
.mw-userlink[href="/w/User:@DeletedUser40549330"], .mw-userlink[href="/w/User:@DeletedUser40549330?action=edit&redlink=1"] {
padding-left: 17px;
background: url('filepath://Gray_Mojang_Thing.png') no-repeat left center;
}

/* Make external links the same colour as internal links, the icon is enough to differentiate them */
.mw-body a.external {
color: #0645ad;
}

.mw-body a.external:visited {
color: #0b0080;
}

.mw-body a.external:active {
color: #faa700;
}

/* Make tabs the correct size */
body {
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
}

/* Classes corresponding to Minecraft formatting codes */
.format-0 {
color: #000;
text-shadow: 0.125em 0.125em 0 #000;
}
.format-1 {
color: #0000A8;
text-shadow: 0.125em 0.125em 0 #00002A;
}
.format-2 {
color: #00A800;
text-shadow: 0.125em 0.125em 0 #002A00;
}
.format-3 {
color: #00A8A8;
text-shadow: 0.125em 0.125em 0 #002A2A;
}
.format-4 {
color: #A80000;
text-shadow: 0.125em 0.125em 0 #2A0000;
}
.format-5 {
color: #A800A8;
text-shadow: 0.125em 0.125em 0 #2A002A;
}
.format-6 {
color: #FBA800;
text-shadow: 0.125em 0.125em 0 #3E2A00;
}
.format-7 {
color: #A8A8A8;
text-shadow: 0.125em 0.125em 0 #2A2A2A;
}
.format-8 {
color: #545454;
text-shadow: 0.125em 0.125em 0 #151515;
}
.format-9 {
color: #5454FB;
text-shadow: 0.125em 0.125em 0 #15153E;
}
.format-a {
color: #54FB54;
text-shadow: 0.125em 0.125em 0 #153E15;
}
.format-b {
color: #54FBFB;
text-shadow: 0.125em 0.125em 0 #153E3E;
}
.format-c {
color: #FB5454;
text-shadow: 0.125em 0.125em 0 #3E1515;
}
.format-d {
color: #FB54FB;
text-shadow: 0.125em 0.125em 0 #3E153E;
}
.format-e {
color: #FBFB54;
text-shadow: 0.125em 0.125em 0 #3E3E15;
}
.format-f,
#minetip-tooltip {
color: #FBFBFB;
text-shadow: 0.125em 0.125em 0 #3E3E3E;
}
.format-g {
color: #DDD605;
text-shadow: 0.125em 0.125em 0 #373501;
}
.format-h {
color: #E3D4D1;
text-shadow: 0.125em 0.125em 0 #383534;
}
.format-i {
color: #CECACA;
text-shadow: 0.125em 0.125em 0 #333232;
}
.format-j {
color: #443A3B;
text-shadow: 0.125em 0.125em 0 #110E0E;
}
.format-l {
font-weight: bold;
letter-spacing: 0.125em;
}
.format-m {
text-decoration: line-through;
}
.format-n {
text-decoration: underline;
}
.format-o {
font-style: italic;
}
.format-p {
color: #DEB12D;
text-shadow: 0.125em 0.125em 0 #372C0B;
}
.format-q {
color: #47A036;
text-shadow: 0.125em 0.125em 0 #04280D;
}
.format-s {
color: #2CBAA8;
text-shadow: 0.125em 0.125em 0 #0B2E2A;
}
.format-t {
color: #21497B;
text-shadow: 0.125em 0.125em 0 #08121E;
}
.format-u {
color: #9A5CC6;
text-shadow: 0.125em 0.125em 0 #261731;
}
.format-v {
color: #EB7114;
text-shadow: 0.125em 0.125em 0 #3B1D05;
}
/* Custom color codes because §m and §n are used twice. */
.format-y {
color: #971607;
text-shadow: 0.125em 0.125em 0 #250501;
}
.format-z {
color: #B4684D;
text-shadow: 0.125em 0.125em 0 #2D1A13;
}
/* Class for &#123456 and &$123 adding custom hex colors. */
.format-custom {
text-shadow: 0.125em 0.125em 0 color-mix(in srgb, currentColor 25%, #000 75%);
}

/* Styling for minecraft style tooltip */
#minetip-tooltip {
position: fixed;
top: 0;
left: 0;
background-color: #100010;
background-color: rgba(16, 0, 16, 0.94);
padding: 0.375em;
font-family: Minecraft, sans-serif;
font-size: 16px;
word-spacing: 4px;
white-space: nowrap;
line-height: 1.25em;
margin: 0.125em 0.25em;
pointer-events: none;
z-index: 9999;
}

#minetip-tooltip::before {
content: "";
position: absolute;
top: 0.125em;
right: -0.125em;
bottom: 0.125em;
left: -0.125em;
border: 0.15em solid #100010;
border-style: none solid;
border-color: rgba(16, 0, 16, 0.94);
}

#minetip-tooltip::after {
content: "";
position: absolute;
top: 0.125em;
right: 0;
bottom: 0.125em;
left: 0;
border: 0.125em solid #2D0A63;
border-image: -webkit-linear-gradient(rgba(80, 0, 255, 0.31), rgba(40, 0, 127, 0.31)) 1;
border-image: linear-gradient(rgba(80, 0, 255, 0.31), rgba(40, 0, 127, 0.31)) 1;
}

#minetip-tooltip > .description,
#minetip-tooltip > .minetip-description {
display: block;
margin-top: 0.25em;
}

/* For adding alt text to icons for accessibility purposes */
.hidden-alt-text {
font-size: 0;
}

/* prevent sitenotice show/hide toggle from moving page contents down after pageload */
.globalNotice .globalNoticeDismiss {
float: right;
}

/* Prevent code from overflowing */
code {
overflow-wrap: break-word;
}

/* Style code, pre and similar elements/classes with one common styling */
@media screen {
pre, code, .mw-code {
background-color: #F8F9FA;
color: #000;
border: 1px solid #BBC2C6;
}
}

kbd, .kbd-color {
text-shadow: 0 1px 0 #FFF;
background-color: #F8F9FA;
color: #222;
box-shadow: 0 1px rgba(0,0,0,0.2), 0 0 0 2px #FFF inset;
border-color: #BBC2C6;
font-size: smaller;
}

/* Fixes for small screens */
@media screen and (max-width: 720px) {
#mw-head {
top: 13px;
}

div#mw-navigation div#mw-panel {
position: static !important; /* position: relative may be added to inline styles by built-in JS after page load; it needs an !important to override */
}
}

@media screen and (max-width: 500px) {
/* TOC fix */
#mw-content-text > .mw-parser-output > div[style*="float"] {
float: none !important;
margin: 0 !important;
}
}

/* presumable Discord link on comportal */
.CPDiscord {
float: right;
margin-left: 1em;
clear: right;
}

/* Styling for tooltip */
.explain {
border-bottom: 0;
text-decoration: underline dotted;
cursor: help;
}

/* Show help cursor when an abbr element has a title attribute */
abbr[title] {
cursor: help;
}

/* [[Template:History]] */
.historytable-experiment {
border-top: 1px solid;
border-color: inherit;
margin-top: 0.5em;
padding: 0 1em;
font-size: smaller;
line-height: 1;
background-color: inherit;
}
.historytable-experiment > div {
margin: -0.5em auto 0;
padding: 0 0.5em;
width: min-content;
background-color: inherit;
}
.historytable-experiment + span {
font-size: small;
line-height: 1.3;
}

/* Machine-readable extra template information */
.history-json, .chest-json, .chestcontents-json, .sound-json, .spawntable-json, .advancements-json, .achievements-json {
display: none;
}

.mw-references-columns {
overflow-wrap: break-word;
}

#mw-imagepage-section-filehistory {
overflow: auto;
}

/* Enhance contrast for search highlight since we use a blue background */
.mw-prefs-search-highlight {
background: #c9dffd !important; /* default style contains !important */
outline: 3px solid #c9dffd !important;
}

/* [[Template:Colorlink]] */
.colored-links a {
color: inherit !important;
}

body.ns-10008 #ca-talk,
body.ns-10008 .minerva__tab[data-event-name="tabs.talk"] {
display: none;
}

/* DiscussionTools dark mode fix */
body.wgl-theme-dark .ext-discussiontools-init-highlight {
mix-blend-mode: lighten;
}

body.wgl-theme-dark .ext-discussiontools-init-publishedcomment {
background-color: #6b5f29;
}

body.wgl-theme-dark .ext-discussiontools-init-targetcomment {
background-color: #1b1f29;
}

body.wgl-theme-dark .ext-discussiontools-ui-replyWidget-preview {
background: #222;
}

.sr-only:not(:focus):not(:active) {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}

User:Miasmus/styles.css

2025-03-31T21:22:42Z

Miasmus: Miasmus moved page User:Miasmus/styles.css to User:Miasmus/common.css

/* #REDIRECT */@import url(https://wiki.cobblemon.com/index.php?title=User:Miasmus/common.css&action=raw&ctype=text/css);

User:Miasmus/common.css

2025-03-31T21:22:42Z

Miasmus: Miasmus moved page User:Miasmus/styles.css to User:Miasmus/common.css

/* Copied from https://minecraft.wiki/w/Minecraft_Wiki/styles.css for testing */

.mp-wrapper {
display: flex;
flex-wrap: wrap;
width: 100%;
gap: 6px;
}

.mp-wrapper *, .mp-wrapper *::before, .mp-wrapper *::after {
box-sizing: border-box;
}

.mp-wrapper > .mp-section {
width: 100%;
}

.mp-wrapper h2 {
font-family: revert;
font-weight: bold;
font-size: 1.2em;
}

.mp-left, .mp-right {
display: flex;
flex-direction: column;
gap: 6px;
}

.mp-inline-sections {
display: grid;
grid-template-columns: 1fr;
grid-template-areas: "site" "left" "right";
gap: 6px;
width: 100%;
}

#mp-section-site {
grid-area: site;
}
.mp-left {
grid-area: left;
}
.mp-right {
grid-area: right;
}
.mp-sticky {
position: sticky;
top: 20px;
}

@media screen and (min-width: 990px) {
.mp-inline-sections {
grid-template-columns: 2fr 1fr;
grid-template-rows: auto 1fr;
grid-template-areas: "left site" "left right";
}
}

.mp-section-center {
text-align: center;
}

.mp-section {
border: 2px solid #bbb;
background-color: #fcfcfcb8;
box-shadow: inset -2px -2px #0000000f,
inset 2px 2px #ffffff0d;
padding: 12px;
}

body.wgl-theme-dark .mp-section {
border-color: #202125;
background-color: #4c4e522e;
}

.mp-section.mp-section-full {
width: 100%;
}

.mp-title {
border: none;
margin: 0;
padding: 0 !important;
}

.mp-wrapper .collapsible-content {
display: grid !important;
grid-template-rows: 1fr;
transition: grid-template-rows 300ms;
}

.mp-wrapper .collapsible.collapsed .collapsible-content {
grid-template-rows: 0fr;
}

.mp-wrapper .collapsible-content > * {
overflow: hidden;
}

.mp-title .collapsetoggle {
min-width: revert !important;
color: transparent;
user-select: none;
display: flex;
align-items: center;
}

.mp-title .collapsetoggle .jslink {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
color: transparent;
}

.mp-title .collapsetoggle::after {
clip-path: polygon(0% 0%, 0% 25%, 14.286% 25%, 14.286% 50%, 28.572% 50%, 28.572% 75%, 42.858% 75%, 42.858% 100%, 57.142% 100%, 57.142% 75%, 71.428% 75%, 71.428% 50%, 85.714% 50%, 85.714% 25%, 100% 25%, 100% 0%, 85.714% 0%, 85.714% 25%, 71.428% 25%, 71.428% 50%, 57.142% 50%, 57.142% 75%, 42.858% 75%, 42.858% 50%, 28.572% 50%, 28.572% 25%, 14.286% 25%, 14.286% 0%);
display: block;
content: "";
width: 15px;
height: 9px;
background-color: var(--content-text-color);
margin-left: 6px;
transform: rotate(0);
transition: 300ms transform;
pointer-events: none;
}

.collapsible:not(.collapsed) .mp-title .collapsetoggle::after {
transform: rotate(180deg);
}

body.wgl-theme-light .mp-wrapper,
body.wgl-theme-light .mp-portal-minecraft {
--button-color: #ebebeb;
--button-color-progressive: #3a971e;
--button-text-color: var(--content-text-color);
--button-border-color: rgba(0,0,0,0.4);
}

body.wgl-theme-dark .mp-wrapper,
body.wgl-theme-dark .mp-portal-minecraft {
--button-color: #48494a;
--button-color-progressive: #137342;
--button-text-color: #fff;
--button-border-color: #242424;
}

body.wgl-theme-light.page-Dungeons_Wiki .mp-wrapper,
body.wgl-theme-light .mp-portal-dungeons {
--button-color-progressive: #ff791a;
}
body.wgl-theme-dark.page-Dungeons_Wiki .mp-wrapper,
body.wgl-theme-dark .mp-portal-dungeons {
--button-color-progressive: #894425;
}

body.wgl-theme-light.page-Legends_Wiki .mp-wrapper,
body.wgl-theme-light .mp-portal-legends {
--button-color-progressive: #0eb9a9;
}
body.wgl-theme-dark.page-Legends_Wiki .mp-wrapper,
body.wgl-theme-dark .mp-portal-legends {
--button-color-progressive: #166a64;
}

body.wgl-theme-light.page-Movie_Wiki .mp-wrapper,
body.wgl-theme-light .mp-portal-movie {
--button-color-progressive: #805539;
}
body.wgl-theme-dark.page-Movie_Wiki .mp-wrapper,
body.wgl-theme-dark .mp-portal-movie {
--button-color-progressive: #5a361e;
}

body.wgl-theme-light.page-Earth_Wiki .mp-wrapper,
body.wgl-theme-light .mp-portal-earth {
--button-color-progressive: #2eb06d;
}
body.wgl-theme-dark.page-Earth_Wiki .mp-wrapper,
body.wgl-theme-dark .mp-portal-earth {
--button-color-progressive: #15673c;
}

body.wgl-theme-light.page-Story_Mode_Wiki .mp-wrapper,
body.wgl-theme-light .mp-portal-story-mode {
--button-color-progressive: #aa8a34;
}
body.wgl-theme-dark.page-Story_Mode_Wiki .mp-wrapper,
body.wgl-theme-dark .mp-portal-story-mode {
--button-color-progressive: #6e5726;
}

.mp-button {
width: 100%;
gap: 6px;
cursor: pointer;
position: relative;

text-align: center;

background-color: var(--button-color);
color: var(--button-text-color, #000);
border: 2px solid var(--button-border-color);

font-size: 1em;
font-weight: bold;

transition-property: background-color, color, border-color, box-shadow, opacity, padding, margin;
transition-duration: .1s;
}

.mp-button.mp-button-progressive {
background-color: var(--button-color-progressive);
--button-text-color: #FFF;
--button-text-shadow-color: #00000020;
}

body.mediawiki .mp-button > * {
width: calc(100% + 4px);
height: calc(100% + 4px);
margin: -2px;
color: var(--button-text-color, #000) !important;
text-decoration: none;
text-shadow: 2px 2px 0 var(--button-text-shadow-color);

display: flex;
gap: 6px;
padding: 8px 10px 14px !important;

text-align: center;
align-items: center;
justify-content: center;

transition-property: padding, margin;
transition-duration: .1s;
}

body.wgl-theme-dark .mp-button > * {
--content-text-color: #fff;
}

.mp-button.mp-button-has-image > *::before {
content: '';
display: inline-block;
height: 24px;
width: 24px;
border: 2px solid #242424;
background-image: var(--button-image);
background-repeat: repeat-x;
background-size: contain;
image-rendering: pixelated;
}

.mp-button.mp-button-image-no-border > *::before {
border: none;
}

.mp-button::after {
display: block;
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
box-shadow: 0 -6px 0 0 rgb(104, 104, 104) inset,
2px 2px 0 0 rgba(178, 178, 178, 0.5) inset,
-2px -8px 0 0 rgba(153, 153, 153, 0.5) inset;

mix-blend-mode: hard-light;
transition: .1s background-color, box-shadow;
pointer-events: none;
}

.mp-button:not(.mp-portal-active):active::after,
.mp-portal-active::after,
.mp-icon:active .mp-button::after {
box-shadow: 2px 2px 0 0 rgba(178, 178, 178, 0.5) inset,
-2px -2px 0 0 rgba(153, 153, 153, 0.5) inset;
background-color: #0000001a;
}

.mp-button:not(.mp-portal-active):hover:not(:active)::after,
.mp-icon:hover:not(:active) .mp-button::after {
background-color: #ffffff1a;
}

body.mediawiki .mp-button:active > *,
body.mediawiki .mp-portal-active > *,
body.mediawiki .mp-icon:active .mp-button > * {
padding: 14px 10px 8px !important;
margin-top: -8px;
height: calc(100% + 10px);
}

.mp-button:not(.mp-icon-link):active,
.mp-portal-active {
margin-top: 6px;
}

.mp-icon:active .mp-icon-img {
padding-bottom: 6px;
}

.mp-portal-active > *::after {
content: '';
display: block;
position: absolute;
bottom: 0;
width: 20%;
height: 2px;
background-color: #fff;
}

.mp-portal-wrapper {
display: flex;
flex-wrap: wrap;
width: 100%;
margin: 1px;
}

.mp-portal-wrapper .mp-button {
flex: 1 1 0;
min-width: max-content;
margin-left: -1px;
}

.mp-portal-wrapper .mp-button.mp-portal-active,
.mp-portal-wrapper .mp-button.mp-portal:hover,
.mp-portal-wrapper .mp-button.mp-portal:active {
--button-color: var(--button-color-progressive);
--button-text-color: #FFF;
--button-text-shadow-color: #00000020;
}

/* [[File:TinyVuFace.png]] */
.mp-button-vu {
--button-image: url(https://minecraft.wiki/images/TinyVuFace.png);
}

/* [[File:Icon_Minecraft.png]] */
.mp-portal-minecraft {
--button-image: url(https://minecraft.wiki/images/Icon_Minecraft.png);
}

/* [[File:Dungeons.png]] */
.mp-portal-dungeons {
--button-image: url(https://minecraft.wiki/images/Dungeons.png);
}

/* [[File:Icon_Legends.png]] */
.mp-portal-legends {
--button-image: url(https://minecraft.wiki/images/Icon_Legends.png);
}

/* [[File:Icon_Movie.png]] */
.mp-portal-movie {
--button-image: url(https://minecraft.wiki/images/Icon_Movie.png);
}

/* [[File:Icon_Earth.png]] */
.mp-portal-earth {
--button-image: url(https://minecraft.wiki/images/Icon_Earth.png);
}

/* [[File:Icon_Story_Mode.png]] */
.mp-portal-story-mode {
--button-image: url(https://minecraft.wiki/images/Icon_Story_Mode.png);
}

/* portal buttons - responsive */
@media screen and (max-width: 950px) {
body.mediawiki .mp-portal-wrapper .mp-button:not(.mp-portal-active) > * {
font-size: 0;
gap: 0;
}
}

@media screen and (max-width: 500px) {
body.mediawiki .mp-portal-wrapper .mp-button.mp-portal-active > * {
font-size: 0.8em;
padding-left: 8px !important;
padding-right: 8px !important;
}

body.mediawiki .mp-portal-story-mode.mp-portal-active > a > span {
max-width: 45px;
line-break: normal;
line-height: 1.1em;
}
}

.mp-social-wrapper {
display: flex; /** fallback when grid is not supported */
display: grid;
grid-auto-columns: minmax(0, 1fr);
grid-auto-flow: column;
gap: 4px;
width: 100%;
}

.mp-social-wrapper img {
margin: 2px 0;
}

.mp-button.mp-social-discord {
--button-color: #5865f2;
}
.mp-button.mp-social-zulip {
background: linear-gradient(to bottom, #50adff, #7877fc);
}
.mp-button.mp-social-twitter {
--button-color: #1da1f2;
}
.mp-button.mp-social-mastodon {
background: linear-gradient(to bottom, #6364ff, #563acc);
}
.mp-button.mp-social-bluesky {
--button-color: #1185fe;
}

.mp-icon-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin: auto;
--icon-base-width: 90px;
--icon-max-width: 200px;
}

.mp-icon {
flex: 1 auto;
width: var(--icon-base-width);
max-width: var(--icon-max-width);
display: flex;
flex-direction: column;
transition-property: padding,margin;
transition-duration: .1s;
}

/* responsive icon size */
@media screen and (min-width: 1500px) and (max-width: 2600px) {
.mp-main-icons {
--icon-base-width: 6vw;
}
}
@media screen and (max-width: 950px) {
.mp-icon-wrapper.mp-main-icons {
--icon-base-width: 70px;
--icon-max-width: 100px;
}
}

.mp-icon-link {
flex: 1;
margin: -2px 0 0;
font-size: 14px;
padding-left: 2px;
padding-right: 2px;
}

.mp-icon-img {
display: flex;
align-items: center;
justify-content: center;
background-color: #00000030;
box-shadow: inset 0 4px #00000030, inset 0 -4px #ffffff40;
border: 2px solid rgba(0, 0, 0, 0.4);

transition-property: background-color, color, border-color, box-shadow, opacity, padding, margin;
transition-duration: .1s;
}

body.wgl-theme-dark .mp-icon-img {
background-color: #ffffff10;
box-shadow: inset 0 4px #00000030, inset 0 -4px #ffffff20;
}

.mp-icon:hover .mp-icon-img {
background-color: #00000040;
}

body.wgl-theme-dark .mp-icon:hover .mp-icon-img {
background-color: #ffffff20;
}

body.wgl-theme-dark .mp-icon-img {
background-color: #ffffff10;
border-color: #242424;
box-shadow: inset 0 4px #00000030, inset 0 -4px #ffffff20;
}

.mp-icon-img a {
padding: 12px;
}

.mp-icon-img a, .mp-icon-img span {
display: block;
width: 100%;
height: 100%;
text-align: center;
}

.mp-icon-img img {
max-width: unset !important;
width: 60px !important;
height: 60px !important;
filter: drop-shadow(2px 2px 1px #00000030);
object-fit: contain;
}

@media screen and (max-width: 950px) {
.mp-icon-link {
font-size: 12px;
}

.mp-icon-img a {
padding: 6px;
}

.mp-icon-img img {
width: 40px !important;
height: 40px !important;
}
}

#mp-section-site {
display: flex;
flex-direction: column;
gap: 8px;
align-items: center;
}

/* Highlights panel */
.mp-highlight-wrapper {
display: flex;
flex-wrap: wrap;
gap: 8px;
}

.mp-highlight {
max-height: 300px;
}

.mp-highlight-image img,
.mp-highlight-image {
object-fit: cover;
width: 100%;
height: 100%;
max-height: 300px;
}

.mp-highlight-top-description,
.mp-highlight-bottom-description {
width: 100%;
}

.mp-highlight-top-description {
background: linear-gradient(180deg, #0008 24px, transparent);
padding: 12px;
position: absolute;
top: 0;
}

.mp-highlight-bottom-description {
background: linear-gradient(0deg, #0008 40px, transparent);
padding: 0 12px;
position: absolute;
bottom: 0;
}

.mp-highlight-version {
font-size: 0.95rem;
}

.mp-highlight {
background-size: cover;
background-position: center;
background-repeat: no-repeat;

box-shadow: inset -4px -4px #0000003d,
inset 4px 4px #fff2;

flex: 1 1 0;
min-width: 300px;
min-height: calc(150px + 5vh);
position: relative;
padding: 0;

color: #fff !important;
font-size: small;
text-shadow: 1px 1px 8px #333,
-1px -1px 8px #333;
}

.mp-section.mp-highlight::after {
position: absolute;
content: '';
top: 0;
bottom: 0;
left: 0;
right: 0;
box-shadow: inset -4px -4px #0000003d,
inset 4px 4px #fff2;
pointer-events: none;
}

.mp-highlight *:not(a):not(.sprite-text) {
color: #fff !important;
}
.mp-highlight a {
color: #bed9ff !important;
}
.mp-highlight .hlist li:after {
background-color: #fff !important;
}
.mp-highlight .mp-title {
line-height: 1.2;
margin-bottom: 6px;
}

.mp-highlight .sprite-file img {
filter: drop-shadow(1px 1px 1px #333)
drop-shadow(-1px -1px 1px #333);
}

.mp-highlight-wrapper {
flex: 0 7 0;
}

.mp-left-row {
flex: 10 10 0;
}

body.wgl-theme-light .mp-highlight-image.mp-dark-only {
display: none;
}
body.wgl-theme-dark .mp-highlight-image.mp-light-only {
display: none;
}

.mp-button-wrapper {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 4px;
}

.mp-button-wrapper-vertical {
flex-direction: column;
}

.mp-button-wrapper .mp-button {
flex: 1 0 0;
min-width: max-content;
white-space: nowrap;
}

.mp-language-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 4px;
}

.mp-language-wrapper .mp-button {
flex: 1 1 90px;
max-width: 180px;
}

.mp-language-wrapper .mp-button:last-child {
flex: 0 0 180px;
}

.mp-language-wrapper .mp-portal-active {
pointer-events: none;
}

.mp-timeline {
display: flex;
flex-direction: column;
/*column-width: 200px;*/
margin-left: 10px;
}

.mp-timeline dl {
padding-left: 15px;
border-left: 2px solid #bbb;
}

.mp-timeline dt {
position: relative;
}

.mp-timeline dl:not(:last-child) {
padding-bottom: 8px;
}

.mp-timeline dl > dt::before {
content: "";
position: absolute;
left: -23px;
top: 4px;
width: 14px;
height: 14px;
background-color: var(--button-color-progressive);
border: 2px solid var(--content-text-color);
}

.mp-timeline dl, .mp-timeline dt, .mp-timeline dd {
margin: 0;
position: relative;
}

/* put month/date in same row as update name */
.mp-timeline dl {
display: flex;
gap: 0 .5em;
flex-wrap: wrap;
flex: 1;
align-content: center;
max-height: 60px;
}

.mp-timeline dd {
opacity: 0.8;
}
.mp-timeline dd:before {
content: "– ";
}

.mp-featured-img {
flex: 0 0 0;
margin: auto;
margin-top: 0;
max-width: 100%;
}

.mp-featured-img img {
max-width: 270px;
height: auto;
}

.mp-platform-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px;
margin-top: 5px;
}

.mp-platform {
min-width: 300px;
display: flex;
gap: 5px;
flex-direction: row;
align-items: center;
}

.mp-platform .mp-title .mw-headline {
display: flex;
flex-direction: column;
gap: 5px;
line-height: 24px;
}

@media screen and (max-width: 989px) {
.mp-platform {
flex-direction: row;
flex-wrap: wrap;
}
}

#mp-dyk-fact {
transition: height 0.2s, opacity 0.2s;
opacity: 1.0;
overflow-y: hidden;
}

#mp-dyk-fact.loading {
opacity: 0;
}

#mp-dyk-fact > * {
padding-bottom: 0.1em;
}

html.client-nojs #mp-dyk-button {
display: none;
}

/* grow last tile in right column if left column is larger */
.mp-right > :last-child {
flex: 1;
}

.mp-banner {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: space-between;
align-items: flex-end;
position: relative;
}

.mp-banner-image {
margin: 0 auto;
}

.mp-banner-content {
display: flex;
gap: 10px;
flex-wrap: wrap;
align-items: center;
flex: 1 1 400px;
}

.mp-banner-content p:last-of-type {
margin-bottom: 0;
}

.mp-banner .dismissible-alert-dismiss {
position: absolute;
top: 8px;
right: 8px;
}

.mp-banner .dismissible-alert-dismiss::after {
clip-path: polygon(0% 14.28%, 14.28% 14.28%, 14.28% 28.57%, 28.57% 28.57%, 28.57% 42.85%, 42.85% 42.85%, 42.85% 57.13%, 28.57% 57.13%, 28.57% 71.41%, 14.28% 71.41%, 14.28% 85.69%, 0% 85.69%, 0 99.97%, 14.28% 99.97%, 14.28% 85.69%, 28.57% 85.69%, 28.57% 71.41%, 42.85% 71.41%, 42.85% 57.13%, 57.13% 57.13%, 57.13% 71.41%, 71.41% 71.41%, 71.41% 85.69%, 85.69% 85.69%, 85.69% 99.97%, 99.97% 99.97%, 99.97% 85.69%, 85.69% 85.69%, 85.69% 71.41%, 71.41% 71.41%, 71.41% 57.13%, 57.13% 57.13%, 57.13% 42.85%, 71.41% 42.85%, 71.41% 28.57%, 85.69% 28.57%, 85.69% 14.28%, 99.97% 14.28%, 99.97% 0%, 85.69% 0%, 85.69% 14.28%, 71.41% 14.28%, 71.41% 28.56%, 57.13% 28.56%, 57.13% 42.85%, 42.85% 42.85%, 42.85% 28.57%, 28.57% 28.57%, 28.57% 14.28%, 14.28% 14.28%, 14.28% 0%, 0% 0%);
display: block;
content: "";
width: 15px;
height: 15px;
background-color: var(--content-text-color);
}

@media screen and (min-width: 480px) {
.mp-banner-content {
flex-wrap: nowrap;
}

.mp-banner-image {
margin: 0;
}
}

/* [[Category:Template styles]] */

User:Miasmus/common.css

2025-03-31T21:13:30Z

Miasmus: Created page with "/* Copied from https://minecraft.wiki/w/Minecraft_Wiki/styles.css for testing */ .mp-wrapper { display: flex; flex-wrap: wrap; width: 100%; gap: 6px; } .mp-wrapper *, .mp-wrapper *::before, .mp-wrapper *::after { box-sizing: border-box; } .mp-wrapper > .mp-section { width: 100%; } .mp-wrapper h2 { font-family: revert; font-weight: bold; font-size: 1.2em; } .mp-left, .mp-right { display: flex; flex-direction: column; gap: 6px; } .mp-inline-sections { di..."

User:Miasmus

2025-01-07T15:34:43Z

Miasmus: Created page with "test"

test

Guides/Installation

2024-07-19T18:02:11Z

Miasmus: /* Prism Launcher */

This guide will teach you how to install and begin playing the Cobblemon mod. There are multiple methods in which you can go about installing Cobblemon and not all methods will be listed here. However, the methods listed here will be the generally used and easiest way to get Cobblemon running as quickly and easily as possible.

==What version of Minecraft do I need?==
The latest version of Cobblemon is currently available on Minecraft 1.20.1. Cobblemon is only available on '''Minecraft: Java Edition''' and not '''Minecraft: Bedrock Edition''' (Minecraft: Bedrock Edition is the version which the Xbox gamefront, consoles and mobile devices run on). '''Due to differences between the versions, Cobblemon will not be available to play on Bedrock Edition.'''

==How to Install==

===Prism Launcher===
[[Guides/Installation/Prism_Launcher|How to install using Prism Launcher]]

===Modrinth Launcher===
[[Guides/Installation/Modrinth|How to install using the Modrinth App]]

===Curseforge Launcher===
[[Guides/Installation/Curseforge|How to install using the Curseforge Launcher]]

Guides/Installation/Prism Launcher

2024-07-19T17:51:52Z

Miasmus:

To begin, download the relevant version of Prism Launcher from the [https://prismlauncher.org/ Prism Launcher Official Website]. Once downloaded, if you have downloaded the zip version, extract the zip file to wherever you wish to keep the launcher—othewise, run the setup executable to install the launcher. Once extracted or installed, run prismlauncher.exe. Select your language and then select the path to your javaw instance (Select "javaw" if you do not know this). It is recommended to also increase your minimum and maximum memory allocation to a minimum of 4096 MiB, although higher may be required depending on the amount and intensity of the modpack used. Afterwards, you may customise your personal launcher theming if you wish, or leave it as default.

Once set up, you will be shown a blank page with options at the top. Select "Add Instance" to create a new modpack instance. From here, select "Modrinth" from the categories on the left and search for "Cobblemon". From here, you may install one of the two recommended official modpacks, '''Cobblemon [Fabric]''' ([https://modrinth.com/modpack/cobblemon-fabric Web Link]) or '''Cobblemon [Forge]''' ([https://modrinth.com/modpack/cobblemon-forge Web Link]). You may also install a different Cobblemon modpack if you wish, but these modpacks will likely include mods other than Cobblemon. Once you have selected one of the modpacks, click "OK" to begin download.

Once the download is complete, you now need to log into your Minecraft account. Click "Profiles" in the top right, then "Manage Accounts". Once the new window opens, click "Add Microsoft" and follow the instructions afterwards to login with your account.

Once completed, you may close the Settings window and simply double click on the instance to begin playing!