User:Merds/CSS/Infobox.css: Difference between revisions

From Brighter Shores Wiki
Jump to navigation Jump to search
Content added Content deleted
No edit summary
No edit summary
Line 1: Line 1:
/*<syntaxhighlight lang="css">*/
/*<syntaxhighlight lang="css">*/
/* variables */
:root {
--table-header: #e7d7c7;
--table-body: #fff8ee;
}

.infobox {
.infobox {
font-size: .85em;
font-size: .85em;
Line 17: Line 23:


.infobox .infobox-buttons .button {
.infobox .infobox-buttons .button {
background: #e6d7c6;;
background: var(--table-header);
padding: 0 5px;
padding: 0 5px;
font-weight: bold;
font-weight: bold;
Line 25: Line 31:


.infobox tbody {
.infobox tbody {
border: 1px solid #e6d7c6;
border: 1px solid var(--table-header);
background: #fff8ee;
background: var(--table-body);
}

.infobox .infobox-subheader {
background: var(--table-header);
}
}


.infobox .infobox-image {
.infobox .infobox-image {
text-align: center;
text-align: center;
}

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


Line 38: Line 52:


.infobox th:not(.infobox-header):not(.infobox-subheader):not(.infobox-nested) {
.infobox th:not(.infobox-header):not(.infobox-subheader):not(.infobox-nested) {
border-right: 2px solid #e7d7c7;
border-right: 2px solid var(--table-header);
}
}



Revision as of 00:39, 27 March 2024

/*<syntaxhighlight lang="css">*/
/* variables */
:root {
	--table-header: #e7d7c7;
	--table-body: #fff8ee;
}

.infobox {
	font-size: .85em;
    width: 300px;
    border-collapse: collapse;
    float: right;
    table-layout: fixed;
}

.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%;
}

.infobox tbody {
    border: 1px solid var(--table-header);
    background: var(--table-body);
}

.infobox .infobox-subheader {
	background: var(--table-header);
}

.infobox .infobox-image {
    text-align: center;
}

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

.infobox tr > td:not(.infobox-padding) {
    padding: 3px 10px;
}

.infobox th:not(.infobox-header):not(.infobox-subheader):not(.infobox-nested) {
    border-right: 2px solid var(--table-header);
}

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

/*</syntaxhighlight>*/