MediaWiki:Common.css: Difference between revisions

← Older edit Newer edit →

@@ Line 1,455: / Line 1,455: @@
 .wizlords-class-card-rules div {
 	margin: 0 0 4px;
+}
+.wizlords-class-category-accordion {
+	--wiz-class-category-accent: var(--wiz-content-border, #ff942d);
+	margin: 20px 0 26px;
+}
+.wizlords-class-category-accordion-martial {
+	--wiz-class-category-accent: #9d7531;
+}
+.wizlords-class-category-accordion-arcane {
+	--wiz-class-category-accent: #d66be3;
+}
+.wizlords-class-category-accordion-divine {
+	--wiz-class-category-accent: #19c4eb;
+}
+.wizlords-class-category-accordion-heading {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	margin: 20px 0 12px;
+	padding-bottom: 6px;
+	border-bottom: 1px solid var(--wiz-content-border, #ff942d);
+	color: var(--wiz-heading, #e7e1d4);
+	font-size: 22px;
+	font-weight: bold;
+	line-height: 1.3;
+}
+.wizlords-class-category-accordion-title {
+	color: var(--wiz-heading, #e7e1d4);
+}
+.wizlords-class-category-accordion-icon {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 30px;
+	height: 30px;
+}
+.wizlords-class-category-accordion-icon img {
+	display: block;
+	width: 28px !important;
+	height: 28px !important;
+	max-width: 28px !important;
+	max-height: 28px !important;
+	object-fit: contain;
+}
+.wizlords-class-category-accordion-body {
+	display: block;
 }
@@ Line 2,362: / Line 2,417: @@
 	}
-	/* Mobile/tablet class category headings.
+	/* Mobile/tablet class category accordions.
-	   These are still native MobileFrontend article sections; this only makes
+	   These are custom controls inside the real "Classes" article section, so
-	   Martial / Arcane / Divine visually match the mobile spellbook headers. */
+	   Citizen/MobileFrontend no longer adds a second heading chevron. */
-	.skin-citizen .wizlords-mobile-class-category-heading {
+	.skin-citizen .wizlords-class-category-accordion {
-		--wiz-mobile-class-category-accent: var(--wiz-content-border, #ff942d);
+		--wiz-class-category-accent: var(--wiz-content-border, #ff942d);
+		margin: 18px 0 28px;
+	}
+	.skin-citizen .wizlords-class-category-accordion-martial {
+		--wiz-class-category-accent: #9d7531;
+	}
+	.skin-citizen .wizlords-class-category-accordion-arcane {
+		--wiz-class-category-accent: #d66be3;
+	}
+	.skin-citizen .wizlords-class-category-accordion-divine {
+		--wiz-class-category-accent: #19c4eb;
+	}
+	.skin-citizen .wizlords-class-category-accordion-heading {
 		position: relative;
-		display: flex !important;
+		display: flex;
 		align-items: center;
 		justify-content: center;
+		gap: 9px;
 		box-sizing: border-box;
 		width: 100%;
-		margin: 18px 0 10px !important;
+		margin: 0 0 10px;
-		padding: 0 42px 6px !important;
+		padding: 0 0 6px;
-		border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
+		border-bottom: 1px solid rgba(255, 255, 255, 0.18);
-		background-image: none !important;
 		color: var(--wiz-heading, #e7e1d4);
 		cursor: pointer;
 	}
-	.skin-citizen .wizlords-mobile-class-category-heading-inner {
+	.skin-citizen .wizlords-class-category-accordion.is-open
-		display: inline-flex;
+	.wizlords-class-category-accordion-heading {
-		align-items: center;
+		border-bottom-color: var(--wiz-class-category-accent);
-		justify-content: center;
-		gap: 9px;
-		min-width: 0;
 	}
-	.skin-citizen .wizlords-mobile-class-category-heading-inner::before {
+	.skin-citizen .wizlords-class-category-accordion-heading::before {
 		content: "";
 		flex: 0 0 auto;
@@ Line 2,400: / Line 2,468: @@
 	}
-	.skin-citizen .wizlords-mobile-class-category-heading.open-block
+	.skin-citizen .wizlords-class-category-accordion.is-open
-	.wizlords-mobile-class-category-heading-inner::before {
+	.wizlords-class-category-accordion-heading::before {
 		transform: translateY(2px) rotate(225deg);
 	}
-	.skin-citizen .wizlords-mobile-class-category-heading.open-block {
+	.skin-citizen .wizlords-class-category-accordion-title {
-		border-bottom-color: var(--wiz-mobile-class-category-accent) !important;
-	}
-	.skin-citizen .wizlords-mobile-class-category-heading-martial {
-		--wiz-mobile-class-category-accent: #9d7531;
-	}
-	.skin-citizen .wizlords-mobile-class-category-heading-arcane {
-		--wiz-mobile-class-category-accent: #d66be3;
-	}
-	.skin-citizen .wizlords-mobile-class-category-heading-divine {
-		--wiz-mobile-class-category-accent: #19c4eb;
-	}
-	.skin-citizen .wizlords-mobile-class-category-heading .indicator,
-	.skin-citizen .wizlords-mobile-class-category-heading .mf-icon {
-		position: static !important;
-		inset: auto !important;
-		flex: 0 0 auto;
-		margin: 0 !important;
-		transform: none;
-		color: var(--wiz-heading, #e7e1d4);
-	}
-	.skin-citizen .wizlords-mobile-class-category-heading .mw-headline,
-	.skin-citizen .wizlords-mobile-class-category-heading-title {
 		flex: 0 1 auto;
 		color: var(--wiz-heading, #e7e1d4);
+		font-family: Roboto, Roboto-fallback, system-ui, -apple-system, sans-serif;
+		font-size: 24px;
+		font-weight: 700;
+		line-height: 1.25;
 		text-align: center;
 	}
-	.skin-citizen .wizlords-mobile-class-category-heading-icon {
+	.skin-citizen .wizlords-class-category-accordion-icon {
 		display: flex;
 		flex: 0 0 auto;
@@ Line 2,447: / Line 2,492: @@
 	}
-	.skin-citizen .wizlords-mobile-class-category-heading .mw-editsection {
+	.skin-citizen .wizlords-class-category-accordion-icon img {
-		position: absolute;
-		right: 0;
-		bottom: 7px;
-		margin: 0;
-	}
-	.skin-citizen .wizlords-mobile-class-category-heading-icon img {
 		display: block;
 		width: 30px !important;
@@ Line 2,461: / Line 2,499: @@
 		max-height: 30px !important;
 		object-fit: contain;
+	}
+	.skin-citizen .wizlords-class-category-accordion-body {
+		display: none;
+	}
+	.skin-citizen .wizlords-class-category-accordion.is-open
+	.wizlords-class-category-accordion-body {
+		display: block;
 	}