feat(AJAXPoll): ✨ add skinStyle for AJAXPoll (#487)

README.md

@@ -33,6 +33,7 @@ OOUI | B | 0.39.3 `086b4f1` | 2021-07-26
 Name | Grade | Version | Last updated
 :--- | :--- | :--- | :---
 [AdvancedSearch](https://www.mediawiki.org/wiki/Extension:AdvancedSearch) | B | REL1_35 `fae6250` | 2021-08-26
+[AJAXPoll](https://www.mediawiki.org/wiki/Extension:AJAXPoll) | A | REL1_39 `8429d8d` | 2022-10-25
 [ApprovedRevs](https://www.mediawiki.org/wiki/Extension:Approved_Revs) | B | N/A | N/A
 [Babel](https://www.mediawiki.org/wiki/Extension:Babel) | B | MLEB 2021.07 | 2021-07-29
 [Capiunto](https://www.mediawiki.org/wiki/Extension:Capiunto) | B | REL1_35 `30049a7` | 2021-08-26

skin.json

@@ -496,6 +496,7 @@
 		"citizen": {
 			"+ext.advancedSearch.initialstyles": "skinStyles/extensions/AdvancedSearch/ext.advancedSearch.initialstyles.less",
 			"+ext.advancedSearch.styles": "skinStyles/extensions/AdvancedSearch/ext.advancedSearch.styles.less",
+			"+ext.ajaxpoll": "skinStyles/extensions/AJAXPoll/ext.ajaxpoll.less",
 			"+ext.ApprovedRevs": "skinStyles/extensions/ApprovedRevs/ext.ApprovedRevs.less",
 			"+ext.babel": "skinStyles/extensions/Babel/ext.babel.less",
 			"+ext.cargo.main": "skinStyles/extensions/Cargo/ext.cargo.main.less",

skinStyles/extensions/AJAXPoll/ext.ajaxpoll.less

@@ -0,0 +1,125 @@
+/*
+ * Citizen
+ *
+ * SkinStyles for Extension:AJAXPoll
+ * Module: ext.ajaxpoll
+ * Version: REL1_39 (8429d8d)
+ *
+ * Date: 2022-10-25
+*/
+
+.ajaxpoll {
+	/* Responsive to container */
+	width: auto;
+	padding: var( --space-lg );
+	border-color: transparent;
+	border-radius: var( --border-radius--medium );
+	background-color: transparent;
+}
+
+.ajaxpoll .ajaxpoll-question {
+	color: var( --color-base--emphasized );
+	font-weight: var( --font-weight-semibold );
+}
+
+.ajaxpoll .ajaxpoll-answer-name,
+.ajaxpoll-answer-name-revoke {
+	margin-top: var( --space-sm );
+	font-size: 0.875rem;
+}
+
+.ajaxpoll .ajaxpoll-hover-vote {
+	background: var( --color-destructive );
+	color: #fff;
+}
+
+.ajaxpoll .ajaxpoll-hover-revoke {
+	background-color: var( --color-surface-2--hover );
+}
+
+.ajaxpoll .ajaxpoll-answer-vote {
+	position: relative;
+	display: grid;
+	overflow: hidden;
+	height: 2rem;
+	border: 0;
+	border-top: 1px solid var( --border-color-base );
+	background-color: var( --color-surface-3 );
+	border-bottom-left-radius: var( --border-radius--medium );
+	border-bottom-right-radius: var( --border-radius--medium );
+	font-size: 0.8125rem;
+	place-content: center;
+}
+
+.ajaxpoll .ajaxpoll-answer-vote div {
+	bottom: 0;
+	height: auto;
+	box-sizing: border-box;
+	border-right: 0;
+	border-right: 2px solid var( --border-color-base );
+	background: var( --color-surface-2 );
+}
+
+.ajaxpoll .ajaxpoll-our-vote div {
+	top: 0;
+	left: 0;
+	border: 0;
+	border-right: 2px solid var( --color-primary );
+	background-color: var( --background-color-primary--active );
+}
+
+.ajaxpoll .ajaxpoll-answer-vote span {
+	position: initial;
+	color: var( --color-base--subtle );
+}
+
+.ajaxpoll label {
+	display: block;
+	padding: var( --space-sm );
+	background-color: var( --color-surface-2 );
+	border-top-left-radius: var( --border-radius--medium );
+	border-top-right-radius: var( --border-radius--medium );
+	cursor: pointer;
+	font-weight: var( --font-weight-medium );
+
+	// Added active state
+	&:active {
+		background-color: var( --color-surface-2--active );
+	}
+}
+
+.ajaxpoll input {
+	display: none;
+}
+
+.ajaxpoll .ajaxpoll-checkevent {
+	background: var( --color-success );
+	color: #fff;
+}
+
+.ajaxpoll .ajaxpoll-misc {
+	margin-bottom: 10px;
+	color: var( --color-base--subtle );
+}
+
+.ajaxpoll .ajaxpoll-ajax {
+	padding: var( --space-sm ) var( --space-md );
+	border-radius: var( --border-radius--small );
+	margin-bottom: var( --space-md );
+	background: var( --color-surface-2 );
+	font-size: 0.8125rem;
+}
+
+.ajaxpoll .ajaxpoll-info {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-between;
+	margin-top: var( --space-md );
+	color: var( --color-base--subtle );
+	font-size: 0.8125rem;
+}
+
+.ajaxpoll .ajaxpoll-id-info {
+	color: var( --color-base--subtle );
+	float: none;
+}