.infobox { /* In case if tooltips go out of boundary */ overflow: visible; width: 100%; max-width: 400px; margin-top: 0; margin-bottom: 1.6rem; background: var( --color-surface-2 ); border-radius: var( --border-radius--medium ); border-spacing: 0; box-shadow: var( --box-shadow-card ); font-size: 0.875rem; text-align: left; display: block; } /* Table elements */ .infobox tbody { display: flex; flex-wrap: wrap; } .infobox.infobox-vertical-stack tbody { flex-direction: column; flex-wrap: nowrap; } .infobox.infobox-vertical-stack .description { flex: 1 1 auto; text-align: center; } .infobox tr { display: flex; flex: 1 1 auto; box-sizing: border-box; flex-direction: column; padding: 0 10px; margin-top: 10px; } .infobox.infobox-vertical-stack tr { flex-direction: row; margin-top: 0; padding: 8px; border-top: 1px solid rgba(0,0,0,0.1); } .infobox.infobox-vertical-stack tr td.misc {} .infobox.infobox-vertical-stack tr + .infobox.infobox-vertical-stack tr:not(:empty) { padding: 0; border-top: none; } .skin-citizen-dark .infobox.infobox-vertical-stack tr { border-top-color: rgba(255, 255, 255, 0.1); } .infobox.infobox-vertical-stack tr:first-child { border-top: none; } .infobox.infobox-vertical-stack tr td { flex: 1 1 auto; } .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 td .image { display: block; } .infobox td .image > img { width: 100%; height: unset; } .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: 1.4rem; line-height: 1.4; } /* 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 ); 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; } }