Convert keys to IBM beamspring style
parent
35e09cda0e
commit
fdbb9e2605
|
@ -15,12 +15,12 @@
|
|||
--colorLightGray: #dedede;
|
||||
--colorGray: #cccccc;
|
||||
--colorDarkGray: #919191;
|
||||
--colorBlack: #000000;
|
||||
--colorBlack: #020202;
|
||||
--colorBlue: #71b0f1;
|
||||
--colorRed: #db6767;
|
||||
--baseBorderRadius: 2px;
|
||||
--gridGap: 1px;
|
||||
--keyCapHeight: 35px;
|
||||
--keyCapHeight: 32px;
|
||||
--color-base-keycap: #d9d9d9;
|
||||
--color-dark-base-keycap: var(--colorDarkGray);
|
||||
--color-modifier-keycap: grey;
|
||||
|
@ -192,18 +192,23 @@
|
|||
border-left: 2px inset white;
|
||||
border-right: 2px outset black;
|
||||
border-bottom: 2px outset black;
|
||||
background-blend-mode: multiply;
|
||||
background-image: linear-gradient(to bottom right, var(--color-base-keycap), var(--color-base-keycap));
|
||||
}
|
||||
|
||||
.keyboard__key:active {
|
||||
border-top: 2px inset black;
|
||||
border-left: 2px inset black;
|
||||
background-blend-mode: multiply;
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
.keyboard__key.pressed {
|
||||
border-top: 2px inset black;
|
||||
border-left: 2px inset black;
|
||||
background-blend-mode: multiply;
|
||||
transform: translateY(1px);
|
||||
filter: contrast(60%);
|
||||
}
|
||||
|
||||
|
||||
|
@ -226,18 +231,20 @@
|
|||
.keyboard__key::before {
|
||||
content: attr(data-key-text);
|
||||
z-index: 1;
|
||||
font-size: 12px;
|
||||
font-size: 8px;
|
||||
font-family: sans-serif;
|
||||
text-transform: lowercase;
|
||||
text-transform: uppercase;
|
||||
color: var(--colorBlack);
|
||||
white-space: nowrap;
|
||||
text-shadow: -1px -1px #a9a9a9;
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
/* Top of key */
|
||||
.keyboard__key::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
top: 0px;
|
||||
right: 5px;
|
||||
bottom: 4px;
|
||||
left: 5px;
|
||||
|
@ -260,7 +267,7 @@
|
|||
border: none;
|
||||
font-size: 8px;
|
||||
font-family: sans-serif;
|
||||
text-transform: lowercase;
|
||||
text-transform: uppercase;
|
||||
color: #2d2727;
|
||||
white-space: nowrap;
|
||||
z-index: 1;
|
||||
|
@ -315,7 +322,7 @@
|
|||
}
|
||||
|
||||
.keyboard__key.modifier::before {
|
||||
font-size: 8px;
|
||||
font-size: 7px;
|
||||
}
|
||||
|
||||
/* Enter key */
|
||||
|
|
Loading…
Reference in New Issue