feat(Tabs): ✨ add support for Extension:Tabs

Closes: #687

README.md

@@ -75,6 +75,7 @@ Name | Grade | Version | Last updated
 [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
 [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
 [TabberNeue](https://www.mediawiki.org/wiki/Extension:TabberNeue) | A | 1.7.5 `dcc4bc1` | 2023-07-05
 [TemplateData](https://www.mediawiki.org/wiki/Extension:TemplateData) | A | REL1_39 `e2c12b5` | 2023-05-01

skin.json

@@ -410,6 +410,7 @@
 			"+ext.SimpleTooltip": "skinStyles/extensions/SimpleTooltip/ext.SimpleTooltip.less",
 			"+ext.SmiteSpam.retriever": "skinStyles/extensions/SmiteSpam/ext.SmiteSpam.retriever.less",
 			"+ext.pygments": "skinStyles/extensions/SyntaxHighlight_GeSHi/ext.pygments.less",
+			"+ext.tabs": "skinStyles/extensions/Tabs/ext.tabs.less",
 			"+ext.tmh.player.styles": "skinStyles/extensions/TimedMediaHandler/ext.tmh.player.styles.less",
 			"+ext.translate": "skinStyles/extensions/Translate/ext.translate.less",
 			"+ext.translate.dropdownmenu": "skinStyles/extensions/Translate/ext.translate.dropdownmenu.less",

skinStyles/extensions/Tabs/ext.tabs.less

@@ -0,0 +1,137 @@
+/*
+ * Citizen
+ *
+ * SkinStyles for Extension:Tabs
+ * Module: ext.tabs
+ * Version: REL1_39 63ccef2
+ *
+ * Date: 2023-07-11
+*/
+
+.tabs-label {
+	padding: 0.5em 0.75em;
+	border: 0;
+	background-color: transparent;
+	color: var( --color-base );
+	font-weight: var( --font-weight-medium );
+
+	&:hover {
+		background-color: transparent;
+		box-shadow: inset 0 -2px var( --color-primary--hover );
+		color: var( --color-primary--hover );
+	}
+
+	&:active {
+		background-color: transparent;
+		box-shadow: inset 0 -2px var( --color-primary--active );
+		color: var( --color-primary--active );
+	}
+
+	&:focus {
+		box-shadow: inset 0 0 0 2px var( --color-primary );
+	}
+}
+
+.tabs-tabbox > .tabs-input + .tabs-input + .tabs-label {
+	margin-left: 0;
+}
+
+.tabs-tabbox > .tabs-container {
+	padding: var( --space-xs ) var( --space-sm );
+	border-color: var( --border-color-base );
+	border-radius: 0 0 var( --border-radius--medium ) var( --border-radius--medium );
+}
+
+.tabs-tabbox > .tabs-label {
+	border-radius: 0;
+	margin: 0;
+}
+
+.tabs-plain > .tabs-label {
+	border: 0;
+	border-radius: 0;
+	margin: 0;
+}
+
+.tabs-plain > .tabs-container {
+	border-radius: 0;
+	margin-top: 0;
+}
+
+.tabs-togglebox > .tabs-container {
+	border-radius: var( --border-radius--medium );
+}
+
+.tabs-togglebox > * > .tabs-label {
+	padding: 0.5em 0.75em;
+	border-radius: var( --border-radius--medium );
+}
+
+.tabs-togglebox > * > .tabs-content {
+	padding: var( --space-xs ) var( --space-sm );
+	border-color: var( --border-color-base );
+	border-radius: 0 0 var( --border-radius--medium ) var( --border-radius--medium );
+}
+
+.tabs-dropdown li,
+.tabs-dropdown > * > .tabs-content > a,
+.tabs-dropdown > * > .tabs-content > p > a,
+.tabs-dropdown ol > li > a {
+	border-top-color: var( --border-color-base );
+}
+
+.tabs-dropdown li ul,
+.tabs-dropdown li ol {
+	border-color: var( --border-color-base );
+}
+
+.tabs-dropdown li ul::before,
+.tabs-dropdown li ol::before {
+	color: var( --color-base--emphasized );
+}
+
+.tabs-tabbox > .tabs-input:checked + .tabs-label,
+.tabs-input-0:checked + .tabs-input-1 + .tabs-label {
+	background-color: transparent;
+	box-shadow: inset 0 -2px var( --color-primary );
+	color: var( --color-primary );
+}
+
+.tabs-togglebox > * > .tabs-input:checked + .tabs-label,
+.tabs-dropdown > * > .tabs-label:focus,
+.tabs-dropdown:hover > * > .tabs-label {
+	border-radius: var( --border-radius--medium ) var( --border-radius--medium ) 0 0;
+}
+
+.tabs-dropdown > * > .tabs-content li:hover {
+	background: var( --background-color-quiet--hover );
+}
+
+.tabs-dropdown a,
+.tabs-dropdown a:hover,
+.tabs-dropdown a:visited {
+	color: var( --color-base--emphasized );
+}
+
+.tabs-dropdown a:active {
+	color: var( --color-primary );
+}
+
+.tabs-dropdown > * > .tabs-content > a:hover,
+.tabs-dropdown > * > .tabs-content > p > a:hover,
+.tabs-dropdown ol > li > a:hover {
+	background: var( --background-color-quiet--hover );
+}
+
+.tabs-tabbox > .tabs-input.checked + .tabs-label,
+.tabs-input-0.checked + .tabs-input-1 + .tabs-label {
+	background-color: transparent;
+}
+
+.tabs-togglebox details.tabs-container:not( [ open ] ) .tabs-label {
+	border-radius: var( --border-radius--medium );
+}
+
+.tabs-togglebox details.tabs-container[ open ] .tabs-label {
+	border-radius: var( --border-radius--medium ) var( --border-radius--medium ) 0 0;
+}