Module:Infobox/styles.css

.infobox { /* In case if tooltips go out of boundary */ overflow: visible; width: 100%; max-width: 400px; margin-top: 0; margin-bottom: var( --space-md ); background: var( --color-surface-2 ); border-radius: var( --border-radius--medium ); border-spacing: 0; font-size: 0.875rem; text-align: left; display: block; }

/* Table elements */ .infobox tbody { display: flex; flex-wrap: wrap; }

.infobox tr { display: flex; box-sizing: border-box; flex-direction: column; padding: 0 10px; margin-top: 10px; }

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

/* 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 { overflow: hidden; padding: 0; margin-top: 0; border-radius: var( --border-radius--medium ) var( --border-radius--medium ) 0 0; }

.infobox-image td { padding: 0; }

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

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

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

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

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

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

/* Infobox indicator */ .infobox .infobox-indicator { margin-top: 0; padding: 0; }

/* Infobox subtitle */ .infobox .infobox-subtitle { /* Cancel infobox-title bottom margin */ margin-top: -5px; margin-bottom: 5px; }

.infobox .infobox-indicator th, .infobox .infobox-subtitle th { display: none; }

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

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

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

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

/* Infobox button */ .infobox .infobox-button-bar { width: 100%; padding: 0; margin-top: 25px; 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 .mw-collapsible-text { position: absolute; right: 0; display: block; padding: 5px 15px; background: var( --color-destructive ); border-radius: 0 var( --border-radius--medium ); color: #fff; }

.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-right: auto; margin-left: auto; }

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