Template:Infobox.css
Template page
More actions
.info-wrapper {
float: right;
margin-left: calc(var(--space-unit));
margin-bottom: calc(var(--space-unit));
margin-top: calc(var(--space-unit)/ 8 * -1);
max-width: 360px;
font-family: 'Shippori Mincho', serif;
display: grid;
grid-template-rows: auto;
grid-template-columns: 1fr .6fr 1fr;
row-gap: var(--space-unit);
padding-bottom: calc(var(--space-unit) / 2);
border-bottom: 2px solid var(--gold-1);
color: var(--gold-3);
}
.info-title,
.info-image,
.info-datablock {
grid-column: 1 / 4;
}
.info-image.info-image.info-image {
margin-left: unset;
}
.info-image {
width: 100%;
margin: unset;
border-image: linear-gradient(90deg, var(--gold-1), transparent 30%, transparent 70%, var(--gold-1)) 30;
}
.info-image img {
width: 100%;
height: auto;
}
.info-image {
margin-left: unset;
}
.info-datablock {
display: grid;
grid-template-columns: 1fr .6fr 1fr;
column-gap: var(--space-unit);
font-size: .9em;
align-items: center;
line-height: 1em;
}
dt.infobox {
line-height: 1em;
}
dt.infobox.info-title,
dd.infobox.info-data,
dt.infobox.info-label {
margin: unset;
}
dt.infobox.info-label {
grid-column: 1 / 2;
text-align: right;
font-weight: bold;
}
.info-data {
grid-column: 2 / 4;
text-align: left;
}
.info-title {
font-size: 1.5em;
}
.info-title,
.info-label {
}
.info-title {
display: flex;
gap: calc(var(--space-unit) / 2);
text-align: center;
}
.info-title::before,
.info-title::after
{
display: block;
background-size: 100% 2px;
background-repeat: no-repeat;
background-position: 0 58%;
content: ' ';
min-width: calc(var(--space-unit) * 2);
flex-grow: 1;
}
.info-title::after {
background-image: linear-gradient(90deg, transparent, var(--gold-1));
}
.info-title::before {
background-image: linear-gradient(270deg, transparent, var(--gold-1));
}
@media (min-width: 1201px) {
.info-wrapper {
margin-right: calc(var(--space) * 18 * -1);
}
}
@media (max-width: 1120px) {
}
@media (max-width: 640px) {
.info-wrapper {
float: unset;
width: auto;
max-width: unset;
margin-top: unset;
margin: 0;
}
.info-title:first-child {
display: none;
}
}