feat: Add SkinStyles to StructuredNavigation

README.md

@@ -82,6 +82,7 @@ Name | Grade | Version | Last updated
 [Semantic Result Formats](https://www.mediawiki.org/wiki/Extension:Semantic_Result_Formats) | E | N/A | N/A
 [SimpleTooltip](https://www.mediawiki.org/wiki/Extension:SimpleTooltip) | B | N/A | 2022-02-19
 [SmiteSpam](https://www.mediawiki.org/wiki/Extension:SmiteSpam) | B | REL1_39 `c81b04b` | 2023-05-30
+[StructuredNavigation](https://www.mediawiki.org/wiki/Extension:StructuredNavigation) | A | REL1_39 `55e2ec0` | 2024-09-06
 [SyntaxHighlight](https://www.mediawiki.org/wiki/Extension:SyntaxHighlight) | A | REL1_35 `05598b3` | 2023-05-22
 [Tabs](https://www.mediawiki.org/wiki/Extension:Tabs) | A | REL1_39 `63ccef2` | 2023-07-11
 [Tabber](https://www.mediawiki.org/wiki/Extension:Tabber) | A | N/A | N/A

skin.json

@@ -486,6 +486,7 @@
 			"+onoi.dataTables.styles": "skinStyles/extensions/SemanticResultFormats/jquery/jquery.dataTables.less",
 			"+ext.SimpleTooltip": "skinStyles/extensions/SimpleTooltip/ext.SimpleTooltip.less",
 			"+ext.SmiteSpam.retriever": "skinStyles/extensions/SmiteSpam/ext.SmiteSpam.retriever.less",
+			"+ext.structuredNav.NavigationView.styles": "skinStyles/extensions/StructuredNavigation/ext.structuredNav.NavigationView.less",
 			"+ext.pygments": "skinStyles/extensions/SyntaxHighlight_GeSHi/ext.pygments.less",
 			"+ext.searchdigest.styles": "skinStyles/extensions/SearchDigest/ext.searchdigest.styles.less",
 			"+ext.tabs": "skinStyles/extensions/Tabs/ext.tabs.less",

skinStyles/extensions/StructuredNavigation/ext.structuredNav.NavigationView.less

@@ -0,0 +1,49 @@
+/*
+ * Citizen
+ *
+ * SkinStyles for StructuredNavigation
+ * Module: ext.structuredNav.NavigationView.styles
+ * Version: REL1_39 55e2ec0
+ *
+ * Date: 2024-09-06
+*/
+
+/* ext.structuredNav.NavigationView.less */
+.mw-structurednav-navigation-container {
+	background-color: var(--color-surface-2);
+	border: 2px solid var(--border-color-base);
+	font-size: var(--font-size-base);
+	border-radius: var(--border-radius--small);
+}
+
+.mw-structurednav-header {
+	background: var(--color-surface-4);
+	color: var(--color-base);
+	font-size: var(--font-size-base);
+
+	// Needs higher specificity to override default skin styles
+	// for the h2 element - Samantha Nguyen
+	.mw-structurednav-header-title {
+		font-family: var(--font-family-base);
+		font-size: var(--font-size-small);
+		font-weight: var(--font-weight-bold);
+	}
+}
+
+.mw-structurednav-group-title,
+.mw-structurednav-group-content {
+	border-top: 2px solid var(--border-color-inverted);
+}
+
+.mw-structurednav-group-title {
+	background: var(--color-surface-3);
+	color: var(--color-base);
+	font-weight: var(--font-weight-bold);
+	font-family: var(--font-family-base);
+	text-align: left;
+}
+
+/* ext.structuredNav.NavigationView.separator.less */
+.mw-structurednav-group-content-item:not( :last-child ):after {
+	color: var(--color-base);
+}