card.styl

@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