szurubooru/client/css/posts.styl

151 lines
3.9 KiB
Stylus
Raw Normal View History

@import colors
.post-list
ul
list-style-type: none
margin: 0
padding: 0
display: flex
align-content: flex-end
flex-wrap: wrap
margin: 0 -0.25em
li
position: relative
flex-grow: 1
margin: 0 0.25em 0.5em 0.25em
display: inline-block
text-align: left
min-width: 10em
width: 15vw
&:not(.flexbox-dummy)
min-height: 7.5em
height: 11.25vw
a
display: inline-block
width: 100%
height: 100%
line-height: 100%
font-size: 80%
color: white
2016-06-02 23:56:56 +02:00
outline-offset: -3px
.type
position: absolute
left: -1px
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]
display: none
.stats
position: absolute
right: -1px
bottom: -1px
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
margin-right: 0.5em
.icon:not(:first-of-type)
margin-left: 1em
.thumbnail
border: 1px solid $inactive-link-color
background-position: 50% 30%
width: 100%
height: 100%
2016-06-02 23:56:56 +02:00
margin: 0
outline-offset: -3px
&:hover
background: $main-color
.thumbnail
opacity: .9
border: 1px solid $main-color
2016-06-02 23:56:56 +02:00
a, .thumbnail
outline: 2px solid $main-color
.post-list-header
text-align: left
form
width: auto
input[name=search-text]
width: 25em
max-width: 90vw
.append
font-size: 0.95em
color: $inactive-link-color
2016-06-03 19:12:10 +02:00
.safety
border-color: lighten(saturation($main-color, 0%), 20%)
&.safety-safe
background: #97CF97
&.safety-sketchy
background: #E7E78D
&.safety-unsafe
background: #F2B48C
&.disabled
opacity: .2
.post-container
text-align: center
.post-content
text-align: left
margin: 0 auto
max-height: 100%
max-width: 100%
object-fit: contain
position: relative
img, object, video, .post-overlay
position: absolute
height: 100%
width: 100%
left: 0
right: 0
top: 0
bottom: 0
.post-overlay>*
position: absolute
left: 0
right: 0
top: 0
bottom: 0
width: 100%
height: 100%
.notes
stroke-width: 1px
polygon
fill: $note-overlay-background-color
stroke: $note-overlay-border-color
.note-text
position: absolute
max-width: 22.5em
margin-top: -0.5em
display: none
&>.wrapper
background: $note-text-background-color
padding: 0.5em
border: 1px solid $note-text-border-color
color: $note-text-text-color
margin-top: 1em
p:last-of-type
margin-bottom: 0
p:first-of-type
margin-top: 0