Template:Infobox/styles.css

.infobox { width: 100%; max-width: 400px; border-spacing: 0; border-radius: 12px; float: right; clear: right; background: var(--background-color-framed); font-size: 0.875rem; text-align: left; /* boxshadow-2 */ box-shadow: 0 3px 6px rgba(0, 0, 0, 0.04), 0 3px 6px rgba(0, 0, 0, 0.0575); /* In case if tooltips go out of boundary */ overflow: visible; padding-bottom: 1em; margin: 0.5em 0 0.5em 1em; }

/* Table elements */ .infobox tbody { display: flex; flex-wrap: wrap; justify-content: space-between; }

.infobox tr { display: flex; flex-direction: column; box-sizing: border-box; }

.infobox th, .infobox td { padding: 0 10px; }

/* Infobox column */ .infobox .infobox-nocol { width: 100%; flex-direction: row; }

.infobox .infobox-nocol th { width: 30%; }

.infobox .infobox-nocol td { width: 70%; }

.infobox .infobox-col1 { width: 100%; }

.infobox .infobox-col2 { width: 50%; }

.infobox .infobox-col3 { width: calc(100% / 3); }

.infobox .infobox-col4 { width: 25%; }

.infobox-data { min-width: 25%; }

/* Infobox image */ .infobox .infobox-image { padding: 0 !important; border-radius: 12px 12px 0 0; overflow: hidden; text-align: center; margin: 0 auto; width: 100%; }

.infobox-image td { padding: 0; }

img { margin: 0 auto; }

.infobox-image--light .image { background: #eaecf0; }

.infobox-image--dark .image { background: #2b2f36; }

.infobox-image .image:hover img { transform: scale( 1.1 ); }

.infobox-image .image img { max-width: 100%; display: block; /*background: var(--background-color-quiet--hover);*/ }

/* Neutral background for all transprent SVG .infobox-image .image img[src$=".svg"] { background: #eaecf0; }*/

/* Infobox title */ .infobox .infobox-title { margin-top: 20px; margin-bottom: 5px; width: 100%; color: var(--color-base--emphasized); font-size: 1.4rem; line-height: 1.4; }

/* Infobox header */ .infobox .infobox-header { margin-top: 15px; padding-top: 15px; width: 100%; color: var(--color-base--emphasized); border-top: 1px solid; border-color: var(--border-color-base); font-size: 1rem; }

/* Infobox value */ .infobox-data th { color: var(--color-base--subtle); font-weight: normal; font-size: 0.8125rem; letter-spacing: .75px; }

.infobox-data td { font-weight: bold; }

.infobox-data ul, .infobox-data ol { margin-top: 0; }

/* Infobox button */ .infobox .infobox-button-bar { margin-top: 25px; padding: 0; width: 100%; text-align: center; }

.infobox-button-bar th { padding: 0; }

/* Collapsible toggle */ .infobox tr:first-of-type .mw-collapsible-toggle { position: relative; display: none; float: none; }

.infobox tr:first-of-type .mw-collapsible-toggle a.mw-collapsible-text { position: absolute; top: 0; right: 0; border-radius: 0 12px; padding: 5px 15px; background: var(--color-destructive); color: white; display: block; }

.infobox tr:first-of-type .mw-collapsible-toggle .mw-collapsible-text:hover { background: var(--color-destructive--hover); }

.infobox tr:first-of-type .mw-collapsible-toggle .mw-collapsible-text:active { background: var(--color-destructive--active); }

.infobox tr:first-of-type .mw-collapsible-toggle-collapsed .mw-collapsible-text { background: var(--color-primary); }

.infobox tr:first-of-type .mw-collapsible-toggle-collapsed .mw-collapsible-text:hover { background: var(--color-primary--hover); }

.infobox tr:first-of-type .mw-collapsible-toggle-collapsed .mw-collapsible-text:active { background: var(--color-primary--active); }

.infobox tr:first-of-type .mw-collapsible-toggle:before, .infobox tr:first-of-type .mw-collapsible-toggle:after { content: none; }

@media only screen and (max-width: 720px) { .infobox { margin-left: auto; margin-right: auto; }

.infobox tr:first-of-type .mw-collapsible-toggle { display: block; } }

.infobox.scrypt { width: 22em; }

.infobox.scrypt caption, .infobox.scrypt .infobox-above { font-size: 125%; font-weight: bold; text-align: center; }

.infobox.scrypt .infobox-title { text-align: center; font-size: unset; margin: 0; }

.infobox.scrypt { padding: 1em 0 1em 0; }

.infobox.scrypt tr { display: table-row; }

.infobox.scrypt tbody { display: table-row-group; vertical-align: middle; border-color: inherit; }