Toggle search
Search
Toggle menu
Notifications
Toggle personal menu
Editing
Template:Infobox/styles.css
Template page
Views
Read
Edit
View history
associated-pages
Template
Discussion
More actions
Warning:
You are not logged in. Your IP address will be publicly visible if you make any edits. If you
log in
or
create an account
, your edits will be attributed to your username, along with other benefits.
Anti-spam check. Do
not
fill this in!
.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; } /* 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: 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; } }
Summary:
Please note that all contributions to WoopMC may be edited, altered, or removed by other contributors. If you do not want your writing to be edited mercilessly, then do not submit it here.
You are also promising us that you wrote this yourself, or copied it from a public domain or similar free resource (see
WoopMC:Copyrights
for details).
Do not submit copyrighted work without permission!
Cancel
Editing help
(opens in new window)