web/notify.moe
Code Issues Pull Requests Activity

Improved styles

Browse Source
This commit is contained in:
Eduard Urbach 2016-11-30 21:33:11 +09:00
parent 5fe5c4a37d
commit 4631a10d24
6 changed files with 48 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
mixins/AnimeGrid.scarlet
View File

@ -3,6 +3,7 @@
.anime-grid-cell .anime-grid-cell
grid-cell grid-cell
shadow-up
.anime-grid-image .anime-grid-image
grid-image grid-image

12
pages/anime/anime.scarlet
View File

@ -3,7 +3,6 @@
.anime-image-container .anime-image-container
horizontal horizontal
flex 1
justify-content center justify-content center
align-items flex-start align-items flex-start
@ -11,17 +10,16 @@
width 230px width 230px
height auto height auto
border-radius 3px border-radius 3px
box-shadow 4px 4px 8px rgba(0, 0, 0, 0.12)
filter saturate(100%)
transition all transition-speed ease transition all transition-speed ease
object-fit cover object-fit cover
:hover
filter saturate(150%) saturate-up
box-shadow 6px 6px 12px rgba(0, 0, 0, 0.2) shadow-up
.anime-info .anime-info
vertical vertical
flex 9999999 flex 1
margin-left content-padding margin-left content-padding
.anime-title .anime-title

8
pages/genres/genres.scarlet
View File

@ -4,7 +4,6 @@
.genre .genre
grid-cell grid-cell
flip-card flip-card
ui-element
.genre-text .genre-text
grid-text grid-text
@ -14,3 +13,10 @@
.genre-image .genre-image
grid-image grid-image
.front
ui-element
shadow-up
.back
shadow-up

4
styles/config.scarlet
View File

@ -13,6 +13,10 @@ ui-hover-border = 1px solid rgba(0, 0, 0, 0.15)
ui-background = linear-gradient(to bottom, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.037) 100%) ui-background = linear-gradient(to bottom, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.037) 100%)
ui-hover-background = linear-gradient(to bottom, rgba(0, 0, 0, 0.01) 0%, rgba(0, 0, 0, 0.027) 100%) ui-hover-background = linear-gradient(to bottom, rgba(0, 0, 0, 0.01) 0%, rgba(0, 0, 0, 0.027) 100%)
// Shadow
shadow-light = 4px 4px 8px rgba(0, 0, 0, 0.05)
shadow-medium = 6px 6px 12px rgba(0, 0, 0, 0.15)
// Outline shadow // Outline shadow
outline-shadow-light = 0 0 6px alpha(black, 0.05) outline-shadow-light = 0 0 6px alpha(black, 0.05)
outline-shadow-medium = 0 0 6px alpha(black, 0.13) outline-shadow-medium = 0 0 6px alpha(black, 0.13)

6
styles/grid.scarlet
View File

@ -5,9 +5,6 @@ mixin grid
mixin grid-cell mixin grid-cell
position relative position relative
flex-grow 0
flex-shrink 0
width 16vw width 16vw
height 9vw height 9vw
min-width 90px min-width 90px
@ -21,6 +18,8 @@ mixin grid-cell
margin 0.5rem margin 0.5rem
scale-up
mixin grid-text mixin grid-text
vertical vertical
width 100% width 100%
@ -57,6 +56,7 @@ mixin flip-card
top 0 top 0
opacity 1 opacity 1
transition all transition-speed ease transition all transition-speed ease
transform rotateY(0)
.back .back
position absolute position absolute

27
styles/mixins.scarlet
View File

@ -20,7 +20,32 @@ mixin ui-element
border-radius 3px border-radius 3px
transition all transition-speed ease transition all transition-speed ease
&:hover :hover
border ui-hover-border border ui-hover-border
background ui-hover-background background ui-hover-background
box-shadow outline-shadow-medium box-shadow outline-shadow-medium
mixin light-up
filter brightness(0.4) saturate(1)
:hover
filter brightness(1) saturate(1.3)
mixin saturate-up
filter saturate(1)
:hover
filter saturate(1.3)
mixin saturate-up
filter saturate(1)
:hover
filter saturate(1.3)
mixin scale-up
transform scale(1)
:hover
transform scale(1.08)
mixin shadow-up
box-shadow shadow-light
:hover
box-shadow shadow-medium