More actions
(Created page with ".infobox { margin-bottom: var( --space-md ); background: var( --color-surface-2 ); max-width: 500px; font-size: 0.875rem; text-align: left; display: block; }") |
No edit summary |
||
Line 1: | Line 1: | ||
/* From https://starcitizen.tools/Module:Infobox/styles.css | |||
Licenced under Creative Commons Attribution-ShareAlike license. | |||
*/ | |||
.infobox { | .infobox { | ||
/* In case if tooltips go out of boundary */ | |||
overflow: visible; | |||
width: 100%; | |||
max-width: 400px; | |||
margin-top: 0; | |||
margin-bottom: var( --space-md ); | margin-bottom: var( --space-md ); | ||
background: var( --color-surface-2 ); | background: var( --color-surface-2 ); | ||
border-radius: var( --border-radius--medium ); | |||
border-spacing: 0; | |||
font-size: 0.875rem; | font-size: 0.875rem; | ||
text-align: left; | text-align: left; | ||
display: block; | 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; | |||
} | |||
} | } |
Revision as of 13:48, 12 November 2023
/* From https://starcitizen.tools/Module:Infobox/styles.css Licenced under Creative Commons Attribution-ShareAlike license. */ .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; } }