web/notify.moe
Code Issues Pull Requests Activity

Improved styles

Browse Source
This commit is contained in:
Eduard Urbach 2016-12-01 00:29:36 +09:00
parent 4631a10d24
commit fe03d70095
15 changed files with 245 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
pages/anime/anime.pixy
View File

@ -4,6 +4,8 @@ component Anime(anime *arn.Anime)
.anime-image-container
img.anime-cover-image(src=anime.Image, alt=anime.Title.Romaji)
.space
.anime-info
h2.anime-title(title=anime.Type)= anime.Title.Romaji
@ -55,7 +57,7 @@ component Anime(anime *arn.Anime)
.light-button-group
each studio in anime.Studios
a.light-button(href="https://anilist.co/studio/" + toString(studio.ID), target="_blank")
i.fa.fa-building.fa-fw
Icon("building")
span= studio.Name
//- //-if crunchy

21
pages/anime/anime.scarlet
View File

@ -1,3 +1,6 @@
.anime-section-name
font-weight bold
.anime-header
horizontal
@ -11,7 +14,7 @@
height auto
border-radius 3px
transition all transition-speed ease
default-transition
object-fit cover
saturate-up
@ -20,7 +23,10 @@
.anime-info
vertical
flex 1
margin-left content-padding
.space
width content-padding
height content-padding
.anime-title
text-align left
@ -47,4 +53,13 @@
.relation-image
width 100px
height 141px
height 141px
border-radius 3px
object-fit cover
default-transition
scale-up
shadow-up
< 800px
.anime-header
vertical

2
pages/anime/anime.styl
View File

@ -60,7 +60,7 @@
border-radius 3px
box-shadow 4px 4px 8px rgba(0, 0, 0, 0.12)
filter saturate(100%)
transition all transition-speed ease
default-transition
object-fit cover
:hover
filter saturate(130%)

4
pages/profile/profile.scarlet
View File

@ -13,7 +13,7 @@ profile-boot-duration = 2s
color white
text-shadow 0px 0px 2px rgb(0, 0, 0, 0.5)
transition all transition-speed ease
default-transition
animation-name appear
animation-duration transition-speed
@ -37,7 +37,7 @@ profile-boot-duration = 2s
background-size cover
overflow hidden
transition all transition-speed ease
default-transition
animation cover-animation profile-boot-duration
animation-fill-mode forwards

4
pages/profile/profile.styl
View File

@ -10,7 +10,7 @@ profileBootDuration = 2s
color white
text-shadow 0px 0px 2px rgb(0, 0, 0, 0.5)
transition all transition-speed ease
default-transition
animation-name appear
animation-duration transition-speed
@ -38,7 +38,7 @@ profileBootDuration = 2s
background-size cover
overflow hidden
transition all transition-speed ease
default-transition
animation cover-animation profileBootDuration
animation-fill-mode forwards

5
pages/search/popular.scarlet
View File

@ -13,4 +13,7 @@
.popular-anime-image
width 100px !important
height 141px !important
border-radius 3px
border-radius 3px
object-fit cover
default-transition
shadow-up

0
mixins/AnimeGrid.scarlet → styles/anime-grid.scarlet
View File

2
styles/base.scarlet
View File

@ -12,7 +12,7 @@ body
a
color link-color
text-decoration none
transition all transition-speed ease
default-transition
:hover
color link-hover-color

9
styles/config.scarlet
View File

@ -6,6 +6,7 @@ link-hover-color = rgb(242, 93, 30)
header-color = rgb(60, 60, 60)
nav-link-color = rgb(160, 160, 160)
nav-link-hover-color = rgb(255, 255, 255)
post-highlight-color = rgba(248, 165, 130, 0.7)
// UI
ui-border = 1px solid rgba(0, 0, 0, 0.1)
@ -15,12 +16,12 @@ ui-hover-background = linear-gradient(to bottom, rgba(0, 0, 0, 0.01) 0%, rgba(0,
// Shadow
shadow-light = 4px 4px 8px rgba(0, 0, 0, 0.05)
shadow-medium = 6px 6px 12px rgba(0, 0, 0, 0.15)
shadow-medium = 6px 6px 12px rgba(0, 0, 0, 0.13)
// Outline shadow
outline-shadow-light = 0 0 6px alpha(black, 0.05)
outline-shadow-medium = 0 0 6px alpha(black, 0.13)
outline-shadow-heavy = 0 0 6px alpha(black, 0.6)
outline-shadow-light = 0 0 6px rgba(0, 0, 0, 0.05)
outline-shadow-medium = 0 0 6px rgba(0, 0, 0, 0.13)
outline-shadow-heavy = 0 0 6px rgba(0, 0, 0, 0.6)
// Distances
content-padding = 1.5rem

177
styles/forum.scarlet Normal file
View File

@ -0,0 +1,177 @@
.forum-header
text-align left
.post-content
ui-element
padding 0.4rem 1rem
.thread-link
horizontal
.thread-content-container
flex 1
vertical
justify-content center
.thread-content
horizontal
.forum-tags
margin-bottom content-padding
// Toolbar
.post-tool
opacity 0.7
&:hover
cursor pointer
opacity 1
.post-likes
opacity 0.4
margin-right 0.4em
&:before
content "+"
.post-permalink
color blue !important
.post-delete
color rgb(255, 32, 12) !important
.post-like
color green !important
.post-unlike
color rgb(255, 32, 12) !important
// Old
// #posts
// display flex
// flex-flow column
// flex 1
// max-width 100%
// .post
// display flex
// flex-flow column
// margin 0.5rem 0
// [data-highlight="true"]
// .post-content
// border 2px solid post-highlight-color
// .post-author
// text-align center
// flex-grow 0
// display flex
// flex-flow row
// justify-content center
// margin-bottom -3px
// img
// margin 0 !important
// #post-input,
// .post-input
// width 100%
// min-height 150px
// margin 0.5rem 0
// .post-submit
// margin-top 0.5rem
// max-width 200px
// align-items flex-end
// .post-toolbar
// display flex
// flex-flow row
// opacity 0
// default-transition
// position absolute
// bottom 3px
// right 0
// .post-save
// float right
// :hover
// cursor pointer
// .post-input-toolbar
// display flex
// flex-flow row
// .post-tool
// opacity 0.7
// :hover
// cursor pointer
// opacity 1
// .post-likes
// opacity 0.4
// margin-right 0.4em
// :before
// content "+"
// .post-permalink
// color blue !important
// .post-delete
// color rgb(255, 32, 12) !important
// .post-like
// color green !important
// .post-unlike
// color rgb(255, 32, 12) !important
// .post-content
// ui-element
// text-align left
// flex-grow 1
// padding 0.4rem 1rem
// margin-left 0.3rem
// border-radius 3px
// position relative
// :hover
// .post-toolbar
// opacity 1
// h1
// font-size 1.5rem
// line-height 2em
// h2
// font-size 1.3rem
// line-height 2em
// font-weight normal
// h3
// font-size 1.1rem
// line-height 2em
// font-weight normal
// .hidden
// display none
// .thread
// display flex
// flex-flow column
// align-items center
// .thread-title
// width auto
// .posts
// width 100%
// max-width 830px
// > 500px
// .post
// flex-flow row
// justify-content center
// .post-author
// //

4
styles/grid.scarlet
View File

@ -55,7 +55,7 @@ mixin flip-card
left 0
top 0
opacity 1
transition all transition-speed ease
default-transition
transform rotateY(0)
.back
@ -63,5 +63,5 @@ mixin flip-card
left 0
top 0
opacity 0
transition all transition-speed ease
default-transition
transform rotateY(180deg)

13
styles/light-button.scarlet Normal file
View File

@ -0,0 +1,13 @@
.light-button-group
horizontal-wrap
justify-content flex-start
font-size 0.9rem
.light-button
display inline-block
padding 0.5rem 1rem
border-radius 3px
:hover
color white !important
background-color link-hover-color

13
styles/mixins.scarlet
View File

@ -1,3 +1,6 @@
mixin default-transition
transition all transition-speed ease
mixin horizontal
display flex
flex-direction row
@ -18,8 +21,7 @@ mixin ui-element
border ui-border
background ui-background
border-radius 3px
transition all transition-speed ease
default-transition
:hover
border ui-hover-border
background ui-hover-background
@ -48,4 +50,9 @@ mixin scale-up
mixin shadow-up
box-shadow shadow-light
:hover
box-shadow shadow-medium
box-shadow shadow-medium
mixin outline-shadow-up
box-shadow outline-shadow-light
:hover
box-shadow outline-shadow-medium

2
styles/old/navigation.styl
View File

@ -16,7 +16,7 @@
margin-top 0
height 3px
width 0px
transition all transition-speed ease
default-transition
&.active
&:hover
cursor pointer

6
styles/user.scarlet Normal file
View File

@ -0,0 +1,6 @@
.user-image
width 50px
height 50px
border-radius 100%
default-transition
outline-shadow-up