MediaWiki:Common.css

/* <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;
}

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*/
.skin-vector .mw-page-container { 
    background: none;
    background-color: none;
    min-height: 100vh;
}

/* makes the inner container span the whole screen height */
.skin-vector .mw-page-container .mw-page-container-inner {
    min-height: 100vh;
}

.skin-vector .mw-header, .vector-sticky-header {
    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);
}

/* same padding as the sticky header */
.skin-vector .mw-header {
    padding: 6px 3.25em;
}

/* same width as the non sticky header (mw-page-container min-width minus its padding */
.vector-sticky-header {
    max-width: 93.25em;
}
/* same as above but for full width mode */
.vector-feature-limited-width-disabled .vector-sticky-header {
    margin-left: 3.25em;
    margin-right: 3.25em;
    width: auto;
}

/* removes the left margin of the Table of Contents box */
.vector-feature-page-tools-enabled.vector-feature-toc-pinned-enabled #mw-panel-toc {
    margin-left: 0;
}

#vector-page-tools-pinned-container .vector-page-tools::after {
    background: none;
}

/*Container left Side*/
.vector-feature-page-tools-enabled #vector-main-menu-pinned-container .vector-main-menu {
    margin-left: 0;
    margin-top: 0;
    padding: 6px 14px;
    background-color: none;
}

/*Container Right Side*/
.vector-page-tools-pinned-container.vector-pinned-container {
    background: rgb(255, 255, 240, 0.7);
    border: 2px solid #333;
    border-radius: 5px;   
}

/*Tools Container*/
.vector-pinned-container {
    background: rgb(255, 255, 240, 0.7);
    border: 2px solid #333;
    border-radius: 5px;    
}

.skin-vector #vector-main-menu-pinned-container .vector-main-menu {
    background: none;
    margin-left: 0px;    
}

.skin-vector #vector-page-tools-pinned-container .vector-page-tools::after {
    background: none;
}

.skin-vector .vector-toc {
    background: none;
}

.skin-vector #vector-toc-pinned-container .vector-toc::after {
    background: none;   
}

.skin-vector .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;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: auto;
}

.skin-vector .mw-footer {
    border-top: none;
}

.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);     
}

/*Title*/
.firstHeading {
    text-decoration: underline;
    font-weight: bold;    
}

/* Article Body */
.skin-vector .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;
}

.skin-vector .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-4 {
    columns: 4 auto;
}

.article-columns-2 ul,
.article-columns-3 ul,
.article-columns-4 ul,
.article-columns-1 ol,
.article-columns-2 ol,
.article-columns-3 ol {
    margin-top: 0;
    margin-bottom: 0;
}
.article-columns-4 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*/