Blockgame Wiki

MediaWiki:Common.css: Difference between revisions

← Older edit
mNo edit summary
No edit summary
 
(12 intermediate revisions by the same user not shown)
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;
}
 
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) */
 
/* Page Layout */
.mw-body-content,
.mw-page-container,
.mw-page-container-inner {
    background: none;
    min-height: 100vh;
}
 
.vector-page-toolbar {
    background: var(--primary-bg-color);
    padding-left: 15px;
    padding-right: 15px;
    border-left: 2px solid #333;
    border-right: 2px solid #333;
}
 
.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;
}
 
/* Padding between footer and body */
@media screen {
  .mw-body {
    padding: 0.5em 0 1.5em;
  }
}
 
/* Header */
.vector-header-container .mw-header,
.vector-header-container .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);
    padding: 6px 3.25em;
}
 
.vector-sticky-header {
    max-width: 93.25em;
}
 
.vector-feature-limited-width-disabled .vector-sticky-header {
    margin-left: 3.25em;
    margin-right: 3.25em;
    width: auto;
}
 
/* Footer */
.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;
    padding-top: 0;
    padding-bottom: 0;
}
 
.skin-vector .mw-footer {
    border-top: none;
}
 
/* Containers */
.vector-pinned-container,
.vector-page-tools-pinned-container.vector-pinned-container {
    background: rgba(255, 255, 240, 0.7);
    border: 2px solid #333;
    border-radius: 5px;
}
 
.vector-sticky-pinned-container::after {
    display: none;
}
 
.vector-feature-page-tools-enabled #vector-main-menu-pinned-container .vector-main-menu {
    margin-left: 0;
    margin-top: 0;
    padding: 6px 14px;
    background: none;
}
 
.vector-pinnable-header{
    margin-top: 0.5rem;
}
 
 
.skin-vector #vector-main-menu-pinned-container .vector-main-menu,
.skin-vector .vector-toc {
    background: none;
    margin-left: 0px;
    margin-top: 0.5rem;
}
 
#vector-page-tools-pinned-container .vector-page-tools::after,
.skin-vector #vector-page-tools-pinned-container .vector-page-tools::after,
.skin-vector #vector-toc-pinned-container .vector-toc::after {
    background: none;
    margin-top: 0.5rem;
}
 
/* "Hide" button */
.vector-pinnable-header-toggle-button {
    border: 0;
    padding: 4px 8px;
    background-color: var(--primary-bg-color);
    color: var(--color-base,#202122);
    cursor: pointer;
    text-align: left;
    font-size: 0.75rem;
    border-radius: 2px;
}
 
/* Article Header */
.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);
}
 
@media screen {
  .vector-page-titlebar::after{
    background-color: transparent !important;   
    }
}
 
 
/* Category Body */
.catlinks {
    background: var(--secondary-bg-color);
    border-top: 1px solid #333;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding-block: 10px;
    padding-inline: 22px;
}
 
/* Miscellaneous */
.firstHeading {
    text-decoration: underline;
    font-weight: bold;
}
 
.vector-limited-width-toggle {
    background: var(--secondary-bg-color);
}
 
.skin-vector .mw-indicators,
.vector-body-before-content {
    display: none;
}
 
.vector-feature-page-tools-enabled.vector-feature-toc-pinned-enabled #mw-panel-toc {
    margin-left: 0;
}
 
/* 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%, #dfe6ed 80%);
    background-color: #dfe6ed;
}
.center-messagebox.default > .center-messagebox-inner > .center-messagebox-inner-right {
    background: linear-gradient(0.25turn, #e6eef5 30%, #e6eef5cc);
    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*/
 
/* Start MISC*/
.disambig {
    margin-bottom: 15px;
    margin-left: auto;
    margin-right: auto;
    border-top: 2px solid #AAA;
    border-bottom: 2px solid #AAA;
}
/* END MISC*/
Retrieved from "https://blockgame.piratesoftware.wiki/wiki/MediaWiki:Common.css"