mirror of
https://github.com/BanjoRecomp/BanjoRecomp
synced 2026-05-23 22:45:12 -04:00
Remove zelda themed input mapping visualization
This commit is contained in:
thecozies
@@ -90,267 +90,10 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-config__visual-wrapper">
|
||||
<div class="input-config__visual-aspect">
|
||||
<div class="input-config__visual">
|
||||
<!-- stick only -->
|
||||
<div class="input-config__visual-stick-wrapper">
|
||||
<div
|
||||
class="input-viz input-config__visual-stick"
|
||||
visual-input="X_AXIS_NEG X_AXIS_POS Y_AXIS_NEG Y_AXIS_POS"
|
||||
>
|
||||
<div class="input-viz__stick-split input-viz__stick-split--vertical">
|
||||
<div class="input-viz input-viz__mappings" visual-input="Y_AXIS_POS">
|
||||
<svg class="input-viz__dpad-arrow input-viz__dpad-arrow--up" src="icons/VizMap/DPadArrow.svg" />
|
||||
<div
|
||||
class="input-config__visual-mapping"
|
||||
data-for="cur_binding, i : inputs.Y_AXIS_POS"
|
||||
>
|
||||
<div>{{cur_binding}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-viz__dpad-divider" />
|
||||
<div class="input-viz input-viz__mappings" visual-input="Y_AXIS_NEG">
|
||||
<svg class="input-viz__dpad-arrow input-viz__dpad-arrow--down" src="icons/VizMap/DPadArrow.svg" />
|
||||
<div
|
||||
class="input-config__visual-mapping"
|
||||
data-for="cur_binding, i : inputs.Y_AXIS_NEG"
|
||||
>
|
||||
<div>{{cur_binding}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-viz__stick-split input-viz__stick-split--horizontal">
|
||||
<div class="input-viz input-viz__mappings" visual-input="X_AXIS_NEG">
|
||||
<svg class="input-viz__dpad-arrow input-viz__dpad-arrow--left" src="icons/VizMap/DPadArrow.svg" />
|
||||
<div
|
||||
class="input-config__visual-mapping"
|
||||
data-for="cur_binding, i : inputs.X_AXIS_NEG"
|
||||
>
|
||||
<div>{{cur_binding}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-viz__dpad-divider" />
|
||||
<div class="input-viz input-viz__mappings" visual-input="X_AXIS_POS">
|
||||
<svg class="input-viz__dpad-arrow input-viz__dpad-arrow--right" src="icons/VizMap/DPadArrow.svg" />
|
||||
<div
|
||||
class="input-config__visual-mapping"
|
||||
data-for="cur_binding, i : inputs.X_AXIS_POS"
|
||||
>
|
||||
<div>{{cur_binding}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- top half -->
|
||||
<div class="input-config__visual-half">
|
||||
<div class="input-config__visual-quarter-left">
|
||||
<div
|
||||
class="input-viz input-viz__dpad"
|
||||
visual-input="DPAD_UP DPAD_DOWN DPAD_LEFT DPAD_RIGHT"
|
||||
>
|
||||
<svg src="icons/VizMap/DPad.svg" />
|
||||
<div class="input-viz__dpad-split input-viz__dpad-split--vertical">
|
||||
<div class="input-viz input-viz__mappings" visual-input="DPAD_UP">
|
||||
<svg class="input-viz__dpad-arrow input-viz__dpad-arrow--up" src="icons/VizMap/DPadArrow.svg" />
|
||||
<div
|
||||
class="input-config__visual-mapping"
|
||||
data-for="cur_binding, i : inputs.DPAD_UP"
|
||||
>
|
||||
<div>{{cur_binding}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-viz__dpad-divider" />
|
||||
<div class="input-viz input-viz__mappings" visual-input="DPAD_DOWN">
|
||||
<svg class="input-viz__dpad-arrow input-viz__dpad-arrow--down" src="icons/VizMap/DPadArrow.svg" />
|
||||
<div
|
||||
class="input-config__visual-mapping"
|
||||
data-for="cur_binding, i : inputs.DPAD_DOWN"
|
||||
>
|
||||
<div>{{cur_binding}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-viz__dpad-split input-viz__dpad-split--horizontal">
|
||||
<div class="input-viz input-viz__mappings" visual-input="DPAD_LEFT">
|
||||
<svg class="input-viz__dpad-arrow input-viz__dpad-arrow--left" src="icons/VizMap/DPadArrow.svg" />
|
||||
<div
|
||||
class="input-config__visual-mapping"
|
||||
data-for="cur_binding, i : inputs.DPAD_LEFT"
|
||||
>
|
||||
<div>{{cur_binding}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-viz__dpad-divider" />
|
||||
<div class="input-viz input-viz__mappings" visual-input="DPAD_RIGHT">
|
||||
<svg class="input-viz__dpad-arrow input-viz__dpad-arrow--right" src="icons/VizMap/DPadArrow.svg" />
|
||||
<div
|
||||
class="input-config__visual-mapping"
|
||||
data-for="cur_binding, i : inputs.DPAD_RIGHT"
|
||||
>
|
||||
<div>{{cur_binding}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-config__visual-quarter-right">
|
||||
<div class="input-config__main-buttons">
|
||||
<div
|
||||
class="input-viz input-viz__button input-viz__button--sm input-viz__button--Start"
|
||||
visual-input="START"
|
||||
>
|
||||
<svg src="icons/VizMap/ButtonSmall.svg" />
|
||||
<div class="input-viz__mappings">
|
||||
<div
|
||||
class="input-config__visual-mapping"
|
||||
data-for="cur_binding, i : inputs.START"
|
||||
>
|
||||
<div>{{cur_binding}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="input-viz input-viz__button input-viz__button--lg input-viz__button--B"
|
||||
visual-input="B"
|
||||
>
|
||||
<svg src="icons/VizMap/ButtonLarge.svg" />
|
||||
<div class="input-viz__mappings">
|
||||
<div
|
||||
class="input-config__visual-mapping"
|
||||
data-for="cur_binding, i : inputs.B"
|
||||
>
|
||||
<div>{{cur_binding}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="input-viz input-viz__button input-viz__button--lg input-viz__button--A"
|
||||
visual-input="A"
|
||||
>
|
||||
<svg src="icons/VizMap/ButtonLarge.svg" />
|
||||
<div class="input-viz__mappings">
|
||||
<div
|
||||
class="input-config__visual-mapping"
|
||||
data-for="cur_binding, i : inputs.A"
|
||||
>
|
||||
<div>{{cur_binding}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-config__c-buttons">
|
||||
<div class="input-config__c-buttons-lr">
|
||||
<div
|
||||
class="input-viz input-viz__button input-viz__button--md input-viz__button--C"
|
||||
visual-input="C_LEFT"
|
||||
>
|
||||
<svg src="icons/VizMap/ButtonMedium.svg" />
|
||||
<div class="input-viz__mappings">
|
||||
<div
|
||||
class="input-config__visual-mapping"
|
||||
data-for="cur_binding, i : inputs.C_LEFT"
|
||||
>
|
||||
<div>{{cur_binding}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="input-viz input-viz__button input-viz__button--md input-viz__button--C"
|
||||
visual-input="C_RIGHT"
|
||||
>
|
||||
<svg src="icons/VizMap/ButtonMedium.svg" />
|
||||
<div class="input-viz__mappings">
|
||||
<div
|
||||
class="input-config__visual-mapping"
|
||||
data-for="cur_binding, i : inputs.C_RIGHT"
|
||||
>
|
||||
<div>{{cur_binding}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-config__c-buttons-du">
|
||||
<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-viz__mappings">
|
||||
<div
|
||||
class="input-config__visual-mapping"
|
||||
data-for="cur_binding, i : inputs.C_DOWN"
|
||||
>
|
||||
<div>{{cur_binding}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="input-viz input-viz__button input-viz__button--sm input-viz__button--C"
|
||||
visual-input="C_UP"
|
||||
>
|
||||
<svg src="icons/VizMap/ButtonMedium.svg" />
|
||||
<div class="input-viz__mappings">
|
||||
<div
|
||||
class="input-config__visual-mapping"
|
||||
data-for="cur_binding, i : inputs.C_UP"
|
||||
>
|
||||
<div>{{cur_binding}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- bottom half -->
|
||||
<div class="input-config__visual-half input-config__visual-half--bottom">
|
||||
<div
|
||||
class="input-viz input-viz__Z"
|
||||
visual-input="Z"
|
||||
>
|
||||
<svg src="icons/VizMap/Target.svg" />
|
||||
<div class="input-viz__mappings">
|
||||
<div
|
||||
class="input-config__visual-mapping"
|
||||
data-for="cur_binding, i : inputs.Z"
|
||||
>
|
||||
<div>{{cur_binding}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="input-viz input-viz__R"
|
||||
visual-input="R"
|
||||
>
|
||||
<svg src="icons/VizMap/Shield.svg" />
|
||||
<div class="input-viz__mappings">
|
||||
<div
|
||||
class="input-config__visual-mapping"
|
||||
data-for="cur_binding, i : inputs.R"
|
||||
>
|
||||
<div>{{cur_binding}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="input-viz input-viz__L"
|
||||
visual-input="L"
|
||||
>
|
||||
<svg src="icons/VizMap/Map.svg" />
|
||||
<div class="input-viz__mappings">
|
||||
<div
|
||||
class="input-config__visual-mapping"
|
||||
data-for="cur_binding, i : inputs.L"
|
||||
>
|
||||
<div>{{cur_binding}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="config__wrapper">
|
||||
<p>
|
||||
description area for inputs
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+2
-424
@@ -81,7 +81,7 @@ h3, .tab {
|
||||
line-height: 40dp;
|
||||
}
|
||||
|
||||
.prompt-font-sm, .input-viz__mappings div {
|
||||
.prompt-font-sm {
|
||||
font-family: promptfont;
|
||||
font-size: 32dp;
|
||||
font-style: normal;
|
||||
@@ -208,7 +208,7 @@ h3, .tab {
|
||||
line-height: 40dp;
|
||||
}
|
||||
|
||||
.prompt-font-sm, .input-viz__mappings div {
|
||||
.prompt-font-sm {
|
||||
font-family: promptfont;
|
||||
font-size: 32dp;
|
||||
font-style: normal;
|
||||
@@ -1244,428 +1244,6 @@ scrollbarhorizontal sliderbar {
|
||||
padding: 8dp;
|
||||
}
|
||||
|
||||
.input-config__visual-wrapper {
|
||||
display: block;
|
||||
flex: 1 1 100%;
|
||||
width: auto;
|
||||
max-width: 1040.4444444444dp;
|
||||
height: auto;
|
||||
max-height: 780.3333333333dp;
|
||||
margin: auto 0;
|
||||
}
|
||||
|
||||
.input-config__visual-aspect {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin: auto 0;
|
||||
padding-bottom: 75%;
|
||||
background-color: BGShadow;
|
||||
}
|
||||
|
||||
.input-config__visual {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 16dp;
|
||||
right: 16dp;
|
||||
bottom: 16dp;
|
||||
left: 16dp;
|
||||
flex-direction: column;
|
||||
border-radius: 108dp;
|
||||
background-color: WhiteA5;
|
||||
}
|
||||
|
||||
.input-config__visual-half {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex: 1 1 100%;
|
||||
flex-direction: row;
|
||||
padding: 6%;
|
||||
}
|
||||
.input-config__visual-half--bottom {
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.input-config__visual-quarter-left {
|
||||
display: flex;
|
||||
flex: 1 1 50%;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.input-config__visual-quarter-right {
|
||||
display: flex;
|
||||
flex: 1 1 100%;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.input-config__visual-stick-wrapper {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.input-viz {
|
||||
transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out, opacity 0.05s linear-in-out;
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.input-viz > svg:not(.input-viz__dpad-arrow) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
[cur-input=NONE] .input-viz[visual-input] {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.input-viz[visual-input~=A] {
|
||||
opacity: 0.25;
|
||||
}
|
||||
[cur-input=A] .input-viz[visual-input~=A] {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.input-viz[visual-input~=B] {
|
||||
opacity: 0.25;
|
||||
}
|
||||
[cur-input=B] .input-viz[visual-input~=B] {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.input-viz[visual-input~=Z] {
|
||||
opacity: 0.25;
|
||||
}
|
||||
[cur-input=Z] .input-viz[visual-input~=Z] {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.input-viz[visual-input~=START] {
|
||||
opacity: 0.25;
|
||||
}
|
||||
[cur-input=START] .input-viz[visual-input~=START] {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.input-viz[visual-input~=DPAD_UP] {
|
||||
opacity: 0.25;
|
||||
}
|
||||
[cur-input=DPAD_UP] .input-viz[visual-input~=DPAD_UP] {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.input-viz[visual-input~=DPAD_DOWN] {
|
||||
opacity: 0.25;
|
||||
}
|
||||
[cur-input=DPAD_DOWN] .input-viz[visual-input~=DPAD_DOWN] {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.input-viz[visual-input~=DPAD_LEFT] {
|
||||
opacity: 0.25;
|
||||
}
|
||||
[cur-input=DPAD_LEFT] .input-viz[visual-input~=DPAD_LEFT] {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.input-viz[visual-input~=DPAD_RIGHT] {
|
||||
opacity: 0.25;
|
||||
}
|
||||
[cur-input=DPAD_RIGHT] .input-viz[visual-input~=DPAD_RIGHT] {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.input-viz[visual-input~=L] {
|
||||
opacity: 0.25;
|
||||
}
|
||||
[cur-input=L] .input-viz[visual-input~=L] {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.input-viz[visual-input~=R] {
|
||||
opacity: 0.25;
|
||||
}
|
||||
[cur-input=R] .input-viz[visual-input~=R] {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.input-viz[visual-input~=C_UP] {
|
||||
opacity: 0.25;
|
||||
}
|
||||
[cur-input=C_UP] .input-viz[visual-input~=C_UP] {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.input-viz[visual-input~=C_DOWN] {
|
||||
opacity: 0.25;
|
||||
}
|
||||
[cur-input=C_DOWN] .input-viz[visual-input~=C_DOWN] {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.input-viz[visual-input~=C_LEFT] {
|
||||
opacity: 0.25;
|
||||
}
|
||||
[cur-input=C_LEFT] .input-viz[visual-input~=C_LEFT] {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.input-viz[visual-input~=C_RIGHT] {
|
||||
opacity: 0.25;
|
||||
}
|
||||
[cur-input=C_RIGHT] .input-viz[visual-input~=C_RIGHT] {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.input-viz[visual-input~=X_AXIS_NEG] {
|
||||
opacity: 0.25;
|
||||
}
|
||||
[cur-input=X_AXIS_NEG] .input-viz[visual-input~=X_AXIS_NEG] {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.input-viz[visual-input~=X_AXIS_POS] {
|
||||
opacity: 0.25;
|
||||
}
|
||||
[cur-input=X_AXIS_POS] .input-viz[visual-input~=X_AXIS_POS] {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.input-viz[visual-input~=Y_AXIS_NEG] {
|
||||
opacity: 0.25;
|
||||
}
|
||||
[cur-input=Y_AXIS_NEG] .input-viz[visual-input~=Y_AXIS_NEG] {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.input-viz[visual-input~=Y_AXIS_POS] {
|
||||
opacity: 0.25;
|
||||
}
|
||||
[cur-input=Y_AXIS_POS] .input-viz[visual-input~=Y_AXIS_POS] {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.input-viz__button {
|
||||
color: Text;
|
||||
}
|
||||
.input-viz__button svg {
|
||||
image-color: Text;
|
||||
}
|
||||
.input-viz__button--sm {
|
||||
width: 64dp;
|
||||
height: 64dp;
|
||||
}
|
||||
.input-viz__button--sm > svg {
|
||||
width: 64dp;
|
||||
height: 64dp;
|
||||
}
|
||||
.input-viz__button--md {
|
||||
width: 76dp;
|
||||
height: 76dp;
|
||||
}
|
||||
.input-viz__button--md > svg {
|
||||
width: 76dp;
|
||||
height: 76dp;
|
||||
}
|
||||
.input-viz__button--lg {
|
||||
width: 84dp;
|
||||
height: 84dp;
|
||||
}
|
||||
.input-viz__button--lg > svg {
|
||||
width: 84dp;
|
||||
height: 84dp;
|
||||
}
|
||||
.input-viz__button--C svg {
|
||||
image-color: Warning;
|
||||
}
|
||||
.input-viz__button--A {
|
||||
margin-top: auto;
|
||||
}
|
||||
.input-viz__button--A svg {
|
||||
image-color: A;
|
||||
}
|
||||
.input-viz__button--B svg {
|
||||
image-color: Success;
|
||||
}
|
||||
.input-viz__button--Start svg {
|
||||
image-color: Danger;
|
||||
}
|
||||
|
||||
.input-viz__Z {
|
||||
width: 136dp;
|
||||
height: 136dp;
|
||||
}
|
||||
.input-viz__Z svg {
|
||||
image-color: Warning;
|
||||
}
|
||||
.input-viz__Z > svg {
|
||||
width: 136dp;
|
||||
height: 136dp;
|
||||
}
|
||||
|
||||
.input-viz.input-viz__dpad {
|
||||
width: 192dp;
|
||||
height: 192dp;
|
||||
position: relative;
|
||||
}
|
||||
.input-viz.input-viz__dpad svg {
|
||||
image-color: Text;
|
||||
}
|
||||
.input-viz.input-viz__dpad > svg {
|
||||
width: 192dp;
|
||||
height: 192dp;
|
||||
}
|
||||
|
||||
.input-config__visual-stick {
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 200dp;
|
||||
height: 200dp;
|
||||
border-radius: 100dp;
|
||||
background-color: WhiteA5;
|
||||
}
|
||||
|
||||
.input-viz__dpad-split,
|
||||
.input-viz__stick-split {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.input-viz__dpad-split--vertical,
|
||||
.input-viz__stick-split--vertical {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.input-viz__dpad-split--horizontal,
|
||||
.input-viz__stick-split--horizontal {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.input-viz__dpad-split > div,
|
||||
.input-viz__stick-split > div {
|
||||
display: flex;
|
||||
flex: 1 1 100%;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.input-viz__dpad-split > div {
|
||||
width: 64dp;
|
||||
height: 64dp;
|
||||
}
|
||||
|
||||
.input-viz__stick-split > div {
|
||||
width: 66.6666666667dp;
|
||||
height: 66.6666666667dp;
|
||||
}
|
||||
|
||||
.input-viz__dpad-arrow {
|
||||
position: absolute;
|
||||
width: 60dp;
|
||||
height: 60dp;
|
||||
}
|
||||
.input-viz__dpad-arrow--up {
|
||||
top: 4dp;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.input-viz__dpad-arrow--down {
|
||||
bottom: 4dp;
|
||||
margin: 0 auto;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.input-viz__dpad-arrow--left {
|
||||
left: 4dp;
|
||||
margin: auto 0;
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
.input-viz__dpad-arrow--right {
|
||||
right: 4dp;
|
||||
margin: auto 0;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.input-viz__R {
|
||||
width: 96dp;
|
||||
height: 96dp;
|
||||
}
|
||||
.input-viz__R svg {
|
||||
image-color: White;
|
||||
}
|
||||
.input-viz__R > svg {
|
||||
width: 96dp;
|
||||
height: 96dp;
|
||||
}
|
||||
|
||||
.input-viz__L {
|
||||
width: 136dp;
|
||||
height: 136dp;
|
||||
}
|
||||
.input-viz__L svg {
|
||||
image-color: Secondary;
|
||||
}
|
||||
.input-viz__L > svg {
|
||||
width: 136dp;
|
||||
height: 136dp;
|
||||
}
|
||||
|
||||
.input-config__c-buttons {
|
||||
position: relative;
|
||||
width: 208dp;
|
||||
height: 132dp;
|
||||
}
|
||||
.input-config__c-buttons-lr, .input-config__c-buttons-du {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
.input-config__c-buttons-lr {
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.input-config__c-buttons-du {
|
||||
flex-direction: column-reverse;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.input-config__c-buttons .input-viz[visual-input=C_UP] {
|
||||
margin-top: -32dp;
|
||||
}
|
||||
|
||||
.input-config__main-buttons {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
width: 268dp;
|
||||
height: 128dp;
|
||||
margin-right: 10dp;
|
||||
}
|
||||
|
||||
.button {
|
||||
border-color: PrimaryA80;
|
||||
background-color: PrimaryA5;
|
||||
|
||||
@@ -32,316 +32,3 @@ $visual-max-width: $base-modal-max-width - $mapping-min-width - $scrollbar-width
|
||||
.input-config__mappings-wrapper {
|
||||
padding: space(8);
|
||||
}
|
||||
|
||||
.input-config__visual-wrapper {
|
||||
display: block;
|
||||
flex: 1 1 100%;
|
||||
width: auto;
|
||||
max-width: space($visual-max-width);
|
||||
height: auto;
|
||||
max-height: space(math.div($visual-max-width, 4) * 3);
|
||||
margin: auto 0;
|
||||
}
|
||||
|
||||
.input-config__visual-aspect {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin: auto 0;
|
||||
padding-bottom: 75%;
|
||||
background-color: $color-bg-shadow;
|
||||
}
|
||||
|
||||
.input-config__visual {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: space(16);
|
||||
right: space(16);
|
||||
bottom: space(16);
|
||||
left: space(16);
|
||||
flex-direction: column;
|
||||
border-radius: space(108);
|
||||
background-color: $color-white-a5;
|
||||
}
|
||||
|
||||
.input-config__visual-half {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex: 1 1 100%;
|
||||
flex-direction: row;
|
||||
padding: 6%;
|
||||
|
||||
&--bottom {
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
.input-config__visual-quarter-left {
|
||||
display: flex;
|
||||
flex: 1 1 50%;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.input-config__visual-quarter-right {
|
||||
display: flex;
|
||||
flex: 1 1 100%;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.input-config__visual-stick-wrapper {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.input-viz {
|
||||
@include trans-colors-opa;
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
> svg:not(.input-viz__dpad-arrow) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&__mappings div {
|
||||
@extend %prompt-font-sm;
|
||||
}
|
||||
}
|
||||
|
||||
$all-inputs: A,
|
||||
B,
|
||||
Z,
|
||||
START,
|
||||
DPAD_UP,
|
||||
DPAD_DOWN,
|
||||
DPAD_LEFT,
|
||||
DPAD_RIGHT,
|
||||
L,
|
||||
R,
|
||||
C_UP,
|
||||
C_DOWN,
|
||||
C_LEFT,
|
||||
C_RIGHT,
|
||||
X_AXIS_NEG,
|
||||
X_AXIS_POS,
|
||||
Y_AXIS_NEG,
|
||||
Y_AXIS_POS;
|
||||
|
||||
// Show default state while no inputs are active
|
||||
[cur-input="NONE"] .input-viz[visual-input] {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@each $inp in $all-inputs {
|
||||
.input-viz[visual-input~="#{$inp}"] {
|
||||
opacity: 0.25;
|
||||
|
||||
[cur-input="#{$inp}"] & {
|
||||
opacity: 1.0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@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);
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
&--B {
|
||||
@include set-svgs-color($color-success);
|
||||
}
|
||||
|
||||
&--Start {
|
||||
@include set-svgs-color($color-danger);
|
||||
}
|
||||
}
|
||||
|
||||
.input-viz__Z {
|
||||
@include set-svgs-color($color-warning);
|
||||
@include set-sizes(136);
|
||||
}
|
||||
|
||||
$dpad-size: 192;
|
||||
|
||||
.input-viz.input-viz__dpad {
|
||||
@include set-svgs-color($color-text);
|
||||
@include set-sizes($dpad-size);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
$stick-size: 200;
|
||||
|
||||
.input-config__visual-stick {
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: space($stick-size);
|
||||
height: space($stick-size);
|
||||
border-radius: space(math.div($stick-size, 2));
|
||||
background-color: $color-white-a5;
|
||||
}
|
||||
|
||||
.input-viz__dpad-split,
|
||||
.input-viz__stick-split {
|
||||
@include inset-block(0);
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
&--vertical {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&--horizontal {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
flex: 1 1 100%;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.input-viz__dpad-split > div {
|
||||
width: space(math.div($dpad-size, 3));
|
||||
height: space(math.div($dpad-size, 3));
|
||||
}
|
||||
|
||||
.input-viz__stick-split > div {
|
||||
width: space(math.div($stick-size, 3));
|
||||
height: space(math.div($stick-size, 3));
|
||||
}
|
||||
|
||||
.input-viz__dpad-arrow {
|
||||
$edge-dist: space(4);
|
||||
position: absolute;
|
||||
width: space(60);
|
||||
height: space(60);
|
||||
|
||||
&--up {
|
||||
top: $edge-dist;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
&--down {
|
||||
bottom: $edge-dist;
|
||||
margin: 0 auto;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
&--left {
|
||||
left: $edge-dist;
|
||||
margin: auto 0;
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
&--right {
|
||||
right: $edge-dist;
|
||||
margin: auto 0;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
|
||||
.input-viz__R {
|
||||
@include set-svgs-color($color-white);
|
||||
@include set-sizes(96);
|
||||
}
|
||||
|
||||
.input-viz__L {
|
||||
@include set-svgs-color($color-secondary);
|
||||
@include set-sizes(136);
|
||||
}
|
||||
|
||||
.input-config__c-buttons {
|
||||
position: relative;
|
||||
width: space(76 + 76 + 56);
|
||||
height: space(76 + 56);
|
||||
|
||||
&-lr, &-du {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&-lr {
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&-du {
|
||||
flex-direction: column-reverse;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.input-viz {
|
||||
&[visual-input="C_UP"] {
|
||||
margin-top: space(-32);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-config__main-buttons {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
width: space(268);
|
||||
height: space(128);
|
||||
margin-right: space(10);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user