MediaWiki:Common.css
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.
@font-face {
font-family: "Minecraft";
src: url(//static.miraheze.org/manoswiki/0/07/Minecraft.otf)
format("opentype");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "Minecraft";
src: url(//static.miraheze.org/manoswiki/c/cd/Minecraftbold.otf)
format("opentype");
font-weight: 800;
font-style: normal;
}
@font-face {
font-family: "Minecraft";
src: url(//static.miraheze.org/manoswiki/b/b1/Minecraftitalic.otf)
format("opentype");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "Minecraft";
src: url(//static.miraheze.org/manoswiki/c/c2/Minecraftbolditalic.otf)
format("opentype");
font-weight: 800;
font-style: italic;
}
@font-face {
font-family: "Pixel UniCode";
src: url(//static.miraheze.org/manoswiki/b/b4/Pixel-UniCode.ttf)
format("truetype");
}
:root {
--black: #000522;
--d1: #bc8724;
--d2: #9a1d1d;
--d3: #171878;
--d4: #346f48;
--l1: #dca844;
--l2: #db4444;
--l3: #5456de;
--l4: #a4d4b4;
--white: #f7fff7;
}
.noscript {
position: fixed;
background: var(--l1);
width: 100vw;
height: 100vh;
top: 0;
left: 0;
z-index: 100;
font-family: "Minecraft", "Pixel UniCode", sans;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
& img {
width: auto;
height: auto;
max-width: 40vw;
max-height: 40vh;
margin-bottom: 5vh;
}
& h1 {
border: none;
font-size: 6vmax;
font-family: "Minecraft", "Pixel UniCode", sans;
margin-bottom: 2vh;
font-weight: 900;
color: var(--d2);
width: fit-content;
text-shadow: 4px 4px var(--black);
}
& p {
font-size: 2vmax;
width: 75%;
& a {
color: var(--d2);
text-decoration: none;
position: relative;
&:before {
content: "";
top: 100%;
left: 0;
width: 0;
height: 2px;
background: var(--d2);
transition: 0.2s ease width;
position: absolute;
}
&:hover,
&:focus,
&:active {
outline: none;
&:focus-visible {
outline: 2px solid var(--d2);
background: var(--white);
color: var(--d2);
}
&:before {
width: 100%;
}
}
}
}
}
.client-js .noscript {
display: none;
}
body:not(.ns-3000):not(.ns-3001) {
background-color: var(--l1);
font-family: "Minecraft", "Pixel UniCode", sans;
& .mw-wiki-logo {
background-image: url(https://static.miraheze.org/manoswiki/c/c8/Emptylogowhite.png?20240630224252) !important;
background-size: contain !important;
filter: invert(1) !important;
}
& .vector-user-menu-legacy .vector-menu-content-list {
& li {
margin: 0;
margin-left: 10px;
& a {
color: black !important;
text-decoration: none;
}
&#pt-uls .uls-trigger {
&::before {
background: url(//static.miraheze.org/manoswiki/f/f6/TranslateIcon.png?20240701090838) !important;
background-size: contain !important;
width: auto;
aspect-ratio: 1/1;
image-rendering: pixelated;
display: block;
padding: 0;
height: 1.25em;
margin-right: 4px;
filter: invert(1);
opacity: 1 !important;
}
display: flex;
justify-content: center;
align-items: baseline;
padding: 0 !important;
}
&#pt-userpage a {
display: flex;
justify-content: center;
align-items: baseline;
padding: 0 !important;
background: none !important;
&::before {
content: "";
background: url(//static.miraheze.org/manoswiki/4/49/UserIcon.png?20240701092134) !important;
background-size: contain !important;
width: auto;
aspect-ratio: 9/11;
image-rendering: pixelated;
display: block;
padding: 0;
height: 1em;
margin-right: 4px;
filter: invert(1);
}
}
&#pt-notifications-alert a {
background: url(//static.miraheze.org/manoswiki/c/cf/BellIcon.png?20240701092912) !important;
background-size: contain !important;
width: auto;
aspect-ratio: 8/10;
image-rendering: pixelated;
display: block;
padding: 0;
height: 1.25rem;
margin-right: 4px;
filter: invert(1);
opacity: 1;
}
&#pt-notifications-notice a {
background: url(//static.miraheze.org/manoswiki/5/51/MailIcon.png?20240701093210) !important;
background-size: contain !important;
width: auto;
aspect-ratio: 12/9;
image-rendering: pixelated;
display: block;
padding: 0;
height: 1.25rem;
margin-right: 4px;
filter: invert(1);
opacity: 1;
}
&:nth-child(6n) {
--c: var(--d2);
}
&:nth-child(6n + 1) {
--c: var(--d4);
}
&:nth-child(6n + 2) {
--c: var(--d3);
}
&:nth-child(6n + 3) {
--c: var(--d4);
}
&:nth-child(6n + 4) {
--c: var(--d2);
}
&:nth-child(6n + 5) {
--c: var(--d3);
}
&:before {
content: "";
top: 100%;
left: 0;
width: 0;
height: 1.5px;
background: var(--c);
transition: 0.2s ease width;
position: absolute;
}
&:hover,
&:focus,
&:active {
outline: none;
& a {
color: var(--c) !important;
}
&:focus-visible {
outline: 2px solid var(--d2);
background: var(--white);
color: var(--c);
}
&:before {
width: 100%;
}
}
position: relative;
}
}
& #mw-panel {
& h3 {
color: var(--black);
font-size: 1rem;
background: none !important;
border-bottom: 1.5px solid var(--black);
margin-left: 0;
}
& li {
&:nth-child(6n) {
--c: var(--d2);
}
&:nth-child(6n + 1) {
--c: var(--d4);
}
&:nth-child(6n + 2) {
--c: var(--d3);
}
&:nth-child(6n + 3) {
--c: var(--d4);
}
&:nth-child(6n + 4) {
--c: var(--d2);
}
&:nth-child(6n + 5) {
--c: var(--d3);
}
a {
text-decoration: none;
position: relative;
color: var(--black);
&:before {
content: "";
top: 100%;
left: 0;
width: 0;
height: 1.5px;
background: var(--c);
transition: 0.2s ease width;
position: absolute;
}
&:hover,
&:focus,
&:active {
outline: none;
color: var(--c);
&:focus-visible {
outline: 2px solid var(--d2);
background: var(--white);
color: var(--c);
}
&:before {
width: 100%;
}
}
}
}
}
& #content {
background: var(--white);
margin-right: 3px;
border: none;
& .infobox {
box-sizing:border-box;
width:fit-content;
position:relative;
display:inline-block;
float:right;
image-rendering:pixelated;
font-family:"Minecraft","Pixel UniCode",sans;
color:white;
text-shadow:2px 2px #000000aa;
border-spacing:0px;
margin: 10px;
background: var(--l2);
padding: 10px 25px 10px 25px;
box-shadow: 8px 8px 0px var(--black);
& tr:first-of-type th {
font-size: 2rem;
}
& tr img {
filter: drop-shadow(4px 4px 0px var(--black));
margin-bottom: 10px;
}
& tr td {
text-align: right;
}
}
& h1, h2 {
border-bottom: 2px solid black !important;
padding-bottom: 5px !important;
& span {
font-family: "Minecraft","Pixel UniCode",sans;
}
}
& #catlinks {
border: none !important;
background: var(--l3);
box-shadow: 8px 8px var(--black);
padding: 10px;
color: var(--l3);
& a {
color: var(--white);
&[title='Special:Categories'] {
background: var(--white);
color: var(--l3);
padding: 2px;
}
}
}
}
& .vector-menu-tabs,
& .vector-menu-dropdown {
background: none !important;
padding: 0px !important;
}
& .vector-menu-tabs-legacy li {
&:nth-child(6n) {
--c: var(--d2);
}
&:nth-child(6n + 1) {
--c: var(--d4);
}
&:nth-child(6n + 2) {
--c: var(--d3);
}
&:nth-child(6n + 3) {
--c: var(--d4);
}
&:nth-child(6n + 4) {
--c: var(--d2);
}
&:nth-child(6n + 5) {
--c: var(--d3);
}
position: relative;
background: none;
transform: translateY(-1px);
&:not(.selected) a {
background-image: none !important;
color: var(--black);
&:hover {
background: var(--c);
color: var(--l1);
text-decoration: none;
}
}
&.selected {
& a {
background: var(--white) !important;
box-shadow: 2px 0px var(--black);
}
z-index: 2;
}
border: none;
outline: none !important;
}
.vector-menu-tabs #ca-unwatch.icon a {
&::before {
background: url("//static.miraheze.org/manoswiki/8/89/FilledStarIcon.png?20240630205120") !important;
background-size: contain !important;
image-rendering: pixelated;
aspect-ratio: 14/14;
width: auto !important;
background-position: center !important;
background-repeat: no-repeat !important;
}
&.loading::before {
animation: none !important;
transition: 0.5s cubic-bezier(0.6, -0.28, 0.74, 0.05);
scale: 0 !important;
}
&:hover::before {
filter: brightness(28) saturate(8.5) hue-rotate(155deg);
}
}
.vector-menu-tabs #ca-watch.icon a {
&::before {
background: url("//static.miraheze.org/manoswiki/3/3b/Nostar.png?20240630224704") !important;
background-size: contain !important;
image-rendering: pixelated;
aspect-ratio: 14/14;
width: auto !important;
background-position: center !important;
background-repeat: no-repeat !important;
}
&.loading::before {
animation: none !important;
transition: 0.5s cubic-bezier(0.6, -0.28, 0.74, 0.05);
scale: 0 !important;
}
&:hover::before {
filter: brightness(28) saturate(8.5) hue-rotate(155deg);
}
}
}
#mw-page-base {
background: transparent;
}
.ns-3000,
.ns-3001 {
background: url(//static.miraheze.org/manoswiki/3/3a/Bg.png);
background-size: contain;
background-repeat: repeat;
font-family: "Minecraft", "Pixel UniCode", sans;
& .vector-menu-tabs,
.vector-menu-tabs a,
#mw-head .vector-menu-dropdown .vector-menu-heading {
background-image: none !important;
& #ca-unwatch.icon a {
&::before {
background: url("//static.miraheze.org/manoswiki/8/89/FilledStarIcon.png?20240630205120") !important;
background-size: contain !important;
image-rendering: pixelated;
aspect-ratio: 14/14;
width: auto !important;
background-position: center !important;
background-repeat: no-repeat !important;
}
&:hover::before {
filter: brightness(10) !important;
}
}
}
& .vector-menu-tabs-legacy li,
#p-cactions {
background: #cdcccc;
margin-right: 2px;
border: none;
& .selected {
background: white !important;
}
& * {
color: black !important;
}
}
#p-navigation,
#p-tb,
#p-managewiki-sidebar-header {
border-image: url(//static.miraheze.org/manoswiki/4/46/Border.png) 25% round;
border-width: 10px;
border-style: solid;
box-sizing: border-box;
background: #7b6039;
display: block;
}
#p-navigation a,
#p-tb a,
#p-managewiki-sidebar-header a {
font-family: "Minecraft", "Pixel UniCode", sans;
color: white;
font-size: 0.7rem;
text-shadow: 2px 2px #000000aa;
}
#p-navigation h3,
#p-tb h3,
#p-managewiki-sidebar-header h3 {
color: white !important;
font-size: 0.8rem;
font-family: "Minecraft", "Pixel UniCode", sans;
text-shadow: -1px -1px 0 #555, 1px -1px 0 #555, -1px 1px 0 #555,
1px 1px 0 #555, 2px 2px #000000aa;
background: none;
border-bottom: 3px solid white;
width: fit-content;
}
#p-personal {
border-image: url(//static.miraheze.org/manoswiki/4/46/Border.png) 25% round;
border-width: 10px;
border-style: solid;
box-sizing: border-box;
background: #7b6039;
display: block;
font-family: "Minecraft", "Pixel UniCode", sans;
}
#p-personal .vector-menu-content-list {
width: 100%;
padding: 0;
display: flex;
flex-wrap: nowrap;
justify-content: space-around;
flex-direction: row;
align-items: stretch;
}
#p-personal .vector-menu-content-list li a {
vertical-align: top;
color: white;
height: 100%;
margin: auto;
padding-top: 0;
}
#p-personal .vector-menu-content-list li {
border-right: 2px solid white;
position: relative;
align-self: stretch;
padding: 0;
padding-bottom: 10px;
padding-top: 10px;
padding-right: 10px;
}
.infobox {
box-sizing: border-box;
display: block;
width: fit-content;
position: relative;
display: inline-block;
float: right;
image-rendering: pixelated;
font-family: "Minecraft", "Pixel UniCode", sans;
color: white;
text-shadow: 2px 2px #000000aa;
border-spacing: 0px;
& tr:first-child {
margin: 0;
table {
font-size: 24px;
border-image: url(//static.miraheze.org/manoswiki/8/8d/Woodborder.png)
25% fill round;
border-width: 25px;
border-style: solid;
font-family: "Minecraft", "Pixel UniCode", sans;
color: white;
text-shadow: -1px -1px 0 #656565, 1px -1px 0 #656565, -1px 1px 0 #656565,
1px 1px 0 #656565, 2px 2px #000000aa;
padding: 0;
width: 100%;
min-width: 275px;
& span:not(.ingredient) img {
background: url(//static.miraheze.org/manoswiki/2/2e/Innerwood.png);
width: 160px;
border-style: solid;
height: 160px;
padding: 10px;
background-size: cover;
border-bottom: 50px;
}
& tr:first-of-type th {
line-height: 0;
margin-bottom: 18px;
margin-top: 2px;
display: block;
}
& tr:not(:first-of-type):not(:last-of-type) th {
margin-bottom: 25px;
display: block;
}
& th:has(.ingredient) {
width: 0;
}
}
}
& > tbody > tr:last-child > th {
display: flex;
justify-content: center;
margin-top: -2px;
font-size: 12px;
table {
border-image: url(//static.miraheze.org/manoswiki/8/8d/Woodborder.png)
25% fill round;
border-width: 25px;
border-style: solid;
border-top: none;
padding-top: 12.5px;
width: 80%;
& th:first-child {
}
}
}
}
& .ItemLink img {
vertical-align: sub;
margin-right: 2px;
image-rendering: pixelated;
}
& div#content {
margin-top: 2.5rem;
border: none;
}
#left-navigation,
#right-navigation {
margin-top: 5rem;
}
input#searchInput {
background: black;
outline: none;
border: 2px solid gray;
color: white;
padding: 5px;
caret-color: transparent;
font-family: "Minecraft", "Pixel UniCode", sans;
}
input#searchButton {
display: none;
}
footer#footer {
border-image: url(//static.miraheze.org/manoswiki/4/46/Border.png) 25% round;
border-width: 10px;
border-style: solid;
box-sizing: border-box;
background: #7b6039;
display: block;
font-family: "Minecraft", "Pixel UniCode", sans;
height: fit-content;
padding: 20px;
padding-bottom: 9vh;
margin-top: 3vh;
}
#footer li {
color: white;
}
#footer a {
color: #f0af64;
}
.pixelicon {
image-rendering: pixelated;
}
.firstHeading {
border: none;
width: fit-content;
border-image: url(//static.miraheze.org/manoswiki/8/8d/Woodborder.png) 8
fill / 16px / 16px;
image-rendering: pixelated;
margin-bottom: 25px;
margin-top: 12.5px;
margin-left: 16px;
display: flex;
position: relative;
& .mw-page-title-main {
font-family: "Minecraft", "Pixel UniCode", sans;
color: white;
font-weight: 900;
text-shadow: -1px -1px 0 #656565, 1px -1px 0 #656565, -1px 1px 0 #656565,
1px 1px 0 #656565, 2px 2px #000000aa;
margin: 0 10px;
}
& .mw-page-title-namespace,
& .mw-page-title-separator {
display: none;
}
& .survival-items {
display: block;
aspect-ratio: 1/1;
width: 0;
position: relative;
transition: 0.2s ease;
&:not(:last-of-type) {
margin-right: 25px;
}
&:last-of-type {
margin-right: 40px;
}
&:hover {
transform: translateY(-10px);
z-index: 10;
}
& img {
position: absolute;
height: calc(100% + 42px);
image-rendering: pixelated;
top: -26px;
left: -16px;
transform: translateX(-30%);
}
}
}
}
.crafting {
background: #c6c6c6;
width: 235px;
height: 127px;
position: relative;
image-rendering: pixelated;
border-top: 2px #dbdbdb solid;
border-left: 2px #dbdbdb solid;
border-right: 2px #8b8b8b solid;
border-bottom: 2px #8b8b8b solid;
}
.crafting td {
background: #8b8b8b;
width: 32px;
height: 32px;
box-shadow: 0px 2px #ffffff, 2px 2px #ffffff, 2px 0px #ffffff,
0px -2px #373737, -2px -2px #373737, -2px 0px #373737;
display: inline-block;
}
.crafting td > a:after {
content: attr(quantity);
position: absolute;
font-family: "Minecraft", "Pixel UniCode", sans;
color: white;
text-shadow: 2px 2px #000000aa;
bottom: -30%;
right: -30%;
font-size: 1.3rem;
}
.crafting td > a {
position: relative;
}
.crafting td > a > img {
width: 32px;
height: 32px;
display: block;
image-rendering: pixelated !important;
}
.crafting tr {
display: block;
margin-bottom: 4px;
margin-left: 6px;
}
.crafting tr:last-child {
display: inline-block;
position: absolute;
top: 37px;
right: 9px;
}
.crafting tr:last-child td {
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
}
.crafting tr:first-child {
margin-top: 5px;
}
.crafting:before {
content: "";
background: url(//static.miraheze.org/manoswiki/thumb/e/ea/Grid_layout_arrow.webp/32px-Grid_layout_arrow.webp.png?20230919160438);
width: 32px;
height: 27px;
display: block;
position: absolute;
left: 130px;
top: 48px;
image-rendering: pixelated;
}
.crafting.shapeless:after {
content: "";
top: 10px;
right: 10px;
position: absolute;
background: url(//static.miraheze.org/manoswiki/1/1e/Grid_layout_Shapeless.webp);
width: 19px;
height: 15px;
image-rendering: pixelated;
}
.smelting {
background: #c6c6c6;
width: 176px;
height: 120px;
position: relative;
image-rendering: pixelated;
border-top: 2px #dbdbdb solid;
border-left: 2px #dbdbdb solid;
border-right: 2px #8b8b8b solid;
border-bottom: 2px #8b8b8b solid;
image-rendering: pixelated;
}
.smelting td {
background: #8b8b8b;
width: 32px;
height: 32px;
box-shadow: 0px 2px #ffffff, 2px 2px #ffffff, 2px 0px #ffffff,
0px -2px #373737, -2px -2px #373737, -2px 0px #373737;
display: inline-block;
padding: 0;
}
.smelting td > a:after {
content: attr(quantity);
position: absolute;
font-family: "Minecraft", "Pixel UniCode", sans;
color: white;
text-shadow: 2px 2px #000000aa;
bottom: -30%;
right: -30%;
font-size: 1.3rem;
}
.smelting tr {
display: block;
position: absolute;
}
.smelting tr:first-child {
top: 8px;
left: 8px;
}
.smelting tr:nth-child(2) {
bottom: 8px;
left: 8px;
}
.smelting tr:last-child {
top: 36px;
right: 8px;
}
.smelting tr:last-child td {
width: 48px;
height: 48px;
}
.smelting:before {
content: "";
background: url(//static.miraheze.org/manoswiki/1/1f/Smelting_arrow.png);
width: 44px;
height: 32px;
display: block;
position: absolute;
left: 56px;
top: 42px;
background-size: cover;
image-rendering: pixelated;
}
.smelting:after {
content: "";
left: 8px;
top: 46px;
position: absolute;
background: url(//static.miraheze.org/manoswiki/e/ea/Smelting_fire.png);
width: 28px;
height: 28px;
background-size: cover;
image-rendering: pixelated;
}
.smelting a {
position: relative;
height: 100%;
width: 100%;
display: block;
}
.smelting tr:last-child a {
top: 8px;
left: 8px;
}
.forging {
background: #c6c6c6;
width: 264px;
height: 162px;
position: relative;
border-top: 2px #dbdbdb solid;
border-left: 2px #dbdbdb solid;
border-right: 2px #8b8b8b solid;
border-bottom: 2px #8b8b8b solid;
image-rendering: pixelated;
padding: 4px;
position: relative;
display: block;
}
.forging tr:not(:last-child) td {
background: #8b8b8b;
width: 32px;
height: 32px;
box-shadow: 0px 2px #ffffff, 2px 2px #ffffff, 2px 0px #ffffff,
0px -2px #373737, -2px -2px #373737, -2px 0px #373737;
display: inline-block;
padding: 0;
}
.forging tr:not(:last-child) td > a:after {
content: attr(quantity);
position: absolute;
font-family: "Minecraft", "Pixel UniCode", sans;
color: white;
text-shadow: 2px 2px #000000aa;
bottom: -30%;
right: -30%;
font-size: 1.3rem;
}
.forging tr {
display: block;
position: absolute;
}
.forging tr:first-child {
top: 82px;
left: 8px;
}
.forging tr:nth-child(2) {
top: 10px;
left: 44px;
}
.forging tr:nth-child(3) {
left: 80px;
top: 82px;
}
.forging tr:nth-child(4) {
top: 82px;
left: 218px;
}
.forging:before {
content: "";
background: url(//static.miraheze.org/manoswiki/3/3a/Forging_arrow.png);
width: 44px;
height: 30px;
display: block;
position: absolute;
left: 148px;
top: 84px;
background-size: cover;
image-rendering: pixelated;
}
.forging:after {
content: "";
left: 48px;
top: 86px;
position: absolute;
background: url(//static.miraheze.org/manoswiki/8/8e/Forging_plus.png);
width: 24px;
height: 24px;
background-size: cover;
image-rendering: pixelated;
}
.forging a {
position: relative;
height: 100%;
width: 100%;
display: block;
}
.forging tr:last-child {
background: url(//static.miraheze.org/manoswiki/5/56/Forging_button.png);
width: 40px;
height: 40px;
background-size: cover;
image-rendering: pixelated;
position: absolute;
left: 148px;
top: 6px;
}
.forging tr:last-child:active {
background: url(//static.miraheze.org/manoswiki/9/9f/Forging_button_disabled.png);
background-size: cover;
}
span.ingredient {
background: #8b8b8b;
width: 32px;
height: 32px;
box-shadow: 0px 2px #ffffff, 2px 2px #ffffff, 2px 0px #ffffff,
0px -2px #373737, -2px -2px #373737, -2px 0px #373737;
display: inline-block;
padding: 0;
}
.tooltip {
position: fixed;
background: #100010;
border: 2px #201042 solid;
min-width: 0;
color: white;
padding: 4px;
font-family: "Minecraft", "Pixel UniCode", sans;
box-shadow: -2px 0px #100010, 2px 0px #100010, 0px -2px #100010,
0px 2px #100010;
z-index: 100;
}
.pixelme {
image-rendering: pixelated;
}