From a7a4aabeed41aec144ccf7cb67af7d2e5f325ec4 Mon Sep 17 00:00:00 2001 From: thecozies <79979276+thecozies@users.noreply.github.com> Date: Thu, 10 Jul 2025 11:02:47 -0500 Subject: [PATCH] Remove zelda themed input mapping visualization --- assets/config_menu/controls.rml | 265 +---------- assets/recomp.rcss | 426 +----------------- .../scss/styles/components/InputConfig.scss | 313 ------------- 3 files changed, 6 insertions(+), 998 deletions(-) diff --git a/assets/config_menu/controls.rml b/assets/config_menu/controls.rml index 3a8371e..69b5092 100644 --- a/assets/config_menu/controls.rml +++ b/assets/config_menu/controls.rml @@ -90,267 +90,10 @@ -
-
-
- -
-
-
-
- -
-
{{cur_binding}}
-
-
-
-
- -
-
{{cur_binding}}
-
-
-
-
-
- -
-
{{cur_binding}}
-
-
-
-
- -
-
{{cur_binding}}
-
-
-
-
-
- -
-
-
- -
-
- -
-
{{cur_binding}}
-
-
-
-
- -
-
{{cur_binding}}
-
-
-
-
-
- -
-
{{cur_binding}}
-
-
-
-
- -
-
{{cur_binding}}
-
-
-
-
-
-
-
-
- -
-
-
{{cur_binding}}
-
-
-
-
- -
-
-
{{cur_binding}}
-
-
-
-
- -
-
-
{{cur_binding}}
-
-
-
-
-
-
-
- -
-
-
{{cur_binding}}
-
-
-
-
- -
-
-
{{cur_binding}}
-
-
-
-
-
-
- -
-
-
{{cur_binding}}
-
-
-
-
- -
-
-
{{cur_binding}}
-
-
-
-
-
-
-
- -
-
- -
-
-
{{cur_binding}}
-
-
-
-
- -
-
-
{{cur_binding}}
-
-
-
-
- -
-
-
{{cur_binding}}
-
-
-
-
-
-
+
+

+ description area for inputs +

diff --git a/assets/recomp.rcss b/assets/recomp.rcss index 488f346..ffbc1e2 100644 --- a/assets/recomp.rcss +++ b/assets/recomp.rcss @@ -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; diff --git a/assets/scss/styles/components/InputConfig.scss b/assets/scss/styles/components/InputConfig.scss index b2cae6d..8bfc02f 100644 --- a/assets/scss/styles/components/InputConfig.scss +++ b/assets/scss/styles/components/InputConfig.scss @@ -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); -}