hotkeys/website/components/KeyBoard.less

.keyboard {
  height: 394px;
  border-radius: 10px;
  border: 1px solid #C9C9C9;
  background: #F2F2F2;
  box-shadow: 2px 0px 2px #E2E2E2 inset,-2px 2px 3px #E2E2E2 inset,1px -0px 0px #C1C1C1 inset,0px -2px 3px #C1C1C1 inset;
  user-select: none;
  position: relative;
  top: -40px;
  width: 995px;
  margin: 0 auto;
  ul {
    width: 992px;
    margin-top: 9px;
    padding-left: 11px;
    position: relative;
    float: left;
  }
  li {
    width: 62px;
    height: 62px;
    float: left;
    margin-right: 5px;
    margin-bottom: 5px;
    background: #151515;
    color: rgb(200,200,200);
    text-align: center;
    line-height: 62px;
    font-size: 12px;
    border-radius: 8px;
    border: 1px solid #3A3A3A;
    box-shadow: 1px 0px 0px rgb(0,0,0),0px 1px 0px rgb(0,0,0),-1px 0px 0px rgb(0,0,0),0px -1px 0px rgb(0,0,0);
    transition: all .2s;
    user-select: none;
    cursor: pointer;
    position: relative;
    &:active, &:global(.pressed) {
      color:#52F800;
      background-color: #100068;
      border:1px solid #332376;
    }
    &:nth-child(1) {
      width: 99px;
      height: 28px;
      line-height: 28px;
      text-indent: 1em;
      text-align: left;
    }
    &:nth-child(2),
    &:nth-child(3),
    &:nth-child(4),
    &:nth-child(5),
    &:nth-child(6),
    &:nth-child(7),
    &:nth-child(8),
    &:nth-child(9),
    &:nth-child(10),
    &:nth-child(11),
    &:nth-child(12),
    &:nth-child(13),
    &:nth-child(14) {
      width: 60px;
      height: 28px;
      line-height: 28px;
    }
    &:nth-child(15),
    &:nth-child(16),
    &:nth-child(17),
    &:nth-child(18),
    &:nth-child(19),
    &:nth-child(20),
    &:nth-child(21),
    &:nth-child(22),
    &:nth-child(23),
    &:nth-child(24),
    &:nth-child(25),
    &:nth-child(26),
    &:nth-child(27),
    &:nth-child(40),
    &:nth-child(41),
    &:nth-child(42),
    &:nth-child(53),
    &:nth-child(54),
    &:nth-child(64),
    &:nth-child(65),
    &:nth-child(66) {
      padding: 7px 0;
      height: 48px;
    } 
  }
}


.keyboard li:nth-child(15) span,
.keyboard li:nth-child(16) span,
.keyboard li:nth-child(17) span,
.keyboard li:nth-child(18) span,
.keyboard li:nth-child(19) span,
.keyboard li:nth-child(20) span,
.keyboard li:nth-child(21) span,
.keyboard li:nth-child(22) span,
.keyboard li:nth-child(23) span,
.keyboard li:nth-child(24) span,
.keyboard li:nth-child(25) span,
.keyboard li:nth-child(26) span,
.keyboard li:nth-child(27) span,
.keyboard li:nth-child(40) span,
.keyboard li:nth-child(41) span,
.keyboard li:nth-child(42) span,
.keyboard li:nth-child(53) span,
.keyboard li:nth-child(54) span,
.keyboard li:nth-child(64) span,
.keyboard li:nth-child(65) span,
.keyboard li:nth-child(66) span {
  line-height: 23px;
  height: 23px;
  width: 100%;
  float: left;
  font-size:14px;
}
.keyboard li:nth-child(28) span,
.keyboard li:nth-child(55) span,
.keyboard li:nth-child(67) span {
  line-height: 14px;
  margin-top: 43px;
  float: right;
  margin-right: 8px;
}
//字母键
.keyboard li:nth-child(30),
.keyboard li:nth-child(31),
.keyboard li:nth-child(32),
.keyboard li:nth-child(33),
.keyboard li:nth-child(34),
.keyboard li:nth-child(35),
.keyboard li:nth-child(36),
.keyboard li:nth-child(37),
.keyboard li:nth-child(38),
.keyboard li:nth-child(39),
.keyboard li:nth-child(44),
.keyboard li:nth-child(45),
.keyboard li:nth-child(46),
.keyboard li:nth-child(47),
.keyboard li:nth-child(48),
.keyboard li:nth-child(49),
.keyboard li:nth-child(50),
.keyboard li:nth-child(51),
.keyboard li:nth-child(52),
.keyboard li:nth-child(57),
.keyboard li:nth-child(58),
.keyboard li:nth-child(59),
.keyboard li:nth-child(60),
.keyboard li:nth-child(61),
.keyboard li:nth-child(62),
.keyboard li:nth-child(63) {
  font-size: 18px;
  line-height: 64px;
}

.keyboard li:nth-child(29) span,
.keyboard li:nth-child(43) span,
.keyboard li:nth-child(56) span,
.keyboard li:nth-child(68) span,
.keyboard li:nth-child(69) span,
.keyboard li:nth-child(70) span,
.keyboard li:nth-child(71) span,
.keyboard li:nth-child(73) span,
.keyboard li:nth-child(74) span {
  line-height: 14px;
  margin-top: 43px;
  text-indent: 5px;
  float: left;
}
.keyboard li:nth-child(28),
.keyboard li:nth-child(29) {
  width: 73px;
}
.keyboard li:nth-child(43),
.keyboard li:nth-child(55) {
  width: 102px;
}
.keyboard {
  li:nth-child(43) {
    &:active {
      span:first-child {
        background:#52f800;
      }
    }
    span:first-child {
      position: absolute;
      top: -36px;
      left: 5px;
      width: 6px;
      height: 6px;
      background: #fff;
      border-radius: 3px;
    }
  }
}
.keyboard li:nth-child(55) span:first-child,
.keyboard li:nth-child(70) span:first-child {
  position: absolute;
  right: 0px;
  top: -37px;
  font-size: 12px;
  line-height: 12px;
}
.keyboard li:nth-child(70) span:first-child {
  left: 0px;
  text-align: left;
}
.keyboard li:nth-child(74) span:first-child {
  position: absolute;
  left: 0;
  top: -37px;
  font-size: 12px;
  line-height: 12px;
}
.keyboard li:nth-child(56) {
  width: 136px;
}
.keyboard li:nth-child(67) {
  width: 137px;
}
.keyboard li:nth-child(71),
.keyboard li:nth-child(73) {
  width: 70px;
}
.keyboard li:nth-child(72) {
  width: 333px;
}
  
.keyboard li:nth-child(76),
.keyboard li:nth-child(78) {
  height: 29px;
  line-height: 29px;
}
.keyboard li:nth-child(76) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.keyboard li:nth-child(78) {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  position: absolute;
  bottom: 0;
  right: 84px;
}