Tribes2/t2-mapper
1
0
Fork 0
mirror of https://github.com/exogen/t2-mapper.git synced 2026-04-21 12:25:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

add keyboard overlay for non-touch devices

Browse source
This commit is contained in:
Brian Beck 2026-02-12 17:54:51 -08:00
parent 0aadb3d6e7
commit d7ef09c576
26 changed files with 215 additions and 107 deletions
Download patch file Download diff file Expand all files Collapse all files

56
app/style.css
View file

@ -513,6 +513,62 @@ input[type="range"] {
}
}
.KeyboardOverlay {
position: fixed;
bottom: 16px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: flex-end;
gap: 10px;
pointer-events: none;
z-index: 1;
}
.KeyboardOverlay-column {
display: flex;
gap: 4px;
flex-direction: column;
justify-content: center;
}
.KeyboardOverlay-row {
display: flex;
gap: 4px;
justify-content: stretch;
}
.KeyboardOverlay-spacer {
width: 32px;
}
.KeyboardOverlay-key {
min-width: 32px;
height: 32px;
display: flex;
flex: 1 0 0;
align-items: center;
justify-content: center;
padding: 0 8px;
border-radius: 4px;
background: rgba(0, 0, 0, 0.4);
border: 1px solid rgba(255, 255, 255, 0.2);
color: rgba(255, 255, 255, 0.5);
font-size: 11px;
font-weight: 600;
white-space: nowrap;
}
.KeyboardOverlay-key[data-pressed="true"] {
background: rgba(52, 187, 171, 0.6);
border-color: rgba(35, 253, 220, 0.5);
color: #fff;
}
.KeyboardOverlay-arrow {
margin-right: 3px;
}
.TouchJoystick {
position: fixed;
bottom: 20px;