Add RGB, media, and output controls to HUB layer and thumbs

This commit is contained in:
afiqzudinhadi 2026-06-22 15:34:10 +08:00 committed by github-actions[bot]
parent 8b03f68833
commit 27f75032f9
4 changed files with 184 additions and 51 deletions

View file

@ -15,6 +15,68 @@
<svg id="mdi:backspace-outline">
<svg xmlns="http://www.w3.org/2000/svg" id="mdi-backspace-outline" viewBox="0 0 24 24"><path d="M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z" /></svg>
</svg>
<svg id="mdi:eyedropper">
<svg xmlns="http://www.w3.org/2000/svg" id="mdi-eyedropper" viewBox="0 0 24 24"><path d="M19.35,11.72L17.22,13.85L15.81,12.43L8.1,20.14L3.5,22L2,20.5L3.86,15.9L11.57,8.19L10.15,6.78L12.28,4.65L19.35,11.72M16.76,3C17.93,1.83 19.83,1.83 21,3C22.17,4.17 22.17,6.07 21,7.24L19.08,9.16L14.84,4.92L16.76,3M5.56,17.03L4.5,19.5L6.97,18.44L14.4,11L13,9.6L5.56,17.03Z" /></svg>
</svg>
<svg id="mdi:led-on">
<svg xmlns="http://www.w3.org/2000/svg" id="mdi-led-on" viewBox="0 0 24 24"><path d="M11,0V4H13V0H11M18.3,2.29L15.24,5.29L16.64,6.71L19.7,3.71L18.3,2.29M5.71,2.29L4.29,3.71L7.29,6.71L8.71,5.29L5.71,2.29M12,6A4,4 0 0,0 8,10V16H6V18H9V23H11V18H13V23H15V18H18V16H16V10A4,4 0 0,0 12,6M2,9V11H6V9H2M18,9V11H22V9H18Z" /></svg>
</svg>
<svg id="mdi:led-outline">
<svg xmlns="http://www.w3.org/2000/svg" id="mdi-led-outline" viewBox="0 0 24 24"><path d="M12,6A4,4 0 0,0 8,10V16H6V18H9V23H11V18H13V23H15V18H18V16H16V10A4,4 0 0,0 12,6M12,8A2,2 0 0,1 14,10V15H10V10A2,2 0 0,1 12,8Z" /></svg>
</svg>
<svg id="mdi:palette">
<svg xmlns="http://www.w3.org/2000/svg" id="mdi-palette" viewBox="0 0 24 24"><path d="M17.5,12A1.5,1.5 0 0,1 16,10.5A1.5,1.5 0 0,1 17.5,9A1.5,1.5 0 0,1 19,10.5A1.5,1.5 0 0,1 17.5,12M14.5,8A1.5,1.5 0 0,1 13,6.5A1.5,1.5 0 0,1 14.5,5A1.5,1.5 0 0,1 16,6.5A1.5,1.5 0 0,1 14.5,8M9.5,8A1.5,1.5 0 0,1 8,6.5A1.5,1.5 0 0,1 9.5,5A1.5,1.5 0 0,1 11,6.5A1.5,1.5 0 0,1 9.5,8M6.5,12A1.5,1.5 0 0,1 5,10.5A1.5,1.5 0 0,1 6.5,9A1.5,1.5 0 0,1 8,10.5A1.5,1.5 0 0,1 6.5,12M12,3A9,9 0 0,0 3,12A9,9 0 0,0 12,21A1.5,1.5 0 0,0 13.5,19.5C13.5,19.11 13.35,18.76 13.11,18.5C12.88,18.23 12.73,17.88 12.73,17.5A1.5,1.5 0 0,1 14.23,16H16A5,5 0 0,0 21,11C21,6.58 16.97,3 12,3Z" /></svg>
</svg>
<svg id="tabler:brightness-down">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon icon-tabler icons-tabler-outline icon-tabler-brightness-down"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M9 12a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" />
<path d="M12 5l0 .01" />
<path d="M17 7l0 .01" />
<path d="M19 12l0 .01" />
<path d="M17 17l0 .01" />
<path d="M12 19l0 .01" />
<path d="M7 17l0 .01" />
<path d="M5 12l0 .01" />
<path d="M7 7l0 .01" />
</svg>
</svg>
<svg id="tabler:brightness-up">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon icon-tabler icons-tabler-outline icon-tabler-brightness-up"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M9 12a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" />
<path d="M12 5l0 -2" />
<path d="M17 7l1.4 -1.4" />
<path d="M19 12l2 0" />
<path d="M17 17l1.4 1.4" />
<path d="M12 19l0 2" />
<path d="M7 17l-1.4 1.4" />
<path d="M6 12l-2 0" />
<path d="M7 7l-1.4 -1.4" />
</svg>
</svg>
</defs>/* end glyphs */
<style>/* inherit to force styles through use tags */
svg path {
@ -384,6 +446,7 @@ rect.held, rect.combo.held {
</g>
<g transform="translate(224, 205)" class="key keypos-36">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap"><tspan style="font-size: 86%">&amp;td_rgb</tspan></text>
</g>
<g transform="translate(286, 213) rotate(15.0)" class="key keypos-37">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
@ -403,6 +466,8 @@ rect.held, rect.combo.held {
</g>
<g transform="translate(616, 205)" class="key keypos-41">
<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>
<text x="0" y="24" class="key hold"><tspan style="font-size: 60%">PLAY PAUSE</tspan></text>
</g>
<g class="combo combopos-0">
<rect rx="6" ry="6" x="70" y="64" width="28" height="26" class="combo"/>
@ -606,6 +671,7 @@ rect.held, rect.combo.held {
</g>
<g transform="translate(224, 205)" class="key keypos-36">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap"><tspan style="font-size: 86%">&amp;td_rgb</tspan></text>
</g>
<g transform="translate(286, 213) rotate(15.0)" class="key keypos-37">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
@ -625,6 +691,8 @@ rect.held, rect.combo.held {
</g>
<g transform="translate(616, 205)" class="key keypos-41">
<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>
<text x="0" y="24" class="key hold"><tspan style="font-size: 60%">PLAY PAUSE</tspan></text>
</g>
<g class="combo combopos-0">
<rect rx="6" ry="6" x="70" y="64" width="28" height="26" class="combo"/>
@ -826,6 +894,7 @@ rect.held, rect.combo.held {
</g>
<g transform="translate(224, 205)" class="key keypos-36">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap"><tspan style="font-size: 86%">&amp;td_rgb</tspan></text>
</g>
<g transform="translate(286, 213) rotate(15.0)" class="key keypos-37">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
@ -845,6 +914,8 @@ rect.held, rect.combo.held {
</g>
<g transform="translate(616, 205)" class="key keypos-41">
<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>
<text x="0" y="24" class="key hold"><tspan style="font-size: 60%">PLAY PAUSE</tspan></text>
</g>
</g>
</g>
@ -1077,21 +1148,36 @@ rect.held, rect.combo.held {
</g>
<g transform="translate(28, 105)" class="key held keypos-12">
<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">
<tspan x="0" dy="-0.6em">OUT</tspan><tspan x="0" dy="1.2em">TOG</tspan>
</text>
</g>
<g transform="translate(84, 105)" class="key keypos-13">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<g transform="translate(84, 105)" class="key sym_by_sym keypos-13">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key sym_by_sym"/>
<use href="#mdi:led-on" xlink:href="#mdi:led-on" x="-9" y="-9" height="18" width="18.0" class="key sym_by_sym tap glyph mdi:led-on"/>
<use href="#mdi:palette" xlink:href="#mdi:palette" x="-8" y="-24" height="15" width="15.0" class="key sym_by_sym shifted glyph mdi:palette"/>
</g>
<g transform="translate(140, 91)" class="key keypos-14">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<g transform="translate(140, 91)" class="key sym_by_sym keypos-14">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key sym_by_sym"/>
<use href="#mdi:led-outline" xlink:href="#mdi:led-outline" x="-9" y="-9" height="18" width="18.0" class="key sym_by_sym tap glyph mdi:led-outline"/>
<use href="#mdi:eyedropper" xlink:href="#mdi:eyedropper" x="-8" y="-24" height="15" width="15.0" class="key sym_by_sym shifted glyph mdi:eyedropper"/>
</g>
<g transform="translate(196, 84)" class="key keypos-15">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<g transform="translate(196, 84)" class="key sym_by_sym keypos-15">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key sym_by_sym"/>
<use href="#mdi:led-outline" xlink:href="#mdi:led-outline" x="-9" y="-9" height="18" width="18.0" class="key sym_by_sym tap glyph mdi:led-outline"/>
<use href="#tabler:brightness-down" xlink:href="#tabler:brightness-down" x="-8" y="-24" height="15" width="15.0" class="key sym_by_sym shifted glyph tabler:brightness-down"/>
</g>
<g transform="translate(252, 91)" 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">
<tspan x="0" dy="-0.6em">BRI</tspan><tspan x="0" dy="1.2em">UP</tspan>
</text>
</g>
<g transform="translate(308, 98)" 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">
<tspan x="0" dy="-0.6em">Vol</tspan><tspan x="0" dy="1.2em">Up</tspan>
</text>
</g>
<g transform="translate(532, 98)" class="key keypos-18">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
@ -1121,24 +1207,32 @@ rect.held, rect.combo.held {
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<use href="#mdi:apple-keyboard-shift" xlink:href="#mdi:apple-keyboard-shift" x="-9" y="-9" height="18" width="18.0" class="key tap glyph mdi:apple-keyboard-shift"/>
</g>
<g transform="translate(84, 161)" class="key keypos-25">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">Z</text>
<g transform="translate(84, 161)" class="key sym_by_sym keypos-25">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key sym_by_sym"/>
<use href="#mdi:led-outline" xlink:href="#mdi:led-outline" x="-9" y="-9" height="18" width="18.0" class="key sym_by_sym tap glyph mdi:led-outline"/>
<use href="#mdi:palette" xlink:href="#mdi:palette" x="-8" y="-24" height="15" width="15.0" class="key sym_by_sym shifted glyph mdi:palette"/>
</g>
<g transform="translate(140, 147)" 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">X</text>
<g transform="translate(140, 147)" class="key sym_by_sym keypos-26">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key sym_by_sym"/>
<use href="#mdi:led-on" xlink:href="#mdi:led-on" x="-9" y="-9" height="18" width="18.0" class="key sym_by_sym tap glyph mdi:led-on"/>
<use href="#mdi:eyedropper" xlink:href="#mdi:eyedropper" x="-8" y="-24" height="15" width="15.0" class="key sym_by_sym shifted glyph mdi:eyedropper"/>
</g>
<g transform="translate(196, 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">C</text>
<g transform="translate(196, 140)" class="key sym_by_sym keypos-27">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key sym_by_sym"/>
<use href="#mdi:led-on" xlink:href="#mdi:led-on" x="-9" y="-9" height="18" width="18.0" class="key sym_by_sym tap glyph mdi:led-on"/>
<use href="#tabler:brightness-up" xlink:href="#tabler:brightness-up" x="-8" y="-24" height="15" width="15.0" class="key sym_by_sym shifted glyph tabler:brightness-up"/>
</g>
<g transform="translate(252, 147)" 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">V</text>
<text x="0" y="0" class="key tap">
<tspan x="0" dy="-0.6em">BRI</tspan><tspan x="0" dy="1.2em">DN</tspan>
</text>
</g>
<g transform="translate(308, 154)" class="key keypos-29">
<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">Vol</tspan><tspan x="0" dy="1.2em">Down</tspan>
</text>
</g>
<g transform="translate(532, 154)" class="key keypos-30">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
@ -1166,6 +1260,7 @@ rect.held, rect.combo.held {
</g>
<g transform="translate(756, 161)" class="key keypos-34">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap"><tspan style="font-size: 60%">&amp;td_colors</tspan></text>
</g>
<g transform="translate(812, 161)" class="key keypos-35">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
@ -1173,7 +1268,7 @@ rect.held, rect.combo.held {
</g>
<g transform="translate(224, 205)" class="key keypos-36">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
<text x="0" y="0" class="key tap">Esc</text>
<text x="0" y="0" class="key tap"><tspan style="font-size: 86%">&amp;td_rgb</tspan></text>
</g>
<g transform="translate(286, 213) rotate(15.0)" class="key keypos-37">
<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
@ -1193,6 +1288,8 @@ rect.held, rect.combo.held {
</g>
<g transform="translate(616, 205)" class="key keypos-41">
<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>
<text x="0" y="24" class="key hold"><tspan style="font-size: 60%">PLAY PAUSE</tspan></text>
</g>
</g>
</g>

Before

Width:  |  Height:  |  Size: 62 KiB

After

Width:  |  Height:  |  Size: 68 KiB

Before After
Before After