Theaninova/DeviceManager
1
0
Fork 0
mirror of https://github.com/CharaChorder/DeviceManager.git synced 2026-01-20 00:43:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

layout prototype

Browse Source
This commit is contained in:
Thea Schöbl
2023-07-06 23:38:55 +02:00
parent 3d1be38858
commit cbba6dfa09
6 changed files with 78 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/lib/components/RingInput.svelte
View File

@@ -26,7 +26,7 @@
<div class="radial">
{#each layout as keys, quadrant}
<button on:click={() => (activeLayer = (activeLayer + 1) % 3)} title={getKeyDescriptions(keys)}>
<button title={getKeyDescriptions(keys)}>
{#each keys as value, layer}
<span
class:active={virtualLayerMap[activeLayer] === virtualLayerMap[layer]}
@@ -60,6 +60,8 @@
span {
$cr: math.div($size, 2) - 2 * $offset;
will-change: scale, offset-distance;
scale: 0.9;
offset-path: path(
"M#{math.div($size, 2)} #{$offset}A#{$cr} #{$cr} 0 1 1 #{math.div($size, 2)} #{$size - $offset}A#{$cr} #{$cr} 0 1 1 #{math.div($size, 2)} #{$offset}Z"
@@ -111,7 +113,7 @@
mask-image: url("$lib/assets/quater-ring.svg");
mask-size: 100% 100%;
&:hover {
&:active {
color: var(--md-sys-color-on-tertiary);
background: var(--md-sys-color-tertiary);
}