mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-11-28 08:10:45 +00:00
refactor(core): ♻️ clean up page actions icons syntax
This commit is contained in:
alistair3149
parent
ed4990f6c7
commit
e1ebf8405f
|
|
@ -111,13 +111,6 @@
|
|||
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() {
|
||||
display: block;
|
||||
width: @icon-size;
|
||||
|
|
|
|||
|
|
@ -14,9 +14,8 @@
|
|||
|
||||
// FIXME: This should not be here
|
||||
.citizen-ui-icon {
|
||||
// FIXME: We should avoid using this
|
||||
width: @icon-size;
|
||||
height: @icon-size;
|
||||
width: var( --size-icon );
|
||||
height: var( --size-icon );
|
||||
opacity: var( --opacity-icon-base );
|
||||
|
||||
&:before {
|
||||
|
|
|
|||
|
|
@ -18,21 +18,10 @@
|
|||
border-radius: var( --border-radius--medium );
|
||||
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 {
|
||||
background-color: var( --background-color-quiet--hover );
|
||||
|
||||
&:after {
|
||||
&:before {
|
||||
opacity: var( --opacity-icon-base--hover );
|
||||
}
|
||||
}
|
||||
|
|
@ -40,7 +29,7 @@
|
|||
&:active {
|
||||
background-color: var( --background-color-quiet--active );
|
||||
|
||||
&:after {
|
||||
&:before {
|
||||
opacity: var( --opacity-icon-base--active );
|
||||
}
|
||||
}
|
||||
|
|
@ -89,23 +78,11 @@
|
|||
font-size: 0;
|
||||
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 {
|
||||
background-color: var( --background-color-quiet--hover );
|
||||
color: var( --color-base--emphasized );
|
||||
|
||||
&:after {
|
||||
&:before {
|
||||
opacity: var( --opacity-icon-base--hover );
|
||||
}
|
||||
}
|
||||
|
|
@ -114,7 +91,7 @@
|
|||
background-color: var( --background-color-quiet--active );
|
||||
color: var( --color-base--subtle );
|
||||
|
||||
&:after {
|
||||
&:before {
|
||||
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
|
||||
// TODO: Maybe this should be in a mixin
|
||||
#citizen-languages__buttonCheckbox {
|
||||
position: relative; // So that the badge doesn't take a stroll to the far left
|
||||
|
||||
&:before {
|
||||
&:after {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
left: 55%;
|
||||
display: block;
|
||||
|
|
@ -180,7 +172,7 @@
|
|||
~ .page-actions__button {
|
||||
background-color: var( --background-color-quiet--hover );
|
||||
|
||||
&:after {
|
||||
&:before {
|
||||
opacity: var( --opacity-icon-base--hover );
|
||||
}
|
||||
}
|
||||
|
|
@ -190,7 +182,7 @@
|
|||
~ .page-actions__button {
|
||||
background-color: var( --background-color-quiet--active );
|
||||
|
||||
&:after {
|
||||
&:before {
|
||||
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,
|
||||
.citizen-languages {
|
||||
position: relative;
|
||||
|
|
@ -244,7 +214,7 @@
|
|||
border-radius: 0 var( --border-radius--medium ) var( --border-radius--medium ) 0;
|
||||
font-size: 0; // hide edit source text
|
||||
|
||||
&:after {
|
||||
&:before {
|
||||
margin-right: 0; // reset
|
||||
}
|
||||
}
|
||||
|
|
@ -261,7 +231,7 @@
|
|||
background-color: var( --color-primary );
|
||||
color: #fff;
|
||||
|
||||
&:after {
|
||||
&:before {
|
||||
filter: invert( 1 );
|
||||
// white icon
|
||||
opacity: 1;
|
||||
|
|
@ -280,11 +250,11 @@
|
|||
|
||||
.skin-citizen-dark {
|
||||
.page-actions {
|
||||
&__button--icon:after {
|
||||
&__button--icon:before {
|
||||
filter: invert( 1 );
|
||||
}
|
||||
|
||||
li > a:after {
|
||||
li > a:before {
|
||||
filter: invert( 1 );
|
||||
}
|
||||
}
|
||||
|
|
@ -328,7 +298,7 @@
|
|||
li > a {
|
||||
font-size: 0.875rem;
|
||||
|
||||
&:after {
|
||||
&:before {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -344,7 +314,7 @@
|
|||
&:hover {
|
||||
background-color: none;
|
||||
|
||||
&:after {
|
||||
&:before {
|
||||
opacity: var( --opacity-icon-base );
|
||||
}
|
||||
}
|
||||
|
|
|
|||
48
skin.json
48
skin.json
|
|
@ -289,34 +289,34 @@
|
|||
"#citizen-userMenu__buttonCheckbox:after": "resources/skins.citizen.icons/shared/userAvatar.svg",
|
||||
".citizen-search__icon:after": "resources/skins.citizen.icons/shared/search.svg",
|
||||
".citizen-search__random:after": "resources/skins.citizen.icons/shared/random.svg",
|
||||
"#citizen-languages__buttonCheckbox:after": "resources/skins.citizen.icons/shared/language.svg",
|
||||
"#page-actions-more__buttonCheckbox:after": "resources/skins.citizen.icons/more.svg",
|
||||
"#ca-view > a:after": {
|
||||
"#citizen-languages__buttonCheckbox:before": "resources/skins.citizen.icons/shared/language.svg",
|
||||
"#page-actions-more__buttonCheckbox:before": "resources/skins.citizen.icons/more.svg",
|
||||
"#ca-view > a:before": {
|
||||
"file": {
|
||||
"ltr": "resources/skins.citizen.icons/shared/article-ltr.svg",
|
||||
"rtl": "resources/skins.citizen.icons/shared/article-rtl.svg"
|
||||
}
|
||||
},
|
||||
"#ca-viewsource > a:after": "resources/skins.citizen.icons/shared/eye.svg",
|
||||
"#ca-edit > a:after": "resources/skins.citizen.icons/shared/edit.svg",
|
||||
"#ca-ve-edit + #ca-edit > a:after": "resources/skins.citizen.icons/shared/wikiText.svg",
|
||||
"#ca-ve-edit > a:after": "resources/skins.citizen.icons/shared/edit.svg",
|
||||
"#ca-history > a:after": "resources/skins.citizen.icons/shared/history.svg",
|
||||
"#ca-addsection > a:after": "resources/skins.citizen.icons/shared/add.svg",
|
||||
"#ca-talk > a:after": {
|
||||
"#ca-viewsource > a:before": "resources/skins.citizen.icons/shared/eye.svg",
|
||||
"#ca-edit > a:before": "resources/skins.citizen.icons/shared/edit.svg",
|
||||
"#ca-ve-edit + #ca-edit > a:before": "resources/skins.citizen.icons/shared/wikiText.svg",
|
||||
"#ca-ve-edit > a:before": "resources/skins.citizen.icons/shared/edit.svg",
|
||||
"#ca-history > a:before": "resources/skins.citizen.icons/shared/history.svg",
|
||||
"#ca-addsection > a:before": "resources/skins.citizen.icons/shared/add.svg",
|
||||
"#ca-talk > a:before": {
|
||||
"file": {
|
||||
"ltr": "resources/skins.citizen.icons/shared/speechBubbles-ltr.svg",
|
||||
"rtl": "resources/skins.citizen.icons/shared/speechBubbles-rtl.svg"
|
||||
}
|
||||
},
|
||||
"#ca-nstab-main > a:after": {
|
||||
"#ca-nstab-main > a:before": {
|
||||
"file": {
|
||||
"ltr": "resources/skins.citizen.icons/shared/article-ltr.svg",
|
||||
"rtl": "resources/skins.citizen.icons/shared/article-rtl.svg"
|
||||
}
|
||||
},
|
||||
"#ca-nstab-user > a:after": "resources/skins.citizen.icons/shared/userAvatar.svg",
|
||||
"#ca-translate > a:after": "resources/skins.citizen.icons/shared/language.svg",
|
||||
"#ca-nstab-user > a:before": "resources/skins.citizen.icons/shared/userAvatar.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.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",
|
||||
|
|
@ -333,42 +333,42 @@
|
|||
"rtl": "resources/skins.citizen.icons/shared/help-rtl.svg"
|
||||
}
|
||||
},
|
||||
"#t-whatlinkshere > a:after": {
|
||||
"#t-whatlinkshere > a:before": {
|
||||
"file": {
|
||||
"ltr": "resources/skins.citizen.icons/shared/articleRedirect-ltr.svg",
|
||||
"rtl": "resources/skins.citizen.icons/shared/articleRedirect-rtl.svg"
|
||||
}
|
||||
},
|
||||
"#t-recentchangeslinked > a:after": {
|
||||
"#t-recentchangeslinked > a:before": {
|
||||
"file": {
|
||||
"ltr": "resources/skins.citizen.icons/shared/recentChanges-ltr.svg",
|
||||
"rtl": "resources/skins.citizen.icons/shared/recentChanges-rtl.svg"
|
||||
}
|
||||
},
|
||||
"#t-contributions > a:after": {
|
||||
"#t-contributions > a:before": {
|
||||
"file": {
|
||||
"ltr": "resources/skins.citizen.icons/shared/userContributions-ltr.svg",
|
||||
"rtl": "resources/skins.citizen.icons/shared/userContributions-rtl.svg"
|
||||
}
|
||||
},
|
||||
"#t-log > a:after": {
|
||||
"#t-log > a:before": {
|
||||
"file": {
|
||||
"ltr": "resources/skins.citizen.icons/shared/journal-ltr.svg",
|
||||
"rtl": "resources/skins.citizen.icons/shared/journal-rtl.svg"
|
||||
}
|
||||
},
|
||||
"#t-blockip > a:after": "resources/skins.citizen.icons/shared/block.svg",
|
||||
"#t-userrights > a:after": "resources/skins.citizen.icons/shared/userGroup.svg",
|
||||
"#t-upload > a:after": "resources/skins.citizen.icons/shared/upload.svg",
|
||||
"#t-specialpages > a:after": {
|
||||
"#t-blockip > a:before": "resources/skins.citizen.icons/shared/block.svg",
|
||||
"#t-userrights > a:before": "resources/skins.citizen.icons/shared/userGroup.svg",
|
||||
"#t-upload > a:before": "resources/skins.citizen.icons/shared/upload.svg",
|
||||
"#t-specialpages > a:before": {
|
||||
"file": {
|
||||
"ltr": "resources/skins.citizen.icons/shared/specialPages-ltr.svg",
|
||||
"rtl": "resources/skins.citizen.icons/shared/specialPages-rtl.svg"
|
||||
}
|
||||
},
|
||||
"#t-print > a:after": "resources/skins.citizen.icons/shared/download.svg",
|
||||
"#t-permalink > a:after": "resources/skins.citizen.icons/shared/link.svg",
|
||||
"#t-info > a:after": "resources/skins.citizen.icons/shared/info.svg",
|
||||
"#t-print > a:before": "resources/skins.citizen.icons/shared/download.svg",
|
||||
"#t-permalink > a:before": "resources/skins.citizen.icons/shared/link.svg",
|
||||
"#t-info > a:before": "resources/skins.citizen.icons/shared/info.svg",
|
||||
"#citizen-siteStats__item--articles:before": {
|
||||
"file": {
|
||||
"ltr": "resources/skins.citizen.icons/shared/article-ltr.svg",
|
||||
|
|
|
|||
Loading…
Reference in a new issue