input viz WIP + icons

assets/config_menu.rml

@@ -168,12 +168,44 @@
 												<h3>Insert visual here:{{active_binding_input}}:{{active_binding_slot}}</h3>
 												<h3>Current focused row: {{cur_input_row}}</h3>
 												<div
-													class="input-config__visual-input"
+													class="input-viz"
 													data-for="input_bindings, i : inputs.array"
 													data-attr-visual-input="get_input_enum_name(i)"
 												>
 													{{get_input_name(i)}}
 												</div>
+												<div
+													class="input-viz input-viz__button input-viz__button--md input-viz__button--C"
+													visual-input="C_DOWN"
+												>
+													<svg src="icons/VizMap/ButtonMedium.svg" />
+													<div class="input-config__visual-mappings">
+														{{C_DOWN}}
+														<div
+															class="input-config__visual-mapping"
+															data-for="cur_binding, j : inputs[C_DOWN]"
+														>
+															<div>{{cur_binding}}</div>
+															<div>{{get_input_from_enum_name('C_DOWN')}}</div>
+														</div>
+													</div>
+												</div>
+												<div
+													class="input-viz input-viz__Z"
+													visual-input="Z"
+												>
+													<svg src="icons/VizMap/Target.svg" />
+													<div class="input-config__visual-mappings">
+														{{Z}}
+														<div
+															class="input-config__visual-mapping"
+															data-for="cur_binding, j : inputs[Z]"
+														>
+															<div>{{cur_binding}}</div>
+															<div>{{get_input_from_enum_name('Z')}}</div>
+														</div>
+													</div>
+												</div>
 											</div>
 										</div>
 									</div>

assets/icons/VizMap/ButtonLarge.svg

@@ -0,0 +1,5 @@
+<svg width="84" height="84" viewBox="0 0 84 84" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="42" cy="42" r="42" fill="#FFFFFF" fill-opacity="0.2"/>
+    <circle cx="42" cy="42" r="40" stroke="#FFFFFF" stroke-opacity="0.8" stroke-width="3"/>
+</svg>
+    

assets/icons/VizMap/ButtonMedium.svg

@@ -0,0 +1,4 @@
+<svg width="76" height="76" viewBox="0 0 76 76" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="38" cy="38" r="38" fill="#FFFFFF" fill-opacity="0.2"/>
+    <circle cx="38" cy="38" r="36" stroke="#FFFFFF" stroke-opacity="0.8" stroke-width="3"/>
+</svg>

assets/icons/VizMap/ButtonSmall.svg

@@ -0,0 +1,5 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="32" cy="32" r="32" fill="#FFFFFF" fill-opacity="0.2"/>
+    <circle cx="32" cy="32" r="30" stroke="#FFFFFF" stroke-opacity="0.8" stroke-width="3"/>
+</svg>
+    

assets/icons/VizMap/Target.svg

@@ -0,0 +1,46 @@
+<svg width="154" height="154" viewBox="0 0 154 154" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="9" y="9" width="136" height="136" rx="68" fill="white" fill-opacity="0.05" />
+    <g clip-path="url(#clip0_162_1132)">
+        <path d="M76.9995 37L61.4111 22H92.588L76.9995 37Z" fill="#FFFFFF" />
+        <path d="M36.9995 77L21.9995 92.5885L21.9995 61.4115L36.9995 77Z" fill="#FFFFFF" />
+        <path d="M117 77L132 61.4115V92.5885L117 77Z" fill="#FFFFFF" />
+        <path d="M76.9995 117L92.588 132H61.4111L76.9995 117Z" fill="#FFFFFF" />
+    </g>
+    <g opacity="0.1">
+        <g clip-path="url(#clip1_162_1132)">
+            <path d="M83.9453 37.6077L71.1984 20.1287L101.902 25.5425L83.9453 37.6077Z"
+                fill="#FFFFFF" />
+            <path d="M37.6072 70.0542L20.1282 82.8011L25.542 52.0978L37.6072 70.0542Z"
+                fill="#FFFFFF" />
+            <path d="M116.392 83.9461L133.871 71.1992L128.457 101.902L116.392 83.9461Z"
+                fill="#FFFFFF" />
+            <path d="M70.0532 116.393L82.8001 133.872L52.0968 128.458L70.0532 116.393Z"
+                fill="#FFFFFF" />
+        </g>
+    </g>
+    <g opacity="0.05">
+        <g clip-path="url(#clip2_162_1132)">
+            <path d="M90.6807 39.4122L81.1627 19.9853L110.459 30.6484L90.6807 39.4122Z"
+                fill="#FFFFFF" />
+            <path d="M39.4125 63.319L19.9855 72.8371L30.6487 43.5403L39.4125 63.319Z" fill="#FFFFFF" />
+            <path d="M114.588 90.6807L134.014 81.1627L123.351 110.459L114.588 90.6807Z"
+                fill="#FFFFFF" />
+            <path d="M63.3193 114.588L72.8373 134.014L43.5406 123.351L63.3193 114.588Z"
+                fill="#FFFFFF" />
+        </g>
+    </g>
+    <defs>
+        <clipPath id="clip0_162_1132">
+            <rect x="16.9995" y="17" width="120" height="120" rx="60" fill="white" />
+        </clipPath>
+        <clipPath id="clip1_162_1132">
+            <rect x="28.3301" y="7.49268" width="120" height="120" rx="60"
+                transform="rotate(10 28.3301 7.49268)" fill="white" />
+        </clipPath>
+        <clipPath id="clip2_162_1132">
+            <rect x="41.1396" y="0.097168" width="120" height="120" rx="60"
+                transform="rotate(20 41.1396 0.097168)" fill="white" />
+        </clipPath>
+    </defs>
+</svg>
+    

assets/scss/styles/components/InputConfig.scss

@@ -61,6 +61,9 @@ $visual-max-width: $base-modal-max-width - $mapping-min-width - $scrollbar-width
     left: 0;
 }
 
+.input-viz {
+    position: relative;
+}
 
 $all-inputs:
     A,
@@ -83,12 +86,12 @@ $all-inputs:
     Y_AXIS_POS;
 
 // Show default state while no inputs are active
-[cur-input="NONE"] .input-config__visual-input[visual-input] {
+[cur-input="NONE"] .input-viz[visual-input] {
     opacity: 1;
 }
 
 @each $inp in $all-inputs {
-    .input-config__visual-input[visual-input="#{$inp}"] {
+    .input-viz[visual-input="#{$inp}"] {
         opacity: 0.5;
 
         [cur-input="#{$inp}"] & {
@@ -96,3 +99,46 @@ $all-inputs:
         }
     }
 }
+
+@mixin set-sizes($sz) {
+    width: space($sz);
+    height: space($sz);
+    
+    svg {
+        width: space($sz);
+        height: space($sz);
+    }
+}
+
+.input-viz__button {
+    @include set-color($color-text);
+
+    &--sm {
+        @include set-sizes(64);
+    }
+
+    &--md {
+        @include set-sizes(76);
+    }
+
+    &--lg {
+        @include set-sizes(84);
+    }
+
+    &--C {
+        @include set-svgs-color($color-warning);
+    }
+
+    &--A {
+        @include set-svgs-color($color-a);
+    }
+
+    &--B {
+        @include set-svgs-color($color-success);
+    }
+}
+
+.input-viz__Z {
+    @include set-svgs-color($color-warning);
+    @include set-sizes(136);
+}

assets/scss/styles/mixins/_helpers.scss

@@ -16,13 +16,15 @@
     @extend %nav-foc;
 }
 
-/*
+@mixin set-svgs-color($col) {
-@include set-color(COLOR);
-*/
-@mixin set-color($col) {
-    color: $col;
-
     svg {
         image-color: $col;
     }
 }
+/*
+@include set-color(COLOR);
+*/
+@mixin set-color($col) {
+    @include set-svgs-color($col);
+    color: $col;
+}

assets/scss/styles/vars/_colors.scss

@@ -55,3 +55,17 @@ $color-border-soft: rgba(255, 255, 255, 0.1000);
 $color-border-hard: rgba(255, 255, 255, 0.3000);
 $color-border-solid: rgba(255, 255, 255, 0.6000);
 $color-transparent: rgba(0, 0, 0, 0.0000);
+$color-a: #3333FF;
+$color-a-l: #B2B2FF;
+$color-a-d: #2020AC;
+$color-a-a5: rgba(51, 51, 255, 0.0500);
+$color-a-a20: rgba(51, 51, 255, 0.2000);
+$color-a-a30: rgba(51, 51, 255, 0.3000);
+$color-a-a50: rgba(51, 51, 255, 0.5000);
+$color-a-a80: rgba(51, 51, 255, 0.8000);
+$color-white: #FFFFFF;
+$color-white-a5: rgba(255, 255, 255, 0.0500);
+$color-white-a20: rgba(255, 255, 255, 0.2000);
+$color-white-a30: rgba(255, 255, 255, 0.3000);
+$color-white-a50: rgba(255, 255, 255, 0.5000);
+$color-white-a80: rgba(255, 255, 255, 0.8000);