Template:VerticalGrid/styles.css: Difference between revisions

From Rhythm Heaven Wiki
Jump to navigation Jump to search
(Add more optional classes)
(More optional classes)
 
Line 13: Line 13:
white-space: nowrap;
white-space: nowrap;
}
}
.vertical-grid.vg-compact {
.vg-compact {
grid-auto-columns: max-content;
grid-auto-columns: max-content;
}
}
.vertical-grid.vg-row-numbered {
.vg-compact-centered {
grid-auto-columns: max-content;
width: max-content;
margin: 0 auto;
}
.vg-row-centered {
align-items: center;
}
.vg-row-numbered {
row-gap: 1em;
row-gap: 1em;
grid-template-columns: max-content;
grid-template-columns: max-content;
}
}
.vertical-grid.vg-row-numbered > .vgc-row-number {
.vg-row-numbered > .vgc-row-number {
grid-column: 1;
grid-column: 1;
align-self: stretch;
align-self: stretch;

Latest revision as of 12:06, 24 September 2025

.vertical-grid {
	max-width: 100%;
	overflow: auto;
	display: grid;
	grid-auto-flow: column dense;
	grid-auto-columns: minmax(16em, 1fr);
	column-gap: 2em;
}
.vertical-grid.nowrap {
	grid-auto-columns: minmax(max-content, 1fr);
}
.vertical-grid-cell.nowrap {
	white-space: nowrap;
}
.vg-compact {
	grid-auto-columns: max-content;
}
.vg-compact-centered {
	grid-auto-columns: max-content;
	width: max-content;
	margin: 0 auto;
}
.vg-row-centered {
	align-items: center;
}
.vg-row-numbered {
	row-gap: 1em;
	grid-template-columns: max-content;
}
.vg-row-numbered > .vgc-row-number {
	grid-column: 1;
	align-self: stretch;
	border-right: 1px solid #A2A9B1;
	padding-right: 0.5em;
	text-align: right;
}
body.mw-mf .vertical-grid {
	font-size: 90%;
}