.keyboard-layout-control { display:grid; grid-template-columns:minmax(15rem,22rem) minmax(0,1fr); gap:1rem 1.5rem; align-items:center; padding:1rem; border:1px solid var(--border); border-radius:12px; background:var(--surface-soft); } .keyboard-layout-field { display:flex; flex-direction:column; gap:.45rem; min-width:0; } .keyboard-layout-field label { font-size:.82rem; font-weight:900; color:var(--text); } .keyboard-layout-field select { width:100%; min-width:0; min-height:44px; padding:.65rem .75rem; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--text); font:inherit; font-size:.875rem; cursor:pointer; } .keyboard-layout-field select:focus-visible { outline:3px solid var(--cyan); outline-offset:3px; } .keyboard-layout-field select:disabled { opacity:.65; cursor:not-allowed; } .keyboard-layout-control p { margin:0; color:var(--muted); font-size:.82rem; } .keyboard-layout-help { margin:.65rem 0 1rem; color:var(--muted); font-size:.75rem; } .keyboard-device[data-layout='tkl87'] { width:calc(974px * var(--keyboard-scale)); } .keyboard-device[data-layout='compact61'] { width:calc(794px * var(--keyboard-scale)); min-height:calc(280px * var(--keyboard-scale)); } .keyboard-device[data-layout='tkl87'] .keyboard-top-row { flex-wrap:wrap; row-gap:calc(12px * var(--keyboard-scale)); } .keyboard-device[data-layout='tkl87'] .lock-lights,.keyboard-device[data-layout='compact61'] .lock-lights { width:100%; flex-direction:row; justify-content:flex-end; } .keyboard-device[data-layout='iso105'] { --iso-enter-width:72px; --iso-enter-stem:56.4px; } .keyboard-device[data-layout='iso105'] .key-row { height:calc(var(--key-row-height) * var(--keyboard-scale)); align-items:flex-start; } .keyboard-device[data-layout='iso105'] .iso-home-row::after { content:""; flex:0 0 calc(var(--iso-enter-stem) * var(--keyboard-scale)); width:calc(var(--iso-enter-stem) * var(--keyboard-scale)); height:calc(var(--key-row-height) * var(--keyboard-scale)); pointer-events:none; } .keyboard-device[data-layout='iso105'] .iso-enter { --key-width:var(--iso-enter-width); --iso-border-width:1px; --iso-notch-x:calc((var(--iso-enter-width) - var(--iso-enter-stem)) * var(--keyboard-scale)); --iso-top-height:calc(var(--key-row-height) * var(--keyboard-scale)); height:calc((var(--key-row-height) * 2 + 6px) * var(--keyboard-scale)); flex-shrink:0; z-index:1; clip-path:polygon(0 0,100% 0,100% 100%,var(--iso-notch-x) 100%,var(--iso-notch-x) var(--iso-top-height),0 var(--iso-top-height)); } .keyboard-device[data-layout='iso105'] .iso-enter::before,.keyboard-device[data-layout='iso105'] .iso-enter::after { content:""; position:absolute; border-color:inherit; border-style:inherit; pointer-events:none; } .keyboard-device[data-layout='iso105'] .iso-enter::before { left:calc(var(--iso-notch-x) - var(--iso-border-width)); top:calc(var(--iso-top-height) - var(--iso-border-width)); bottom:calc(-1 * var(--iso-border-width)); width:0; border-width:0 0 0 var(--iso-border-width); } .keyboard-device[data-layout='iso105'] .iso-enter::after { left:calc(-1 * var(--iso-border-width)); top:calc(var(--iso-top-height) - 2 * var(--iso-border-width)); width:calc(var(--iso-notch-x) + var(--iso-border-width)); height:0; border-width:var(--iso-border-width) 0 0 0; } .keyboard-device[data-layout='iso105'] .iso-enter>span:not(.key-check) { padding-left:var(--iso-notch-x); } :root[data-contrast='high'] .keyboard-device[data-layout='iso105'] .iso-enter.is-tested { --iso-border-width:3px; } .keyboard-device[data-layout='mac104'] .mac-modifier { text-transform:none; font-size:.56rem; } @media (max-width:640px) { .keyboard-layout-control { grid-template-columns:minmax(0,1fr); gap:.75rem; } }