codenautas/backend-plus

body
  font-size 93.75%
  margin 0px
  
#main_layout
  margin 8px

#status:empty
  display none
  
#status
  border-top 1px dotted #A88
  margin-top 5px
  padding-top 5px
  padding 3px
  font-size 80%
  
//.status-error
//  border 1px solid #B66
//  color #B00
//  padding 2px
//
//.status-log
//  border 1px solid #666
//  color #BBB
//  padding 2px

div100(n)
  return n / 100

pct(n)
  {n}\%
    opacity div100(n)
  
@keyframes pulse
    for num in 0 20 40 60 80 100
      pct(num)

@keyframes blink-animation
  to
    visibility hidden

@-webkit-keyframes blink-animation
  to
    visibility hidden

set-prop(prop, args)
  {prop} args
  -webkit-{prop} args

set-blink-animation()
  set-prop('animation', blink-animation arguments)

// configure animnation time
animation-time = 2s

[rec-status=blink]
  set-blink-animation animation-time steps(5, start)

[rec-status=pulse]
  animation-name pulse
  animation-duration animation-time

#keep-alive-signal
  position fixed
  left 0px
  top 0px
  height 15px
  width 15px
  border 1px solid black
  border-radius 4px
  font-size 70%
  text-align center
  z-index -1

.status-info
  font-size 80%
  font-weight bold
  margin-bottom 5px
  border-bottom 1px solid #997
  background-color #DDC

.status-info a
  margin 6px

.progress-bar
  border 1px solid #779
  background-color #99A
  border-radius 4px
  
.progress-bar .indicator
  background-color #5C5
  border-radius 4px
  height 8px
  width 0%

.dialog-error-img  
  float left
  > img
    height 64px
    width 64px

[my-working=working]
  background-image url('img/loading16.gif')
  
[my-working=error]
  background-image url('img/error16.gif')

.dialog-promise pre
  text-align left
  
.floating-img
  height 32px
  width 32px
  opacity 0.7
  
.my-cancel
  background none!important
  color #F00
  border none
  padding 0!important
  font inherit
  font-size 80%
  border-bottom 1px solid #F44

[typed-controls-status="error"]
  color #733 
  font-weight bold

[typed-controls-status="ok"]
  color #000 

[type-align=left]
  text-align left

[type-align=right]
  text-align right!important

[non-copyable="."]::after{
  content '.'
}

[non-copyable="\002c"]::after{
  content '\002c'
}

[non-copyable=" "]::after{
  content '\202f'
}

.pika-single
  button
    padding 4px
    margin 0px

.result-progress
  height 200px
  overflow auto

.dialog-promise
  .result-progress
    width 300px

.error-message
  color red
  font-weight bold

.my-progress
  text-align left

.my-progress-step-t
  font-size 70%
  font-weight bold
  font-color gray
  margin-right 2px
  min-width 4em

.my-progress-num
  font-size 80%
  font-weight bold
  font-color #88D
  margin-right 2px

.my-progress-acum-t
  font-size 70%
  font-color gray
  margin-right 2px
  min-width 4em