MediaWiki:Mobile.css

/* Background Image */
#mw-content-container {
    background:  url('https://static.miraheze.org/idleonwiki/2/24/NightDesertBG.png') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

/* Logo image border */
#p-logo {
    background: #f8f9fa;
    padding: 1px 1px 0.8em 1px;
    border: #f8f9fa;
    border-style: solid;
    border-width: 1px 1px 0.2em;
}
@media screen and (max-width: 550px) {
#p-logo-text {
	position:absolute;
}
}

/* Main Page */
* {box-sizing: border-box;}

.mainpage-body {           
    display: flex;
    flex-flow: row;
}
.mainpage-left {
    flex: 2.721;
    display: flex;
    flex-flow: column;
    margin-right: 0.9rem;
}
.mainpage-left > * {margin: 0 0 0.9rem;}

.mainpage-right {
    flex: 0.999;
    display: flex;
    flex-flow: column;
    }
.mainpage-right > * {margin: 0 0 0.9rem;}

.mainpage-container {
    display: flex;
    border: 1px solid #b0ad9b;
    background: #e6e6e6;
    margin-bottom: 0.9rem;
}
.mainpage-container h3 {
    font-size: 1.4em;
    font-weight: bold;
    border: none;
    text-decoration: none;
    padding: 0px;
    margin-bottom: 0.2em;
    margin-top: -0.4em;
}
.mainpage-box {
    width: 100%;
    padding: 1em 0.9em 0.3em;
}
/* --- MAINPAGE SKILLS ---*/
.mainpage-skills ul {
	flex: 1 1 auto;
    columns: 2;
    margin: 0;
}
.mainpage-skills li {
    display: flex;
    margin-bottom: 0.3em;
}
.mainpage-skills li:hover img {
    transform: scale(1.2);
    transition: 0.2s ease-out;
}
.mainpage-skills li a:first-child {
    border-radius: 3px;
    width: 48px;
    height: 48px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mainpage-skills li a:last-child {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    color: #444e5a;
    font-size: 1.1em;
    font-weight: bold;
    padding-left: 0.7em;
    text-decoration: none;
}
.mainpage-skills li:hover a:first-child {border-radius: 3px 0 0 3px;}

.mainpage-skills li:hover a:last-child {
    color: rgba(255, 255, 255, 0.9);
    border-radius: 0 3px 3px 0;
}
.skill-Mining a:first-child {background: #d2b244;}
.skill-Mining:hover a:last-child {background: #b69213;}

.skill-Choppin a:first-child {background: #748d36;}
.skill-Choppin:hover a:last-child {background: #4c6215;}

.skill-Smithing a:first-child {background: #878787;}
.skill-Smithing:hover a:last-child {background: #616161;}

.skill-Fishing a:first-child {background: #3e8e9a;}
.skill-Fishing:hover a:last-child {background: #1a6671;}

.skill-Catching a:first-child {background: #8d6a36;}
.skill-Catching:hover a:last-child {background: #624a15;}

.skill-Alchemy a:first-child {background: #6274ab;}
.skill-Alchemy:hover a:last-child {background: #304791;}

/* --- MAINPAGE FEATURES --- */
.tile-row {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(140px, 1fr));
    width: calc(100% + 1em);
}
.mainpage-features .tile-halves {
	display: flex;
    flex: 1 1 auto;
    flex-flow: column;
    margin-right: 0.9rem;
    overflow: hidden;
    margin-bottom: 0.9em;
    background: #d0d2e6;
    border-radius: 3px;
}
.mainpage-features .tile-halves:hover {background: #6274ab;}

.mainpage-features .tile-halves img{background: #e6e6e6;}

.mainpage-features .tile-halves a{color: #444e5a;}

.mainpage-features .tile-halves:hover a{color: #ffffff;}

.mainpage-features .tile-halves h3 {
    font-size: 1em;
    font-weight: bold;
    font-family: 'Segoe UI','Segoe UI Emoji','Segoe UI Symbol','Lato','Liberation Sans','Noto Sans','Helvetica Neue','Helvetica',sans-serif;
    margin: 0;
    text-decoration: none;
}
.mainpage-features .tile-top {
    height: 6rem;
    position: relative;
}
.tile-top.tile-image {
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 0;
    max-height: 60em;
}
.tile-top.tile-image a {width: 100%;}

.tile-top.tile-image img {
    width: 100%;
    object-fit: cover;
}
.tile-bottom {
    width: 100%;
    padding: 0;
}
.tile-bottom.link-button {
	align-content: flex-end;
    padding: 0;
}
.tile-bottom.link-button a {
    display: block;
    text-align: center;
    text-decoration: none;
    padding: 0.4em 0 0.3em;
}

/* ----------------------------------------------------- MAINPAGE MOBILE --- */
@media screen and (max-width: 850px) {
	.mainpage-body {flex-flow: column wrap;}
	
	.mainpage-left {margin-right: 0;}
	
	.mainpage-left > * {margin: 0 0 0.45em;}

    .mainpage-right > * {margin: 0 0 0.45em;}
	
	.mainpage-box {padding: 1.5em 0.5em 0.3em;}
	
	.mainpage-container h3 {
        margin-bottom: 0.3em;
        margin-top: -0.7em;
	}
    .mainpage-skills li a:first-child {
        border-radius: 3px;
        padding: 3px 2px 1px 2px;
        width: 40px;
        height: 40px;
    }
    .mainpage-skills li a:last-child {
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        color: #444e5a;
        font-size: 0.9em;
        font-weight: bold;
        padding-left: 0.2em;
        text-decoration: none;
    }
    .mainpage-skills li:hover img {
        transform: scale(1);
        transition: 0;
    }
    
    .tile-row {
        display: grid;
        grid-template-columns: repeat(auto-fill,minmax(120px, 1fr));
        width: calc(100% + 0.3em);
    }
    .mainpage-features .tile-halves {
    	margin-right: 0.3em;
    	margin-bottom: 0.3em;
    }
}


/* World banners (couldn't make .banner-image work, using style instead) */
.banner-image {
  position: relative;
  border-radius: 0.4em;
  max-width: 100%;
  overflow: hidden;
  float: left;
  margin: 0 0 3px;
}

.banner-text {
  position: absolute;
  bottom: 10px;
  left: 20px;
  color: white;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  font-size: 35px;
  font-weight: bold;
  padding-left: 2px;
  padding-right: 2px;
}

.header-text {
  position: absolute;
  bottom: 2px;
  left: 20px;
  color: white;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  font-size: 18px;
  font-weight: bold;
  padding-left: 2px;
  padding-right: 2px;
}

/* Table Styling*/
/* Alchemy */

.bubble-table {
  border: 1px solid #000;
  border-radius: 0.7em;
  background-color: #f6f6f6;
  font-size: 120%;
  color: #000;
  width: 100%;
  margin: auto;
  overflow:hidden;
}

.bubble-table th.name {
	width: 15%;
	padding: 0 3px 0 3px;
	text-align: center;
	font-weight: bold;
}

.orange-cauldron tr:nth-child(odd){
  background-color: #ffefcc;
}

.green-cauldron tr:nth-child(odd){
  background-color: #ccffd0;
}

.purple-cauldron tr:nth-child(odd){
  background-color: #fcccff30;
}

.yellow-cauldron tr:nth-child(odd){
  background-color: #ffffcc;
}

/* Bestiary */

.bestiary-gallery {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.bestiary-cell {
  display: flex;
  align-items: center;
  float: left;
  overflow: hidden;
  border: 1px solid #ccc;
  border-radius: 0.4em;
  min-height: 120px;
  margin: 1px;
}

.bestiary-cell:hover {
  border: 1px solid #000;
  background-color: #e6e6e6;
}

.bestiary-cell table {
	line-height: 0;
}

.bestiary-cell p {
  text-align: center;
}

/* -------------------------Infobox  */
.infobox {
    border: 1px solid #000;
    background: #e6e6e6;
    border-radius: 0.7em;
    font-size: 120%;
    color: #000;
    margin: 0 0 1em .5em;
    padding: 0.1em;
    float: right;
    clear: right;
}
.infobox-title {
    font-size: 2em;
    text-align: center;
}
.infobox-image {
    text-align: center;
}
.infobox th.header {
    background: #916699;
    color: #000;
    font-size: 120%;
    font-weight: bold;
    padding: 0.5em;
    border-radius: .4em .4em 0 0;
    text-align: center;
    width: 20em;
}
.infobox th.subheader {
	text-align: center;
    background: #916699;
    width: 20em;
    padding: 0.2em;
    font-weight: bold;
}
.infobox th {
    vertical-align: top;
    background: #c0b3cc;
    text-align: left;
    padding: 0.2em;
    padding-left: 0.4em;
    width: 7.5em;
}
.infobox td {
    vertical-align: top;
}

/*----------------------------Droptable */
.droptable{
	width: 60%;
}
.droptable th.header {
    background: #916699;
    color: #000;
    font-size: 120%;
    font-weight: bold;
    border-radius: .4em .4em 0 0;
    text-align: center;
}
.droptable th.subheader {
	text-align: center;
    background: #916699;
    font-weight: bold;
}

.droptable tr:nth-child(odd){
  background-color: lightgrey;
}

.navigation{
	width: 60%;
}
/* -------------------------------------------------- TOC */

.toc {
	float:right;
    background-color: #e6e6e6;
    border-radius: 10px 10px 10px 10px;
    border: 0.5px black solid;
    margin: 0 0 0 0;
	padding: 0.5em;
}

.toc .toctitle {    
	text-align: center; 
} 
.toc .toctitle h2 {
    font-weight: bold; 
} 

.tocnumber { display: none; }

/* End of TOC */

.classimg img {
width: auto;
height: 50px;
}

.transparent
{background: transparent;
}

.gameinfobox {
    border: 1px solid #000;
    background: #e6e6e6;
    border-radius: 0.7em;
    font-size: 100%;
    color: #000;
    margin: 0 0 1em .5em;
    padding: 0.1em;
    float: right;
    clear: right;
    width:30%;
}

img{
    max-width: 100%;
	height: auto;
}
/* -------------------------ITEMS WIP  */
.tile-row-items {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(144px, 1fr));
    width: calc(100% + 1em);
}

.mainpage-features .tile-top-items {
    position: relative;
    height:6em
}
.tile-top-items.tile-image {
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 0;
    height: 144px;
    width: 144px;
}
.tile-top-items.tile-image a {width: 100%;}

.tile-top-items.tile-image img {
    width: 100%;
    object-fit: cover;
}


/* -------------------------BESTIARY WIP  */
.mainpage-features .tile-halves-best {
	display: flex;
    flex: 1 1 auto;
    flex-flow: column;
    margin-right: 0.9rem;
    overflow: hidden;
    margin-bottom: 0.9em;
    background: #d0d2e6;
    border-radius: 3px;
}

.mainpage-features .tile-halves-best h3 {
    font-size: 1em;
    font-weight: bold;
    font-family: 'Segoe UI','Segoe UI Emoji','Segoe UI Symbol','Lato','Liberation Sans','Noto Sans','Helvetica Neue','Helvetica',sans-serif;
    margin: 0;
    text-decoration: none;
}
.mainpage-features .tile-halves-best:hover {background: #6274ab;}

.mainpage-features .tile-halves-best img{background: #e6e6e6;}

.mainpage-features .tile-halves-best a{color: #444e5a;}

.mainpage-features .tile-halves-best:hover a{color: #ffffff;}

.mainpage-features .tile-top-best {
    height: 6.3rem;
    position: relative;
}
.tile-top-best.tile-image-best {
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 0;
    max-height: 70em;
}
.tile-top-best.tile-image-best a {width: 100%;}

.tile-top-best.tile-image-best img {
    width: 100%;
    object-fit: cover;
    padding-bottom:14px;
}
.tile-bottom-best {
    width: 100%;
    padding: 0;
}
.tile-bottom-best.link-button-best {
	align-content: flex-end;
    padding: 0;
}
.tile-bottom-best.link-button-best a {
    display: block;
    text-align: center;
    text-decoration: none;
    padding: 0.4em 0 0.3em;
}

/* New Infobox CSS (Currently only for class) */

.Infobox {
	width: 30%;
	float: right;
	clear: right;
	background: #e6e6e6;
	border: 1px solid black;
	border-radius: 0.7em;
	margin: 0 0 .5em .5em;
}

@media screen and (max-width: 850px) {
.Infobox {
    width: 100%;
}
}

.Infobox th {
	background: #c0b3cc;
    text-align: left;
    padding: 0.2em 0.2em 0.2em 0.3em;
}

.Infobox th.Header {
	background: #916699;
	font-size: 120%;
	font-weight: bold;
	text-align: center;
	padding: 0.5em;
	border-radius: .4em .4em 0 0;
}

.Infobox th.SubHeader {
	background: #916699;
	font-weight: bold;
	text-align: center;
}

.Infobox th.InfoboxTalents {
	text-align: center;
	background: #e6e6e6;
}

.InfoboxTalents img {
	margin-top:5px;
}

.Infobox td.HeaderImage {
	text-align: center;
	background: #e6e6e6;
}
/* -------------------------- Banner Styling -------------------------- */

.banner{
	border: 1px solid #000;
    border-spacing: 3px;
    background-image: linear-gradient(#d5d5d5 60%,#979797 70%);
    width:60%;
    text-align:center;
    border-radius:5px;
    color: #fff;
    font-size:32px;
	text-shadow:-.065em 0 #000,0 .065em #000,.065em 0 #000,0 -.065em #000;
	font-weight:bold;
}
.banner td{
	border: 1px solid #000;
    border-radius: 5px;
    background-image: linear-gradient(#868686 30%,#696969 80%);
    padding:0 1em;
}
.banner a{
	color:#94f9ff;
}
.banner.blue{
    background-image: linear-gradient(#6371BF 60%,#3C4AA3 70%);
}
.banner.blue td{
    background-image: linear-gradient(#4D97BC 30%,#2165A0 80%);
}
.banner.red{
    background-image: linear-gradient(#FF7A68 60%,#FF614C 70%);
}
.banner.red td{
    background-image: linear-gradient(#FF614C 30%,#FF7A68 80%);
}
.banner.purple{
    background-image: linear-gradient(#ffcffa 60%,#ee75ff 70%);
}
.banner.purple td{
    background-image: linear-gradient(#a94bc1 30%,#7e38aa 80%);
}