MediaWiki:Common.css: Difference between revisions

Latest revision as of 23:45, 4 September 2023

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-family: 'Minecraft';
	src: url('https://static.miraheze.org/btawiki/1/1a/Minecraft.woff') format('woff');

	font-weight: normal;
	font-style: normal;
	font-display: fallback;
}

@font-face {
	font-family: 'Minecraft';
	src: url('https://static.miraheze.org/btawiki/7/7f/Minecraft-Bold.woff') format('woff');

	font-weight: bold;
	font-style: normal;
	font-display: fallback;
}

.vector-menu-portal .vector-menu-content li a:visited {
	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';
}

.mw-collapsible-text {
	font-size: 0;
}

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

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

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

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

.pixelated {
    -ms-interpolation-mode: nearest-neighbor;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
}

.sprite {
	display: inline-block;
}

.sprite img {
	width: 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;
}

/* Splash */
.splash-text {
  font-family: 'Minecraft', sans-serif;
  word-spacing: 0.375em;
  font-size: 35px;
  color: #ffff00;
  text-shadow: 0.125em 0.125em 0 #7f7f00;
  position: absolute;
  display: inline-block;
  transform-origin: center center;
  left: 100%;
  top: 100%;
  animation: splash 0.5s linear infinite !important;
  white-space: nowrap;
}

/* Avoid Discord splash receiving link styling */
.splash-text a.external {
    background-image: none !important;
    padding-right: 0;
    color: #ffff00;
}

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

.msgbox.important, .msgbox.warning, .msgbox.info {
	background-color: #fff;
}

.msgbox.important {
	background-color: rgba(255, 40, 40, 0.6);
	border: 1px solid rgb(255, 0, 0);
	border-left: 4px solid rgb(255, 0, 0);
}

.msgbox.warning {
	background-color: rgba(255, 255, 80, 0.6);
	border: 1px solid rgb(200, 160, 0);
	border-left: 4px solid rgb(200, 160, 0);
}

.msgbox.info {
	background-color: rgba(80, 150, 255, 0.4);
	border: 1px solid rgb(100, 100, 160);
	border-left: 4px solid rgb(100, 100, 160);
}

/* Minecraft tooltips */
.shadow-line {
	color: #3f3f3f;
}

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

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

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

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

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

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

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

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

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

.shadow-line .c-6-bedrock {
  color: #402a00;
}

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

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

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

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

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

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

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

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

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

.shadow-line .c-g {
  color: #373501;
}

.c-l {
  font-weight: bold;
}

.c-o {
  font-style: italic;
}

.c-0 {
  color: #ffffff;
}

.c-1 {
  color: #ffaa00;
}

.c-2 {
  color: #fc26a3;
}

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

.c-4 {
  color: #fff152;
}

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

.c-6 {
  color: #ff7fec;
}

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

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

.c-8 {
  color: #b3b3b3;
}

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

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

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

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

.c-d {
  color: #268217;
}

.c-e {
  color: #e82020;
}

.c-f {
  color: #303030;
}

.c-g {
  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;
}

.c-m {
	position: relative;
}

.c-m:after {
    content: '';
    display: block;
    width: calc(100% + 0.125em);
    height: 0;
	margin-top: 0.925em;
    position: absolute;
    top: 0;
    left: -0.125em;
    border-bottom: 0.125em solid;
	z-index: 1;
}

.shadow-line .c-m:after {
    width: calc(100% + 0.125em);
    top: 0;
    left: -0.125em;
    border-bottom: 0.125em solid;
}

.c-m .c-0:after, .c-m .c-1:after, .c-m .c-2:after, .c-m .c-3:after, .c-m .c-4:after, .c-m .c-5:after, .c-m .c-6:after, .c-m .c-7:after, .c-m .c-8:after, .c-m .c-9:after, .c-m .c-a:after, .c-m .c-b:after, .c-m .c-c:after, .c-m .c-d:after, .c-m .c-e:after, .c-m .c-f:after, .c-m .c-g:after, .c-m .c-6-bedrock:after {
    content: '';
    display: block;
    width: calc(100% + 0.125em);
    height: 0;
	margin-top: 0.925em;
    position: absolute;
    top: 0;
    left: -0.125em;
    border-bottom: 0.125em solid;
	z-index: 2;
}

.c-n {
	position: relative;
	text-decoration: underline 0.125em;
	text-underline-offset: 0.125em;
}

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

.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;
	font-family: Minecraft;
	font-size: 16px;
	word-spacing: 0.375em;
}

.minecraft-tip {
	left: 0;
	top: 0;
	border: 0.125em solid transparent;
	background-color: #000000;
	background-color: var(--tooltip-background);
	font-family: Minecraft,"WenQuanYi Bitmap Song",SimSun,Unifont,NISC18030,Beijing,Courier,sans-serif;
	word-spacing: 0.375em;
	margin: 0.125em 0.125em;
	padding: 0 0.25em 0.375em 0.25em;
	line-height: 1.125em;
	white-space: nowrap;
	font-size: 16px;
	text-align: left;
	font-smooth: never;
	-webkit-font-smoothing: none;
	position: fixed;
	z-index: 9999;
	display: none;
	color: #ffffff;
	pointer-events: none;
}

.minecraft-tip::before {
  content: '';
  position: absolute;
  top: -0.125em;
  right: -0.250em;
  bottom: -0.125em;
  left: -0.250em;
}

.minecraft-tip::after {
  content: '';
  position: absolute;
  top: -0.250em;
  right: -0.125em;
  bottom: -0.250em;
  left: -0.125em;
}

.shadow-line {
    z-index: -1;
}

.text-line, .shadow-line {
	filter: url(#crispify);
}

.c-m .shadow, .c-n .shadow-line {
	top: 0.375em;
}

.k-manager {
	display: none;
}

.text-line {
	position: relative;
	display: inline-block;
}

.shadow-line {
	position: absolute;
	display: inline-block;
	top: 0.125em;
	left: 0.375em;
}

.no-break-space {
	display: inline-block;
	width: 0.75em;
}

/* Keyframes */
@keyframes splash {
  0% {
    transform: translate(-50%, -50%) scale(1.1) rotateZ(-20deg);
  }
  10% {
    transform: translate(-50%, -50%) scale(1.0690983005625) rotateZ(-20deg);
  }
  20% {
    transform: translate(-50%, -50%) scale(1.0412214747708) rotateZ(-20deg);
  }
  30% {
    transform: translate(-50%, -50%) scale(1.0190983005625) rotateZ(-20deg);
  }
  40% {
    transform: translate(-50%, -50%) scale(1.0048943483705) rotateZ(-20deg);
  }
  50% {
    transform: translate(-50%, -50%) scale(1) rotateZ(-20deg);
  }
  60% {
    transform: translate(-50%, -50%) scale(1.0048943483705) rotateZ(-20deg);
  }
  70% {
    transform: translate(-50%, -50%) scale(1.0190983005625) rotateZ(-20deg);
  }
  80% {
    transform: translate(-50%, -50%) scale(1.0412214747708) rotateZ(-20deg);
  }
  90% {
    transform: translate(-50%, -50%) scale(1.0690983005625) rotateZ(-20deg);
  }
  100% {
    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';
  }
}