@uiw/react-mac-keyboard/esm/style/index.less

Macbook computer keyboard style for react component.

@w-keyboard:~ "w-mac-keyboard";

.@{w-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;
  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;
    list-style: none;
    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);
    box-sizing: initial;
    transition: all 0.4s ease-in;
    user-select: none;
    cursor: pointer;
    position: relative;
    &:active,
    &.pressed {
      color: #52f800;
      background-color: #100068;
      border: 1px solid #332376;
      transition: 1ms linear;
    }
    &: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;
    }
  }
}

.@{w-keyboard} {
  li:nth-child(15) span,
  li:nth-child(16) span,
  li:nth-child(17) span,
  li:nth-child(18) span,
  li:nth-child(19) span,
  li:nth-child(20) span,
  li:nth-child(21) span,
  li:nth-child(22) span,
  li:nth-child(23) span,
  li:nth-child(24) span,
  li:nth-child(25) span,
  li:nth-child(26) span,
  li:nth-child(27) span,
  li:nth-child(40) span,
  li:nth-child(41) span,
  li:nth-child(42) span,
  li:nth-child(53) span,
  li:nth-child(54) span,
  li:nth-child(64) span,
  li:nth-child(65) span,
  li:nth-child(66) span {
    line-height: 23px;
    height: 23px;
    width: 100%;
    float: left;
    font-size: 14px;
  }
  li:nth-child(28) span,
  li:nth-child(55) span,
  li:nth-child(67) span {
    line-height: 14px;
    margin-top: 43px;
    float: right;
    margin-right: 8px;
  }
  // 字母键
  li:nth-child(30),
  li:nth-child(31),
  li:nth-child(32),
  li:nth-child(33),
  li:nth-child(34),
  li:nth-child(35),
  li:nth-child(36),
  li:nth-child(37),
  li:nth-child(38),
  li:nth-child(39),
  li:nth-child(44),
  li:nth-child(45),
  li:nth-child(46),
  li:nth-child(47),
  li:nth-child(48),
  li:nth-child(49),
  li:nth-child(50),
  li:nth-child(51),
  li:nth-child(52),
  li:nth-child(57),
  li:nth-child(58),
  li:nth-child(59),
  li:nth-child(60),
  li:nth-child(61),
  li:nth-child(62),
  li:nth-child(63) {
    font-size: 18px;
    line-height: 64px;
  }
  li:nth-child(29) span,
  li:nth-child(43) span,
  li:nth-child(56) span,
  li:nth-child(68) span,
  li:nth-child(69) span,
  li:nth-child(70) span,
  li:nth-child(71) span,
  li:nth-child(73) span,
  li:nth-child(74) span {
    line-height: 14px;
    margin-top: 43px;
    text-indent: 5px;
    float: left;
  }
  li:nth-child(28),
  li:nth-child(29) {
    width: 73px;
  }
  li:nth-child(43),
  li:nth-child(55) {
    width: 102px;
  }
  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;
    }
  }
  li:nth-child(55) span:first-child,
  li:nth-child(70) span:first-child {
    position: absolute;
    right: 0px;
    top: -37px;
    font-size: 12px;
    line-height: 12px;
  }
  li:nth-child(70) span:first-child {
    left: 0px;
    text-align: left;
  }
  li:nth-child(74) span:first-child {
    position: absolute;
    left: 0;
    top: -37px;
    font-size: 12px;
    line-height: 12px;
  }
  li:nth-child(56) {
    width: 136px;
  }
  li:nth-child(67) {
    width: 137px;
  }
  li:nth-child(71),
  li:nth-child(73) {
    width: 70px;
  }
  li:nth-child(72) {
    width: 333px;
  }

  li:nth-child(76),
  li:nth-child(78) {
    height: 29px;
    line-height: 29px;
  }
  li:nth-child(76) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  li:nth-child(78) {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    position: absolute;
    bottom: 0;
    right: 84px;
  }
}