MediaWiki:Common.less/infobox.less: Difference between revisions

:root {
	--infobox-text-color: var(--text-color);
	--table-header: var(--body-darker);
    --table-subheader: var(--body-dark);
    --table-body: var(--body-light);
    --table-border: var(--body-border);
}

/* Default card infobox */
@infobox-lighter: var(--body-dark);
@infobox-darker: var(--body-darker);
@infobox-link: #a5918a;

/* Yellow card infobox */
@infobox-lighter-hopeport: darken(desaturate(spin(@hopeport, -5%), 55%), 10%);
@infobox-darker-hopeport: @hopeport-dark;

/* Blue card infobox */
@infobox-lighter-mantuban: @mantuban;
@infobox-darker-mantuban: @mantuban-dark;

/* Green card infobox */
@infobox-lighter-hopeforest: desaturate(@hopeforest, 30%);
@infobox-darker-hopeforest: @hopeforest-dark;

/* Grey card infobox */
@infobox-lighter-crenopolis: @crenopolis;
@infobox-darker-crenopolis: @crenopolis-dark;

/* Infobox */

.infobox {
	font-size: .85em;
	width: 300px;
	float: right;
	table-layout: fixed;
	margin: 0.5em 0 1em 1em;
	background: @infobox-lighter;
	padding: 2px;
	color: var(--body-main);
	border-radius: @infobox-outer-radius;
	box-shadow: inset 0 0 2px rgba(255,255,255,0.5);
	
	.infobox-buttons {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		grid-gap: 3px;
		margin-bottom: 3px;
		
		.button {
			background: var(--table-subheader);
			padding: 0 5px;
			font-weight: bold;
			flex: 1 1 20%;
			max-width: 20%;
			color: @white;
		}

		.button.button-selected {
		    background: var(--table-header);
		}
	}
	
	tr {
		> * {
			background: @infobox-darker;
			box-shadow: @infobox-card-shadow;
		}
			
		td:not(.infobox-padding):not(.infobox-image) {
			padding: 0.2em 0.5em;
		}
		
		&:nth-last-child(2) {
			th {
				border-radius: 0 0 0 @infobox-inner-radius;
			}
			
			td {
				border-radius: 0 0 @infobox-inner-radius 0;
			}
		}
		
		/* infobox padding temporary
		&:last-child {
			display: none;
		}
		*/
	}
	
	.infobox-header {
		box-shadow: @infobox-card-shadow;
		border-radius: @infobox-inner-radius;
		padding: 0.5em 0;
		text-align: center;
		color: @white;
		font-size: 1.15em;
		font-weight: bold;
		line-height: 1.4em;
	}
	
	.infobox-image {
		text-align: center;
	    border-radius: @infobox-inner-radius @infobox-inner-radius 0 0;
	    background-image: url("/images/[email protected]");
	    background-position: center;
	    background-size: 300px;
	    padding: 0;
	    overflow: hidden;
	    
	    span {
	    	display: block;
		    border-radius: 0.9em 0.9em 0 0;
		    overflow: hidden;
		    margin: 0.5em;
		    
		    img {
		    	max-width: calc(292px - 1em);
		    	height: auto;
		    }
	    }
	}
	
	.infobox-subheader {
		background: var(--table-subheader);
		font-weight: bold;
		text-align: center;
		color: @white;
	}
	
	.infobox-padding {
		background: @infobox-lighter;
		height: 20px;
		border-radius: 16px;
	}
	
	th:not(.infobox-header):not(.infobox-subheader):not(.infobox-nested) {
		text-align: right;
		padding: 0.2em 0.5em;
	}
	
	select {
		max-width: 300px;
	}
	
	a,
	a:hover,
	a:visited,
	a:active {
		color: @infobox-link;
	}
	
	/* INFOBOX CLASS/EPISODE VARIANTS */
	
	.infobox-card(@lightColor, @darkColor, @imagePath) {
        background-color: @lightColor;
        tr > * {
            background-color: @darkColor;
        }
        .infobox-image {
            background-image: url("@{imagePath}");
        }
        .infobox-padding {
            background-color: @lightColor;
        }
        a,
        a:hover,
        a:visited,
        a:active {
            color: lighten(@lightColor, 10%);
        }
    }

    &.infobox-Hopeport {
        .infobox-card(@infobox-lighter-hopeport, @infobox-darker-hopeport, '/images/[email protected]');
    }

    &.infobox-Mine_of_Mantuban {
        .infobox-card(@infobox-lighter-mantuban, @infobox-darker-mantuban, '/images/[email protected]');
    }

    &.infobox-Hopeforest {
        .infobox-card(@infobox-lighter-hopeforest, @infobox-darker-hopeforest, '/images/[email protected]');
    }
    
    &.infobox-Crenopolis {
        .infobox-card(@infobox-lighter-crenopolis, @infobox-darker-crenopolis, '/images/[email protected]');
    }
}

.hidden {
	display: none;
}