MediaWiki:Common.css: Difference between revisions

← Older edit Newer edit →

@@ Line 1,153: / Line 1,153: @@
 .wizlords-class-category-table {
-	width: auto;
+	width: 100%;
-	min-width: 520px;
+	min-width: 0;
-	max-width: 680px;
+	max-width: 760px;
 	margin: 18px auto 24px;
-	border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d) !important;
+	border: 0 !important;
 	background: #171717;
 	color: var(--wiz-text, #d2d2d2);
 	border-collapse: collapse;
-	table-layout: auto;
+	table-layout: fixed;
 }
 .wizlords-class-category-table th,
 .wizlords-class-category-table td {
-	min-width: 150px;
+	box-sizing: border-box;
+	width: 33.333%;
+	min-width: 0;
 	border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d) !important;
 	vertical-align: top;
@@ Line 1,220: / Line 1,222: @@
 	color: var(--wiz-link, #ff942d);
 	text-decoration: none;
+}
+/* Very narrow phones: the MediaWiki table renders as one header row followed
+   by one list row. Re-map those six cells into three two-column category rows
+   so the component changes structure instead of scrolling sideways. */
+@media (max-width: 490px) {
+	.wizlords-class-category-table {
+		display: grid;
+		grid-template-columns: 38% 62%;
+		width: 100%;
+		max-width: 100%;
+		margin: 18px auto 24px;
+		border: 0 !important;
+		border-collapse: separate;
+		border-spacing: 0;
+		table-layout: auto;
+		overflow: visible;
+	}
+	.wizlords-class-category-table tbody,
+	.wizlords-class-category-table tr {
+		display: contents;
+	}
+	.wizlords-class-category-table th,
+	.wizlords-class-category-table td {
+		display: block;
+		width: 100%;
+		min-width: 0;
+		border: 0 !important;
+		border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
+	}
+	.wizlords-class-category-table th {
+		grid-column: 1;
+		padding: 8px 8px !important;
+		border-right: 1px solid rgba(255, 255, 255, 0.18) !important;
+		text-align: center;
+	}
+	.wizlords-class-category-table td {
+		grid-column: 2;
+		padding: 8px 10px !important;
+	}
+	.wizlords-class-category-table th:nth-child(1) {
+		grid-row: 1;
+	}
+	.wizlords-class-category-table tr:nth-child(2) td:nth-child(1) {
+		grid-row: 1;
+	}
+	.wizlords-class-category-table th:nth-child(2) {
+		grid-row: 2;
+	}
+	.wizlords-class-category-table tr:nth-child(2) td:nth-child(2) {
+		grid-row: 2;
+	}
+	.wizlords-class-category-table th:nth-child(3) {
+		grid-row: 3;
+	}
+	.wizlords-class-category-table tr:nth-child(2) td:nth-child(3) {
+		grid-row: 3;
+	}
+	.wizlords-class-category-icon {
+		margin-bottom: 4px;
+	}
+	.wizlords-class-category-icon img {
+		width: 64px;
+		height: auto;
+		max-width: 100%;
+	}
+	.wizlords-class-category-table ul {
+		margin: 0;
+		padding-left: 18px;
+	}
 }