https://cm-ss13.com/index.php?action=history&feed=atom&title=Module%3AInfobox%2Fstyles.css 2026-04-09T14:02:57Z Revision history for this page on the wiki MediaWiki 1.43.6 https://cm-ss13.com/w/index.php?title=Module:Infobox/styles.css&diff=26440&oldid=prev 2023-09-07T07:00:57Z

<p>Created page with &quot;.infobox { <span class="autocomment">In case if tooltips go out of boundary: </span> 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; } <span class="autocomment">Table elements: </span> .infobox tbody { display: flex; flex-wrap: wrap; } .infobox tr { display: flex; box-sizing: border-box; flex-direction:...&quot;</p> <p><b>New page</b></p><div>.infobox {<br /> /* In case if tooltips go out of boundary */<br /> overflow: visible;<br /> width: 100%;<br /> max-width: 400px;<br /> margin-top: 0;<br /> margin-bottom: var( --space-md );<br /> background: var( --color-surface-2 );<br /> border-radius: var( --border-radius--medium );<br /> border-spacing: 0;<br /> font-size: 0.875rem;<br /> text-align: left;<br /> display: block;<br /> }<br /> <br /> /* Table elements */<br /> .infobox tbody {<br /> display: flex;<br /> flex-wrap: wrap;<br /> }<br /> <br /> .infobox tr {<br /> display: flex;<br /> box-sizing: border-box;<br /> flex-direction: column;<br /> padding: 0 10px;<br /> margin-top: 10px;<br /> }<br /> <br /> .infobox th,<br /> .infobox td {<br /> padding: 0 5px;<br /> }<br /> <br /> /* Infobox column */<br /> .infobox .infobox-nocol {<br /> width: 100%;<br /> flex-direction: row;<br /> }<br /> <br /> .infobox .infobox-nocol th {<br /> width: 30%;<br /> }<br /> <br /> .infobox .infobox-nocol td {<br /> width: 70%;<br /> }<br /> <br /> .infobox .infobox-col1 {<br /> width: 100%;<br /> }<br /> <br /> .infobox .infobox-col2 {<br /> width: 50%;<br /> }<br /> <br /> .infobox .infobox-col3 {<br /> width: calc( 100% / 3 );<br /> }<br /> <br /> .infobox .infobox-col4 {<br /> width: 25%;<br /> }<br /> <br /> .infobox-data {<br /> min-width: 25%;<br /> }<br /> <br /> /* Infobox image */<br /> .infobox .infobox-image {<br /> overflow: hidden;<br /> padding: 0;<br /> margin-top: 0;<br /> border-radius: var( --border-radius--medium ) var( --border-radius--medium ) 0 0;<br /> }<br /> <br /> .infobox-image td {<br /> padding: 0;<br /> }<br /> <br /> .infobox-image--light .image {<br /> background: #eaecf0;<br /> }<br /> <br /> .infobox-image--dark .image {<br /> background: #2b2f36;<br /> }<br /> <br /> .infobox-image .image:hover img {<br /> transform: scale( 1.1 );<br /> }<br /> <br /> .infobox-image img {<br /> display: block;<br /> max-width: 100%;<br /> background: var( --background-color-quiet--hover );<br /> }<br /> <br /> /* Neutral background for all transprent SVG */<br /> .infobox-image img[ src$=&#039;.svg&#039; ] {<br /> background: #eaecf0;<br /> }<br /> <br /> /* Infobox title */<br /> .infobox .infobox-title {<br /> width: 100%;<br /> margin-top: 20px;<br /> margin-bottom: 5px;<br /> color: var( --color-base--emphasized );<br /> font-size: var( --font-size-h3 );<br /> line-height: var( --line-height-xs );<br /> }<br /> <br /> /* Infobox indicator */<br /> .infobox .infobox-indicator {<br /> margin-top: 0;<br /> padding: 0;<br /> }<br /> <br /> /* Infobox subtitle */<br /> .infobox .infobox-subtitle {<br /> /* Cancel infobox-title bottom margin */<br /> margin-top: -5px;<br /> margin-bottom: 5px;<br /> }<br /> <br /> .infobox .infobox-indicator th,<br /> .infobox .infobox-subtitle th {<br /> display: none;<br /> }<br /> <br /> /* Infobox header */<br /> .infobox .infobox-header {<br /> width: 100%;<br /> padding-top: 15px;<br /> border-top: 1px solid;<br /> border-color: var( --border-color-base );<br /> margin-top: 15px;<br /> color: var( --color-base--emphasized );<br /> line-height: var( --line-height-xs );<br /> font-size: 1rem;<br /> }<br /> <br /> /* Infobox value */<br /> .infobox-data th {<br /> color: var( --color-base--subtle );<br /> font-size: 0.8125rem;<br /> font-weight: normal;<br /> letter-spacing: 0.75px;<br /> }<br /> <br /> .infobox-data td {<br /> font-weight: 600;<br /> }<br /> <br /> .infobox-data ul,<br /> .infobox-data ol {<br /> margin-top: 0;<br /> }<br /> <br /> /* Infobox button */<br /> .infobox .infobox-button-bar {<br /> width: 100%;<br /> padding: 0;<br /> margin-top: 25px;<br /> text-align: center;<br /> }<br /> <br /> .infobox-button-bar th {<br /> padding: 0;<br /> }<br /> <br /> /* Collapsible toggle */<br /> .infobox tr:first-of-type .mw-collapsible-toggle {<br /> position: relative;<br /> display: none;<br /> float: none;<br /> }<br /> <br /> .infobox tr:first-of-type .mw-collapsible-toggle .mw-collapsible-text {<br /> position: absolute;<br /> right: 0;<br /> display: block;<br /> padding: 5px 15px;<br /> background: var( --color-destructive );<br /> border-radius: 0 var( --border-radius--medium );<br /> color: #fff;<br /> }<br /> <br /> .infobox tr:first-of-type .mw-collapsible-toggle .mw-collapsible-text:hover {<br /> background: var( --color-destructive--hover );<br /> }<br /> <br /> .infobox tr:first-of-type .mw-collapsible-toggle .mw-collapsible-text:active {<br /> background: var( --color-destructive--active );<br /> }<br /> <br /> .infobox tr:first-of-type .mw-collapsible-toggle-collapsed .mw-collapsible-text {<br /> background: var( --color-primary );<br /> }<br /> <br /> .infobox tr:first-of-type .mw-collapsible-toggle-collapsed .mw-collapsible-text:hover {<br /> background: var( --color-primary--hover );<br /> }<br /> <br /> .infobox tr:first-of-type .mw-collapsible-toggle-collapsed .mw-collapsible-text:active {<br /> background: var( --color-primary--active );<br /> }<br /> <br /> .infobox tr:first-of-type .mw-collapsible-toggle:before,<br /> .infobox tr:first-of-type .mw-collapsible-toggle:after {<br /> content: none;<br /> }<br /> <br /> @media only screen and ( max-width: 720px ) {<br /> .infobox {<br /> margin-right: auto;<br /> margin-left: auto;<br /> }<br /> <br /> .infobox tr:first-of-type .mw-collapsible-toggle {<br /> display: block;<br /> }<br /> }</div>

Harryob