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
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
.soundtrack
margin soundtrack-margin

12
styles/grid.scarlet
View File

@ -9,15 +9,15 @@ mixin grid-cell
height anime-image-medium-height
max-width anime-image-medium-width
max-height anime-image-medium-height
// min-width 90px
// min-height 127px
border-radius ui-element-border-radius
// background-size cover
// background-position 50% 50%
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
vertical
width 100%

2
styles/image-title.scarlet
View File

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

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

@ -2,19 +2,23 @@ mixin anime-mini-item
margin 0.25rem
flex-basis anime-image-small-width
:hover
text-shadow none
mixin anime-generic-item-image
object-fit cover
border-radius 2px
filter none
will-change filter
transition filter transition-speed ease, opacity transition-speed ease
:hover
filter saturate(1.3)
mixin anime-mini-item-image
anime-generic-item-image
width anime-image-small-width !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
max-width anime-image-small-width

2
styles/tip.scarlet
View File

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