Так вы все размеры вручную подбирали? Но почему так, ведь HTML-элементы зависят друг от друга, почему бы их не использовать? Вот я попробовал, за 35 минут получилось сделать, я не сидел и не подбирал все позиции подряд, оно само расставилось по местам, только вон те кнопки пошире которые, только их пришлось вручную подогнать, это наверное проще, чем у вас, или я не так понял?
<html>
<head>
<style>
body {
background: linear-gradient(135deg, rgba(226,226,226,1), rgba(219,219,219,1) 26%, rgba(203, 204, 207, 1) 64%);
text-align: center;
font-size: 1.25vw;
}
kbd {
background:
radial-gradient(farthest-side at 50% -100%, rgba(0, 0, 0, 0.6), transparent),
radial-gradient(farthest-side at 50% 200%, rgba(255, 255, 255, 0.1), transparent)
#080808;
box-sizing: border-box;
border-radius: 0.25em;
border: 0.05em rgba(255, 255, 255, 0.4) solid;
border-right-color: rgba(255, 255, 255, 0.2);
border-bottom-color: rgba(255, 255, 255, 0.2);
box-shadow: 0 0 0.05em .125em black;
cursor: pointer;
height: 4em;
margin: 0 0.75em 0.75em 0;
position: relative;
overflow: visible;
text-align: center;
transition: all ease-in-out 200ms;
vertical-align: middle;
width: 4em;
color: white;
color: rgba(206, 241, 248, 0.7);
display: inline-grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
font: 1em / 1em Helvetica Neue, Segoe UI, Roboto, Ubuntu, sans-serif;
}
kbd:active {
border: 0.05em rgba(255, 255, 255, 0.2) solid;
box-shadow: 0 0 0.05em .125em rgba(0, 0, 0, 0.8);
}
kbd:not([data-half]) + kbd[data-half] {
height: 1.9em;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
position: absolute;
z-index: 1;
border-bottom-width: .15em;
}
kbd[data-half] + kbd[data-half] {
height: 1.9em;
border-top-left-radius: 0;
border-top-right-radius: 0;
margin-top: 2em;
border-top-width: .15em;
}
kbd span:only-child {
grid-area: 2 / 1 / 3 / span 3;
}
kbd.m span:only-child {
grid-area: 3 / 1 / 4 / span 3;
padding: .25em;
}
kbd span:first-child:nth-last-child(2),
kbd span:first-child:nth-last-child(3)
{
grid-area: 1 / 2;
transform: translateY(50%);
}
kbd span:nth-child(2):last-child,
kbd span:nth-child(2):nth-last-child(2) {
grid-area: 2 / 2;
transform: translateY(50%);
}
kbd span:nth-child(3):last-child {
grid-area: 1 / 3;
}
kbd.m:nth-child(-n + 6) {
text-align: left;
}
kbd.m:nth-last-child(-n + 6) {
text-align: right;
}
kbd.x2 { width: 6em;}
kbd.x3 { width: 7.5em; }
kbd.x4 { width: 10em; }
kbd.x5 { width: 5em; }
kbd.x6 { width: 24em; }
.touch-bar {
border-radius: 0.25em;
background-color: #000;
padding: .5em;
margin: auto;
margin: 0 0.75em 0.75em 0;
display: inline-block;
box-sizing: border-box;
width: 71em;
}
.touch-bar kbd {
margin: 0;
padding: 0em .5em;
background: #333;
border: 0;
height: 2em;
color: white;
display: inline-flex;
justify-content: center;
align-items: center;
}
.touch-bar kbd span {
transform: scale(1.25) !important;
}
.touch-bar[data-list="1"] kbd span:not(:first-child),
.touch-bar[data-list="2"] kbd span:not(:last-child)
{
display: none;
}
</style>
</head>
<body>
<section class="touch-bar" data-list="1" onclick="this.dataset.list = (+this.dataset.list) % 2 + 1">
<kbd>[😀][esc]</kbd>
<kbd>[😁][F1]</kbd>
<kbd>[😂][F2]</kbd>
<kbd>[🐱][F3]</kbd>
<kbd>[😹][F4]</kbd>
<kbd>[😎][F5]</kbd>
<kbd>[❤️][F6]</kbd>
<kbd>[💩][F7]</kbd>
<kbd>[🤷][F8]</kbd>
<kbd>[🔥][F9]</kbd>
<kbd>[🤔][F10]</kbd>
<kbd>[⌛️][F11]</kbd>
<kbd>[🙌][F12]</kbd>
</section>
<section>
<kbd>~`</kbd>
<kbd>!1</kbd>
<kbd>@2"</kbd>
<kbd>#3№</kbd>
<kbd>$4%</kbd>
<kbd>%5:</kbd>
<kbd>^6,</kbd>
<kbd>&7.</kbd>
<kbd>*8;</kbd>
<kbd>(9</kbd>
<kbd>)0</kbd>
<kbd>_-</kbd>
<kbd>+=</kbd>
<kbd class="m x2">[delete]</kbd>
</section>
<section>
<kbd class="m x2">[tab]</kbd>
<kbd>QЙ</kbd>
<kbd>WЦ</kbd>
<kbd>EУ</kbd>
<kbd>RК</kbd>
<kbd>TЕ</kbd>
<kbd>YН</kbd>
<kbd>UГ</kbd>
<kbd>IШ</kbd>
<kbd>OЩ</kbd>
<kbd>PЗ</kbd>
<kbd>{Х[</kbd>
<kbd>}Ъ]</kbd>
<kbd>|Ё\</kbd>
</section>
<section>
<kbd class="m x3">[caps lock]</kbd>
<kbd>AФ</kbd>
<kbd>SЫ</kbd>
<kbd>DВ</kbd>
<kbd>FА</kbd>
<kbd>GП</kbd>
<kbd>HР</kbd>
<kbd>JО</kbd>
<kbd>KЛ</kbd>
<kbd>LД</kbd>
<kbd>:Ж;</kbd>
<kbd>"Э'</kbd>
<kbd class="m x3">[return]</kbd>
</section>
<section>
<kbd class="m x4">[shift]</kbd>
<kbd>ZЯ</kbd>
<kbd>XЧ</kbd>
<kbd>CС</kbd>
<kbd>VМ</kbd>
<kbd>BИ</kbd>
<kbd>NТ</kbd>
<kbd>MЬ</kbd>
<kbd><Б,</kbd>
<kbd>>Ю.</kbd>
<kbd>?/</kbd>
<kbd class="m x4">[shift]</kbd>
</section>
<section>
<kbd class="m">[fn]</kbd>
<kbd class="m">[control]</kbd>
<kbd class="m">[option]</kbd>
<kbd class="m x5">[command]</kbd>
<kbd class="m x6"></kbd>
<kbd class="m x5">[command]</kbd>
<kbd class="m">[option]</kbd>
<kbd>[◀︎]</kbd>
<kbd data-half>[▲︎]</kbd>
<kbd data-half>[▼︎]</kbd>
<kbd>[▶︎]</kbd>
</section>
<script>
for(const kbd of document.querySelectorAll("kbd")) {
kbd
.textContent
.split(/\[([^\]]*)\]|/)
.filter(v => !!v)
.reduce((_, v) => {
const span = document.createElement("span");
span.textContent = v;
kbd.appendChild(span);
}, kbd.textContent = "")
}
</script>
</body>