web/notify.moe
Code Issues Pull Requests Activity

Less repaints

Browse Source
This commit is contained in:
Eduard Urbach 2018-04-20 11:47:24 +02:00
parent 3aabd3003a
commit 1f7e9a3ca8
5 changed files with 20 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
pages/soundtracks/soundtracks.scarlet
View File

@ -10,6 +10,12 @@ const soundtrack-margin = 1rem
flex-basis 500px flex-basis 500px
margin soundtrack-margin 0 margin soundtrack-margin 0
// If text-shadow is enabled, the whole container will repaint.
// We need to disable text-shadow to reduce re-painting.
a
:hover
text-shadow none
> 500px > 500px
.soundtrack .soundtrack
margin soundtrack-margin margin soundtrack-margin

12
styles/grid.scarlet
View File

@ -9,15 +9,15 @@ mixin grid-cell
height anime-image-medium-height height anime-image-medium-height
max-width anime-image-medium-width max-width anime-image-medium-width
max-height anime-image-medium-height max-height anime-image-medium-height
// min-width 90px
// min-height 127px
border-radius ui-element-border-radius border-radius ui-element-border-radius
// background-size cover
// background-position 50% 50%
margin 0.5rem margin 0.5rem
// If text-shadow is enabled, the whole container will repaint.
// We need to disable text-shadow to reduce re-painting.
a
:hover
text-shadow none
mixin grid-text mixin grid-text
vertical vertical
width 100% width 100%

2
styles/image-title.scarlet
View File

@ -14,6 +14,6 @@
.image-title-text .image-title-text
text-align center text-align center
color white color white
text-shadow 0 0 3px black text-shadow 0 0 3px black !important
font-size 80% font-size 80%
line-height 1.8em line-height 1.8em

6
styles/mixins/anime-grid.scarlet
View File

@ -2,19 +2,23 @@ mixin anime-mini-item
margin 0.25rem margin 0.25rem
flex-basis anime-image-small-width flex-basis anime-image-small-width
:hover
text-shadow none
mixin anime-generic-item-image mixin anime-generic-item-image
object-fit cover object-fit cover
border-radius 2px border-radius 2px
filter none filter none
will-change filter
transition filter transition-speed ease, opacity transition-speed ease transition filter transition-speed ease, opacity transition-speed ease
:hover :hover
filter saturate(1.3) filter saturate(1.3)
mixin anime-mini-item-image mixin anime-mini-item-image
anime-generic-item-image
width anime-image-small-width !important width anime-image-small-width !important
height anime-image-small-height !important height anime-image-small-height !important
anime-generic-item-image
// Make it easier for the browser to layout by specifying max size as well // Make it easier for the browser to layout by specifying max size as well
max-width anime-image-small-width max-width anime-image-small-width

2
styles/tip.scarlet
View File

@ -10,6 +10,7 @@ mixin tip-before
z-index 100000 z-index 100000
pointer-events none pointer-events none
opacity 0 opacity 0
will-change opacity
transform tip-transform-hidden transform tip-transform-hidden
font-size 0.92rem font-size 0.92rem
color text-color color text-color
@ -30,6 +31,7 @@ mixin tip-after
z-index 100001 z-index 100001
pointer-events none pointer-events none
opacity 0 opacity 0
will-change opacity
width 0 width 0
height 0 height 0
border-style solid border-style solid