main.styl

@import 'nib'
@import 'util'

FONT_COLOR = #444
LIGHT_FONT_COLOR = #777

NO_METADATA_COLOR = #bc330d
NO_METADATA_GLOW_COLOR = #e33100

DOWNLOAD_COLOR_1 = #09c
DOWNLOAD_COLOR_2 = #0BF
SEED_COLOR = #85AE06
SEED_GLOW_COLOR = #91bd09

ellipsis()
  overflow: hidden
  text-overflow: ellipsis
  white-space: nowrap

*, *:before, *:after
  box-sizing: border-box

a, input, button
  -webkit-app-region: no-drag !important
  color: FONT_COLOR

body
  color: FONT_COLOR
  font-size: 11px
  margin: 0

header, .overall-stats, footer
  -webkit-app-region: drag
  box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.5)
  text-shadow: 0 0 1px rgba(255, 255, 255, 0.75)
  width: 100%

header
  background: linear-gradient(top, 20% #F0F0F0, #B0B0B0)
  height: 60px

  .system
    left: 0
    position: absolute
    top: 0
    padding: 5px
    z-index: 20
    i
      -webkit-app-region: no-drag
      margin-left: 4px

    :not(.fa-circle)
      display: none
    &:hover
      .fa-circle
        display: none
      :not(.fa-circle)
        display: inline-block
    .close
      color: rgb(195, 0, 4)
    .minimize
      color: rgb(241, 175, 68)
    .maximize
      color: rgb(67, 142, 12)

  .title
    font-size: 13px
    left: 0
    position: absolute
    right: 0
    text-align: center
    top: 3px
    z-index: 10

  .buttons
    padding-top: 30px

toolbar()
  background: linear-gradient(top, 20% #D0D0D0, #A2A2A2)
  border-top: 1px solid #666
  height: 24px
  padding: 4px 12px

.overall-stats
  toolbar()
  border-bottom: 1px solid #666
  i
    margin-right: 6px
    position: relative
    top: 1px
    vertical-align: baseline
  .ratio
    float: left
  .upload, .download
    float: right
    margin-left: 20px

footer
  toolbar()
  position: absolute
  bottom: 0
  .numTransfers
    left: 0
    position: absolute
    right: 0
    text-align: center
    z-index: 10
  .issue
    position: absolute
    right: 12px
    z-index: 20
    i
      margin-right: 4px

main
  height: 100%

.torrent
  height: 65px
  padding: 4px 10px 4px 5px
  width: 100%
  &:nth-child(odd)
    background-color: #FFF
  &:nth-child(even)
    background-color: #E5F0FA
  .left
    float: left
    height: 57px
    margin-right: 5px
    position: relative
    width: 50px
    img
      bottom: 0
      left: 0
      margin: auto
      position: absolute
      right: 0
      top: 0
      max-width: 50px
      max-height: 40px
  .right
    margin-left: 55px
    .name
      ellipsis()
      color: #000
      font-size: 13px
    .stats, .stats2
      ellipsis()
      font-size: 9px
      color: LIGHT_FONT_COLOR
  &.has-metadata
    .if-no-metadata
      display: none
  &:not(.has-metadata)
    .if-metadata
      display: none
  &.is-seeding
    .if-not-seeding
      display: none
  &:not(.is-seeding)
    .if-seeding
      display: none

@keyframes animate-stripes
  100%
    background-position: -40px 0

@keyframes green-pulse
  from
    background-color: SEED_COLOR
    box-shadow: 0 0 0 SEED_GLOW_COLOR
  50%
    background-color: SEED_GLOW_COLOR
    box-shadow: 0 0 18px SEED_GLOW_COLOR
  to
    background-color: SEED_COLOR
    box-shadow: 0 0 0 SEED_GLOW_COLOR

@keyframes red-pulse
  from
    background-color: NO_METADATA_COLOR
    box-shadow: 0 0 0 NO_METADATA_GLOW_COLOR
  50%
    background-color: NO_METADATA_GLOW_COLOR
    box-shadow: 0 0 18px NO_METADATA_GLOW_COLOR
  to
    background-color: NO_METADATA_COLOR
    box-shadow: 0 0 0 NO_METADATA_GLOW_COLOR

progress
  appearance: none
  border-radius: 3px
  border: none
  height: 15px
  margin: 2px 0
  position: relative
  width: 100%

progress::-webkit-progress-bar
  background-color: #DDD
  border-radius: 3px
  box-shadow: 0 1px 2px rgba(0,0,0,.5) inset

progress::-webkit-progress-value
  border-radius: 3px

.torrent:not(.has-metadata)
  progress::-webkit-progress-bar
    animation: red-pulse 1s infinite

.torrent.is-seeding
  progress::-webkit-progress-bar
    animation: green-pulse 3s infinite

.torrent.has-metadata:not(.is-seeding)
  progress::-webkit-progress-value
    animation: animate-stripes 2s linear infinite
    background-image: linear-gradient(135deg, transparent, transparent 33%, rgba(0, 0, 0, 0.1) 33%, rgba(0, 0, 0, 0.1) 66%, transparent 66%),
      linear-gradient(top, rgba(255, 255, 255, .25), rgba(0, 0, 0, 0.2)),
      linear-gradient(left, DOWNLOAD_COLOR_1, DOWNLOAD_COLOR_2)
    background-size: 40px 15px, 100% 100%, 100% 100%
    position: relative