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

From Brighter Shores Wiki
Jump to navigation Jump to search
Content added Content deleted
No edit summary
No edit summary
Line 11: Line 11:
.infobox {
.infobox {
font-size: .85em;
font-size: .85em;
width: 300px;
width: 300px;
border-collapse: collapse;
border-collapse: collapse;
float: right;
float: right;
table-layout: fixed;
table-layout: fixed;
margin: 0.5em 0 1em 1em;
margin: 0.5em 0 1em 1em;
.infobox-buttons {
display: flex;
flex-wrap: wrap;
justify-content: center;
grid-gap: 3px;
margin-bottom: 3px;
.button {
background: var(--table-header);
padding: 0 5px;
font-weight: bold;
flex: 1 1 20%;
max-width: 20%;
color: @color_1;
}
}
tbody {
border: 1px solid var(--table-border);
background: var(--table-body);
box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(231, 215, 199, 0.5);
}
.infobox-header {
background: var(--table-header);
padding: 0.5em 0;
text-align: center;
color: @color_1;
font-size: 1.15em;
font-weight: bold;
line-height: 1.4em;
}
.infobox-image {
text-align: center;
background: var(--body-main);
}
.infobox-subheader {
background: var(--table-subheader);
font-weight: bold;
text-align: center;
color: @color_1;
}
.infobox-padding {
backgound: var(--table-body);
}
tr td &:not(.infobox-padding) {
padding: 0.2em 0.5em;
}
th &:not(.infobox-header) &:not(.infobox-subheader) &:not(.infobox-nested) {
border-right: 2px solid var(--table-subheader);
text-align: right;
padding: 0.2em 0.5em;
}
}
}


.infobox .infobox-buttons {
display: flex;
flex-wrap: wrap;
justify-content: center;
grid-gap: 3px;
margin-bottom: 3px;
}

.infobox .infobox-buttons .button {
background: var(--table-header);
padding: 0 5px;
font-weight: bold;
flex: 1 1 20%;
max-width: 20%;
color: white;
}

.infobox tbody {
border: 1px solid var(--table-border);
background: var(--table-body);
box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(231, 215, 199, 0.5);
}

.infobox .infobox-header {
background: var(--table-header);
padding: 0.5em 0;
text-align: center;
color: white;
font-size: 1.15em;
font-weight: bold;
line-height: 1.4em;
}

.infobox .infobox-image {
text-align: center;
background: var(--body-main);
}

.infobox .infobox-subheader {
background: var(--table-subheader);
font-weight: bold;
text-align: center;
color: white;
}

.infobox .infobox-padding {
backgound: var(--table-body);
}

.infobox tr td:not(.infobox-padding) {
padding: 0.2em 0.5em;
}

.infobox th:not(.infobox-header):not(.infobox-subheader):not(.infobox-nested) {
border-right: 2px solid var(--table-subheader);
text-align: right;
padding: 0.2em 0.5em;
}

/*Hide*/
.hidden {
.hidden {
display: none;
display: none;

Revision as of 01:23, 27 March 2024

:root {
	--infobox-text-color: var(--text-color);
	--table-header: #b1886f;
    --table-subheader: #d1b9ad;
    --table-body: #fff8ee;
    --table-border: #e9d8cc;
}

/* Infobox */

.infobox {
	font-size: .85em;
	width: 300px;
	border-collapse: collapse;
	float: right;
	table-layout: fixed;
	margin: 0.5em 0 1em 1em;
	
	.infobox-buttons {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		grid-gap: 3px;
		margin-bottom: 3px;
		
		.button {
			background: var(--table-header);
			padding: 0 5px;
			font-weight: bold;
			flex: 1 1 20%;
			max-width: 20%;
			color: @color_1;
		}
	}
	
	tbody {
		border: 1px solid var(--table-border);
		background: var(--table-body);
		box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(231, 215, 199, 0.5);
	}
	
	.infobox-header {
		background: var(--table-header);
		padding: 0.5em 0;
		text-align: center;
		color: @color_1;
		font-size: 1.15em;
		font-weight: bold;
		line-height: 1.4em;
	}
	
	.infobox-image {
		text-align: center;
		background: var(--body-main);
	}
	
	.infobox-subheader {
		background: var(--table-subheader);
		font-weight: bold;
		text-align: center;
		color: @color_1;
	}
	
	.infobox-padding {
		backgound: var(--table-body);
	}
	
	tr td &:not(.infobox-padding) {
		padding: 0.2em 0.5em;
	}
	
	th &:not(.infobox-header) &:not(.infobox-subheader) &:not(.infobox-nested) {
		border-right: 2px solid var(--table-subheader);
		text-align: right;
		padding: 0.2em 0.5em;
	}
}

.hidden {
	display: none;
}