@import "{design}/app.styl"

#cineDialog
  theme('border', '2px solid $uiBorderColor', 0.95)
  theme('background', '$uiGrayDarkest', 0.95)
  theme('color', '$textSecondaryColor')
  position: absolute
  border-radius: 8px
  z-index: 1000
  overflow: hidden
  cursor: move

  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, .cine-controls, .cine-options
    cursor: default

#cineDialog.double-row-style
  box-sizing: border-box
  width: 300px
  height: 80px
  padding: 10px
  top: 2%
  left: 35%

  .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


#cineDialog.single-row-style
  box-sizing: content-box
  width: 425px
  height: 45px
  padding: 4px 8px
  top: 2%
  left: 35%

  .cine-navigation
    position: relative
    float: right
    overflow: hidden

    .btn
      padding: 0 2px
      margin: 0 0 0 2px
      border: 0 none
      &:first-of-type
        margin-left: 0

      i
        font-size: 38px
        line-height: 45px

  .cine-controls
    position: relative
    float: left
    overflow: hidden
    .btn
      font-size: 22px
      line-height: 45px
      min-width: 28px
      padding: 0 0px
      margin: 0 4px
      border: 0 none

  .cine-options
    display: block
    position: relative
    width: 150px
    float: left
    overflow: hidden
    padding: 0
    margin: 0 0 0 10px

    .fps-section
      display: block
      float: left
      width: 80px
      input[type="range"]
        line-height: 45px
        height: 45px
        background-color: transparent
        border: 0 none
        outline: 0 none

    #fps
      display: block
      width: 68px
      float: left
      padding: 0
      margin: 0 0 0 2px
      text-align: center
      line-height: 45px