User:盐棋/Sandbox.css

.infotable {
	max-width: 100%;
	display: grid;
	grid-template-columns: auto min-content;
	margin: 1em 0 2em;
	font-size: small;
	line-height: 1.5em;
	text-align: center;
	background-color: #f8f8f8;
	overflow: auto hidden;
	position: relative;
}

.infotable,
.infotable>*,
.infotable .main>* {
	outline: 1px solid #eee;
	box-sizing: border-box;
	overflow-wrap: break-word;
}

.infotable .main>* {
	padding: 5px;
}

.infotable span.label {
	padding: 1px 5px 1px 5px;
	margin: 0 5px 0 5px;
}

/* 媒体查询 */
@media (min-width: 720px) {
	.infotable {
		grid-template-areas:
			"header header"
			"main figure";
	}
}

@media (max-width: 720px) {
	.infotable {
		grid-template-areas:
			"header"
			"figure"
			"main";
	}
}

/* 设置 grid area */
.infotable .header {
	grid-area: header;
	padding: 7px 10px;
	height: auto !important;
}

.infotable .main {
	grid-area: main;
	display: grid;
}

.infotable .figure {
	grid-area: figure;
	padding: 9px 5px;
}

.place-central {
	display: flex;
	justify-content: center;
	align-items: center;
}

.infotable.light .bg-c {
	background-color: lightskyblue;
}

.infotable.conflict .bg-c {
	background-color: #b99afd;
}

.infotable.colorless .bg-c {
	background-color: #f4d2f8;
}

.fs-m {
	font-size: medium;
}

.fs-l {
	font-size: large;
}

.repeat-1 {
	grid-template-columns: 1fr repeat(1, 2fr);
}

.repeat-3 {
	grid-template-columns: 1fr repeat(3, 2fr);
}

.repeat-4 {
	grid-template-columns: 1fr repeat(4, 2fr);
}

.repeat-5 {
	grid-template-columns: 1fr repeat(5, 2fr);
}

.gc-1 {
	grid-column: 1/-1;
}

.gc-2 {
	grid-column: 2/-1;
}

.gc-s2 {
	grid-column: span 2;
}

.gc-s3 {
	grid-column: span 3;
}

.gc-s4 {
	grid-column: span 4;
}

.gc-s5 {
	grid-column: span 5;
}

.gr-s2 {
	grid-row: span 2;
}