MediaWiki:Common.css

From Infernum Mod Wiki
Jump to navigation Jump to search

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Press Ctrl-F5.
/* CSS placed here will be applied to all skins */

/* Import CSS from the Calamity Mod Wiki */
@import url(https://calamitymod.wiki.gg/index.php?title=MediaWiki:Common.css&action=raw&ctype=text/css);

div#content {
	background-color: rgb(32, 32, 32, 0.77) !important;
}

/* Overwrite Logo and background image */
.mw-wiki-logo {
  background-image: url(https://infernummod.wiki.gg/images/e/e6/Site-logo.png);
  animation: terrariaLogoAnim 42s infinite linear;
}
#p-logo:hover, #p-logo:focus {
	transform: scale(1.05);
}
#p-logo {
	transition: all 0.18s ease-in-out;
}
@keyframes terrariaLogoAnim {
        0% {
            transform: rotate(-7deg) scale(1.2)
        }

        10%{
            transform: rotate(-5deg) scale(1)
        }

        20% {
            transform: rotate(-2deg) scale(0.9)
        }
        
        30% {
            transform: rotate(0deg) scale(1)
        }
        
        40% {
            transform: rotate(3deg) scale(1.1)
        }
        50% {
            transform: rotate(6deg) scale(1.2)
        }
        60% {
            transform: rotate(4deg) scale(1)
        }
        70% {
            transform: rotate(2deg) scale(1.1)
        }
        80% {
            transform: rotate(-1deg) scale(1.2)
        }
        90% {
            transform: rotate(-4deg) scale(1.1)
        }
        100% {
            transform: rotate(-7deg) scale(1.2)
        }
    }
body {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.17), rgba(0, 0, 0, 0.17)), url(https://infernummod.wiki.gg/images/8/80/Site-background.jpg) center center / cover no-repeat fixed;
}
#p-logo {
    height: 175px !important;
    padding: 0;
    position: absolute;
    width: 313px !important;
    z-index: 4;
    left: 50vw;
    margin-left: -154px;
    top: 50px;
}
#p-logo a {
    height: 165px !important;
    width: 313px !important;
    max-width: 100%;
}
#mf-wikiheader img {
    max-width: 25%;
    height: auto;
}


/*Fix Mod Calls on phone breaking*/
.page-Mod_Calls table.lined td {
	word-break: break-word;
}


/*Initialize flexbox properties*/
.flexbox, .flexboxtable, .flexboxbig {
	display:flex;
	flex-direction: row;
}


/*Preventing tabber overflow*/
.jifOrImaje img{
	max-width: 95%;
	height: auto;
	padding: 6px;
}
/*The one class holding up 80% of this wiki*/
.image2 img{
	max-width:100%;
	height: auto;
}



/*Fancy stuff*/
.bosstable img:hover, .bosstable img:focus {
	transition-timing-function: linear;
	transform: scale(1.1);
}
.bosstable img {
	transition: all 0.2s ease-in-out;
}
/*Boss page tables alignment*/
.bosstable table{
	margin: auto;
}
@media (min-width: 700px) {
	.bosstable table{
		width: 70%;
	}
}


/*Recolor links*/
#mw-panel .portal .body li a:visited,
a:visited,
a.external:visited,
.mw-parser-output a.external:visited,
a.extiw:visited,
.plaincollapse .mw-collapsible-toggle  a:visited,
.vectorMenu li a:visited {
   color: #669bff;
}


/*Adjust table properties*/
.mainpage {
	vertical-align: top;
}
.mainpage table{
	border-spacing: 15px 0;
}
@media (max-width: 1000px) {
	.mainpage table{
		display: flex;
		flex-direction: column;
	}
}

/*Custom flexbox resolutions; DO NOT CHANGE ONCE PUSHED*/
@media (max-width: 600px) {
	.flexboxbig{
		flex-direction: column;
	}
}
@media (max-width: 420px) {
  .flexbox, .flexbox2{
    flex-direction: column;
  }
}
@media (max-width: 920px) {
  .flexboxtable {
    flex-direction: column;
  }
}
/*This is for wrapping infoboxes*/
/*-In columns*/
.flexbox1{
	display: inline-flex;
	flex-direction: column;
	float: right;
}
/*-In rows*/
.flexbox2{
	display: inline-flex;
}



.fixed table{
	table-layout: fixed;
	overflow: hidden;
}



/* This is for every single page's column formatting*/
@media (max-width: 800px) {
	.flexBoss {
	display: flex;
	flex-direction: column;
	}
}



/*Tabber links don't look like shit*/
.tabber__tab[aria-selected='true'], .tabber__tab[aria-selected='true']:visited {
    color: #18f;
}



/* I forgot that mobile phones exist. Fuck me. */
.slide img {
    max-width: 50%; /*This should fix weird bordering on them*/
    vertical-align: middle;
    height: auto;
}
@media (max-width: 901px) {
	.slide img{
		max-width:80%;
	}
}
.page-Bosses img, .page-Minibosses img, .page-Enemies img, .page-Critters img{
	max-width: 100%;
	height: auto;
}
.page-Bosses h2, .page-Minibosses h2, .page-Enemies h2, .page-Critters h2{
	width: 40%;
	margin: auto;
}
/*Title images*/
.bossHeader img{
	max-width: 100%;
	height: auto;
}
/*This is for images of items which specifically need to be made smaller*/
.itemimage img{
	max-width: 25%;
	height: auto;
}
.sixtypercentmax img{
	max-width: 60%;
	height: auto;
}


/*Achievement formatting*/
.achievement {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  margin: 0.5em 0;
}
.achievement > div {
  margin-left: 0.5em;
}



/*Fix coin offset*/
.drops.money p {
	display: none;
}
.drops.money span {
	font-weight: normal;
}

/*Fixing item note alignment*/
.note {
	font-size: x-small;
}