MediaWiki:Common-mods.css

/*
 * The main stylesheet for the wiki is imported from the vanilla Terraria Wiki.
 * Customizations of those rules and special styles that only apply to this wiki
 * are added here.
 */

:root{
	--theme-site-logo-width: 234px;
	--theme-site-logo-height: 150px;
}

@media screen and (min-width: 1367px){
	body{
		grid-template-rows: [body-start] calc( var(--layout-topbar-height) + 24px) [page-start nav-start aside-start] 0fr [nav-end content-start] auto [content-end footer-start] 0fr [footer-end] 1fr [aside-end page-end] 0fr [body-end];
	}
	div#p-logo{
		position: static;
		background-size: 100% auto;
		height: 120px;
		margin-top: -8px;
	}
	div#p-logo .mw-wiki-logo{
		width: 100%;
		height: 100%;
	}
	body.content-size-expanded #mw-panel{
		display: none;
	}
}
@media screen and (max-width: 1366px){
	#p-logo {
		margin: 0;
		left: 50%;
		transform: translate(-50%, 0);
	}
}
@media screen and (max-width: 900px){
	:root{
		--layout-logo-scale: 1;
	}
	#p-logo {
		margin: 0;
		left: 0;
		transform: translateY(-4px);
	}

	#mw-panel #p-logo + .portal .body, #mw-panel .portal:last-child .body{
		left: auto;
		right: 0;
	}
}

/* Logo */
#p-logo {
	background:url("/images/e/e6/Site-logo.png") center center/var(--theme-site-logo-width) auto no-repeat;
}

/* Hide the links to base pages (below the page title) but only in namespaces "(Main)" and "User" */
.ns-0 #contentSub .subpages,
.ns-2 #contentSub .subpages {
    display: none;
}

/* Mod name in firstHeading (set via {{mod sub-page}}) */
#firstHeading .firstHeading-modname {
	display: block;
	font-size: 70%;
	color: var(--theme-text-color-note);
}

/* Ensure that the mod logo (top right corner) stays above the line */
#bodyContent {
	clear: both;
}

/* Custom list style for use in miniature bullet lists within infobox drop tables */
span.dropSub ul {
    list-style: none;
    margin-top: 0;
    margin-left: 0;
    padding-left: 0;
}
span.dropSub li {
    padding-left: 1em;
    text-indent: -1em;
}
span.dropSub li:before {
    content: "•";
}


/* ================================================================== */
/* Responsive mod front page styles */
/* ================================================================== */

/* all sections */
.modfp-box {
    border: 1px solid var(--custom-accent-border-color);
    border-radius: 5px;
    -moz-border-radius: 5px;
    padding: 7px;
}

/* header section */
.modfp-section-header {
    margin-bottom: 0.5em;
}
.modfp-section-header > div {
    flex-grow: 1;
}
.modfp-header {
    background: var(--theme-accent-color);
    padding: 8px;
    margin: 3px;
    text-align: center;
    color: var(--theme-accent-label-color);
}
.modfp-header .modfp-highlightbox {
    border: 1px solid var(--custom-accent-border-color);
    margin-top: 5px;
    padding: 5px;
    text-align: center;
    background: var(--theme-page-background-color);
}
.modfp-title {
    margin-bottom: 1em;
}
.modfp-title .modfp-big {
    font-size: 160%;
}

/* mod info section */
.modfp-section-info {
    margin-bottom: 0.5em;
}
.modfp-section-info, .modfp-section-content {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    flex-wrap: wrap;
    column-gap: 0.25em;
    row-gap: 0.5em;
}
.modfp-section-info > .modfp-box:first-child {
    flex-grow: 1;
    flex-basis: 70%;
}
.modfp-section-info > .modfp-box:last-child {
    flex-grow: 1;
    flex-basis: 29%;
}
.modfp-versionbox-content, .modfp-versionbox-content-sub {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -moz-box-direction: normal;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
}
.modfp-versionbox-content-sub > div:first-child {
    font-weight: bold;
}
.modfp-versionbox-content-sub:not(div:last-child)::after {
    content: "";
    width: 100%;
    border-top: 1px var(--custom-accent-border-color) solid;
    margin: 0.25em 0;
}

/* content section */
.modfp-section-content {
    margin-bottom: 0.5em;
}
.modfp-section-content > div {
    flex-grow: 1;
}


/* ================================================================== */
/* Main page styles */
/* ================================================================== */

/* Hide page title */
body.page-Terraria_Mods_Wiki h1.firstHeading {
    display: none;
}

#section-main .infocard,
#section-misc .infocard {
	margin: 2px;
}

#mainpage-wrapper .box {
    border: 1px solid #AFCFE2;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 5px;
    margin: 3px;
}

#mainpage-wrapper .box .boxcontent {
    padding: 10px;
}

#mainpage-wrapper #box-header .boxcontent,
#mf-wikiheader .box {
    background: var(--theme-accent-color);
    padding: 8px;
    margin: 3px;
    text-align: center;
    color: var(--theme-text-color);
}

#mainpage-wrapper #box-header {
    padding: 7px;
    margin: 2px;
}

#mainpage-wrapper #box-header > div {
	background: var(--theme-page-background-color);
}

#mainpage-wrapper #box-header .heading {
    font-size: 162%;
}

#mainpage-wrapper #box-header .linksbox,
#mf-wikiheader .linksbox {
    margin-top: 5px;
    padding: 5px;
    text-align: center;
    background: var(--theme-highlight-background);
}

#mainpage-wrapper #box-description {
    flex: 10 0 240px;
}

#mainpage-wrapper #box-description .boxcontent > div:not(:last-child) {
    margin-bottom: 30px;
}

#mainpage-wrapper #box-featuredmods {
    flex: 1 1 240px;
}

#mainpage-wrapper #box-featuredmods .allmods-link {
    margin-top: 1em;
}

#mainpage-wrapper #box-externalwikis .boxcontent div:first-child {
    margin-bottom: 1.5em;
}

#mainpage-wrapper #box-externalwikis .boxcontent > ul {
    list-style-image: none;
    list-style-type: none;
}

#box-externalwikis .dropshadow {
	filter: drop-shadow(0px 0px 3px rgba(10, 10, 10, 0.7));
}

#mainpage-wrapper #box-newmods {
    flex: 1 0 240px;
}

#mainpage-wrapper #box-newmods .newmods-list {
    column-count: 2;
    margin-bottom: 1.75em;
}

#mainpage-wrapper #box-wikicommunity {
    flex: 2 0 240px;
}

#mainpage-wrapper .footer {
    margin: 0.75em 2px 0;
}

#mainpage-wrapper .footer > div {
    margin: auto;
    max-width: 25em;
    text-align: center;
    border: 1px solid var(--theme-border-color);
    -moz-border-radius: 5px;
    border-radius: 5px;
    background: var(--theme-highlight-background);
    padding: 0.5em;
}

.mp-heading {
    background: var(--theme-accent-color);
    padding: 5px 20px;
    margin: 3px;
    font-weight: bold;
    text-align: center;
    font-size: 120%;
    color: var(--theme-accent-label-color);
}

.externalwikis-grid-container {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	place-items: center;
	row-gap: 1.25em;
	margin: 1.25em 0;
}

.externalwikis-grid-container div {
	transition: transform .15s linear;
}

.externalwikis-grid-container div:hover,
.externalwikis-grid-container div:focus {
	transform: scale(1.1);
}

/* ================================================================== */
/* Styles for individual pages */
/* ================================================================== */

/* [[Clicker Class]] main page */
.Clicker_Class-logo {
    width: min(496px, 80vw);
    height: auto;
}

.fit-12 img { margin: 0 calc((24px - 12px) / 2); }
.fit-14 img { margin: 0 calc((24px - 14px) / 2); }
.fit-16 img { margin: 0 calc((24px - 16px) / 2); }
.fit-18 img { margin: 0 calc((24px - 18px) / 2); }
.fit-20 img { margin: 0 calc((24px - 20px) / 2); }
.fit-22 img { margin: 0 calc((24px - 22px) / 2); }

.disco { animation-name: discocolor; padding-bottom: 2px; }
.disco-light { animation-name: discocolor-light; padding-bottom: 2px; }
.disco, .disco-light {
    animation-duration: 3520ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes discocolor {
    0%   { background-color: #FF0000; }
    17%  { background-color: #FFFF00; }
    33%  { background-color: #00FF00; }
    50%  { background-color: #00FFFF; }
    67%  { background-color: #0000FF; }
    83%  { background-color: #FF00FF; }
    100% { background-color: #FF0000; }
}

@keyframes discocolor-light {
    0%   { background-color: #FF8080; }
    17%  { background-color: #FFFF80; }
    33%  { background-color: #80FF80; }
    50%  { background-color: #80FFFF; }
    67%  { background-color: #8080FF; }
    83%  { background-color: #FF80FF; }
    100% { background-color: #FF8080; }
}

.Clicker_Class-content-container {
    display: grid;
    grid-template-areas:
        "mod-info"
        "versions"
        "credits";
}

@media (min-width: 700px) {
    .Clicker_Class-content-container {
        gap: 2px;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "mod-info mod-info"
            "versions credits";
    }
    
    .Clicker_Class-content-container > * {
        grid-column: span 2;
    }
}

@media (min-width: 1200px) {
    .Clicker_Class-content-container {
        grid-template-columns: 7fr 4fr;
        grid-template-areas:
            "mod-info versions"
            "mod-info credits";
    }
    
    .Clicker_Class-content-container > * {
        grid-row: span 2;
        grid-column: 1;
    }
}

.Clicker_Class-content-container > * {
    display: flex;
    margin: 2px;
}
.Clicker_Class-content-mod      { grid-area: mod-info; }
.Clicker_Class-content-versions { grid-area: versions; }
.Clicker_Class-content-credits  { grid-area: credits;  }

.Clicker_Class-list-container {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	row-gap: 0.5em;
}

/* [[Orchid Mod]] main page */
.Orchid_Mod-logo {
	width: min(566px, 80vw);
    height: auto;
    margin: -2.5em 0;
}

.Orchid_Mod-content-container {
    display: grid;
    grid-template-areas:
        "mod-info"
        "versions"
        "items"
        "mechanics"
        "credits";
}

@media (min-width: 700px) {
    .Orchid_Mod-content-container {
        gap: 2px;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "mod-info mod-info"
            "items mechanics"
            "versions credits";
    }
    
    .Orchid_Mod-content-container > * {
        grid-row: 1;
        grid-column: span 2;
    }
}

@media (min-width: 1200px) {
    .Orchid_Mod-content-container {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-areas:
            "mod-info mod-info versions"
            "items mechanics credits";
    }
}

.Orchid_Mod-content-container > * {
    display: flex;
    margin: 2px;
}
.Orchid_Mod-content-mod       { grid-area: mod-info;  }
.Orchid_Mod-content-versions  { grid-area: versions;  }
.Orchid_Mod-content-items     { grid-area: items;     }
.Orchid_Mod-content-mechanics { grid-area: mechanics; }
.Orchid_Mod-content-credits   { grid-area: credits;   }

/* [[GaMeTerraria]] main page */
.GaMeTerraria-logo {
	width: min(1600px, 80vw);
    height: auto;
    margin: -2.5em 0;
}

.GaMeTerraria-content-container {
    display: grid;
    grid-template-areas:
        "mod-info"
        "versions"
        "items"
        "mechanics"
        "npcs"
        "credits";
}

@media (min-width: 700px) {
    .GaMeTerraria-content-container {
        gap: 2px;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "mod-info versions"
            "items mechanics"
            "npcs credits";
    }
    
    .GaMeTerraria-content-container > * {
        grid-row: 1;
        grid-column: span 2;
    }
}

@media (min-width: 1200px) {
    .GaMeTerraria-content-container {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-areas:
            "mod-info mod-info versions"
            "items mechanics mechanics"
            "items mechanics mechanics"
            "npcs npcs credits";
    }
}

.GaMeTerraria-content-container > * {
    display: flex;
    margin: 2px;
}
.GaMeTerraria-content-mod       { grid-area: mod-info;  }
.GaMeTerraria-content-versions  { grid-area: versions;  }
.GaMeTerraria-content-items     { grid-area: items;     }
.GaMeTerraria-content-mechanics { grid-area: mechanics; }
.GaMeTerraria-content-npcs      { grid-area: npcs; }
.GaMeTerraria-content-credits   { grid-area: credits;   }