|
|
| Line 1: |
Line 1: |
| /* <pre> */ | | /* CSS placed here will be applied to all skins */ |
| /**
| |
| * 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/2/2f/Blockgame_Wiki_Background_2.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*/
| |
