User:Merds/CSS/Infobox.css: Difference between revisions
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: |
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 |
border: 1px solid var(--table-header); |
||
background: |
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 |
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>*/