@uiw/react-mac-keyboard/dist.css

Macbook computer keyboard style for react component.

.w-mac-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;
  -webkit-user-select: none;
          user-select: none;
  position: relative;
  width: 995px;
  margin: 0 auto;
}
.w-mac-keyboard ul {
  width: 992px;
  margin-top: 9px;
  padding-left: 11px;
  position: relative;
  float: left;
}
.w-mac-keyboard li {
  width: 62px;
  height: 62px;
  float: left;
  list-style: none;
  margin-right: 5px;
  margin-bottom: 5px;
  background: #151515;
  color: #c8c8c8;
  text-align: center;
  line-height: 62px;
  font-size: 12px;
  border-radius: 8px;
  border: 1px solid #3A3A3A;
  box-shadow: 1px 0px 0px #000000, 0px 1px 0px #000000, -1px 0px 0px #000000, 0px -1px 0px #000000;
  box-sizing: initial;
  transition: all 0.4s ease-in;
  -webkit-user-select: none;
          user-select: none;
  cursor: pointer;
  position: relative;
}
.w-mac-keyboard li:active,
.w-mac-keyboard li.pressed {
  color: #52F800;
  background-color: #100068;
  border: 1px solid #332376;
  transition: 1ms linear;
}
.w-mac-keyboard li:nth-child(1) {
  width: 99px;
  height: 28px;
  line-height: 28px;
  text-indent: 1em;
  text-align: left;
}
.w-mac-keyboard li:nth-child(2),
.w-mac-keyboard li:nth-child(3),
.w-mac-keyboard li:nth-child(4),
.w-mac-keyboard li:nth-child(5),
.w-mac-keyboard li:nth-child(6),
.w-mac-keyboard li:nth-child(7),
.w-mac-keyboard li:nth-child(8),
.w-mac-keyboard li:nth-child(9),
.w-mac-keyboard li:nth-child(10),
.w-mac-keyboard li:nth-child(11),
.w-mac-keyboard li:nth-child(12),
.w-mac-keyboard li:nth-child(13),
.w-mac-keyboard li:nth-child(14) {
  width: 60px;
  height: 28px;
  line-height: 28px;
}
.w-mac-keyboard li:nth-child(15),
.w-mac-keyboard li:nth-child(16),
.w-mac-keyboard li:nth-child(17),
.w-mac-keyboard li:nth-child(18),
.w-mac-keyboard li:nth-child(19),
.w-mac-keyboard li:nth-child(20),
.w-mac-keyboard li:nth-child(21),
.w-mac-keyboard li:nth-child(22),
.w-mac-keyboard li:nth-child(23),
.w-mac-keyboard li:nth-child(24),
.w-mac-keyboard li:nth-child(25),
.w-mac-keyboard li:nth-child(26),
.w-mac-keyboard li:nth-child(27),
.w-mac-keyboard li:nth-child(40),
.w-mac-keyboard li:nth-child(41),
.w-mac-keyboard li:nth-child(42),
.w-mac-keyboard li:nth-child(53),
.w-mac-keyboard li:nth-child(54),
.w-mac-keyboard li:nth-child(64),
.w-mac-keyboard li:nth-child(65),
.w-mac-keyboard li:nth-child(66) {
  padding: 7px 0;
  height: 48px;
}
.w-mac-keyboard li:nth-child(15) span,
.w-mac-keyboard li:nth-child(16) span,
.w-mac-keyboard li:nth-child(17) span,
.w-mac-keyboard li:nth-child(18) span,
.w-mac-keyboard li:nth-child(19) span,
.w-mac-keyboard li:nth-child(20) span,
.w-mac-keyboard li:nth-child(21) span,
.w-mac-keyboard li:nth-child(22) span,
.w-mac-keyboard li:nth-child(23) span,
.w-mac-keyboard li:nth-child(24) span,
.w-mac-keyboard li:nth-child(25) span,
.w-mac-keyboard li:nth-child(26) span,
.w-mac-keyboard li:nth-child(27) span,
.w-mac-keyboard li:nth-child(40) span,
.w-mac-keyboard li:nth-child(41) span,
.w-mac-keyboard li:nth-child(42) span,
.w-mac-keyboard li:nth-child(53) span,
.w-mac-keyboard li:nth-child(54) span,
.w-mac-keyboard li:nth-child(64) span,
.w-mac-keyboard li:nth-child(65) span,
.w-mac-keyboard li:nth-child(66) span {
  line-height: 23px;
  height: 23px;
  width: 100%;
  float: left;
  font-size: 14px;
}
.w-mac-keyboard li:nth-child(28) span,
.w-mac-keyboard li:nth-child(55) span,
.w-mac-keyboard li:nth-child(67) span {
  line-height: 14px;
  margin-top: 43px;
  float: right;
  margin-right: 8px;
}
.w-mac-keyboard li:nth-child(30),
.w-mac-keyboard li:nth-child(31),
.w-mac-keyboard li:nth-child(32),
.w-mac-keyboard li:nth-child(33),
.w-mac-keyboard li:nth-child(34),
.w-mac-keyboard li:nth-child(35),
.w-mac-keyboard li:nth-child(36),
.w-mac-keyboard li:nth-child(37),
.w-mac-keyboard li:nth-child(38),
.w-mac-keyboard li:nth-child(39),
.w-mac-keyboard li:nth-child(44),
.w-mac-keyboard li:nth-child(45),
.w-mac-keyboard li:nth-child(46),
.w-mac-keyboard li:nth-child(47),
.w-mac-keyboard li:nth-child(48),
.w-mac-keyboard li:nth-child(49),
.w-mac-keyboard li:nth-child(50),
.w-mac-keyboard li:nth-child(51),
.w-mac-keyboard li:nth-child(52),
.w-mac-keyboard li:nth-child(57),
.w-mac-keyboard li:nth-child(58),
.w-mac-keyboard li:nth-child(59),
.w-mac-keyboard li:nth-child(60),
.w-mac-keyboard li:nth-child(61),
.w-mac-keyboard li:nth-child(62),
.w-mac-keyboard li:nth-child(63) {
  font-size: 18px;
  line-height: 64px;
}
.w-mac-keyboard li:nth-child(29) span,
.w-mac-keyboard li:nth-child(43) span,
.w-mac-keyboard li:nth-child(56) span,
.w-mac-keyboard li:nth-child(68) span,
.w-mac-keyboard li:nth-child(69) span,
.w-mac-keyboard li:nth-child(70) span,
.w-mac-keyboard li:nth-child(71) span,
.w-mac-keyboard li:nth-child(73) span,
.w-mac-keyboard li:nth-child(74) span {
  line-height: 14px;
  margin-top: 43px;
  text-indent: 5px;
  float: left;
}
.w-mac-keyboard li:nth-child(28),
.w-mac-keyboard li:nth-child(29) {
  width: 73px;
}
.w-mac-keyboard li:nth-child(43),
.w-mac-keyboard li:nth-child(55) {
  width: 102px;
}
.w-mac-keyboard li:nth-child(43):active span:first-child {
  background: #52f800;
}
.w-mac-keyboard li:nth-child(43) span:first-child {
  position: absolute;
  top: -36px;
  left: 5px;
  width: 6px;
  height: 6px;
  background: #fff;
  border-radius: 3px;
}
.w-mac-keyboard li:nth-child(55) span:first-child,
.w-mac-keyboard li:nth-child(70) span:first-child {
  position: absolute;
  right: 0px;
  top: -37px;
  font-size: 12px;
  line-height: 12px;
}
.w-mac-keyboard li:nth-child(70) span:first-child {
  left: 0px;
  text-align: left;
}
.w-mac-keyboard li:nth-child(74) span:first-child {
  position: absolute;
  left: 0;
  top: -37px;
  font-size: 12px;
  line-height: 12px;
}
.w-mac-keyboard li:nth-child(56) {
  width: 136px;
}
.w-mac-keyboard li:nth-child(67) {
  width: 137px;
}
.w-mac-keyboard li:nth-child(71),
.w-mac-keyboard li:nth-child(73) {
  width: 70px;
}
.w-mac-keyboard li:nth-child(72) {
  width: 333px;
}
.w-mac-keyboard li:nth-child(76),
.w-mac-keyboard li:nth-child(78) {
  height: 29px;
  line-height: 29px;
}
.w-mac-keyboard li:nth-child(76) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.w-mac-keyboard li:nth-child(78) {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  position: absolute;
  bottom: 0;
  right: 84px;
}