MediaWiki:Common.css: Difference between revisions

← Older edit Newer edit →

@@ Line 1,224: / Line 1,224: @@
 }
-/* Very narrow phones: the MediaWiki table renders as one header row followed
+.wizlords-class-category-mobile {
-    by one list row. Re-map those six cells into three two-column category rows
+	display: none;
-    so the component changes structure instead of scrolling sideways. */
+}
+/* Very narrow phones: use explicit paired category rows instead of trying to
+   re-map MediaWiki's desktop table, whose headers and lists are rendered in
+    separate table rows. This avoids horizontal scroll and keeps each category
+    as icon/name on the left and class list on the right. */
 @media (max-width: 490px) {
 	.wizlords-class-category-table {
-		display: grid;
+		display: none;
-		grid-template-columns: 38% 62%;
+	}
+	.wizlords-class-category-mobile {
+		display: block;
 		width: 100%;
 		max-width: 100%;
 		margin: 18px auto 24px;
 		border: 0 !important;
-		border-collapse: separate;
-		border-spacing: 0;
-		table-layout: auto;
 		overflow: visible;
+		background: #171717;
+		color: var(--wiz-text, #d2d2d2);
 	}
-	.wizlords-class-category-table tbody,
+	.wizlords-class-category-mobile-row {
-	.wizlords-class-category-table tr {
+		display: grid;
-		display: contents;
+		grid-template-columns: 38% 62%;
+		border: 1px solid var(--wiz-race-table-border-colour, #4d4d4d);
+		border-bottom: 0;
 	}
-	.wizlords-class-category-table th,
+	.wizlords-class-category-mobile-row:last-child {
-	.wizlords-class-category-table td {
+		border-bottom: 1px solid var(--wiz-race-table-border-colour, #4d4d4d);
-		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 {
+	.wizlords-class-category-mobile-heading {
-		grid-column: 1;
+		box-sizing: border-box;
 		padding: 8px 8px !important;
-		border-right: 1px solid rgba(255, 255, 255, 0.18) !important;
+		border-right: 1px solid var(--wiz-race-table-border-colour, #4d4d4d);
+		background: #1f1e1e;
+		color: var(--wiz-heading, #e7e1d4);
+		font-size: 16px;
+		font-weight: bold;
 		text-align: center;
 	}
-	.wizlords-class-category-table td {
+	.wizlords-class-category-mobile-list {
-		grid-column: 2;
+		box-sizing: border-box;
 		padding: 8px 10px !important;
+		background: #171717;
 	}
-	.wizlords-class-category-table th:nth-child(1) {
+	.wizlords-class-category-mobile .wizlords-class-category-icon {
-		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 {
+	.wizlords-class-category-mobile .wizlords-class-category-icon img {
 		width: 64px;
 		height: auto;
@@ Line 1,301: / Line 1,286: @@
 	}
-	.wizlords-class-category-table ul {
+	.wizlords-class-category-mobile ul {
 		margin: 0;
 		padding-left: 18px;
+		list-style: disc outside;
+	}
+	.wizlords-class-category-mobile li {
+		display: list-item;
+		margin: 0 0 3px;
 	}
 }