MediaWiki:Mobile.css: Difference between revisions

m
.msgbox now uses gap.
imported>Ttv pedro270707
(Created page with "@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,...")
imported>Ttv pedro270707
m (.msgbox now uses gap.)
 
(32 intermediate revisions by the same user not shown)
Line 59: Line 59:
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;
}
.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);
}
}


Line 357: Line 494:
display: inline-block;
display: inline-block;
width: 0.75em;
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);
  }
}
}