StarCitizenTools/mediawiki-skins-Citizen
1
0
Fork 0
mirror of https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git synced 2024-09-23 10:19:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(core): ✨ remove expensive CSS animation

Browse source 
Avoid paint and layout triggering transitions
This commit is contained in:
alistair3149 2023-07-16 15:32:13 -04:00
parent 1aba52b870
commit 85f036c2f8
No known key found for this signature in database
GPG key ID: 16076C01E5C88864
17 changed files with 3 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
resources/mixins.less
View file

@ -61,8 +61,8 @@
// Transition animation
.citizen-card-transition() {
transition: var( --transition-menu );
transition-property: transform, opacity, visibility;
will-change: transform, opacity, visibility;
transition-property: transform, opacity;
will-change: transform, opacity;
}
// Header card popups
@ -190,8 +190,6 @@
.button-blue() {
background-color: var( --color-primary );
color: #fff !important;
transition: var( --transition-hover );
transition-property: background, color;
}
.button-blue-hover() {
@ -205,8 +203,6 @@
.button-red() {
background-color: var( --color-destructive );
color: #fff !important;
transition: var( --transition-hover );
transition-property: background, color;
}
.button-red-hover() {

2
resources/skins.citizen.styles/common/scrollbar.less
View file

@ -12,8 +12,6 @@
::-webkit-scrollbar-track {
background: transparent;
transition: var( --transition-hover );
transition-property: background;
&:hover {
background: var( --background-color-quiet--hover );

2
resources/skins.citizen.styles/components/Header.less
View file

@ -26,8 +26,6 @@
border-radius: var( --border-radius--small );
contain: strict;
place-items: center;
transition: var( --transition-hover );
transition-property: background;
// Used in checkbox hack
&Checkbox {

2
resources/skins.citizen.styles/components/Menu.less
View file

@ -20,7 +20,7 @@
font-weight: var( --font-weight-medium );
gap: var( --space-sm );
transition: var( --transition-hover );
transition-property: background, color, opacity;
transition-property: opacity;
&:hover {
background-color: var( --background-color-primary--hover );

2
resources/skins.citizen.styles/components/Search.less
View file

@ -29,8 +29,6 @@
&__formButton {
border-radius: var( --border-radius--small );
transition: var( --transition-hover );
transition-property: background;
.citizen-ui-icon::before {
transition: var( --transition-hover );

2
resources/skins.citizen.styles/components/StickyHeader.less
View file

@ -46,8 +46,6 @@
left: 0;
border-radius: var( --border-radius--small );
margin: ~'calc( var( --space-xs ) * -1 )';
transition: var( --transition-hover );
transition-property: background;
&:hover {
background-color: var( --background-color-quiet--hover );

2
resources/skins.citizen.styles/components/TableOfContents.less
View file

@ -59,8 +59,6 @@
color: var( --color-base );
font-weight: var( --font-weight-medium );
gap: var( --space-xs );
transition: var( --transition-hover );
transition-property: background, color;
&.citizen-toc__top {
height: 0;

2
resources/skins.citizen.styles/components/Usermenu.less
View file

@ -58,8 +58,6 @@
&groups {
a {
display: block;
transition: var( --transition-hover );
transition-property: color;
&:hover {
color: var( --color-primary--hover );

2
resources/skins.citizen.styles/skinning/content.media-screen.less
View file

@ -47,8 +47,6 @@ figure[ typeof~='mw:File/Frame' ] {
&.new {
padding: var( --space-sm );
border: 1px dashed var( --border-color-base--darker );
transition: var( --transition-hover );
transition-property: background, color;
&:hover {
background-color: var( --color-destructive--hover );

3
resources/skins.citizen.styles/skinning/content.tables.less
View file

@ -24,9 +24,6 @@
}
tr {
transition: var( --transition-hover );
transition-property: background;
// Divider
+ tr {
border-top: 1px solid var( --border-color-base );

2
resources/skins.citizen.styles/skinning/content.thumbnails-screen.less
View file

@ -32,8 +32,6 @@
&.new {
padding: var( --space-sm );
border: 1px dashed var( --border-color-base--darker );
transition: var( --transition-hover );
transition-property: background, color;
&:hover {
background-color: var( --color-destructive--hover );

2
resources/skins.citizen.styles/skinning/interface.category.less
View file

@ -33,8 +33,6 @@
border: 1px solid var( --border-color-base--darker );
border-radius: var( --border-radius--pill );
color: var( --color-base--subtle );
transition: var( --transition-hover );
transition-property: background, color;
&:hover {
background-color: var( --color-primary--hover );

2
skinStyles/extensions/DismissableSiteNotice/ext.dismissableSiteNotice.less
View file

@ -15,8 +15,6 @@
font-size: 24px;
line-height: 1;
text-align: center;
transition: var( --transition-hover );
transition-property: color;
}
&:hover {

6
skinStyles/extensions/MultimediaViewer/mmv.less
View file

@ -300,8 +300,6 @@
z-index: 1002; // avoid covering other buttons
top: 20vh !important;
height: 50vh;
transition: var( --transition-hover );
transition-property: background;
}
/* mmv.ui.permission.less */
@ -512,8 +510,6 @@
grid-template-areas: 'desc links'
'about about';
grid-template-columns: 2fr 1fr;
transition: var( --transition-menu );
transition-property: background;
.mw-mmv-untruncated & {
background-color: transparent;
@ -608,8 +604,6 @@
border-top-left-radius: var( --border-radius--large );
border-top-right-radius: var( --border-radius--large );
color: #fff;
transition: var( --transition-menu );
transition-property: background, color;
&.mw-mmv-untruncated {
background-color: var( --color-surface-1 );

2
skinStyles/extensions/Translate/ext.translate.tag.languages.less
View file

@ -51,8 +51,6 @@
border: 1px solid var( --border-color-base--darker );
border-radius: var( --border-radius--pill );
color: var( --color-base--subtle );
transition: var( --transition-hover );
transition-property: background, color;
&:hover,
&:active {

2
skinStyles/extensions/WSSearchFront/ext.WSSearchFront.module.less
View file

@ -53,8 +53,6 @@
.wssearch--selected-filter {
background-color: var( --color-surface-2 );
transition: var( --transition-hover );
transition-property: background-color, color, border-color, box-shadow;
&:hover {
border-color: var( --base-color-lighter );

2
skinStyles/mediawiki/special/mediawiki.special.changeslist.less
View file

@ -161,8 +161,6 @@ body:not( .mw-rcfilters-ui-initialized ) .mw-rcfilters-head {
border-radius: var( --border-radius--small );
margin: 0 0 0 16px !important;
color: var( --color-base--subtle );
transition: var( --transition-hover );
transition-property: background;
&:hover {
background-color: var( --background-color-quiet--hover );