/* {{pp-template}} */
.version-legend{
display:flex;
flex-wrap:wrap;
column-gap:12px;
}
.version-legend-vertical{
display:flex;
flex-wrap:wrap;
column-gap:4px;
flex-direction:column;
}
.version-legend.legend-item,
.version-legend-vertical.legend-item{
page-break-inside:avoid;
break-inside:avoid-column;
gap:4px;
}
.version-legend.legend-item.swatch,
.version-legend-vertical.legend-item.swatch{
display:inline-block;
width:1.25em;
height:1.25em;
border:1pxsolid#aaa;
margin-top:1px;
}
/* Colors */
.swatch-unsupported{
background-color:#fdb3ab;
}
.swatch-maintained{
background-color:#f8eaba;
}
.swatch-latest{
background-color:#d4f4b4;
}
.swatch-preview{
background-color:#c1e6f5;
}
.swatch-future{
background-color:#f2e2fc;
}
/* Dark mode colors */
@mediascreen{
html.skin-theme-clientpref-night.version-legend.legend-item.swatch,
html.skin-theme-clientpref-night
.version-legend-vertical
.legend-item
.swatch{
border-color:#72777d;
}
html.skin-theme-clientpref-night.swatch-unsupported{
background-color:#421511;
}
html.skin-theme-clientpref-night.swatch-maintained{
background-color:#433500;
}
html.skin-theme-clientpref-night.swatch-latest{
background-color:#334423;
}
html.skin-theme-clientpref-night.swatch-preview{
background-color:#154467;
}
html.skin-theme-clientpref-night.swatch-future{
background-color:#3C2e69;
}
}
@mediascreenand(prefers-color-scheme:dark){
html.skin-theme-clientpref-os.version-legend.legend-item.swatch,
html.skin-theme-clientpref-os.version-legend-vertical.legend-item.swatch{
border-color:#72777d;
}
html.skin-theme-clientpref-os.swatch-unsupported{
background-color:#421511;
}
html.skin-theme-clientpref-os.swatch-maintained{
background-color:#433500;
}
html.skin-theme-clientpref-os.swatch-latest{
background-color:#334423;
}
html.skin-theme-clientpref-os.swatch-preview{
background-color:#154467;
}
html.skin-theme-clientpref-os.swatch-future{
background-color:#3C2e69;
}
}