assets/nav_layer.svg

<svg width="732" height="402" viewBox="0 0 732 402" class="keymap" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<style>/* inherit to force styles through use tags */
svg path {
    fill: inherit;
}

/* font and background color specifications */
svg.keymap {
    font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
    font-size: 14px;
    font-kerning: normal;
    text-rendering: optimizeLegibility;
    fill: #24292e;
}

/* default key styling */
rect.key {
    fill: #f6f8fa;
}

rect.key, rect.combo {
    stroke: #c9cccf;
    stroke-width: 1;
}

/* default key side styling, only used is draw_key_sides is set */
rect.side {
    filter: brightness(90%);
}

/* color accent for combo boxes */
rect.combo, rect.combo-separate {
    fill: #cdf;
}

/* color accent for held keys */
rect.held, rect.combo.held {
    fill: #fdd;
}

/* color accent for ghost (optional) keys */
rect.ghost, rect.combo.ghost {
    stroke-dasharray: 4, 4;
    stroke-width: 2;
}

text {
    text-anchor: middle;
    dominant-baseline: middle;
}

/* styling for layer labels */
text.label {
    font-weight: bold;
    text-anchor: start;
    stroke: white;
    stroke-width: 4;
    paint-order: stroke;
}

/* styling for optional footer */
text.footer {
    text-anchor: end;
    dominant-baseline: auto;
    stroke: white;
    stroke-width: 4;
    paint-order: stroke;
}

/* styling for combo tap, and key hold/shifted label text */
text.combo, text.hold, text.shifted {
    font-size: 11px;
}

text.hold {
    text-anchor: middle;
    dominant-baseline: auto;
}

text.shifted {
    text-anchor: middle;
    dominant-baseline: hanging;
}

/* styling for hold/shifted label text in combo box */
text.combo.hold, text.combo.shifted {
    font-size: 8px;
}

/* lighter symbol for transparent keys */
text.trans {
    fill: #7b7e81;
}

/* styling for combo dendrons */
path.combo {
    stroke-width: 1;
    stroke: gray;
    fill: none;
}

/* Start Tabler Icons Cleanup */
/* cannot use height/width with glyphs */
.icon-tabler > path {
    fill: inherit;
    stroke: inherit;
    stroke-width: 2;
}
/* hide tabler's default box */
.icon-tabler > path[stroke="none"][fill="none"] {
    visibility: hidden;
}
/* End Tabler Icons Cleanup */
</style>
<g transform="translate(30, 0)" class="layer-nav">
<text x="0" y="28" class="label">nav:</text>
<g transform="translate(0, 66)">
<g transform="translate(28, 80)" class="key keypos-0">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
</g>
<g transform="translate(84, 45)" class="key keypos-1">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">Back</text>
</g>
<g transform="translate(140, 28)" class="key keypos-2">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">Gui</text>
</g>
<g transform="translate(196, 44)" class="key keypos-3">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">Fwd</text>
</g>
<g transform="translate(252, 52)" class="key keypos-4">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
</g>
<g transform="translate(420, 52)" class="key keypos-5">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">Undo</text>
</g>
<g transform="translate(476, 44)" class="key keypos-6">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">Home</text>
</g>
<g transform="translate(532, 28)" class="key keypos-7">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">↑</text>
</g>
<g transform="translate(588, 45)" class="key keypos-8">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">End</text>
</g>
<g transform="translate(644, 80)" class="key keypos-9">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">Clear</text>
</g>
<g transform="translate(28, 136)" class="key keypos-10">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">GCtl</text>
</g>
<g transform="translate(84, 101)" class="key keypos-11">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">Alt</text>
</g>
<g transform="translate(140, 84)" class="key keypos-12">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">Ctl</text>
</g>
<g transform="translate(196, 100)" class="key keypos-13">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">Sft</text>
</g>
<g transform="translate(252, 108)" class="key keypos-14">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">2xCtl</text>
</g>
<g transform="translate(420, 108)" class="key keypos-15">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">F5</text>
</g>
<g transform="translate(476, 100)" class="key keypos-16">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">←</text>
</g>
<g transform="translate(532, 84)" class="key keypos-17">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">↓</text>
</g>
<g transform="translate(588, 101)" class="key keypos-18">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">→</text>
</g>
<g transform="translate(644, 136)" class="key keypos-19">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">Gui</text>
<text x="0" y="24" class="key hold">lock</text>
</g>
<g transform="translate(28, 192)" class="key keypos-20">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
</g>
<g transform="translate(84, 157)" class="key keypos-21">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">Meh</text>
</g>
<g transform="translate(140, 140)" class="key keypos-22">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">F12</text>
</g>
<g transform="translate(196, 156)" class="key keypos-23">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">Hypr</text>
</g>
<g transform="translate(252, 164)" class="key keypos-24">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
</g>
<g transform="translate(420, 164)" class="key keypos-25">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
</g>
<g transform="translate(476, 156)" class="key keypos-26">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">Sft</text>
<text x="0" y="24" class="key hold">lock</text>
</g>
<g transform="translate(532, 140)" class="key keypos-27">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">Ctl</text>
<text x="0" y="24" class="key hold">lock</text>
</g>
<g transform="translate(588, 157)" class="key keypos-28">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">Alt</text>
<text x="0" y="24" class="key hold">lock</text>
</g>
<g transform="translate(644, 192)" class="key keypos-29">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
</g>
<g transform="translate(224, 238)" class="key held keypos-30">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key held"/>
<text x="0" y="0" class="key held tap">nav</text>
</g>
<g transform="translate(280, 252)" class="key keypos-31">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">Shift</text>
</g>
<g transform="translate(392, 252)" class="key keypos-32">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
</g>
<g transform="translate(448, 238)" class="key keypos-33">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">Space</text>
</g>
<g class="combo combopos-0">
<path d="M140,3 h-50 a6.0,6.0 0 0 0 -6.0,6.0 v17" class="combo"/>
<path d="M140,3 h50 a6.0,6.0 0 0 1 6.0,6.0 v16" class="combo"/>
<rect rx="6" ry="6" x="126" y="-10" width="28" height="26" class="combo"/>
<text x="140" y="3" class="combo tap">Esc</text>
</g>
<g class="combo combopos-1">
<path d="M504,5 h-22 a6.0,6.0 0 0 0 -6.0,6.0 v14" class="combo"/>
<path d="M504,5 h22 a6.0,6.0 0 0 1 6.0,6.0 v-1" class="combo"/>
<rect rx="6" ry="6" x="490" y="-8" width="28" height="26" class="combo"/>
<text x="504" y="5" class="combo tap">Tab</text>
</g>
<g class="combo combopos-2">
<path d="M140,181 h-50 a6.0,6.0 0 0 1 -6.0,-6.0 v1" class="combo"/>
<path d="M140,181 h50 a6.0,6.0 0 0 0 6.0,-6.0 v0" class="combo"/>
<rect rx="6" ry="6" x="126" y="168" width="28" height="26" class="combo"/>
<text x="140" y="181" class="combo tap">Ent</text>
</g>
<g class="combo combopos-3">
<path d="M119,112 v-22 a6.0,6.0 0 0 1 6.0,-6.0 h-3" class="combo"/>
<path d="M119,112 v22 a6.0,6.0 0 0 0 6.0,6.0 h-3" class="combo"/>
<rect rx="6" ry="6" x="105" y="99" width="28" height="26" class="combo"/>
<text x="119" y="112" class="combo tap">
<tspan x="119" dy="-0.6em">L</tspan><tspan x="119" dy="1.2em">Clck</tspan>
</text>
</g>
<g class="combo combopos-4">
<path d="M175,128 v-22 a6.0,6.0 0 0 1 6.0,-6.0 h-3" class="combo"/>
<path d="M175,128 v22 a6.0,6.0 0 0 0 6.0,6.0 h-3" class="combo"/>
<rect rx="6" ry="6" x="161" y="115" width="28" height="26" class="combo"/>
<text x="175" y="128" class="combo tap">
<tspan x="175" dy="-0.6em">R</tspan><tspan x="175" dy="1.2em">Clck</tspan>
</text>
</g>
<g class="combo combopos-5">
<path d="M273,136 v-22 a6.0,6.0 0 0 0 -6.0,-6.0 h3" class="combo"/>
<path d="M273,136 v22 a6.0,6.0 0 0 1 -6.0,6.0 h3" class="combo"/>
<rect rx="6" ry="6" x="259" y="123" width="28" height="26" class="combo"/>
<text x="273" y="136" class="combo tap">C-w</text>
</g>
<g class="combo combopos-6">
<path d="M56,91 l-11,-4" class="combo"/>
<path d="M56,91 l11,4" class="combo"/>
<rect rx="6" ry="6" x="42" y="78" width="28" height="26" class="combo"/>
<text x="56" y="91" class="combo tap">GCtl</text>
</g>
<g class="combo combopos-7">
<path d="M224,76 l-16,-18" class="combo"/>
<path d="M224,76 l16,18" class="combo"/>
<rect rx="6" ry="6" x="210" y="63" width="28" height="26" class="combo"/>
<text x="224" y="76" class="combo tap">WhUp</text>
</g>
<g class="combo combopos-8">
<path d="M448,76 l16,-18" class="combo"/>
<path d="M448,76 l-16,18" class="combo"/>
<rect rx="6" ry="6" x="434" y="63" width="28" height="26" class="combo"/>
<text x="448" y="76" class="combo tap">PgUp</text>
</g>
<g class="combo combopos-9">
<path d="M616,91 l11,-4" class="combo"/>
<path d="M616,91 l-11,4" class="combo"/>
<rect rx="6" ry="6" x="602" y="78" width="28" height="26" class="combo"/>
<text x="616" y="91" class="combo tap">Del</text>
</g>
<g class="combo combopos-10">
<path d="M224,132 l-16,-18" class="combo"/>
<path d="M224,132 l16,18" class="combo"/>
<rect rx="6" ry="6" x="210" y="119" width="28" height="26" class="combo"/>
<text x="224" y="132" class="combo tap">WhDn</text>
</g>
<g class="combo combopos-11">
<path d="M448,132 l16,-18" class="combo"/>
<path d="M448,132 l-16,18" class="combo"/>
<rect rx="6" ry="6" x="434" y="119" width="28" height="26" class="combo"/>
<text x="448" y="132" class="combo tap">PgDn</text>
</g>
<g class="combo combopos-12">
<path d="M616,147 l11,-4" class="combo"/>
<path d="M616,147 l-11,4" class="combo"/>
<rect rx="6" ry="6" x="602" y="134" width="28" height="26" class="combo"/>
<text x="616" y="147" class="combo tap">Del</text>
</g>
</g>
</g>
</svg>