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.
/* <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;
}
/*Fullscreen Toggle Button*/
.vector-limited-width-toggle {
background: var(--secondary-bg-color);
}
/*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 Messagebox*//* Thank you BluePanda22*/
.center-messagebox {
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-messagebox .center-messagebox-image img {
width: 64px;
height: 64px;
}
.center-messagebox > .center-messagebox-inner {
display: grid;
grid-template-columns: 72px 1fr; /* 64px (image) + 8px (padding) */
align-items: center;
}
.center-messagebox > .center-messagebox-inner > .center-messagebox-inner-left {
grid-column: 1 / 1;
grid-row: 1 / 1;
padding: 4px;
align-self: stretch;
align-content: center;
}
.center-messagebox > .center-messagebox-inner > .center-messagebox-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-messagebox > .center-messagebox-inner > .center-messagebox-inner-right > p {
margin: 0;
}
/* color definitions */
/* default */
.center-messagebox.default > .center-messagebox-inner > .center-messagebox-inner-left {
background: radial-gradient(circle at center, rgba(255,255,255,0.66) 0%, #437ccf 80%);
background-color: #437ccf;
}
.center-messagebox.default > .center-messagebox-inner > .center-messagebox-inner-right {
background: linear-gradient(0.25turn, #6C98D9 30%, #6C98D9cc);
box-shadow: inset 5px 0px 8px 0px rgba(0,0,0,0.33);
}
/* messagebox YELLOW */
.center-messagebox.yellow > .center-messagebox-inner > .center-messagebox-inner-left {
background: radial-gradient(circle at center, rgba(255,255,255,0.66) 0%, #ffda1a 80%);
background-color: #ffda1a;
}
.center-messagebox.yellow > .center-messagebox-inner > .center-messagebox-inner-right {
background: linear-gradient(0.25turn, #ffe24d 30%, #ffe24dcc);
box-shadow: inset 5px 0px 8px 0px rgba(0,0,0,0.33);
}
/* messagebox ORANGE */
.center-messagebox.orange > .center-messagebox-inner > .center-messagebox-inner-left {
background: radial-gradient(circle at center, rgba(255,255,255,0.66) 0%, #e67e22 80%);
background-color: #e67e22;
}
.center-messagebox.orange > .center-messagebox-inner > .center-messagebox-inner-right {
background: linear-gradient(0.25turn, #ea9451 30%, #ea9451cc);
box-shadow: inset 5px 0px 8px 0px rgba(0,0,0,0.33);
}
/* messagebox RED */
.center-messagebox.red > .center-messagebox-inner > .center-messagebox-inner-left {
background: radial-gradient(circle at center, rgba(255,255,255,0.66) 0%, #f32828 80%);
background-color: #f32828;
}
.center-messagebox.red > .center-messagebox-inner > .center-messagebox-inner-right {
background: linear-gradient(0.25turn, #f65858 30%, #f65858cc);
box-shadow: inset 5px 0px 8px 0px rgba(0,0,0,0.33);
}
/* messagebox PINK */
.center-messagebox.pink > .center-messagebox-inner > .center-messagebox-inner-left {
background: radial-gradient(circle at center, rgba(255,255,255,0.66) 0%, #e84393 80%);
background-color: #e84393;
}
.center-messagebox.pink > .center-messagebox-inner > .center-messagebox-inner-right {
background: linear-gradient(0.25turn, #ee6aa7 30%, #ee6aa7cc);
box-shadow: inset 5px 0px 8px 0px rgba(0,0,0,0.33);
}
/* messagebox BLUE */
.center-messagebox.blue > .center-messagebox-inner > .center-messagebox-inner-left {
background: radial-gradient(circle at center, rgba(255,255,255,0.66) 0%, #437ccf 80%);
background-color: #437ccf;
}
.center-messagebox.blue > .center-messagebox-inner > .center-messagebox-inner-right {
background: linear-gradient(0.25turn, #6C98D9 30%, #6C98D9cc);
box-shadow: inset 5px 0px 8px 0px rgba(0,0,0,0.33);
}
/* messagebox GREEN */
.center-messagebox.green > .center-messagebox-inner > .center-messagebox-inner-left {
background: radial-gradient(circle at center, rgba(255,255,255,0.66) 0%, #04891d 80%);
background-color: #04891d;
}
.center-messagebox.green > .center-messagebox-inner > .center-messagebox-inner-right {
background: linear-gradient(0.25turn, #06ba27 30%, #06ba27cc);
box-shadow: inset 5px 0px 8px 0px rgba(0,0,0,0.33);
}
/* messagebox PURPLE */
.center-messagebox.purple > .center-messagebox-inner > .center-messagebox-inner-left {
background: radial-gradient(circle at center, rgba(255,255,255,0.66) 0%, #9b59b6 80%);
background-color: #9b59b6;
}
.center-messagebox.purple > .center-messagebox-inner > .center-messagebox-inner-right {
background: linear-gradient(0.25turn, #af7cc2 30%, #af7cc2cc);
box-shadow: inset 5px 0px 8px 0px rgba(0,0,0,0.33);
}
/* messagebox GRAY */
.center-messagebox.gray > .center-messagebox-inner > .center-messagebox-inner-left {
background: radial-gradient(circle at center, rgba(255,255,255,0.66) 0%, #343a40 80%);
background-color: #343a40;
}
.center-messagebox.gray > .center-messagebox-inner > .center-messagebox-inner-right {
background: linear-gradient(0.25turn, #6c757d 30%, #6c757dcc);
box-shadow: inset 5px 0px 8px 0px rgba(0,0,0,0.33);
}
/* END Messagebox*/
/* Notice box for MediaWiki:Sitenotice */
.sitenotice-box {
display: block;
max-width: 800px;
margin: 20px auto;
padding: 15px;
background-color: rgb(240, 240, 240, 0.7);
color: #333;
text-align: center;
font-size: 16px;
border-top: 2px solid grey;
border-bottom: 3px solid grey;
border-radius: 5px;
border-radius: 5px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
/* START Template:Blank Cell*/
th .blankCell,
td .blankCell {
display: flex;
cursor: not-allowed;
text-align: center;
}
th .blankCell:after,
td .blankCell:after {
content: "∅";
flex: 1;
align-self: center;
}
/* END Template:Blank Cell*/