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

This commit is contained in:
alistair3149 2022-10-25 14:55:39 -04:00
parent fa3582dfd0
commit f1fb5537c9
No known key found for this signature in database
3 changed files with 127 additions and 0 deletions

View file

@ -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

View file

@ -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",

View file

@ -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;
}