StarCitizenTools/mediawiki-skins-Citizen
1
0
Fork 0
mirror of https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git synced 2024-11-28 08:10:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(core): ♻️ clean up page actions icons syntax

Browse source
This commit is contained in:
alistair3149 2022-11-01 11:23:17 -04:00
parent ed4990f6c7
commit e1ebf8405f
No known key found for this signature in database
4 changed files with 55 additions and 93 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
resources/mixins.less
View file

@ -111,13 +111,6 @@
margin-left: auto; margin-left: auto;
} }
// Prepare for RL icons
.resource-loader-icon-link() {
display: block;
width: @icon-box-size;
height: @icon-box-size;
}
.resource-loader-icon-link-small() { .resource-loader-icon-link-small() {
display: block; display: block;
width: @icon-size; width: @icon-size;

5
resources/skins.citizen.styles/Menu.less
View file

@ -14,9 +14,8 @@
// FIXME: This should not be here // FIXME: This should not be here
.citizen-ui-icon { .citizen-ui-icon {
// FIXME: We should avoid using this width: var( --size-icon );
width: @icon-size; height: var( --size-icon );
height: @icon-size;
opacity: var( --opacity-icon-base ); opacity: var( --opacity-icon-base );
&:before { &:before {

88
resources/skins.citizen.styles/Pagetools.less
View file

@ -18,21 +18,10 @@
border-radius: var( --border-radius--medium ); border-radius: var( --border-radius--medium );
place-items: center; place-items: center;
&--icon:after {
width: var( --size-icon );
height: var( --size-icon );
background-position: center;
background-repeat: no-repeat;
background-size: contain;
content: '';
opacity: var( --opacity-icon-base );
transition: @transition-opacity;
}
&:hover { &:hover {
background-color: var( --background-color-quiet--hover ); background-color: var( --background-color-quiet--hover );
&:after { &:before {
opacity: var( --opacity-icon-base--hover ); opacity: var( --opacity-icon-base--hover );
} }
} }
@ -40,7 +29,7 @@
&:active { &:active {
background-color: var( --background-color-quiet--active ); background-color: var( --background-color-quiet--active );
&:after { &:before {
opacity: var( --opacity-icon-base--active ); opacity: var( --opacity-icon-base--active );
} }
} }
@ -89,23 +78,11 @@
font-size: 0; font-size: 0;
transition: @transition-background, @transition-color; transition: @transition-background, @transition-color;
&:after {
width: var( --size-icon );
height: var( --size-icon );
order: -1; // Move icon before the text
background-position: center;
background-repeat: no-repeat;
background-size: var( --size-icon );
content: '';
opacity: var( --opacity-icon-base );
transition: @transition-opacity;
}
&:hover { &:hover {
background-color: var( --background-color-quiet--hover ); background-color: var( --background-color-quiet--hover );
color: var( --color-base--emphasized ); color: var( --color-base--emphasized );
&:after { &:before {
opacity: var( --opacity-icon-base--hover ); opacity: var( --opacity-icon-base--hover );
} }
} }
@ -114,7 +91,7 @@
background-color: var( --background-color-quiet--active ); background-color: var( --background-color-quiet--active );
color: var( --color-base--subtle ); color: var( --color-base--subtle );
&:after { &:before {
opacity: var( --opacity-icon-base--active ); opacity: var( --opacity-icon-base--active );
} }
} }
@ -140,14 +117,29 @@
} }
} }
/* Non-WMUI icons */
.page-actions__button:before,
#citizen-languages__buttonCheckbox:before,
.mw-portlet-views .mw-list-item > a:before,
.mw-portlet-associated-pages .mw-list-item > a:before,
.mw-portlet-tb .mw-list-item > a:before {
width: var( --size-icon );
height: var( --size-icon );
background-position: center;
background-repeat: no-repeat;
background-size: var( --size-icon );
content: '';
opacity: var( --opacity-icon-base );
transition: @transition-opacity;
}
// Language counter badge // Language counter badge
// TODO: Maybe this should be in a mixin // TODO: Maybe this should be in a mixin
#citizen-languages__buttonCheckbox { #citizen-languages__buttonCheckbox {
position: relative; // So that the badge doesn't take a stroll to the far left position: relative; // So that the badge doesn't take a stroll to the far left
&:before { &:after {
position: absolute; position: absolute;
z-index: 2;
top: 0; top: 0;
left: 55%; left: 55%;
display: block; display: block;
@ -180,7 +172,7 @@
~ .page-actions__button { ~ .page-actions__button {
background-color: var( --background-color-quiet--hover ); background-color: var( --background-color-quiet--hover );
&:after { &:before {
opacity: var( --opacity-icon-base--hover ); opacity: var( --opacity-icon-base--hover );
} }
} }
@ -190,7 +182,7 @@
~ .page-actions__button { ~ .page-actions__button {
background-color: var( --background-color-quiet--active ); background-color: var( --background-color-quiet--active );
&:after { &:before {
opacity: var( --opacity-icon-base--active ); opacity: var( --opacity-icon-base--active );
} }
} }
@ -198,28 +190,6 @@
} }
} }
// Handle icons
.page-actions-more {
a {
&:after {
.resource-loader-list-icon;
opacity: var( --opacity-icon-base );
}
&:hover {
&:after {
opacity: var( --opacity-icon-base--hover );
}
}
&:active {
&:after {
opacity: var( --opacity-icon-base--active );
}
}
}
}
.page-actions-more, .page-actions-more,
.citizen-languages { .citizen-languages {
position: relative; position: relative;
@ -244,7 +214,7 @@
border-radius: 0 var( --border-radius--medium ) var( --border-radius--medium ) 0; border-radius: 0 var( --border-radius--medium ) var( --border-radius--medium ) 0;
font-size: 0; // hide edit source text font-size: 0; // hide edit source text
&:after { &:before {
margin-right: 0; // reset margin-right: 0; // reset
} }
} }
@ -261,7 +231,7 @@
background-color: var( --color-primary ); background-color: var( --color-primary );
color: #fff; color: #fff;
&:after { &:before {
filter: invert( 1 ); filter: invert( 1 );
// white icon // white icon
opacity: 1; opacity: 1;
@ -280,11 +250,11 @@
.skin-citizen-dark { .skin-citizen-dark {
.page-actions { .page-actions {
&__button--icon:after { &__button--icon:before {
filter: invert( 1 ); filter: invert( 1 );
} }
li > a:after { li > a:before {
filter: invert( 1 ); filter: invert( 1 );
} }
} }
@ -328,7 +298,7 @@
li > a { li > a {
font-size: 0.875rem; font-size: 0.875rem;
&:after { &:before {
margin-right: 0.5rem; margin-right: 0.5rem;
} }
} }
@ -344,7 +314,7 @@
&:hover { &:hover {
background-color: none; background-color: none;
&:after { &:before {
opacity: var( --opacity-icon-base ); opacity: var( --opacity-icon-base );
} }
} }

48
skin.json
View file

@ -289,34 +289,34 @@
"#citizen-userMenu__buttonCheckbox:after": "resources/skins.citizen.icons/shared/userAvatar.svg", "#citizen-userMenu__buttonCheckbox:after": "resources/skins.citizen.icons/shared/userAvatar.svg",
".citizen-search__icon:after": "resources/skins.citizen.icons/shared/search.svg", ".citizen-search__icon:after": "resources/skins.citizen.icons/shared/search.svg",
".citizen-search__random:after": "resources/skins.citizen.icons/shared/random.svg", ".citizen-search__random:after": "resources/skins.citizen.icons/shared/random.svg",
"#citizen-languages__buttonCheckbox:after": "resources/skins.citizen.icons/shared/language.svg", "#citizen-languages__buttonCheckbox:before": "resources/skins.citizen.icons/shared/language.svg",
"#page-actions-more__buttonCheckbox:after": "resources/skins.citizen.icons/more.svg", "#page-actions-more__buttonCheckbox:before": "resources/skins.citizen.icons/more.svg",
"#ca-view > a:after": { "#ca-view > a:before": {
"file": { "file": {
"ltr": "resources/skins.citizen.icons/shared/article-ltr.svg", "ltr": "resources/skins.citizen.icons/shared/article-ltr.svg",
"rtl": "resources/skins.citizen.icons/shared/article-rtl.svg" "rtl": "resources/skins.citizen.icons/shared/article-rtl.svg"
} }
}, },
"#ca-viewsource > a:after": "resources/skins.citizen.icons/shared/eye.svg", "#ca-viewsource > a:before": "resources/skins.citizen.icons/shared/eye.svg",
"#ca-edit > a:after": "resources/skins.citizen.icons/shared/edit.svg", "#ca-edit > a:before": "resources/skins.citizen.icons/shared/edit.svg",
"#ca-ve-edit + #ca-edit > a:after": "resources/skins.citizen.icons/shared/wikiText.svg", "#ca-ve-edit + #ca-edit > a:before": "resources/skins.citizen.icons/shared/wikiText.svg",
"#ca-ve-edit > a:after": "resources/skins.citizen.icons/shared/edit.svg", "#ca-ve-edit > a:before": "resources/skins.citizen.icons/shared/edit.svg",
"#ca-history > a:after": "resources/skins.citizen.icons/shared/history.svg", "#ca-history > a:before": "resources/skins.citizen.icons/shared/history.svg",
"#ca-addsection > a:after": "resources/skins.citizen.icons/shared/add.svg", "#ca-addsection > a:before": "resources/skins.citizen.icons/shared/add.svg",
"#ca-talk > a:after": { "#ca-talk > a:before": {
"file": { "file": {
"ltr": "resources/skins.citizen.icons/shared/speechBubbles-ltr.svg", "ltr": "resources/skins.citizen.icons/shared/speechBubbles-ltr.svg",
"rtl": "resources/skins.citizen.icons/shared/speechBubbles-rtl.svg" "rtl": "resources/skins.citizen.icons/shared/speechBubbles-rtl.svg"
} }
}, },
"#ca-nstab-main > a:after": { "#ca-nstab-main > a:before": {
"file": { "file": {
"ltr": "resources/skins.citizen.icons/shared/article-ltr.svg", "ltr": "resources/skins.citizen.icons/shared/article-ltr.svg",
"rtl": "resources/skins.citizen.icons/shared/article-rtl.svg" "rtl": "resources/skins.citizen.icons/shared/article-rtl.svg"
} }
}, },
"#ca-nstab-user > a:after": "resources/skins.citizen.icons/shared/userAvatar.svg", "#ca-nstab-user > a:before": "resources/skins.citizen.icons/shared/userAvatar.svg",
"#ca-translate > a:after": "resources/skins.citizen.icons/shared/language.svg", "#ca-translate > a:before": "resources/skins.citizen.icons/shared/language.svg",
".mw-editsection > a:before": "resources/skins.citizen.icons/shared/edit.svg", ".mw-editsection > a:before": "resources/skins.citizen.icons/shared/edit.svg",
".mw-editsection > a.mw-editsection-visualeditor + .mw-editsection-divider + a:before": "resources/skins.citizen.icons/shared/wikiText.svg", ".mw-editsection > a.mw-editsection-visualeditor + .mw-editsection-divider + a:before": "resources/skins.citizen.icons/shared/wikiText.svg",
"#n-mainpage-description > a:after": "resources/skins.citizen.icons/shared/home.svg", "#n-mainpage-description > a:after": "resources/skins.citizen.icons/shared/home.svg",
@ -333,42 +333,42 @@
"rtl": "resources/skins.citizen.icons/shared/help-rtl.svg" "rtl": "resources/skins.citizen.icons/shared/help-rtl.svg"
} }
}, },
"#t-whatlinkshere > a:after": { "#t-whatlinkshere > a:before": {
"file": { "file": {
"ltr": "resources/skins.citizen.icons/shared/articleRedirect-ltr.svg", "ltr": "resources/skins.citizen.icons/shared/articleRedirect-ltr.svg",
"rtl": "resources/skins.citizen.icons/shared/articleRedirect-rtl.svg" "rtl": "resources/skins.citizen.icons/shared/articleRedirect-rtl.svg"
} }
}, },
"#t-recentchangeslinked > a:after": { "#t-recentchangeslinked > a:before": {
"file": { "file": {
"ltr": "resources/skins.citizen.icons/shared/recentChanges-ltr.svg", "ltr": "resources/skins.citizen.icons/shared/recentChanges-ltr.svg",
"rtl": "resources/skins.citizen.icons/shared/recentChanges-rtl.svg" "rtl": "resources/skins.citizen.icons/shared/recentChanges-rtl.svg"
} }
}, },
"#t-contributions > a:after": { "#t-contributions > a:before": {
"file": { "file": {
"ltr": "resources/skins.citizen.icons/shared/userContributions-ltr.svg", "ltr": "resources/skins.citizen.icons/shared/userContributions-ltr.svg",
"rtl": "resources/skins.citizen.icons/shared/userContributions-rtl.svg" "rtl": "resources/skins.citizen.icons/shared/userContributions-rtl.svg"
} }
}, },
"#t-log > a:after": { "#t-log > a:before": {
"file": { "file": {
"ltr": "resources/skins.citizen.icons/shared/journal-ltr.svg", "ltr": "resources/skins.citizen.icons/shared/journal-ltr.svg",
"rtl": "resources/skins.citizen.icons/shared/journal-rtl.svg" "rtl": "resources/skins.citizen.icons/shared/journal-rtl.svg"
} }
}, },
"#t-blockip > a:after": "resources/skins.citizen.icons/shared/block.svg", "#t-blockip > a:before": "resources/skins.citizen.icons/shared/block.svg",
"#t-userrights > a:after": "resources/skins.citizen.icons/shared/userGroup.svg", "#t-userrights > a:before": "resources/skins.citizen.icons/shared/userGroup.svg",
"#t-upload > a:after": "resources/skins.citizen.icons/shared/upload.svg", "#t-upload > a:before": "resources/skins.citizen.icons/shared/upload.svg",
"#t-specialpages > a:after": { "#t-specialpages > a:before": {
"file": { "file": {
"ltr": "resources/skins.citizen.icons/shared/specialPages-ltr.svg", "ltr": "resources/skins.citizen.icons/shared/specialPages-ltr.svg",
"rtl": "resources/skins.citizen.icons/shared/specialPages-rtl.svg" "rtl": "resources/skins.citizen.icons/shared/specialPages-rtl.svg"
} }
}, },
"#t-print > a:after": "resources/skins.citizen.icons/shared/download.svg", "#t-print > a:before": "resources/skins.citizen.icons/shared/download.svg",
"#t-permalink > a:after": "resources/skins.citizen.icons/shared/link.svg", "#t-permalink > a:before": "resources/skins.citizen.icons/shared/link.svg",
"#t-info > a:after": "resources/skins.citizen.icons/shared/info.svg", "#t-info > a:before": "resources/skins.citizen.icons/shared/info.svg",
"#citizen-siteStats__item--articles:before": { "#citizen-siteStats__item--articles:before": {
"file": { "file": {
"ltr": "resources/skins.citizen.icons/shared/article-ltr.svg", "ltr": "resources/skins.citizen.icons/shared/article-ltr.svg",