web/notify.moe
Code Issues Pull Requests Activity

Improved anime page styles

Browse Source
This commit is contained in:
Eduard Urbach 2016-12-02 15:31:09 +09:00
parent 6372ff3d66
commit a45613be84
2 changed files with 2 additions and 180 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
pages/anime/anime.scarlet
View File

@ -34,9 +34,11 @@
.anime-title .anime-title
text-align left text-align left
margin-bottom 0.5rem
.anime-alternative-title .anime-alternative-title
font-size 0.9em font-size 0.9em
margin-bottom 0.5rem
color rgba(60, 60, 60, 0.5) !important color rgba(60, 60, 60, 0.5) !important
.sources .sources

180
pages/anime/anime.styl
View File

@ -1,180 +0,0 @@
.anime-container
padding 0
text-align left
border-radius 3px
box-sizing border-box
.anime-links
display flex
flex-flow row wrap
.anime-links-category
flex 1
flex-basis 100%
// min-width 300px
// max-width 100%
.anime-title-db
text-align left
width auto
.second-title-container
float left
width 100%
text-align left
margin-top -0.6em
margin-bottom 0.6em
.second-title
font-size 0.9em
font-weight normal
color rgba(60, 60, 60, 0.5) !important
.anime-summary-header
display block
.anime-summary
flex 1
min-width 300px
max-width 100%
margin-left 0
.anime-header
margin-top 0
.anime-trailer
width 100%
.genre-list
list-style-type none
margin-left 0.5em
.sources
font-size 0.8em
opacity 0.5
.anime-header
display flex
flex-flow row
.anime-image
border-radius 3px
box-shadow 4px 4px 8px rgba(0, 0, 0, 0.12)
filter saturate(100%)
default-transition
object-fit cover
:hover
filter saturate(130%)
box-shadow 6px 6px 12px rgba(0, 0, 0, 0.2)
.anime-image-container
flex-shrink 0
text-align center
margin-bottom 1rem
.anime-image
margin 0 !important
margin-right 1.5rem !important
width 225px
.anime-track
width 100%
height 150px
.info-column
flex-grow 1
display flex
flex-flow column
.users-count
opacity 0.5
font-size 0.9em
.anime-frontpage
h2, h3
text-align center
.popular-anime-list
width 100%
display flex
flex-flow row wrap
justify-content center
.popular-anime
padding 0.5em
display block
.popular-anime-image
width 100px !important
height 141px !important
.light-button-group
float left
width 100%
margin 0
width auto
display flex
flex-flow row 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 linkHoverColor
.relations
float left
display flex
flex-flow row wrap
.relation
display flex
flex-flow column
font-size 0.9rem
align-items center
padding 0.5rem
.relation-image
width 100px
height 141px
.entry-error
color red !important
.entry-ok
color green !important
#search
float none
#search-results
width 100%
max-width 560px
text-align left
margin 0 auto
.search-performance, .anime-count
opacity 0.25
text-align center !important
.search-result
float left
width 100%
padding 0.25em 0.5em
border-radius 3px
box-sizing border-box
&:focus
background-color rgb(32, 32, 32) !important
color rgb(232, 232, 232) !important
@media only screen and (max-width: 800px)
.anime-header
flex-flow row wrap
.anime-title-db
.second-title-container
.anime-image-container
text-align center
flex-grow 1