apple2js/js/components/css/Keyboard.module.css

212 lines
3.0 KiB
CSS
Raw Normal View History

.keyboard {
margin-left: 15px;
2022-06-11 02:53:03 +00:00
user-select: none;
}
:global(.apple2e) .keyboard {
margin-left: 0;
}
.row {
display: block;
margin: 0;
padding: 0;
height: 42px;
font-family: Helvetica;
width: 570px;
}
:global(.apple2e) .row {
width: 610px;
}
.row0 {
margin-left: 20px;
}
.row2 {
margin-left: 10px;
}
.row3 {
margin-left: 10px;
}
.row4 {
margin-left: 10px;
}
:global(.apple2e) .row0 {
margin-left: 0;
}
:global(.apple2e) .row2 {
margin-left: 0;
}
:global(.apple2e) .row3 {
margin-left: 0;
}
:global(.apple2e) .row4 {
margin-left: 0;
}
.key {
display: inline-block;
margin: 0;
padding: 0;
width: 32px;
height: 32px;
background-color: #44372C;
color: white;
text-align: center;
position: relative;
border-left: 5px solid #65594D;
border-top: 5px solid #65594D;
border-right: 5px solid #110E0D;
border-bottom: 5px solid #110E0D;
/* border: 5px outset #66594E; */
border-radius: 5px;
cursor: pointer;
}
.pressed {
background-color: #22150A;
border-left: 5px solid #44372C;
border-top: 5px solid #44372C;
border-right: 5px solid #000000;
border-bottom: 5px solid #000000;
/* border: 5px outset #44372C; */
}
.key div {
border-radius: 3px;
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
}
.vCenter div {
bottom: 10px;
}
.vCenter2 div {
bottom: 5px;
line-height: 10px;
}
.key span {
font-size: 13px;
}
.key .small {
font-size: 7px;
}
.key-SHIFT {
width: 53px;
}
.active {
color: #4f4;
}
.key-RETURN {
width: 52px;
}
.key-DELETE {
width: 47px;
}
.key-TAB {
width: 47px;
}
.key-POWER {
width: 38px;
height: 38px;
border: 2px groove black;
background-color: #ffd;
color: black;
border-radius: 2px;
}
.key-POWER div {
bottom: 15px;
}
.key-nbsp {
margin-left: 62px;
width: 330px;
}
:global(.apple2e) .key-CTRL {
width: 60px;
}
:global(.apple2e) .key-RETURN {
width: 60px;
}
:global(.apple2e) .key-SHIFT {
width: 81px;
}
:global(.apple2e) .key-nbsp {
margin-left: 0;
width: 215px;
}
.key-POW {
width: 38px;
height: 38px;
border: 2px groove black;
background-color: #ffd;
color: black;
border-radius: 2px;
}
.key-POW div {
bottom: 15px;
}
.key-POW span {
background: #4f4;
color: #4f4;
}
.key-OPEN_APPLE div {
background-image: url(../../../img/open-apple24.png);
width: 24px;
height: 24px;
bottom: 1px;
left: 4px;
}
.key-OPEN_APPLE span {
display: none;
}
.key-OPEN_APPLE.active div {
background-image: url(../../../img/open-apple24-green.png);
}
.key-CLOSED_APPLE div {
background-image: url(../../../img/closed-apple24.png);
width: 24px;
height: 24px;
bottom: 1px;
left: 4px;
}
.key-CLOSED_APPLE.active div {
background-image: url(../../../img/closed-apple24-green.png);
}
.key-CLOSED_APPLE span {
display: none;
}