Create a gist now

Instantly share code, notes, and snippets.

@ile /card.styl
Last active Feb 11, 2017

What would you like to do?
@import './const'
.vplay
position relative
float left
overflow hidden
img
float none
span:hover
color rgb(255,255,255)
span
position absolute
top 50%
left 50%
margin-top -15px
margin-left -15px
width 30px
height 30px
line-height 30px
font-size 36px
cursor pointer
color rgba(255,255,255,0.9)
transition 0.3s color
background-color #000
text-align center
border-radius 100%
i.fa-circle
opacity 0.7
color rgb(29, 161, 242)
.linkpv section.photos-list
margin-left 0
.card.card-big
font-size 1em
.card-text
padding-left 0
margin-bottom 10px
h3
font-size 24px
img
border-radius 3px
&.card-image
max-width 100%
max-height 450px
margin-bottom 10px
.card.card-audio audio
width 100%
.card.card-video
padding 15px
> a
border none
.card
font-family 'Helvetica Neue', Helvetica, Arial
font-size 1em
line-height 1.3
transition 0.3s border, background
border-radius 3px
.card-text
display table-cell
padding-left 10px
word-break break-word
word-wrap break-word
hyphens auto
min-width 200px
a
color #333
text-decoration none
transition 0.3s background
> a:first-child
padding 15px
> a
border-radius 3px
border-spacing 10px 0
display block
> a:hover
background #f6f7f8
iframe
border none
width 100%
.favicon
width 12px
height 12px
margin-right 5px
vertical-align top
p
margin 0.3em 0
.fav
margin-top 8px
text-transform uppercase
font-size 0.6em
line-height 14px
letter-spacing 0.3px
h3
margin -1px 0 4px 0
font-size 1em
img
max-width 100%
.card-article
position absolute
width 300px
height 300px
overflow auto
box-shadow 0 0 25px #aaa
border-radius 3px
background #fff
padding 9px
animation 0.3s appear
font-size 88%
z-index 9
&::-webkit-scrollbar
width: 7px;
&::-webkit-scrollbar-track
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
&::-webkit-scrollbar-thumb
background-color: darkgrey;
outline: 1px solid slategrey;
.small
max-width 250px
max-height 125px
img
border-radius 3px
&.card-image
float left
max-width 250px
min-width 100px
max-height 125px
/* height 125px
object-fit contain */
&.card-image-full
max-width 100%
video
max-height max-photos-height
.card::after, .card a::after
content ""
display block
clear both
.dl-container
position fixed
top 0
left 0
right 0
bottom 0
background rgba(255,255,255,0.95)
z-index 10000
display flex
justify-content center
align-items center
video, iframe
max-width 90%
max-width 90vw
max-height 90%
max-height 90vh
width 90%
width 90vw
height 90%
.viewer-close:hover
color #222
border-color #222
.viewer-close
position absolute
top 5px
right 5px
width 32px
height 32px
color #999
font-size 27px
font-style normal
text-align center
cursor pointer
transition color 0.3s, border-color 0.3s
.dl-button-left
left 10px
.dl-button-right
right 10px
.dl-button:hover
color #aaa
.dl-button
position absolute
top 50%
font-size 72px
color #ddd
cursor pointer
transition 0.3s color
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment