4,802
edits
mNo edit summary |
No edit summary Tag: Reverted |
||
Line 1: | Line 1: | ||
/* CSS placed here will be applied to all skins */ | /* <pre> */ | ||
/** | |||
* CSS placed here will be applied to all skins on the entire site. | |||
*/ | |||
:root { | |||
--primary-bg-color: rgb(255, 255, 240, 0.8); | |||
--secondary-bg-color: #deded3f3; | |||
--primary-border-color: #333; | |||
--border-radius-small: 5px; | |||
--border-radius-large: 25px; | |||
--padding-small: 5px; | |||
--padding-medium: 15px; | |||
--font-family-main: Minecraft, sans-serif; | |||
} | |||
body { | |||
background-image: url("https://blockgame.piratesoftware.wiki/w/images/blockgame/0/0d/Tutorial_Main_Building.png"); | |||
background-repeat: repeat; | |||
background-attachment: fixed; | |||
background-position: center; | |||
background-size: cover; | |||
} | |||
/*START - Skin changes (Vector 2022) */ | |||
/*Removes White Bars*/ | |||
.vector-feature-zebra-design-disabled .mw-page-container { | |||
background: none; | |||
min-height: 100vh; | |||
} | |||
.vector-feature-zebra-design-disabled .vector-header-container { | |||
background: var(--secondary-bg-color); | |||
border: 2px solid var(--primary-border-color); | |||
border-bottom-left-radius: var(--border-radius-large); | |||
border-bottom-right-radius: var(--border-radius-large); | |||
} | |||
.vector-pinned-container { | |||
background: rgb(255, 255, 240, 0.7); | |||
border: 2px solid #333; | |||
border-radius: 5px; | |||
} | |||
.vector-feature-zebra-design-disabled #vector-main-menu-pinned-container .vector-main-menu { | |||
background: none; | |||
margin-left: 0px; | |||
} | |||
.vector-feature-zebra-design-disabled #vector-page-tools-pinned-container .vector-page-tools::after { | |||
background: none; | |||
} | |||
.vector-feature-zebra-design-disabled .vector-toc { | |||
background: none; | |||
} | |||
.vector-feature-zebra-design-disabled #vector-toc-pinned-container .vector-toc::after { | |||
background: none; | |||
} | |||
.vector-feature-zebra-design-disabled .mw-footer-container { | |||
background: var(--secondary-bg-color); | |||
border: 2px solid #333; | |||
border-top-left-radius: 25px; | |||
border-top-right-radius: 25px; | |||
padding-left: 15px; | |||
padding-right: 15px; | |||
margin-top: auto; | |||
} | |||
.vector-page-toolbar { | |||
background: var(--primary-bg-color); | |||
padding-left: 15px; | |||
padding-right: 15px; | |||
border: 0; | |||
border-top: 0; | |||
border-left: 2px solid #333; | |||
border-right: 2px solid #333; | |||
} | |||
/*Articles | Sites */ | |||
.mw-body-header { | |||
background: var(--primary-bg-color); | |||
border-radius: 8px 8px 2px 2px; | |||
padding-left: var(--padding-medium); | |||
padding-right: var(--padding-medium); | |||
padding-block: 12px; | |||
border-left: 2px solid var(--primary-border-color); | |||
border-right: 2px solid var(--primary-border-color); | |||
} | |||
.mw-page-title-main { | |||
text-decoration: underline; | |||
font-weight: bold; | |||
} | |||
/* Article Body */ | |||
.vector-feature-zebra-design-disabled .mw-body #bodyContent { | |||
background: var(--primary-bg-color); | |||
border: 2px solid #333; | |||
border-top: 0; | |||
border-radius: 2px 2px 8px 8px; | |||
padding-left: 15px; | |||
padding-right: 15px; | |||
padding-bottom: 75px; | |||
min-height: 55vh; | |||
position: relative; | |||
overflow: hidden; | |||
} | |||
/* Category Body */ | |||
.catlinks { | |||
background: var(--secondary-bg-color); | |||
border: 0; | |||
border-top: 1px solid #333; | |||
border-bottom-width: 0; | |||
position: absolute; | |||
bottom: 0; | |||
left: 0; | |||
right: 0; | |||
padding-block: 10px; | |||
padding-inline: 22px; | |||
} | |||
.vector-page-titlebar { | |||
box-shadow: none; | |||
} | |||
.vector-feature-zebra-design-disabled .mw-indicators { | |||
display: none; | |||
} | |||
.vector-body-before-content { | |||
display: none; | |||
} | |||
/*END - Skin changes (Vector 2022) */ | |||
/* START Mainpage Format */ | |||
.mainpage-leftcolumn { | |||
float: left; | |||
width: 70%; | |||
} | |||
.mainpage-rightcolumn { | |||
float: right; | |||
width: 30%; | |||
margin-top: 10px; | |||
} | |||
.mainpage-box-header { | |||
background: var(--primary-bg-color); | |||
border: 2px solid var(--primary-border-color); | |||
border-radius: var(--border-radius-small); | |||
padding: var(--padding-small); | |||
} | |||
.mainpage-box-footer { | |||
background: var(--primary-bg-color); | |||
border: 2px solid #333; | |||
border-bottom-width: 0; | |||
border-radius: 5px; | |||
border-bottom-left-radius: 0px; | |||
border-bottom-right-radius: 0px; | |||
padding: 5px 5px 5px 5px; | |||
position: absolute; | |||
bottom: 0; | |||
left: 15px; | |||
right: 15px; | |||
} | |||
.mainpage-box-left { | |||
background: var(--primary-bg-color); | |||
border: 2px solid #333; | |||
border-radius: 5px; | |||
padding: 5px; | |||
width: 95%; | |||
float: left; | |||
margin-top: 10px; | |||
} | |||
.mainpage-box-right { | |||
background: var(--primary-bg-color); | |||
border: 2px solid #333; | |||
border-radius: 5px; | |||
padding: 5px 10px 10px 10px; | |||
width: 85%; | |||
float: right; | |||
margin-bottom: 10px; | |||
} | |||
.mainpage-mainheader { | |||
background: linear-gradient(0deg, transparent 5%, #DEDEDE 100%); | |||
border-top: 2px solid grey; | |||
border-bottom: 3px solid grey; | |||
border-radius: 5px; | |||
margin: auto; | |||
white-space: normal; | |||
display: flex; | |||
justify-content: center; | |||
text-align: center; | |||
font-size: 150%; | |||
width: 95%; | |||
padding: 5px 5px 5px 5px; | |||
} | |||
.mainpage-subheader { | |||
background: linear-gradient(0deg, transparent 5%, #DEDEDE 100%); | |||
border-top: 2px solid grey; | |||
border-bottom: 3px solid grey; | |||
border-radius: 5px; | |||
margin: auto; | |||
white-space: normal; | |||
display: flex; | |||
justify-content: center; | |||
text-align: center; | |||
font-size: 150%; | |||
width: 70%; | |||
padding: 5px 5px 5px 5px; | |||
} | |||
.mainpage-inline-text-seperator { | |||
background: transparent; | |||
border-top: 2px solid grey; | |||
border-bottom: 3px solid grey; | |||
border-radius: 5px; | |||
padding: 1px; | |||
margin: auto; | |||
margin-top: 2px; | |||
margin-bottom: 2px; | |||
max-width: 85%; | |||
text-align: center; | |||
} | |||
.mainpage-mainheader + .mainpage-inline-text-seperator { | |||
border-top: 0; | |||
} | |||
.mainpage-inline-text-seperator + .mainpage-inline-text-seperator { | |||
border-top: 0; | |||
} | |||
.mainpage-btn { | |||
display:inline-block; | |||
text-align: center; | |||
font-weight: bold; | |||
cursor: pointer; | |||
border-radius: 5px; | |||
border-top: 0.5px solid grey; | |||
border-left: 0.5px solid grey; | |||
border-right: 0.5px solid grey; | |||
border-bottom: 1px solid grey; | |||
background: linear-gradient(0deg, transparent 5%, #DEDEDE 100%); | |||
padding: 5px; | |||
margin: 5px; | |||
max-width: 75%; | |||
transition-duration: .2s; | |||
} | |||
.mainpage-btn:hover{ | |||
transform: scale(0.98); | |||
box-shadow: inset 0 0 5px darkgray; | |||
} | |||
/* START Mainpage Gallery */ | |||
/* kinda douple like ul.gallery.gallery.gallery, it's needed, without it, it breaks ¯\_(ツ)_/¯ */ | |||
.mainpage-gallery .mw-gallery-traditional { | |||
position: relative; | |||
display: flex; | |||
flex-wrap: wrap; | |||
flex-direction: row; | |||
justify-content: center; | |||
} | |||
/* whole gallery */ | |||
.mainpage-gallery ul.gallery.gallery.gallery { | |||
position: relative; | |||
padding: 5px; | |||
display: flex; | |||
flex-wrap: wrap; | |||
flex-direction: row; | |||
justify-content: center; | |||
gap: 10px; | |||
} | |||
/* */ | |||
.mainpage-gallery ul.gallery.gallery.gallery:first-child { | |||
padding-top: 15px; | |||
} | |||
/* Widens the first element in the gallery */ | |||
.mainpage-gallery .gallerybox:only-child { | |||
max-width: 400px; | |||
justify-content: center; | |||
} | |||
/* aligns the text in the first element of the gallery center */ | |||
.mainpage-gallery .gallerybox:only-child .gallerytext { | |||
text-align: center; | |||
} | |||
/* whole gallery item */ | |||
.mainpage-gallery .gallerybox { | |||
justify-content: space-evenly; | |||
display: inline-flex; | |||
flex-direction: row; | |||
flex: 1; | |||
flex-basis: 175px; | |||
max-width: fit-content; | |||
padding: 3px; | |||
border-radius: 5px; | |||
border-top: 0.5px solid grey; | |||
border-left: 0.5px solid grey; | |||
border-right: 0.5px solid grey; | |||
border-bottom: 1px solid grey; | |||
background: linear-gradient(0deg, transparent 5%, #DEDEDE 100%); | |||
transition: 0.2s; | |||
} | |||
/* Image of the Gallery Item */ | |||
.mainpage-gallery .gallerybox .thumb { | |||
min-width: 80px; | |||
max-width: 150px; | |||
min-height: 80px; | |||
max-height: 100px; | |||
display: flex; | |||
align-items: center; | |||
border-width: 0px; | |||
background-color: transparent; | |||
} | |||
/* Text of the Gallery */ | |||
.mainpage-gallery .gallerybox .gallerytext { | |||
width: inherit !important; | |||
margin: 0; | |||
align-self: center; | |||
text-align: right; | |||
padding: 0; | |||
margin-right: 12px; | |||
} | |||
/* Text font eg */ | |||
.mainpage-gallery .gallerybox a { | |||
font-size: 14px; | |||
color: #333; | |||
word-wrap: overflow-wrap; | |||
font-weight: 600; | |||
} | |||
/* Gallery: Hover animation */ | |||
.mainpage-gallery .gallerybox:hover, | |||
.mainpage-gallery .gallerybox:focus { | |||
transform: scale(0.98); | |||
box-shadow: inset 0 0 5px darkgray; | |||
} | |||
/* END Mainpage Gallery */ | |||
/* END Mainpage Format */ | |||
/* START Quote */ | |||
.quote { | |||
background-color: rgb(240, 240, 240, 0.7); | |||
border-top: 2px solid grey; | |||
border-bottom: 3px solid grey; | |||
border-radius: 5px; | |||
margin: auto; | |||
white-space: normal; | |||
display: flex; | |||
justify-content: center; | |||
padding: 2px; | |||
padding-top: 5px; | |||
max-width: 65vh; | |||
} | |||
.quote .quote-quote { | |||
padding: 3px; | |||
font-style: italic; | |||
margin: auto; | |||
} | |||
.quote .quote-mark { | |||
width: 20px; | |||
font-size: 30px; | |||
font-weight: bold; | |||
padding: 0 3px; | |||
vertical-align: top; | |||
color: #9B0000; | |||
text-shadow: -1px -1px 0 #E5C100, 1px -1px 0 #E5C100, -1px 1px 0 #E5C100, 1px 1px 0 #E5C100; | |||
} | |||
.quote .quote-mark.mark-left { | |||
text-align: center; | |||
} | |||
.quote .quote-mark.mark-right { | |||
text-align: right; | |||
} | |||
/* Citation at end */ | |||
.quote .quote-cite { | |||
padding-top:1px; | |||
} | |||
.quote .quote-cite p { | |||
font-size: smaller; | |||
text-align: right; | |||
} | |||
/* END Quote */ | |||
/* START Article collums */ | |||
.article-columns-1 { | |||
columns: 1 auto; | |||
} | |||
.article-columns-2 { | |||
columns: 2 auto; | |||
} | |||
.article-columns-3 { | |||
columns: 3 auto; | |||
} | |||
.article-columns-2 ul, | |||
.article-columns-3 ul, | |||
.article-columns-1 ol, | |||
.article-columns-2 ol, | |||
.article-columns-3 ol { | |||
margin-top: 0; | |||
margin-bottom: 0; | |||
} | |||
.list-item { | |||
list-style-type: none; | |||
} | |||
/* END Article collums */ | |||
/* START Wiki Tables */ | |||
.wiki-table { | |||
background: rgb(255, 255, 240, 0.5); | |||
} | |||
/* END Wiki Tables */ | |||
/* START InfoBox*//* Thank you BluePanda22*/ | |||
.center-infobox { | |||
border: 2px solid #363534; | |||
border-radius: 8px; | |||
max-width: 600px; | |||
margin: auto; | |||
overflow: hidden; | |||
} | |||
/* always set the size to 64x64. This is done because of some gifs not animating. */ | |||
.center-infobox .center-infobox-image img { | |||
width: 64px; | |||
height: 64px; | |||
} | |||
.center-infobox > .center-infobox-inner { | |||
display: grid; | |||
grid-template-columns: 72px 1fr; /* 64px (image) + 8px (padding) */ | |||
align-items: center; | |||
} | |||
.center-infobox > .center-infobox-inner > .center-infobox-inner-left { | |||
grid-column: 1 / 1; | |||
grid-row: 1 / 1; | |||
padding: 4px; | |||
align-self: stretch; | |||
align-content: center; | |||
} | |||
.center-infobox > .center-infobox-inner > .center-infobox-inner-right { | |||
grid-column: 2 / 2; | |||
grid-row: 1 / 1; | |||
padding: 4px 4px 4px 10px; | |||
align-self: stretch; | |||
align-content: center; | |||
} | |||
/* the paragraph has some weird margin, so we remove it */ | |||
.center-infobox > .center-infobox-inner > .center-infobox-inner-right > p { | |||
margin: 0; | |||
} | |||
/* color definitions */ | |||
/* default */ | |||
.center-infobox.default > .center-infobox-inner > .center-infobox-inner-left { | |||
background: radial-gradient(circle at center, rgba(255,255,255,0.66) 0%, #437ccf 80%); | |||
background-color: #437ccf; | |||
} | |||
.center-infobox.default > .center-infobox-inner > .center-infobox-inner-right { | |||
background: linear-gradient(0.25turn, #6C98D9 30%, #6C98D9cc); | |||
box-shadow: inset 5px 0px 8px 0px rgba(0,0,0,0.33); | |||
} | |||
/* InfoBox RED */ | |||
.center-infobox.red > .center-infobox-inner > .center-infobox-inner-left { | |||
background: radial-gradient(circle at center, rgba(255,255,255,0.66) 0%, #f32828 80%); | |||
background-color: #f32828; | |||
} | |||
.center-infobox.red > .center-infobox-inner > .center-infobox-inner-right { | |||
background: linear-gradient(0.25turn, #f65858 30%, #f65858cc); | |||
box-shadow: inset 5px 0px 8px 0px rgba(0,0,0,0.33); | |||
} | |||
/* InfoBox YELLOW */ | |||
.center-infobox.yellow > .center-infobox-inner > .center-infobox-inner-left { | |||
background: radial-gradient(circle at center, rgba(255,255,255,0.66) 0%, #ffda1a 80%); | |||
background-color: #ffda1a; | |||
} | |||
.center-infobox.yellow > .center-infobox-inner > .center-infobox-inner-right { | |||
background: linear-gradient(0.25turn, #ffe24d 30%, #ffe24dcc); | |||
box-shadow: inset 5px 0px 8px 0px rgba(0,0,0,0.33); | |||
} | |||
/* InfoBox BLUE */ | |||
.center-infobox.blue > .center-infobox-inner > .center-infobox-inner-left { | |||
background: radial-gradient(circle at center, rgba(255,255,255,0.66) 0%, #437ccf 80%); | |||
background-color: #437ccf; | |||
} | |||
.center-infobox.blue > .center-infobox-inner > .center-infobox-inner-right { | |||
background: linear-gradient(0.25turn, #6C98D9 30%, #6C98D9cc); | |||
box-shadow: inset 5px 0px 8px 0px rgba(0,0,0,0.33); | |||
} | |||
/* InfoBox GREEN */ | |||
.center-infobox.green > .center-infobox-inner > .center-infobox-inner-left { | |||
background: radial-gradient(circle at center, rgba(255,255,255,0.66) 0%, #04891d 80%); | |||
background-color: #04891d; | |||
} | |||
.center-infobox.green > .center-infobox-inner > .center-infobox-inner-right { | |||
background: linear-gradient(0.25turn, #06ba27 30%, #06ba27cc); | |||
box-shadow: inset 5px 0px 8px 0px rgba(0,0,0,0.33); | |||
} | |||
/* END InfoBox*/ |