MediaWiki:Common.css: Difference between revisions

m
oops
imported>Ttv pedro270707
mNo edit summary
imported>Ttv pedro270707
m (oops)
 
(222 intermediate revisions by 2 users not shown)
Line 1: Line 1:
html {
--table-header-background: #eaecf0;
--table-border: #a2a9b1;
--table-background-color: #f8f9fa;
--code-background-color: #f8f9fa;
--code-border: #eaecf0;
--default-text-color: #000000;
--infobox-out-background: #c6c6c6;
--tooltip-background: rgba(0,0,0,0.7529411765);
}
html.client-darkmode {
--table-header-background: #444444;
--table-background-color: #222226;
--code-background-color: #000011;
--code-border: #222222;
--default-text-color: #dddddd;
--infobox-out-background: #222226;
}
@font-face {
@font-face {
font-family: 'Minecraft';
font-family: 'Minecraft';
Line 17: Line 37:
}
}


body, #mw-page-base, html {
.vector-menu-portal .vector-menu-content li a:visited {
background-image: linear-gradient(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.75)), url(https://static.miraheze.org/btawiki/f/fc/Cherry_Log_Side_Texture_1.7.6_21w34a.png) !important;
color: #69bad9;
}
 
.vector-menu-portal .vector-menu-content li a {
color: #aa69cf;
}
 
.nowrap {
white-space: nowrap;
}
 
.no-external-icon a.external {
background-image: none !important;
padding-right: 0 !important;
}
 
/* Collapsible table button restyle */
.mw-collapsible-toggle {
margin-left: 0.8em;
}
 
.mw-collapsible-text::before {
content: "hide";
display: inline;
font-size: 14px;
}
 
.mw-collapsible-toggle-collapsed .mw-collapsible-text::before {
content: 'show';
}
}


.client-darkmode #p-logo a {
.mw-collapsible-text {
filter: invert(1) hue-rotate(180deg);
font-size: 0;
}
}


.main-page-logo {
/* Module:Sprite p.doc() */
.spritedoc-ul {
list-style-type: none;
display: flex;
align-items: stretch;
flex-wrap: wrap;
margin: 0 !important;
padding: 0 !important;
}
 
.spritedoc-cell {
display: flex;
align-items: center;
border: 1px solid var(--table-border);
background-color: var(--table-background-color);
padding: 5px;
width: 14em;
margin: 0 0 -1px -1px;
}
 
.spritedoc-image {
margin-right: 5px;
}
 
.spritedoc-names {
margin: 0 !important;
}
 
.spritedoc-name {
display: block;
}
 
/* Adds "BTA WIKI" overlay on wiki icon */
/*.mw-wiki-logo::before {
    content: '';
    width: 160px;
    height: 160px;
    background-image: url(https://static.miraheze.org/btawiki/c/c6/BTA_wiki_icon_overlay.png);
    background-position: center center;
    background-repeat: no-repeat;
     display: inline-block;
     display: inline-block;
     height: 110px;
     position: absolute;
     width: 548px;
     image-rendering: pixelated;
}*/
 
#mw-page-base {
background-color: #c0d8ff;
background-image: url(https://static.miraheze.org/btawiki/6/6d/Wiki-bg-top.png);
background-repeat: repeat-x;
background-size: 512px;
background-position: bottom left;
}
}


.main-page-logo:hover .bta-logo {
.client-darkmode #mw-page-base {
    display: none;
background-image: url(https://static.miraheze.org/btawiki/d/d0/Wiki-bg-top-dark-mode.png);
}
}


.minecraft-retro-logo {
body, html {
    display: none;
background-image: url(https://static.miraheze.org/btawiki/b/b9/Wiki-bg-bottom.png);
background-size: 32px !important;
background-position: top left !important;
}
}


.main-page-logo:hover .minecraft-retro-logo {
.client-darkmode, .client-darkmode img, .client-darkmode video, .client-darkmode svg, .client-darkmode iframe, .client-darkmode .mw-no-invert, .client-darkmode td .diffchange, .client-darkmode .wvui-typeahead-suggestion__thumbnail, .client-darkmode .skin-minerva .mw-notification-visible .mw-notification-content, .client-darkmode .cdx-menu-item__thumbnail, .client-darkmode .cx-slitem__image, .client-darkmode .mwe-math-element, .client-darkmode .mw-mmv-overlay, .client-darkmode .mw-mmv-pre-image, .client-darkmode .mw-kartographer-map, .client-darkmode .mw-kartographer-mapDialog-map, .client-darkmode .ext-related-articles-card-list .ext-related-articles-card-thumb {
     display: inline;
filter: none;
}
 
.client-darkmode body, .client-darkmode html, html.client-darkmode, body.client-darkmode {
background-image: url(https://static.miraheze.org/btawiki/0/00/Wiki-bg-bottom-dark-mode.png) !important;
}
 
.client-darkmode #content, .client-darkmode #content h1, .client-darkmode #content h2, .client-darkmode #content h3, .client-darkmode #content h4, .client-darkmode #content h5, .client-darkmode #content h6 {
    background-color: #111116;
    color: var(--default-text-color);
}
 
.client-darkmode #content #mw-toc-heading {
    background: none;
}
 
.client-darkmode .documentation, .client-darkmode .documentation h2 {
    color: #000;
}
 
.client-darkmode .documentation h2 {
    color: #000 !important;
    background-color: transparent !important;
}
 
.catlinks {
    background-color: var(--table-background-color);
}
 
/* ignore the errors, this code is perfectly valid and compatible with most modern browsers */
pre:not(.documentation pre), code:not(.documentation code), .mw-code:not(.documentation .mw-code), table code {
    background-color: var(--code-background-color);
    color: var(--default-text-color);
    border: 1px solid var(--code-border);
}
 
table, table.ambox-content, table.toccolours, .mw-notification, .mwe-popups, .infobox, .toc, .thumbinner, .wikitable, .cbnnr-main, .cx-callout, #simpleSearch, #searchInput, #centralNotice .cnotice {
background-color: var(--table-background-color) !important;
}
 
.client-darkmode #searchInput, .client-darkmode .wikitable, .client-darkmode .mw-footer li {
color: #ddd;
}
 
.wikitable > tr > th, .wikitable > * > tr > th {
    background-color: var(--table-header-background);
    border: 1px solid var(--table-border);
}
 
.client-darkmode .wikitable {
color: #ddd;
}
 
.client-darkmode .tocnumber {
     color: #aaa;
}
}


Line 59: Line 210:
width: 100% !important;
width: 100% !important;
height: 100% !important;
height: 100% !important;
}
/* Inventories (currently only Template:Crafting) */
.crafting-table-ui {
padding: 6px;
border-image-slice: 3 3 3 3;
    border-image-width: 6px 6px 6px 6px;
    border-image-outset: 0 0 0 0;
    border-image-repeat: stretch stretch;
    border-image-source: url(https://static.miraheze.org/btawiki/0/00/BTA_Border.png);
    border-style: solid;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    background-color: #c6c6c6;
    display: inline-flex;
    align-items: center;
    position: relative;
}
/* Infoboxes */
.infobox {
padding: 8px;
    min-width: 200px;
    max-width: 300px;
    text-align: center;
    box-sizing: border-box;
}
.infobox p {
margin: 0 !important;
}
.infobox.out {
border-image-slice: 3 3 3 3;
border-image-width: 6px 6px 6px 6px;
border-image-outset: 0 0 0 0;
border-image-repeat: stretch stretch;
border-image-source: url("https://static.miraheze.org/btawiki/0/00/BTA_Border.png");
border-style: solid;
image-rendering: pixelated;
image-rendering: crisp-edges;
background-color: var(--infobox-out-background) !important;
}
.client-darkmode .infobox.out {
border-image-source: url("https://static.miraheze.org/btawiki/a/a6/BTA_Border-dark-mode.png");
}
.infobox.in {
border-left: 2px solid black;
border-right: 2px solid black;
background-color: #555555 !important;
}
.infobox-table {
    margin-top: 6px;
    width: 100%;
    text-align: left;
    background-color: transparent !important;
}
.infobox-table td, .infobox-table th {
    padding-left: 6px;
    padding-right: 6px;
}
/* Inventory slot ({{Inventory slot}} template) */
.inventory-slot {
position: relative;
border-top: 2px solid #373737;
border-left: 2px solid #373737;
border-right: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
background-color: #8b8b8b;
display: inline-flex;
    align-items: center;
    justify-content: center;
}
.inventory-slot::before, .inventory-slot::after {
content: '';
position: absolute;
width: 2px;
height: 2px;
background-color: #8b8b8b;
}
.inventory-slot::before {
bottom: -2px;
left: -2px;
}
.inventory-slot::after {
top: -2px;
right: -2px;
}
}


Line 68: Line 314:
   color: #ffff00;
   color: #ffff00;
   text-shadow: 0.125em 0.125em 0 #7f7f00;
   text-shadow: 0.125em 0.125em 0 #7f7f00;
   position: relative;
   position: absolute;
   display: inline-block;
   display: inline-block;
   transform-origin: center center;
   transform-origin: center center;
   left: 50px;
   left: 100%;
   top: 20px;
   top: 100%;
   animation: splash 0.5s linear infinite;
   animation: splash 0.5s linear infinite !important;
    
   white-space: nowrap;
  --animation-scale: 1.1;
}
 
/* Avoid Discord splash receiving link styling */
.splash-text a.external {
    background-image: none !important;
    padding-right: 0;
    color: #ffff00;
}
}


/* Message boxes */
/* Message boxes */
.msgbox {
.msgbox {
width: 80%;
width: 70%;
padding: 5px;
padding: 5px;
box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
display: inline-flex;
align-items: center;
gap: 10px;
}
}


Line 113: Line 367:
}
}


.empty-line {
.minecraft-tip br + br {
  display: block;
display: grid;
  content: "";
content: "";
  margin-top: 1.625em;
margin-top: 1.5em;
}
}


.break {
.minecraft-tip br:not(.minecraft-tip br + br) {
  display: block;
display: block;
  content: "";
content: "";
  margin-top: 0.25em;
margin-top: 0.25em;
}
}


.shadow-line .c-0 {
.shadow-line .c-0 {
   color: #000000;
   color: #3f3f3f;
}
}


.shadow-line .c-1 {
.shadow-line .c-1 {
   color: #00002a;
   color: #3f2a00;
}
}


.shadow-line .c-2 {
.shadow-line .c-2 {
   color: #002a00;
   color: #3f0928;
}
}


.shadow-line .c-3 {
.shadow-line .c-3 {
   color: #002a2a;
   color: #17343f;
}
}


.shadow-line .c-4 {
.shadow-line .c-4 {
   color: #2a0000;
   color: #3f3c14;
}
}


.shadow-line .c-5 {
.shadow-line .c-5 {
   color: #2a002a;
   color: #193a04;
}
}


.shadow-line .c-6 {
.shadow-line .c-6 {
   color: #2a2a00;
   color: #3f1f3b;
}
}


Line 158: Line 412:


.shadow-line .c-7 {
.shadow-line .c-7 {
   color: #2a2a2a;
   color: #1b1b1b;
}
}


.shadow-line .c-8 {
.shadow-line .c-8 {
   color: #151515;
   color: #2c2c2c;
}
}


.shadow-line .c-9 {
.shadow-line .c-9 {
   color: #15153f;
   color: #02282b;
}
}


.shadow-line .c-a {
.shadow-line .c-a {
   color: #153f15;
   color: #1e093f;
}
}


.shadow-line .c-b {
.shadow-line .c-b {
   color: #153f3f;
   color: #03133f;
}
}


.shadow-line .c-c {
.shadow-line .c-c {
   color: #3f1515;
   color: #231409;
}
}


.shadow-line .c-d {
.shadow-line .c-d {
   color: #3f153f;
   color: #092005;
}
}


.shadow-line .c-e {
.shadow-line .c-e {
   color: #3f3f15;
   color: #3a0808;
}
}


.shadow-line .c-f {
.shadow-line .c-f {
   color: #3f3f3f;
   color: #0c0c0c;
}
}


Line 206: Line 460:


.c-0 {
.c-0 {
   color: #000000;
   color: #ffffff;
}
}


.c-1 {
.c-1 {
   color: #0000aa;
   color: #ffaa00;
}
}


.c-2 {
.c-2 {
   color: #00aa00;
   color: #fc26a3;
}
}


.c-3 {
.c-3 {
   color: #00aaaa;
   color: #5ed2ff;
}
}


.c-4 {
.c-4 {
   color: #aa0000;
   color: #fff152;
}
}


.c-5 {
.c-5 {
   color: #aa00aa;
   color: #65ea13;
}
}


.c-6 {
.c-6 {
   color: #ffaa00;
   color: #ff7fec;
}
}


Line 238: Line 492:


.c-7 {
.c-7 {
   color: #aaaaaa;
   color: #6e6e6e;
}
}


.c-8 {
.c-8 {
   color: #555555;
   color: #b3b3b3;
}
}


.c-9 {
.c-9 {
   color: #5555ff;
   color: #09a0ae;
}
}


.c-a {
.c-a {
   color: #55ff55;
   color: #7824ff;
}
}


.c-b {
.c-b {
   color: #55ffff;
   color: #0d4dff;
}
}


.c-c {
.c-c {
   color: #ff5555;
   color: #8f5224;
}
}


.c-d {
.c-d {
   color: #ff55ff;
   color: #268217;
}
}


.c-e {
.c-e {
   color: #ffff55;
   color: #e82020;
}
}


.c-f {
.c-f {
   color: #ffffff;
   color: #303030;
}
}


.c-g {
.c-g {
   color: #ddd605;
   color: #ddd605;
}
.shadow.c-0 {
  text-shadow: 0.125em 0.125em 0 #3f3f3f;
}
.shadow.c-1 {
  text-shadow: 0.125em 0.125em 0 #3f2a00;
}
.shadow.c-2 {
  text-shadow: 0.125em 0.125em 0 #3f0928;
}
.shadow.c-3 {
  text-shadow: 0.125em 0.125em 0 #17343f;
}
.shadow.c-4 {
  text-shadow: 0.125em 0.125em 0 #3f3c14;
}
.shadow.c-5 {
  text-shadow: 0.125em 0.125em 0 #193a04;
}
.shadow.c-6 {
  text-shadow: 0.125em 0.125em 0 #3f1f3b;
}
.shadow.c-6-bedrock {
  text-shadow: 0.125em 0.125em 0 #402a00;
}
.shadow.c-7 {
  text-shadow: 0.125em 0.125em 0 #1b1b1b;
}
.shadow.c-8 {
  text-shadow: 0.125em 0.125em 0 #2c2c2c;
}
.shadow.c-9 {
  text-shadow: 0.125em 0.125em 0 #02282b;
}
.shadow.c-a {
  text-shadow: 0.125em 0.125em 0 #1e093f;
}
.shadow.c-b {
  text-shadow: 0.125em 0.125em 0 #03133f;
}
.shadow.c-c {
  text-shadow: 0.125em 0.125em 0 #231409;
}
.shadow.c-d {
  text-shadow: 0.125em 0.125em 0 #092005;
}
.shadow.c-e {
  text-shadow: 0.125em 0.125em 0 #3a0808;
}
.shadow.c-f {
  text-shadow: 0.125em 0.125em 0 #0c0c0c;
}
.shadow.c-g {
  text-shadow: 0.125em 0.125em 0 #373501;
}
}


Line 320: Line 646:
}
}


.c-n .c-1, .c-n .c-2, .c-n .c-3, .c-n .c-4, .c-n .c-5, .c-n .c-6, .c-n .c-7, .c-n .c-8, .c-n .c-9, .c-n .c-a, .c-n .c-b, .c-n .c-c, .c-n .c-d, .c-n .c-e, .c-n .c-f, .c-n .c-g, .c-n .c-h {
.c-n .c-0, .c-n .c-1, .c-n .c-2, .c-n .c-3, .c-n .c-4, .c-n .c-5, .c-n .c-6, .c-n .c-7, .c-n .c-8, .c-n .c-9, .c-n .c-a, .c-n .c-b, .c-n .c-c, .c-n .c-d, .c-n .c-e, .c-n .c-f, .c-n .c-g, .c-n .c-h {
text-decoration: underline 0.125em;
text-decoration: underline 0.125em;
}
}


.c-1, .c-2, .c-3, .c-4, .c-5, .c-6, .c-7, .c-8, .c-9, .c-a, .c-b, .c-c, .c-d, .c-e, .c-f, .c-g, .c-h {
.c-0, .c-1, .c-2, .c-3, .c-4, .c-5, .c-6, .c-7, .c-8, .c-9, .c-a, .c-b, .c-c, .c-d, .c-e, .c-f, .c-g, .c-h {
position: relative;
position: relative;
font-family: Minecraft;
font-family: Minecraft;
font-size: 16px;
font-size: 16px;
word-spacing: 0.375em;
}
}


Line 334: Line 661:
top: 0;
top: 0;
border: 0.125em solid transparent;
border: 0.125em solid transparent;
background-color: #0c0c0c;
background-color: #000000;
background-color: rgba(12,12,12,0.82);
background-color: var(--tooltip-background);
font-family: Minecraft,"WenQuanYi Bitmap Song",SimSun,Unifont,NISC18030,Beijing,Courier,sans-serif;
font-family: Minecraft,"WenQuanYi Bitmap Song",SimSun,Unifont,NISC18030,Beijing,Courier,sans-serif;
word-spacing: 0.25em;
word-spacing: 0.375em;
margin: 0.125em 0.125em;
margin: 0.125em 0.125em;
padding: 0 0.375em 0.375em 0.375em;
padding: 0 0.25em 0.375em 0.25em;
line-height: 1.125em;
line-height: 1.125em;
white-space: nowrap;
white-space: nowrap;
Line 350: Line 677:
display: none;
display: none;
color: #ffffff;
color: #ffffff;
pointer-events: none;
}
}


Line 371: Line 699:


.shadow-line {
.shadow-line {
position: absolute;
    left: 0.5em;
    top: 0.125em;
     z-index: -1;
     z-index: -1;
}
}
Line 398: Line 723:
display: inline-block;
display: inline-block;
top: 0.125em;
top: 0.125em;
left: 0.5em;
left: 0.375em;
}
}


Line 409: Line 734:
@keyframes splash {
@keyframes splash {
   0% {
   0% {
     transform: scale(var(--animation-scale)) rotateZ(-20deg);
     transform: translate(-50%, -50%) scale(1.1) rotateZ(-20deg);
   }
   }
   10% {
   10% {
     transform: scale(calc(-0.3090169943749 * (var(--animation-scale) - 1) + var(--animation-scale))) rotateZ(-20deg);
     transform: translate(-50%, -50%) scale(1.0690983005625) rotateZ(-20deg);
   }
   }
   20% {
   20% {
     transform: scale(calc(-0.5877852522925 * (var(--animation-scale) - 1) + var(--animation-scale))) rotateZ(-20deg);
     transform: translate(-50%, -50%) scale(1.0412214747708) rotateZ(-20deg);
   }
   }
   30% {
   30% {
     transform: scale(calc(-0.8090169943749 * (var(--animation-scale) - 1) + var(--animation-scale))) rotateZ(-20deg);
     transform: translate(-50%, -50%) scale(1.0190983005625) rotateZ(-20deg);
   }
   }
   40% {
   40% {
     transform: scale(calc(-0.9510565162952 * (var(--animation-scale) - 1) + var(--animation-scale))) rotateZ(-20deg);
     transform: translate(-50%, -50%) scale(1.0048943483705) rotateZ(-20deg);
   }
   }
   50% {
   50% {
     transform: scale(1) rotateZ(-20deg);
     transform: translate(-50%, -50%) scale(1) rotateZ(-20deg);
   }
   }
   60% {
   60% {
     transform: scale(calc(-0.9510565162952 * (var(--animation-scale) - 1) + var(--animation-scale))) rotateZ(-20deg);
     transform: translate(-50%, -50%) scale(1.0048943483705) rotateZ(-20deg);
   }
   }
   70% {
   70% {
     transform: scale(calc(-0.8090169943749 * (var(--animation-scale) - 1) + var(--animation-scale))) rotateZ(-20deg);
     transform: translate(-50%, -50%) scale(1.0190983005625) rotateZ(-20deg);
   }
   }
   80% {
   80% {
     transform: scale(calc(-0.5877852522925 * (var(--animation-scale) - 1) + var(--animation-scale))) rotateZ(-20deg);
     transform: translate(-50%, -50%) scale(1.0412214747708) rotateZ(-20deg);
   }
   }
   90% {
   90% {
     transform: scale(calc(-0.3090169943749 * (var(--animation-scale) - 1) + var(--animation-scale))) rotateZ(-20deg);
     transform: translate(-50%, -50%) scale(1.0690983005625) rotateZ(-20deg);
   }
   }
   100% {
   100% {
     transform: scale(var(--animation-scale)) rotateZ(-20deg);
     transform: translate(-50%, -50%) scale(1.1) rotateZ(-20deg);
  }
}
 
/* Main page */
.page-Main_Page .firstHeading {
display: none;
}
 
.main-page-logo {
background-color: rgb(30,100,200);
background-color: rgba(80,150,255,0.4);
border: 1px solid rgb(100,100,160);
padding: 40px 15px;
display: flex;
align-items: center;
flex-direction: column;
flex-wrap: wrap;
gap: 15px;
background-image: url(https://static.miraheze.org/btawiki/f/f5/BetterTownscreenshot1.png);
background-attachment: fixed;
background-size: 100vw;
background-size: 100svw;
}
 
.main-page-block {
position: relative;
border: 1px solid var(--table-border);
padding: 5px;
padding-top: 40px;
}
 
.main-page-blocks {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 10px;
grid-template-areas: 'a a d'
'b b d'
'c c e';
}
 
.main-page-block-title {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 30px;
background-image: linear-gradient(rgb(0 0 0 / 0.6), rgb(0 0 0 / 0.6)), url(https://static.miraheze.org/btawiki/f/f5/BetterTownscreenshot1.png);
background-attachment: fixed;
image-rendering: pixelated;
box-shadow: rgb(0 0 0 / 10%) 0 0.25em;
display: flex;
align-items: center;
padding-left: 10px;
box-sizing: border-box;
background-size: 100vw;
background-size: 100svw;
}
 
@media only screen and (max-width: 900px) {
  .main-page-blocks {
  grid-template-rows: repeat(3, 1fr);
    grid-template-areas: 'a a a'
'b b b'
'c c c'
'd d d'
'e e e';
   }
   }
}
}