Template:InfoBox/styles.css: Difference between revisions
From Ymirheim Wiki
(Created page with ".infobox-wrapper { float: right; position: relative; width: 300px; margin: 0 0 1em 1em; } .infobox { background: rgba(0, 0, 0, 0.8); font-size: 0.923em; border: 1px solid #FFF; border-radius: 5px; box-shadow: 0 0 5px black; padding: 5px; color: #FFF; } .infobox .heading { font-size: 1.2em; font-weight: bold; text-align: center; } .infobox .infobox-image { text-align: center; } .infobox .infobox-table th { text-align: left; vertical-align: top; } .in...") |
No edit summary |
||
(20 intermediate revisions by the same user not shown) | |||
Line 4: | Line 4: | ||
width: 300px; | width: 300px; | ||
margin: 0 0 1em 1em; | margin: 0 0 1em 1em; | ||
display: flex; | |||
flex-flow: column; | |||
justify-content: center; | |||
align-items: center; | |||
} | |||
/* Nested infobox wrappers should display below the original infobox */ | |||
.infobox-wrapper > .infobox-wrapper { | |||
float: none; | |||
width: 300px; | |||
margin: 1em 0 0 0; | |||
} | |||
@media screen and (max-width: 850px) { | |||
.infobox-wrapper { | |||
width: 100%; | |||
} | |||
} | } | ||
.infobox { | .infobox { | ||
width: 300px; | |||
background: rgba(0, 0, 0, 0.8); | background: rgba(0, 0, 0, 0.8); | ||
font-size: 0.923em; | font-size: 0.923em; | ||
Line 14: | Line 32: | ||
padding: 5px; | padding: 5px; | ||
color: #FFF; | color: #FFF; | ||
} | |||
body.theme-ymirheim-dark .infobox, | |||
body.theme-ymirheim.prefers-color-scheme-dark .infobox { | |||
background: rgba(0, 0, 0, 0.4); | |||
} | |||
.infobox-hint { | |||
width: 300px; | |||
text-align: right; | |||
font-size: small; | |||
} | } | ||
Line 24: | Line 53: | ||
.infobox .infobox-image { | .infobox .infobox-image { | ||
text-align: center; | text-align: center; | ||
} | |||
.infobox .infobox-table { | |||
width: 100%; | |||
} | |||
.infobox .infobox-table td:first-child, | |||
.infobox .infobox-table th:first-child { | |||
min-width: 45%; | |||
} | } | ||
.infobox .infobox-table th { | .infobox .infobox-table th { | ||
text-align: | text-align: right; | ||
vertical-align: top; | vertical-align: top; | ||
padding-right: 0.5em; | |||
} | } | ||
Latest revision as of 07:27, 12 July 2024
.infobox-wrapper {
float: right;
position: relative;
width: 300px;
margin: 0 0 1em 1em;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
}
/* Nested infobox wrappers should display below the original infobox */
.infobox-wrapper > .infobox-wrapper {
float: none;
width: 300px;
margin: 1em 0 0 0;
}
@media screen and (max-width: 850px) {
.infobox-wrapper {
width: 100%;
}
}
.infobox {
width: 300px;
background: rgba(0, 0, 0, 0.8);
font-size: 0.923em;
border: 1px solid #FFF;
border-radius: 5px;
box-shadow: 0 0 5px black;
padding: 5px;
color: #FFF;
}
body.theme-ymirheim-dark .infobox,
body.theme-ymirheim.prefers-color-scheme-dark .infobox {
background: rgba(0, 0, 0, 0.4);
}
.infobox-hint {
width: 300px;
text-align: right;
font-size: small;
}
.infobox .heading {
font-size: 1.2em;
font-weight: bold;
text-align: center;
}
.infobox .infobox-image {
text-align: center;
}
.infobox .infobox-table {
width: 100%;
}
.infobox .infobox-table td:first-child,
.infobox .infobox-table th:first-child {
min-width: 45%;
}
.infobox .infobox-table th {
text-align: right;
vertical-align: top;
padding-right: 0.5em;
}
.infobox .infobox-table ul {
margin: 0;
list-style: none;
}