Want to contribute? Join the Discord and ask for the editor role.
Template:Infobox/styles.css: Difference between revisions
Template page
m (1 revision imported) |
No edit summary |
||
(4 intermediate revisions by the same user not shown) | |||
Line 192: | Line 192: | ||
/* Dark mode */ | /* Dark mode */ | ||
html.skin-citizen-dark .infobox { | |||
background: #222629; | |||
} | |||
html.skin-citizen-dark tr.infobox-header { | |||
border-color: #292d31; | |||
} | |||
html.skin-citizen-dark .infobox-data th { | |||
color: #a0a1a5; | |||
} | |||
html.skin-citizen-dark .infobox-image td { | |||
background: #25282b; | |||
} | } |
Latest revision as of 00:34, 7 May 2021
.infobox {
margin-top: 0rem!important;
border-spacing: 0;
border-radius: 12px;
z-index: 3!important;
/* base-90 */
background: #f8f9fa;
font-size: 0.875rem;
text-align: left;
/* boxshadow-2 */
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.04), 0 3px 6px rgba(0, 0, 0, 0.0575);
/* In case if tooltips go out of boundary */
overflow: visible;
}
.infobox-nocol {
width: 100%;
flex-direction: row !important;
}
.infobox-nocol th {
width: 30%;
}
.infobox-nocol td {
width: 70%;
}
.infobox-col1 {
width: 100%;
}
.infobox-col2 {
width: 50%;
}
.infobox-col3 {
width: calc(100% / 3);
}
.infobox-col4 {
width: 25%;
}
.infobox-data {
min-width: 25%;
}
.infobox tbody {
display: flex;
flex-wrap: wrap;
}
.infobox tr:first-of-type .mw-collapsible-toggle {
display: none;
float: unset;
}
.infobox tr:first-of-type .mw-collapsible-toggle a.mw-collapsible-text {
position: absolute;
right: 0;
border-radius: 0 12px;
padding: 5px 15px;
background: #d33 !important;
color: white;
display: block;
}
.infobox tr:first-of-type .mw-collapsible-toggle a.mw-collapsible-text:hover {
background: #b32424 !important;
}
.infobox tr:first-of-type .mw-collapsible-toggle.mw-collapsible-toggle-collapsed a.mw-collapsible-text {
background: #36c !important;
}
.infobox tr:first-of-type .mw-collapsible-toggle.mw-collapsible-toggle-collapsed a.mw-collapsible-text:hover {
background: #2a4b8d !important;
}
.infobox tr:first-of-type .mw-collapsible-toggle:before,
.infobox tr:first-of-type .mw-collapsible-toggle:after {
content: none;
}
.infobox tr:not(.infobox-image) {
margin-top: 10px;
display: flex;
flex-direction: column;
}
.infobox th,
.infobox td {
padding: 0 20px;
}
.infobox-title,
.infobox-header,
.infobox-button-bar {
width: 100%;
}
.infobox-title th,
.infobox-header th {
text-align: left !important;
}
tr.infobox-title {
margin-top: 20px !important;
margin-bottom: 5px;
}
.infobox-title th {
font-size: 1.4rem;
line-height: 1.4;
}
tr.infobox-header {
padding-top: 15px;
/* base-80 */
border-top: 1px solid #eaecf0;
}
tr.infobox-header {
margin-top: 15px !important;
}
tr.infobox-button-bar {
margin-top: 25px !important;
}
.infobox-header th {
font-size: 1rem;
}
.infobox-button-bar th,
.infobox-image td {
padding: 0;
}
.infobox-image td {
background: #eaecf0;
}
.infobox-image {
border-radius: 12px 12px 0 0;
overflow: hidden;
}
.infobox-image--light .image {
background: #eaecf0;
}
.infobox-image--dark .image {
background: #2b2f36;
}
.infobox-data th {
/* base-30 */
color: #72777d;
font-weight: normal;
font-size: 0.8125rem;
letter-spacing: .75px;
}
.infobox-data td {
text-align: left!important;
font-weight: bold;
}
.infobox-data ul,
.infobox-data ol {
margin-top: 0;
}
/* Screen0 */
@media only screen and (max-width: 720px) {
.infobox {
margin-bottom: 1.6rem !important;
padding: 0 !important;
}
.infobox tr:first-of-type .mw-collapsible-toggle {
display: block;
}
.infobox-image img {
width: 100vw !important;
height: auto !important;
}
}
/* Dark mode */
html.skin-citizen-dark .infobox {
background: #222629;
}
html.skin-citizen-dark tr.infobox-header {
border-color: #292d31;
}
html.skin-citizen-dark .infobox-data th {
color: #a0a1a5;
}
html.skin-citizen-dark .infobox-image td {
background: #25282b;
}