@import "{design}/app.styl"

#cineDialog
  theme('border', '2px solid $uiBorderColor', 0.95)
  theme('background', '$uiGrayDarkest', 0.95)
  theme('color', '$textSecondaryColor')
  border-radius: 8px
  bottom: 3px
  box-sizing: border-box
  height: 80px
  left: 50%
  overflow: hidden
  padding: 10px
  position: absolute
  right: 3px
  top: 2%
  width: 300px
  z-index: 1000
  transform(translateX(-50%) translateY(-50%))

  h5
    font-size: 20px
    line-height: 35px
    margin: 0

  h5, label
    font-weight: 400

  .btn
    theme('color', '$textSecondaryColor')
    background-color: transparent

    &:hover
      theme('color', '$hoverColor')

    &:active, &.active
      theme('color', '$activeColor')


  .cine-navigation
    position: absolute
    right: 4px
    top: 4px

    .btn
      padding: 0 4px

      i
        font-size: 36px
        line-height: 36px

  .cine-controls
    left: 0px

  .cine-options
    padding: 0px 0

    .fps-section
      width: 175px
      float: left

    #fps
      float: right
      padding: 5px 10px 0 0

    .loop-section
      padding-right: 12px