ulysia/szurubooru
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

client/posts: tweak posts list view

Browse source
This commit is contained in:
rr- 2016-06-04 12:22:14 +02:00
parent 19d8480891
commit a20bf56e75
1 changed files with 31 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

64
client/css/posts.styl
View file

@ -17,51 +17,44 @@
display: inline-block display: inline-block
text-align: left text-align: left
min-width: 10em min-width: 10em
width: 15vw width: 12vw
&:not(.flexbox-dummy) &:not(.flexbox-dummy)
min-height: 7.5em min-height: 7.5em
height: 11.25vw height: 9vw
a a
display: inline-block display: inline-block
width: 100% width: 100%
height: 100% height: 100%
line-height: 100% line-height: 80%
font-size: 80% font-size: 80%
color: white color: white
outline-offset: -3px outline-offset: -3px
box-shadow: 0 0 0 1px rgba(0,0,0,0.2)
.type, .stats
position: absolute
bottom: 0.5em
padding: 0.33em 0.5em
background: rgba(0,0,0,0.5)
height: 1em
.type .type
position: absolute float: left
left: -1px left: 0.5em
bottom: -1px
padding: 1em 4em 0.5em 0.5em
background-image: radial-gradient(
ellipse 100% 100% at bottom left,
rgba(0,0,0,0.5),
rgba(0,0,0,0));
&[data-type=image] &[data-type=image]
display: none display: none
.stats .stats
position: absolute float: right
right: -1px right: 0.5em
bottom: -1px
text-align: right text-align: right
/*padding: 0.5em
background: rgba(0,0,0,0.5);*/
padding: 1em 0.5em 0.5em 4em
background-image: radial-gradient(
ellipse 100% 100% at bottom right,
rgba(0,0,0,0.5),
rgba(0,0,0,0));
i i
margin-right: 0.5em margin-right: 0.25em
.icon:not(:first-of-type) .icon:not(:first-of-type)
margin-left: 1em margin-left: 1em
.thumbnail .thumbnail
border: 1px solid $inactive-link-color
background-position: 50% 30% background-position: 50% 30%
width: 100% width: 100%
height: 100% height: 100%
@ -71,9 +64,10 @@
background: $main-color background: $main-color
.thumbnail .thumbnail
opacity: .9 opacity: .9
border: 1px solid $main-color a
box-shadow: 0 0 0 1px $main-color
a, .thumbnail a, .thumbnail
outline: 2px solid $main-color outline: 3px solid $main-color
.post-list-header .post-list-header
text-align: left text-align: left
@ -87,15 +81,21 @@
color: $inactive-link-color color: $inactive-link-color
.safety .safety
border-color: lighten(saturation($main-color, 0%), 20%)
&.safety-safe &.safety-safe
background: #97CF97 background-color: #88D488
&.safety-sketchy border-color: @background-color
background: #E7E78D
&.safety-unsafe
background: #F2B48C
&.disabled &.disabled
opacity: .2 background-color: alpha(@background-color, 0.15)
&.safety-sketchy
background-color: #F3D75F
border-color: @background-color
&.disabled
background-color: alpha(@background-color, 0.15)
&.safety-unsafe
background-color: #F3985F
border-color: @background-color
&.disabled
background-color: alpha(@background-color, 0.15)
.post-container .post-container
text-align: center text-align: center