MediaWiki:Mobile.css: Difference between revisions

Latest revision as of 14:44, 19 March 2023

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

body, #mw-page-base, html {
	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;
}

.client-darkmode #p-logo a {
	filter: invert(1) hue-rotate(180deg);
}

.main-page-logo {
    display: inline-block;
    height: 110px;
    width: 548px;
}

.main-page-logo:hover .bta-logo {
    display: none;
}

.minecraft-retro-logo {
    display: none;
}

.main-page-logo:hover .minecraft-retro-logo {
    display: inline;
}

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

.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: #c6c6c6;
}

.infobox.in {
	border-left: 2px solid black;
	border-right: 2px solid black;
	background-color: #555555;
}

.infobox-table {
    margin-top: 6px;
    width: 100%;
    text-align: left;
}

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

/* Message boxes */
.msgbox {
	width: 80%;
	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;
}

.empty-line {
  display: block;
  content: "";
  margin-top: 1.625em;
}

.break {
  display: block;
  content: "";
  margin-top: 0.25em;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.c-0 {
  color: #000000;
}

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

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

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

.c-4 {
  color: #aa0000;
}

.c-5 {
  color: #aa00aa;
}

.c-6 {
  color: #ffaa00;
}

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

.c-7 {
  color: #aaaaaa;
}

.c-8 {
  color: #555555;
}

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

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

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

.c-c {
  color: #ff5555;
}

.c-d {
  color: #ff55ff;
}

.c-e {
  color: #ffff55;
}

.c-f {
  color: #ffffff;
}

.c-g {
  color: #ddd605;
}

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

.minecraft-tip {
	left: 0;
	top: 0;
	border: 0.125em solid transparent;
	background-color: #0c0c0c;
	background-color: rgba(12,12,12,0.82);
	font-family: Minecraft,"WenQuanYi Bitmap Song",SimSun,Unifont,NISC18030,Beijing,Courier,sans-serif;
	word-spacing: 0.25em;
	margin: 0.125em 0.125em;
	padding: 0 0.375em 0.375em 0.375em;
	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;
}

.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 {
	position: absolute;
    left: 0.5em;
    top: 0.125em;
    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.5em;
}

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