User:TreeIsLife/fandomdesktop.css


 * root, body.theme-fandomdesktop-light {

/* Colors for the MP */ --custom-blue-background: #d0e0f5; --custom-blue-background-highlight: #b4cbeb; --custom-green-background: #d1f1d1; --custom-green-background-highlight: #b3dfae; --custom-grey-background: #ebebeb; --custom-grey-background-highlight: #d9d9d9; --custom-magenta-background: #f3dbef; --custom-magenta-background-highlight: #e1bfdc; --custom-orange-background: #f3ebdb; --custom-orange-background-highlight: #edd9b2; --custom-purple-background: #e7e0f5; --custom-purple-background-highlight: #dcd2ef; --custom-red-background: #f7e4e4; --custom-red-background-highlight: #f9c9c9; --custom-yellow-background: #efefce; --custom-yellow-background-highlight: #dddda4; --custom-blue-border: #aec0d9; --custom-blue-border-highlight: #7fa0cd; --custom-green-border: #b4d3b4; --custom-green-border-highlight: #89b983; --custom-grey-border: #d3d3d3; --custom-grey-border-highlight: #a3a3a3; --custom-magenta-border: #dbb6d5; --custom-magenta-border-highlight: #c77ebb; --custom-orange-border: #d9c9aa; --custom-orange-border-highlight: #c1a978; --custom-purple-border: #ccc1e3; --custom-purple-border-highlight: #aa9acb; --custom-red-border: #e7c7c7; --custom-red-border-highlight: #db9595; --custom-yellow-border: #d7d7b2; --custom-yellow-border-highlight: #b7b74e; --custom-cyan-color: #adc9db; /* Colores de portada */ --custom-mainpage-background: #d0dae5; --custom-mainpage-background--secondary: #bfd0dd; --custom-mainpage-hover: #bdcbdb; --custom-mainpage-green-background: #c3e1c3; --custom-mainpage-orange-background: #e3d3b6; --custom-mainpage-light-blue-background: #b8d5e7; --custom-mainpage-blue-background: #c0d0e7; --custom-mainpage-dark-orange-background: #dfcec4; --custom-mainpage-purple-background: #d2cbe3; --custom-mainpage-turquoise-background: #b6d9cb; --custom-mainpage-brown-background: #d3cac3; --custom-mainpage-green-border: #b4d5b4; --custom-mainpage-orange-border: #d9c9ab; --custom-mainpage-light-blue-border: #abcbdf; --custom-mainpage-blue-border: #b1c5e1; --custom-mainpage-dark-orange-border: #d9c5b9; --custom-mainpage-purple-border: #c9c0dd; --custom-mainpage-turquoise-border: #b0d1c3; --custom-mainpage-brown-border: #cdbdaf;

/* Colores de infobox */ --custom-infobox-header-background: #178c4a; --custom-infobox-header-border-top: #39cf51; --custom-infobox-header-border-bottom: #0e4e2d; --custom-infobox-header-border-side: #22744a; /* Variables de plantilla */ --custom-template-background: #eef4f9; --custom-template-border: #ccc; --custom-element-background: #dce4e7; --custom-navbox-background: #dce4e7; --custom-navbox-header-background: #beccdb; }

/* Tema oscuro general */ body.theme-fandomdesktop-dark { /* Colores de fondos */ --custom-blue-background: #32445a; --custom-blue-background-highlight: #4b5a70; --custom-green-background: #375237; --custom-green-background-highlight: #485e48; --custom-grey-background: #464646; --custom-grey-background-highlight: #545353; --custom-magenta-background: #543b50; --custom-magenta-background-highlight: #60475c; --custom-orange-background: #50452f; --custom-orange-background-highlight: #625640; --custom-purple-background: #493e5e; --custom-purple-background-highlight: #534968; --custom-red-background: #5c3d3d; --custom-red-background-highlight: #644646; --custom-yellow-background: #4d4d28; --custom-yellow-background-highlight: #5c5c3f; --custom-blue-border: #41546c; --custom-blue-border-highlight: #5f728d; --custom-green-border: #486248; --custom-green-border-highlight: #557655; --custom-grey-border: #5a5a5a; --custom-grey-border-highlight: #6a6a6a; --custom-magenta-border: #6a4464; --custom-magenta-border-highlight: #7e5678; --custom-orange-border: #6a604e; --custom-orange-border-highlight: #7e6a43; --custom-purple-border: #5b4f74; --custom-purple-border-highlight: #6c5f87; --custom-red-border: #7a4a4a; --custom-red-border-highlight: #895555; --custom-yellow-border: #64643a; --custom-yellow-border-highlight: #767648; --custom-cyan-color: #475f6e; /* Colores de portada */ --custom-mainpage-background: #404654; --custom-mainpage-background--secondary: #4c5266; --custom-mainpage-hover: #616c85; --custom-mainpage-green-background: #475247; --custom-mainpage-orange-background: #565349; --custom-mainpage-light-blue-background: #434e54; --custom-mainpage-blue-background: #485364; --custom-mainpage-dark-orange-background: #564f4b; --custom-mainpage-purple-background: #4a4650; --custom-mainpage-turquoise-background: #3e5050; --custom-mainpage-brown-background: #4d4b4a; --custom-mainpage-green-border: #5e705e; --custom-mainpage-orange-border: #746c5f; --custom-mainpage-light-blue-border: #5a626e; --custom-mainpage-blue-border: #5c6572; --custom-mainpage-dark-orange-border: #6a6157; --custom-mainpage-purple-border: #615b6e; --custom-mainpage-turquoise-border: #5a6c6b; --custom-mainpage-brown-border: #69625f; /* Variables de plantilla */ --custom-template-background: #252830; --custom-template-border: #3a3a3a; --custom-element-background: #2b2c3c; --custom-navbox-background: #30313c; --custom-navbox-header-background: #282730; }

.fpbox-1 { display: flex; flex-direction: row; padding: .8em; margin-bottom: 1.5em; align-items: center; justify-content: space-around; gap: 1em; flex-wrap: wrap; }

.fpbox-1-content { flex-grow: 1; }

display: flex; justify-content: center; flex-basis: 14em; }
 * 1) A1.fpbox-1-content {

flex-basis: 34em; }
 * 1) B1.fpbox-1-content {

flex-basis: 54em; }
 * 1) C1.fpbox-1-content {

/* images de juegos */ .fpbox-2 { display: flex; flex-wrap: wrap; gap: 1em; margin-bottom: 1.5em; }

.fpbox-2-content { padding: .8em; flex-basis: 14rem; transition: .25s; flex-grow: 1; font-size: 86%; }

background-color: var(--custom-mainpage-green-background); }
 * 1) A2.fpbox-2-content {

background-color: var(--custom-mainpage-brown-background); }
 * 1) B2.fpbox-2-content {

background-color: var(--custom-mainpage-orange-background); }
 * 1) C2.fpbox-2-content {

background-color: var(--custom-mainpage-light-blue-background); }
 * 1) D2.fpbox-2-content {

background-color: var(--custom-mainpage-blue-background); }
 * 1) E2.fpbox-2-content {

background-color: var(--custom-mainpage-dark-orange-background); }
 * 1) F2.fpbox-2-content {

background-color: var(--custom-mainpage-purple-background); }
 * 1) G2.fpbox-2-content{

background-color: var(--custom-mainpage-turquoise-background); } /* images de contents de los juegos */ .fpbox-3 { display: flex; flex-wrap: wrap; gap: 1.5em; margin-bottom: 1.5em; }
 * 1) H2.fpbox-2-content {

.fpbox-3-content { background-color: var(--custom-mainpage-background); flex-basis: 25rem; flex-grow: 1; }

/* images de comunidad de la wiki */ .fpbox-4 { display: flex; flex-wrap: wrap; gap: 1.5em; margin-bottom: 1.5em; }

@media (min-width: 1280px) { .fpbox-4 { display: grid; grid-template-areas: "a b"; grid-template-columns: 33% 66%; } }

.fpbox-4 .wds-tabs__wrapper { width: 98%; }

.fpbox-4 .wds-tabs__wrapper > .wds-tabs__tab-label { font-size: 12px; }

.fpbox-4-content { background-color: var(--custom-mainpage-background); }

flex-grow: 1; flex-basis: 43em; }
 * 1) A4.fpbox-4-content {

/* images finales de información adicional */ .fpbox-5 { display: flex; flex-wrap: wrap; gap: 1.5em; margin-bottom: 1.5em; }

.fpbox-5-content { background-color: var(--custom-mainpage-background); flex-basis: 20rem; flex-grow: 1; }

/* Propiedades extra */ .fpbox-image { display: flex; flex-wrap: wrap; gap: 1.5em; padding: 1em; }

.fpbox-image-sub { flex-basis: 10rem; flex-grow: 1; padding: .4em; display: flex; flex-direction: column; align-items: center; transition: .25s; }

.fpbox-info { display: flex; row-gap: 20px; margin: .9em; flex-direction: column; }

.fpbox-info-sub { padding: .6em; transition: .25s; }

.fpbox-2-content img, .fpbox-image-sub img, .fpbox-info-sub img { opacity: 75%; transition: .25s; } .fpbox-2-content:is(:hover, :focus-within) img, .fpbox-image-sub:is(:hover, :focus-within) img, .fpbox-info-sub:is(:hover, :focus-within) img { opacity: 100%; }

/* header para la fpbox */ .fpbox-header { background: var(--mcw-grass-base); text-align: center; font-size: 120%; padding: 7px; color: white; } .fp-section { background-color: var(--custom-mainpage-background); width: auto; vertical-align: top; margin-bottom: 30px; padding-bottom: 5px; }

/* Sección de tarjetas de content */ /** .fpbox-2-content, .fpbox-image-sub, .fpbox-info-sub { position: relative; }
 * Enlaces de las seccones "Descubre más"/"mecánicas útiles"/"Prueba las
 * ediciones"/"Jugabilidad".

/* .fpbox-2-content a::before, .fpbox-image-sub a::before, .fpbox-info-sub a::before { content: ''; height: 100%; left: 0; position: absolute; top: 0; width: 100%; }
 * Crea pseudo-elemento ::before del enlace objetivo, este va a tener todo el
 * alto y ancho de la tarjeta así lo tocas sin importar tu posición en la tarjeta.

/* background-color: var(--custom-mainpage-green-border); }
 * Hace que el fondo se haga más claro no solo en hover, sino también al
 * enfocar el enlace dentro de la tarjeta (por eso :focus-within y no :focus)
 * al navegar con teclado (puedes hacer clic cerca de las tarjetas y navegar
 * usando solo las teclas TAB/TAB + SHIFT para verlo en acción).
 * 1) A2.fpbox-2-content:is(:hover, :focus-within) {
 * 1) A2.fpbox-2-content:is(:hover, :focus-within) {

background-color: var(--custom-mainpage-brown-border); }
 * 1) B2.fpbox-2-content:is(:hover, :focus-within) {

background-color: var(--custom-mainpage-orange-border); }
 * 1) C2.fpbox-2-content:is(:hover, :focus-within) {

background-color: var(--custom-mainpage-light-blue-border); }
 * 1) D2.fpbox-2-content:is(:hover, :focus-within) {

background-color: var(--custom-mainpage-blue-border); }
 * 1) E2.fpbox-2-content:is(:hover, :focus-within) {

background-color: var(--custom-mainpage-dark-orange-border); }
 * 1) F2.fpbox-2-content:is(:hover, :focus-within) {

background-color: var(--custom-mainpage-purple-border); }
 * 1) G2.fpbox-2-content:is(:hover, :focus-within) {

background-color: var(--custom-mainpage-turquoise-border); }
 * 1) H2.fpbox-2-content:is(:hover, :focus-within) {

.fpbox-info-sub:is(:hover, :focus-within), .fpbox-image-sub:is(:hover, :focus-within) { background-color: var(--custom-mainpage-hover); }

.fpbox-header a { color: #fff; }