h2.title Change Mode
span.change_mode
  span.change_btn
  span.yes O
  span.no |

.keyboard-wrap
  section.top.row-spacing
    .row
      span.key.key-esc Esc
      span.key F1
      span.key F2
      span.key F3
      span.key.col-spacing F4
      span.key F5
      span.key F6
      span.key F7
      span.key.col-spacing F8
      span.key F9
      span.key F10
      span.key F11
      span.key.col-spacing F12
      span.key.text-small Print Screen
      span.key.text-small Scroll Lock
      span.key.text-small.col-spacing 
        span.underline Pause 
        | Break
      span.key.key-light
        span.text-small Num
        span.circle.active
      span.key.key-light
        span.text-small Caps
        span.circle
      span.key.key-light
        span.text-small Scroll
        span.circle
      span.key.key-light
        span.text-small Power
        span.circle.active
  section.main.col-spacing
    .row
      span.key
        span.lt ~
        span.lb `
        span.rb 巷
      span.key
        span.lt !
        span.lb 1
        span.rt ㄅ
        span.rb 言
      span.key
        span.lt @
        span.lb 2
        span.rt ㄉ
        span.rb 牛
      span.key
        span.lt #
        span.lb 3
        span.rt ˇ
        span.rb 目
      span.key
        span.lt $
        span.lb 4
        span.rt ˋ
        span.rb 四
      span.key
        span.lt %
        span.lb 5
        span.rt ㄓ
        span.rb 王
      span.key
        span.lt ^
        span.lb 6
        span.rt ˊ
        span.rb 門
      span.key
        span.lt &
        span.lb 7
        span.rt ˙
        span.rb 田
      span.key
        span.lt *
        span.lb 8
        span.rt ㄚ
        span.rb 米
      span.key
        span.lt (
        span.lb 9
        span.rt ㄞ
        span.rb 足
      span.key
        span.lt )
        span.lb 0
        span.rt ㄢ
        span.rb 金
      span.key
        span.lt _
        span.lb -
        span.rt ㄦ
        span.rb 鄉
      span.key
        span.lt +
        span.lb =
      span.key
        span.lt |
        span.lb \
        span.rb 鎮
      span.key.key-backspace
        i.fa.fa-long-arrow-left
    .row
      span.key.key-medium Tab 
        i.fa.fa-exchange
      span.key
        span.lt Q
        span.lb 手
        span.rt ㄆ
        span.rb 石
      span.key
        span.lt W
        span.lb 田
        span.rt ㄊ
        span.rb 山
      span.key
        span.lt E
        span.lb 水
        span.rt ㄍ
        span.rb 一
      span.key
        span.lt R
        span.lb 口
        span.rt ㄐ
        span.rb 工
      span.key
        span.lt T
        span.lb 廿
        span.rt ㄔ
        span.rb 系
      span.key
        span.lt Y
        span.lb 卜
        span.rt ㄗ
        span.rb 火
      span.key
        span.lt U
        span.lb 山
        span.rt ㄧ
        span.rb 艸
      span.key
        span.lt I
        span.lb 戈
        span.rt ㄛ
        span.rb 木
      span.key
        span.lt O
        span.lb 人
        span.rt ㄟ
        span.rb 口
      span.key
        span.lt P
        span.lb 心
        span.rt ㄣ
        span.rb 耳
      span.key
        span.lt {
        span.lb [
        span.rb 路
      span.key
        span.lt }
        span.lb ]
        span.rb 街
      span.key.key-medium.key-enter
        span.key Enter 
          i.fa.fa-level-down
    .row
      span.key.key-capslock Caps Lock
      span.key
        span.lt A
        span.lb 曰
        span.rt ㄇ
        span.rb 人
      span.key
        span.lt S
        span.lb 尸
        span.rt ㄋ
        span.rb 革
      span.key
        span.lt D
        span.lb 木
        span.rt ㄎ
        span.rb 曰
      span.key
        span.lt F
        span.lb 火
        span.rt ㄑ
        span.rb 土
      span.key
        span.lt G
        span.lb 土
        span.rt ㄕ
        span.rb 手
      span.key
        span.lt H
        span.lb 竹
        span.rt ㄘ
        span.rb 鳥
      span.key
        span.lt J
        span.lb 十
        span.rt ㄨ
        span.rb 月
      span.key
        span.lt K
        span.lb 大
        span.rt ㄜ
        span.rb 立
      span.key
        span.lt L
        span.lb 中
        span.rt ㄠ
        span.rb 女
      span.key
        span.lt :
        span.lb ;
        span.rt ㄤ
        span.rb 虫
      span.key
        span.lt "
        span.lb '
        span.rb 號
      //- span.key.key-enter-bottom Enter 
        //- i.fa.fa-level-down
    .row
      span.key.key-shift
        i.fa.fa-arrow-up
        |  Shift
      span.key
        span.lt Z
        span.lb 重
        span.rt ㄈ
        span.rb 心
      span.key
        span.lt X
        span.lb 難
        span.rt ㄌ
        span.rb 水
      span.key
        span.lt C
        span.lb 金
        span.rt ㄏ
        span.rb 鹿
      span.key
        span.lt V
        span.lb 女
        span.rt ㄒ
        span.rb 禾
      span.key
        span.lt B
        span.lb 月
        span.rt ㄖ
        span.rb 馬
      span.key
        span.lt N
        span.lb 弓
        span.rt ㄙ
        span.rb 魚
      span.key
        span.lt M
        span.lb 一
        span.rt ㄩ
        span.rb 雨
      span.key
        span.lt <
        span.lb ,
        span.rt ㄝ
        span.rb 力
      span.key
        span.lt >
        span.lb .
        span.rt ㄡ
        span.rb 舟
      span.key
        span.lt ?
        span.lb /
        span.rt ㄥ
        span.rb 竹
      span.key.key-shift
        i.fa.fa-arrow-up
        |  Shift
    .row
      span.key.key-ctrl Ctrl
      span.key.key-win
        i.fa.fa-windows
      span.key.key-alt Alt
      span.key.key-space
      span.key.key-alt Alt
      span.key.key-win
        i.fa.fa-windows
      span.key.key-right-click
        i.fa.fa-list-alt
      span.key.key-ctrl Ctrl
  section.dev.col-spacing
    .row
      span.key.text-small Insert
      span.key.text-small Home
      span.key.text-small Page Up
    .row
      span.key.text-small Delete
      span.key.text-small End
      span.key.text-small Page Down
    .arrow-box
      .row
        span.key
          i.fa.fa-caret-up
      .row
        span.key
          i.fa.fa-caret-left
        span.key
          i.fa.fa-caret-down
        span.key
          i.fa.fa-caret-right
  section.number
    .row
      span.key Num Lock
      span.key /
      span.key *
      span.key -
    .row
      span.key
        span.lt 7
        span.lb.text-small Home
      span.key
        span.lt 8
        span.lb.text-small
          i.fa.fa-long-arrow-up
      span.key
        span.lt 9
        span.lb.text-small PgUp
      span.key.key-long +
    .row
      span.key
        span.lt 4
        span.lb.text-small
          i.fa.fa-long-arrow-left
      span.key 5
      span.key
        span.lt 6
        span.lb.text-small
          i.fa.fa-long-arrow-right
    .row
      span.key
        span.lt 1
        span.lb.text-small End
      span.key
        span.lt 2
        span.lb.text-small
          i.fa.fa-long-arrow-down
      span.key
        span.lt 3
        span.lb.text-small PgDn
      span.key.key-long Enter
        i.fa.fa-level-down
    .row
      span.key.num-0
        span.lt 0
        span.lb.text-small Ins
      span.key
        span.lt .
        span.lb.text-small Del

// $key: (border: #777, cap: #555, cap-side: #444)
// $keyboard: (base: #444, hole: #222, border: #ccc, side: #333)
// $text: (padding: 3px, color: white)
// $light: (base: #333, light: #2196f3)

$key: (border: #bbb, cap: #eee, cap-side: #ddd)
$keyboard: (base: #eee, hole: #888, border: #ccc, side: #aaa)
$text: (padding: 3px, color: #555)
$light: (base: #333, light: #8bc34a)

// $key: (border: #ffac32, cap: white, cap-side: #cc5d5d)
// $keyboard: (base: #f9f0a0, hole: #ff9800, border: #ffc107, side: #78bba3)
// $text: (padding: 3px, color: #78bba3)
// $light: (base: #333, light: #d47ade)

$fillet: 5px
*
  margin: 0
  // outline: 1px solid #fac !important
  box-sizing: border-box
body, html
  background: #ddd
  font-family: 'Ubuntu','微軟正黑體', sans-serif
  font-size: 13px
  height: 100%
  width: 100%
  perspective: 3000px
.title
  text-align: center
  margin-top: 50px
.change
  &_mode
    display: block
    width: 120px
    height: 40px
    border: 2px solid #fff
    background: #eee
    box-shadow: 0 0 0 3px #aaa
    margin: 20px auto
    border-radius: 20px
    position: relative
    & .yes, & .no
      position: absolute
      display: block
      line-height: 40px
      width: 60px
      text-align: center
      font-weight: bold
    & .no
      right: 0
  &_btn
    display: block
    width: 60px
    height: 60px
    border-radius: 50%
    background: #0fa
    border: 3px solid #0ec186
    top: -11px
    position: absolute
    z-index: 1
    cursor: pointer
    &.open
      right: 0
.keyboard-wrap
  width: 1315px
  border-radius: 15px
  background: map-get($keyboard, base)
  padding: 15px
  border: 1px solid map-get($keyboard, border)
  box-shadow: 10px 7px 0px 2px map-get($keyboard, side)
  z-index: 2
  position: absolute
  transform: scale(.8) rotateX(40deg) rotateY(-40deg) rotateZ(40deg) translate(-120%, -50%)
  transform-origin: 50% 50%
  top: 50%
  left: 50%
  transition: .5s
  &.transform
    transform: scale(1) rotateX(0) rotateY(0) rotateZ(0) translate(-50%, -50%)
    box-shadow: 0px 7px 0px 2px map-get($keyboard, side)
  section
    display: inline-block
    vertical-align: top
  .col-spacing
    margin-right: 28px
  .row-spacing
    margin-bottom: 15px
  .text-small
    text-align: center
    font-size: 12px
 
  .arrow-box
    margin-top: 55px
    .row:first-of-type
      span
        margin-left: 64px
    span
      text-align: center
      font-size: 18px
      line-height: 34px
.row
  .key
    color: map-get($text, color)
    background: map-get($key, cap)
    display: inline-block
    border: 1px solid map-get($key, border)
    width: 45px
    height: 45px
    border-radius: $fillet
    padding: map-get($text, padding)
    vertical-align: top
    position: relative
    box-shadow: 0 3px 0 2px map-get($key, cap-side)
    margin-bottom: 10px
    margin-left: 10px
    cursor: pointer
    &::before
      content: ''
      width: 100%
      height: 100%
      background: map-get($keyboard, hole)
      padding: 0 4px 4px 5px
      left: -4px
      bottom: -8px
      border-radius: $fillet
      position: absolute
      z-index: -1
      box-shadow: 0px 1px 0px rgba(white, .4)
    &:active
      // background: map-get($key, cap-side)
      box-shadow: 0 1px 0 1.5px map-get($key, cap-side)
      top: 3px
      &::before
        bottom: -5px
    &-medium
      width: 72.5px
    &-esc
      margin-right: 55px
    &-shift
      width: 127.5px
    &-capslock
      width: 90px
    &-enter
      float: right
      position: relative
      height: 60px
      border-radius: $fillet $fillet 0 0
      &::after
        content: ''
        background: map-get($key, cap)
        position: absolute
        width: 100%
        height: 5px
        right: 0
        bottom: 0
        z-index: 1
      &:active
        &::after
          bottom: 3px
        span.key
          top: 54px
          box-shadow: 0 1px 0 1.5px map-get($key, cap-side)
          &::before
            bottom: -5px
      span.key
        position: absolute
        right: -1px
        top: 54px 
        width: 110px
        font-size: 18px
        border-radius: $fillet 0 $fillet $fillet
    i.fa-level-down
      transform: rotate(90deg)
    &-ctrl
      width: 90px
    &-win
      width: 60px
    &-alt
      width: 68px
    &-space
      width: 249px
    &-right-click
      width: 60px
    &-backspace
      font-size: 15px
      line-height: 40px
      text-align: center
    &-long
      height: 100px
      float: right
      padding-top: 35px
      i
        font-size: 18px
        margin-left: 10px
      &::after
        content: ''
        display: block
        height: 0
        clear: both
    &-light
      text-align: center
      background: none
      box-shadow: none
      border: 0
      cursor: default
      &::before
        display: none
      &:active
        background: none
        box-shadow: none
        top: initial
      .circle
        display: block
        margin: 5px auto
        border-radius: 50%
        width: 6px
        height: 6px
        background: map-get($light, base)
        &.active
          background: map-get($light, light)
          box-shadow: 0px 0px 3px 1px map-get($light, light)
          border: 1px solid rgba(white, .2)
    & span.underline
      text-decoration: underline
    .lt, .lb,.rt , .rb
      position: absolute
    .lb, .rb
      bottom: map-get($text, padding)
    .rt, .rb
      right: map-get($text, padding)
section
  &.top
    .key
      height: 34px
  &.dev
    .key
  &.number
    .key
      &.num-0
        width: 100px
      

$('.change_btn').click ->
  $(this).toggleClass 'open'
  $('.keyboard-wrap').toggleClass 'transform'