vue-mac-keyboard/dist/style.css

Macbook computer keyboard style for VueJS component.

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