hold modifiers on mouse click

This commit is contained in:
Devaev Maxim
2018-07-26 02:26:31 +03:00
parent 940fe28a9f
commit bb180b6bf8
4 changed files with 86 additions and 33 deletions

View File

@@ -22,7 +22,7 @@ div#keyboard div.keyboard-row:last-child {
margin-bottom: 0;
}
div#keyboard div.key, div.empty-key {
div#keyboard div.key, div.modifier, div.empty-key {
box-sizing: border-box;
display: inline-block;
margin-right: 5px;
@@ -30,7 +30,7 @@ div#keyboard div.key, div.empty-key {
width: 40px;
height: 40px;
}
div#keyboard div.key {
div#keyboard div.key, div.modifier {
font-size: 0.9em;
text-align: center;
vertical-align: top;
@@ -43,16 +43,21 @@ div#keyboard div.key {
background-color: var(--bg-color-gray);
cursor: pointer;
}
div#keyboard div.key:hover {
div#keyboard div.key:hover, div.modifier:hover {
color: var(--fg-color-intensive);
background-color: var(--bg-color-ctl);
}
div#keyboard div.key:active {
div#keyboard div.pressed, div.pressed {
box-shadow: none;
color: var(--fg-color-selected);
background-color: var(--bg-color-dark);
}
div#keyboard div.key:last-child, div.empty-key:last-child {
div#keyboard div.holded {
box-shadow: none;
color: var(--fg-color-normal);
background-color: var(--bg-color-intensive);
}
div#keyboard div.key:last-child, div.empty-key:last-child, div.modifier:last-child {
margin-right: 0;
}
div#keyboard div.wide-1 {
@@ -82,7 +87,7 @@ div#keyboard div.small {
font-size: 0.7em;
}
div#keyboard div.key p {
div#keyboard p {
margin: 0;
position: relative;
top: 50%;
@@ -90,3 +95,6 @@ div#keyboard div.key p {
-moz-transform: translateY(-50%);
transform: translateY(-50%);
}
div#keyboard b {
color: var(--fg-color-special);
}

View File

@@ -12,6 +12,7 @@
--bg-color-gray: #3b3e43;
--bg-color-dark: #17191d;
--bg-color-ctl: #202225;
--bg-color-intensive: #436a8a;
--bg-color-hovered: #1a1c1f;
--bg-color-selected: #171717;
--bg-color-progress: #171717;
@@ -22,6 +23,7 @@
--fg-color-inactive: #6c7481;
--fg-color-selected: #6c7481;
--fg-color-progress: #436a8a;
--fg-color-special: #436a8a;
--bg-color-stream-screen: black;
}