assets/reviung5-keymap.svg

<svg width="340" height="308" viewBox="0 0 340 308" 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;
}

text.layer-activator {
    text-decoration: underline;
}

/* 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-BASE">
<text x="0" y="28" class="label" id="BASE">BASE:</text>
<g transform="translate(0, 56)">
<g transform="translate(28, 28)" class="key keypos-0">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">LEFT</text>
<a href="#BLE">
<text x="0" y="24" class="key hold layer-activator">BLE</text>
</a></g>
<g transform="translate(84, 42)" 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">DOWN</text>
</g>
<g transform="translate(140, 42)" 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">UP</text>
</g>
<g transform="translate(196, 42)" 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">RIGHT</text>
</g>
<g transform="translate(252, 28)" class="key keypos-4">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">MUTE</text>
</g>
</g>
</g>
<g transform="translate(30, 126)" class="layer-BLE">
<text x="0" y="28" class="label" id="BLE">BLE:</text>
<g transform="translate(0, 56)">
<g transform="translate(28, 28)" class="key held keypos-0">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key held"/>
</g>
<g transform="translate(84, 42)" 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">
<tspan x="0" dy="-0.6em">OUT</tspan><tspan x="0" dy="1.2em">TOG</tspan>
</text>
</g>
<g transform="translate(140, 42)" 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">
<tspan x="0" dy="-0.6em">BT</tspan><tspan x="0" dy="1.2em">PRV</tspan>
</text>
</g>
<g transform="translate(196, 42)" 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">
<tspan x="0" dy="-0.6em">BT</tspan><tspan x="0" dy="1.2em">NXT</tspan>
</text>
</g>
<g transform="translate(252, 28)" class="key keypos-4">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">
<tspan x="0" dy="-0.6em">BT</tspan><tspan x="0" dy="1.2em">CLR</tspan>
</text>
</g>
</g>
</g>
</svg>