diff --git a/assets/config_menu.rml b/assets/config_menu.rml index 7084163..b778f95 100644 --- a/assets/config_menu.rml +++ b/assets/config_menu.rml @@ -131,14 +131,16 @@
-
@@ -198,8 +200,53 @@
-
- dpad lmao +
+ +
+
+ +
+
{{cur_binding}}
+
+
+
+
+ +
+
{{cur_binding}}
+
+
+
+
+
+ +
+
{{cur_binding}}
+
+
+
+
+ +
+
{{cur_binding}}
+
+
+
diff --git a/assets/recomp.rcss b/assets/recomp.rcss index 55748ba..8bf1bef 100644 --- a/assets/recomp.rcss +++ b/assets/recomp.rcss @@ -1 +1 @@ -h1{font-size:64dp;letter-spacing:4.48dp;line-height:64dp;font-style:normal;font-weight:700}h2{font-size:48dp;letter-spacing:3.36dp;line-height:48dp;font-style:normal;font-weight:700}h3,.tab{font-size:32dp;letter-spacing:2.24dp;line-height:32dp;font-style:normal;font-weight:700}.label-lg,.menu-list-item__label,.button--large{font-size:32dp;letter-spacing:3.52dp;line-height:32dp;font-style:normal;font-weight:700}.label-md,.button,.config-option__title,.control-option__label{font-size:24dp;letter-spacing:2.64dp;line-height:24dp;font-style:normal;font-weight:700}.label-sm,.subtitle-title__disclaimer,.config-option__range-label,.config-option__list .config-option__tab-label{font-size:16dp;letter-spacing:2.24dp;line-height:16dp;font-style:normal;font-weight:700;text-transform:uppercase}body{font-size:16dp;letter-spacing:0dp;line-height:16dp;font-style:normal;font-weight:400}.prompt-font{font-family:promptfont;font-style:normal;font-weight:400;font-size:40dp;line-height:40dp}.input-viz__mappings div{font-family:promptfont;font-style:normal;font-weight:400;font-size:32dp;line-height:32dp}.subtitle-title:not(:disabled,[disabled]),.menu-list-item:not(:disabled,[disabled]),.icon-button:not([disabled]),.button:not([disabled]),.config-option__list input.radio,.tab,.control-option__binding:not([disabled]),.centered-page__modal{nav-up:auto;nav-down:auto;nav-right:auto;nav-left:auto}.subtitle-title:not(:disabled,[disabled]),.menu-list-item:not(:disabled,[disabled]),.icon-button:not([disabled]),.button:not([disabled]),.config-option__list input.radio,.tab,.control-option__binding:not([disabled]),.centered-page__modal{focus:auto;tab-index:auto}h1{font-size:64dp;letter-spacing:4.48dp;line-height:64dp;font-style:normal;font-weight:700}h2{font-size:48dp;letter-spacing:3.36dp;line-height:48dp;font-style:normal;font-weight:700}h3,.tab{font-size:32dp;letter-spacing:2.24dp;line-height:32dp;font-style:normal;font-weight:700}.label-lg,.menu-list-item__label,.button--large{font-size:32dp;letter-spacing:3.52dp;line-height:32dp;font-style:normal;font-weight:700}.label-md,.button,.config-option__title,.control-option__label{font-size:24dp;letter-spacing:2.64dp;line-height:24dp;font-style:normal;font-weight:700}.label-sm,.subtitle-title__disclaimer,.config-option__range-label,.config-option__list .config-option__tab-label{font-size:16dp;letter-spacing:2.24dp;line-height:16dp;font-style:normal;font-weight:700;text-transform:uppercase}body{font-size:16dp;letter-spacing:0dp;line-height:16dp;font-style:normal;font-weight:400}.prompt-font{font-family:promptfont;font-style:normal;font-weight:400;font-size:40dp;line-height:40dp}.input-viz__mappings div{font-family:promptfont;font-style:normal;font-weight:400;font-size:32dp;line-height:32dp}.subtitle-title:not(:disabled,[disabled]),.menu-list-item:not(:disabled,[disabled]),.icon-button:not([disabled]),.button:not([disabled]),.config-option__list input.radio,.tab,.control-option__binding:not([disabled]),.centered-page__modal{nav-up:auto;nav-down:auto;nav-right:auto;nav-left:auto}.subtitle-title:not(:disabled,[disabled]),.menu-list-item:not(:disabled,[disabled]),.icon-button:not([disabled]),.button:not([disabled]),.config-option__list input.radio,.tab,.control-option__binding:not([disabled]),.centered-page__modal{focus:auto;tab-index:auto}*{box-sizing:border-box}hr{display:block;background:#000;padding:1.5dp}body{font-family:chiaro;font-weight:normal;font-style:normal;font-size:20dp;color:#fff}div#window{position:relative;width:100%;height:100%;box-sizing:border-box;background-color:#121018;border-color:rgba(255,255,255,.2)}div#content{z-index:2;width:auto;height:100%;overflow:hidden auto;text-align:center}p{text-align:left}input.submit{margin-left:0}input.text,input.password{box-sizing:border-box;height:31dp;padding:11dp 10dp 0;cursor:text;text-align:left}textarea{padding:14dp 12dp 10dp;cursor:text;text-align:left}input.text,input.password,select,textarea{height:auto}table input.text{box-sizing:border-box;width:100%;margin:0;line-height:1;border-width:1.5dp;border-color:#000;background-color:#fff;font-size:15dp;decorator:none;height:auto}select{display:inline-block;text-align:left;box-sizing:border-box;vertical-align:center;padding:4dp;border-radius:5dp;background-color:#787878;width:100%}select selectvalue{height:auto}select:hover selectvalue{background-color:#969696}select selectbox,tbody{background-color:#787878}select selectbox option{width:auto;background-color:#787878}select selectbox option:nth-child(even),tr:nth-child(even){background-color:#646464}select selectbox option:checked{font-weight:bold;color:#fff}select selectbox option:hover{background:#969696}input.radio,input.checkbox{flex:0;tab-index:auto;focus:auto;nav-up:auto;nav-down:auto;nav-right:auto;nav-left:auto;width:0dp}scrollbarvertical,scrollbarhorizontal{margin:0;border:0}scrollbarvertical slidertrack,scrollbarhorizontal slidertrack{background:#dabaf7;opacity:.05}scrollbarvertical sliderbar,scrollbarhorizontal sliderbar{border-radius:5dp;background:#dabaf7;opacity:.1}scrollbarvertical sliderbar:hover:not(:active),scrollbarhorizontal sliderbar:hover:not(:active){opacity:.2}scrollbarvertical sliderbar:active,scrollbarhorizontal sliderbar:active{opacity:.3}scrollbarvertical sliderarrowdec,scrollbarvertical sliderarrowinc,scrollbarhorizontal sliderarrowdec,scrollbarhorizontal sliderarrowinc{width:0;height:0}scrollbarvertical{width:12dp}scrollbarvertical slidertrack{width:12dp}scrollbarvertical sliderbar{width:12dp}scrollbarhorizontal{height:12dp}scrollbarhorizontal slidertrack{height:12dp}scrollbarhorizontal sliderbar{height:12dp}.centered-page{display:flex;position:absolute;top:0;right:0;bottom:0;left:0;padding:64dp;background-color:rgba(255,255,255,.1)}.centered-page__modal{display:flex;flex-direction:column;position:relative;margin:auto;flex:1 1 100%;max-width:1692.4444444444dp;width:100%;height:100%;background:rgba(8,7,13,.9);border-radius:16dp;border-color:rgba(255,255,255,.2);border-width:1.5dp}.centered-page__modal>.tabs{display:flex;flex-direction:column;position:relative;margin:auto;flex:1 1 100%;max-width:1692.4444444444dp;width:100%;height:100%}.centered-page__modal panels{flex:1 1 100%}.control-option{color:#ccc;display:flex;position:relative;flex-direction:row;align-items:center;justify-content:space-between;width:100%;height:auto;padding:4dp 16dp 4dp 20dp;border-radius:8dp;background-color:rgba(0,0,0,0)}.control-option svg{image-color:#ccc}.control-option:focus-visible:not(:disabled,[disabled]),.control-option:hover:not(:disabled,[disabled]){color:#f2f2f2;background-color:rgba(190,184,219,.1)}.control-option:focus-visible:not(:disabled,[disabled]) svg,.control-option:hover:not(:disabled,[disabled]) svg{image-color:#f2f2f2}.control-option:disabled,.control-option[disabled]{opacity:.5}.control-option .icon-button{flex:1 1 auto}.control-option__label{flex:2 1 300dp;height:auto;white-space:nowrap}.control-option__bindings{display:flex;position:relative;flex-direction:row;align-items:center;justify-content:space-between;flex:2 1 400dp;width:100%;height:56dp;padding:0 12dp 0 4dp}.control-option__binding{color:#ccc;display:flex;align-items:center;justify-content:center;margin:0 4dp;flex:1 1 100%;width:100%;height:56dp;padding:8dp;background-color:rgba(190,184,219,.1);border-color:rgba(190,184,219,.1);border-width:1.5dp;border-radius:8dp}.control-option__binding svg{image-color:#ccc}.control-option__binding:focus,.control-option__binding:hover{color:#f2f2f2;background-color:rgba(255,255,255,.1);border-color:#f2f2f2}.control-option__binding:focus svg,.control-option__binding:hover svg{image-color:#f2f2f2}.control-option__binding:active{color:#f5f5f5}.control-option__binding:active svg{image-color:#f5f5f5}.control-option__binding:disabled,.control-option__binding[disabled]{color:#ccc;opacity:.5}.control-option__binding:disabled svg,.control-option__binding[disabled] svg{image-color:#ccc}.control-option__binding:not([disabled]){cursor:pointer}.tabs tabs{display:flex;flex-direction:row;align-items:center;justify-content:flex-start}.tab{display:block;position:relative;padding:20dp 24dp;background-color:rgba(0,0,0,0);margin:0;color:rgba(255,255,255,.6);transition:color .033s linear-in-out}.tab:selected{color:#f2f2f2}.tab:selected .tab__indicator{background-color:rgba(255,255,255,.6)}.tab:selected:hover{cursor:default}.tab:hover{cursor:pointer}.tab:focus{color:#f2f2f2}.tab__indicator{position:absolute;background-color:rgba(0,0,0,0);right:0;bottom:2dp;left:0;height:2dp}.config__exit-button{position:absolute;top:8dp;right:8dp}.config__form{border-top-color:rgba(255,255,255,.1);border-top-width:1.5dp;display:flex;flex-direction:column;justify-content:space-between;flex:1 1 100%;width:100%;height:100%;border-bottom-left-radius:16dp;border-bottom-right-radius:16dp}.config__wrapper{display:flex;flex-direction:column;border-radius:0dp;flex:1 1 100%;height:100%;padding:16dp;text-align:left;background-color:rgba(0,0,0,.35)}.config__header,.config__footer{display:flex;justify-content:space-between;align-items:center;width:100%;background-color:rgba(0,0,0,.35)}.config__header{border-bottom-color:rgba(255,255,255,.1);border-bottom-width:1.5dp;padding:12dp 20dp}.config__footer{border-top-color:rgba(255,255,255,.1);border-top-width:1.5dp;padding:20dp 20dp;border-bottom-left-radius:16dp;border-bottom-right-radius:16dp}.config__header-left{display:flex;flex-direction:row;flex:1 1 auto}.config__header-left>:not(:first-child){margin-left:8dp}.config__row{display:flex;flex-direction:row}.config-option{display:flex;flex-direction:column;flex:1;align-items:flex-start;justify-content:space-between;margin:8dp 0 16dp}.config-option__title{padding:0 12dp}.config-option__list{display:flex;padding:0;flex-direction:row;width:100%;align-items:flex-start;justify-content:flex-start}.config-option__list .config-option__tab-label{display:block;padding:12dp 0;margin:0 12dp;margin-right:16dp;color:rgba(255,255,255,.6);tab-index:none;transition:color .033s linear-in-out}.config-option__list .config-option__tab-label:hover{cursor:pointer}.config-option__list input.radio{visibility:visible;width:0;height:0}.config-option__list input.radio:checked+.config-option__tab-label{border-bottom:1dp;border-color:rgba(255,255,255,.3)}.config-option__list input.radio:checked+.config-option__tab-label:hover{cursor:default}.config-option__list input.radio:focus+.config-option__tab-label{color:#f2f2f2}.config-option__list input.range slidertrack{margin-top:7dp;height:2dp;background-color:rgba(255,255,255,.2)}.config-option__list input.range sliderbar{margin-left:-8dp;margin-right:-6dp;width:16dp;height:16dp;background-color:#ccc;border-radius:8dp;transition:background-color .033s linear-in-out}.config-option__list input.range sliderbar:hover{cursor:pointer;background-color:#f2f2f2}.config-option__list input.range sliderbar:active,.config-option__list input.range slidertrack:active+sliderbar{background-color:#17d6e8}.config-option__list input.range sliderarrowdec,.config-option__list input.range sliderarrowinc{display:none}.config-option__range-wrapper{margin-top:4dp;max-width:360dp}.config-option__range-label{flex:0 0 16dp;display:block;padding:0;margin:0 12dp;margin-right:16dp;color:#f2f2f2;tab-index:none}.input-config{padding:0}.input-config__horizontal-split{display:flex;position:relative;flex-direction:row;height:100%}.input-config__mappings{display:block;flex:1 1 auto;height:100%;min-width:640dp}.input-config__mappings-scroll{display:block;width:100%;max-height:100%;overflow-y:auto}.input-config__mappings-wrapper{padding:8dp}.input-config__visual-wrapper{display:block;width:auto;height:auto;max-width:1040.4444444444dp;max-height:780.3333333333dp;margin:auto 0;flex:1 1 100%}.input-config__visual-aspect{position:relative;width:100%;padding-bottom:75%;background-color:rgba(0,0,0,.35);margin:auto 0}.input-config__visual{display:flex;flex-direction:column;position:absolute;top:16dp;right:16dp;bottom:16dp;left:16dp;border-radius:108dp;background-color:rgba(255,255,255,.05)}.input-config__visual-half{display:flex;position:relative;flex-direction:row;flex:1 1 100%;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 auto;width:auto;align-items:flex-start;justify-content:flex-start}.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;align-items:center;justify-content:center;top:0;right:0;bottom:0;left:0}.input-config__visual-stick{display:flex;position:relative;align-items:center;justify-content:center;width:200dp;height:200dp;border-radius:100dp;background-color:rgba(255,255,255,.05)}.input-viz{position:relative;display:flex;align-items:center;justify-content:center}.input-viz svg{position:absolute;top:0;right:0;left:0;bottom:0}[cur-input=NONE] .input-viz[visual-input]{opacity:1}.input-viz[visual-input=A]{opacity:.5}[cur-input=A] .input-viz[visual-input=A]{opacity:1}.input-viz[visual-input=B]{opacity:.5}[cur-input=B] .input-viz[visual-input=B]{opacity:1}.input-viz[visual-input=Z]{opacity:.5}[cur-input=Z] .input-viz[visual-input=Z]{opacity:1}.input-viz[visual-input=START]{opacity:.5}[cur-input=START] .input-viz[visual-input=START]{opacity:1}.input-viz[visual-input=DPAD_UP]{opacity:.5}[cur-input=DPAD_UP] .input-viz[visual-input=DPAD_UP]{opacity:1}.input-viz[visual-input=DPAD_DOWN]{opacity:.5}[cur-input=DPAD_DOWN] .input-viz[visual-input=DPAD_DOWN]{opacity:1}.input-viz[visual-input=DPAD_LEFT]{opacity:.5}[cur-input=DPAD_LEFT] .input-viz[visual-input=DPAD_LEFT]{opacity:1}.input-viz[visual-input=DPAD_RIGHT]{opacity:.5}[cur-input=DPAD_RIGHT] .input-viz[visual-input=DPAD_RIGHT]{opacity:1}.input-viz[visual-input=L]{opacity:.5}[cur-input=L] .input-viz[visual-input=L]{opacity:1}.input-viz[visual-input=R]{opacity:.5}[cur-input=R] .input-viz[visual-input=R]{opacity:1}.input-viz[visual-input=C_UP]{opacity:.5}[cur-input=C_UP] .input-viz[visual-input=C_UP]{opacity:1}.input-viz[visual-input=C_DOWN]{opacity:.5}[cur-input=C_DOWN] .input-viz[visual-input=C_DOWN]{opacity:1}.input-viz[visual-input=C_LEFT]{opacity:.5}[cur-input=C_LEFT] .input-viz[visual-input=C_LEFT]{opacity:1}.input-viz[visual-input=C_RIGHT]{opacity:.5}[cur-input=C_RIGHT] .input-viz[visual-input=C_RIGHT]{opacity:1}.input-viz[visual-input=X_AXIS_NEG]{opacity:.5}[cur-input=X_AXIS_NEG] .input-viz[visual-input=X_AXIS_NEG]{opacity:1}.input-viz[visual-input=X_AXIS_POS]{opacity:.5}[cur-input=X_AXIS_POS] .input-viz[visual-input=X_AXIS_POS]{opacity:1}.input-viz[visual-input=Y_AXIS_NEG]{opacity:.5}[cur-input=Y_AXIS_NEG] .input-viz[visual-input=Y_AXIS_NEG]{opacity:1}.input-viz[visual-input=Y_AXIS_POS]{opacity:.5}[cur-input=Y_AXIS_POS] .input-viz[visual-input=Y_AXIS_POS]{opacity:1}.input-viz__button{color:#f2f2f2}.input-viz__button svg{image-color:#f2f2f2}.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:#e9cd35}.input-viz__button--A svg{image-color:#33f}.input-viz__button--B svg{image-color:#45d043}.input-viz__Z{width:136dp;height:136dp}.input-viz__Z svg{image-color:#e9cd35}.input-viz__Z svg{width:136dp;height:136dp}.input-viz__R{width:96dp;height:96dp}.input-viz__R svg{image-color:#fff}.input-viz__R svg{width:96dp;height:96dp}.input-viz__L{width:136dp;height:136dp}.input-viz__L svg{image-color:#17d6e8}.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;left:0;bottom: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}.button{background-color:rgba(185,125,242,.05);color:#ccc;border-color:rgba(185,125,242,.8);display:block;padding:23dp;border-radius:12dp;border-width:1.5dp;width:auto;height:auto}.button:focus{color:#f2f2f2;border-color:#b97df2;background-color:rgba(185,125,242,.3)}.button:disabled,.button[disabled]{color:rgba(255,255,255,.6)}.button:active{background-color:rgba(185,125,242,.2);color:#f5f5f5}.button--secondary{background-color:rgba(23,214,232,.05);color:#ccc;border-color:rgba(23,214,232,.8)}.button--secondary:focus{color:#f2f2f2;border-color:#17d6e8;background-color:rgba(23,214,232,.3)}.button--secondary:disabled,.button--secondary[disabled]{color:rgba(255,255,255,.6)}.button--secondary:active{background-color:rgba(23,214,232,.2);color:#f5f5f5}.button--tertiary{background-color:rgba(242,242,242,.05);color:#ccc;border-color:rgba(242,242,242,.8)}.button--tertiary:focus{color:#f2f2f2;border-color:#f2f2f2;background-color:rgba(242,242,242,.3)}.button--tertiary:disabled,.button--tertiary[disabled]{color:rgba(255,255,255,.6)}.button--tertiary:active{background-color:rgba(242,242,242,.2);color:#f5f5f5}.button--success{background-color:rgba(69,208,67,.05);color:#ccc;border-color:rgba(69,208,67,.8)}.button--success:focus{color:#f2f2f2;border-color:#45d043;background-color:rgba(69,208,67,.3)}.button--success:disabled,.button--success[disabled]{color:rgba(255,255,255,.6)}.button--success:active{background-color:rgba(69,208,67,.2);color:#f5f5f5}.button--error{background-color:rgba(248,96,57,.05);color:#ccc;border-color:rgba(248,96,57,.8)}.button--error:focus{color:#f2f2f2;border-color:#f86039;background-color:rgba(248,96,57,.3)}.button--error:disabled,.button--error[disabled]{color:rgba(255,255,255,.6)}.button--error:active{background-color:rgba(248,96,57,.2);color:#f5f5f5}.button--warning{background-color:rgba(233,205,53,.05);color:#ccc;border-color:rgba(233,205,53,.8)}.button--warning:focus{color:#f2f2f2;border-color:#e9cd35;background-color:rgba(233,205,53,.3)}.button--warning:disabled,.button--warning[disabled]{color:rgba(255,255,255,.6)}.button--warning:active{background-color:rgba(233,205,53,.2);color:#f5f5f5}.button:not([disabled]){cursor:pointer}.button:disabled,.button[disabled]{opacity:.5}.button__label{width:auto;height:auto}.icon-button{color:#ccc;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:26.5dp;border-width:1.5dp;border-color:rgba(0,0,0,0);background-color:rgba(0,0,0,0);width:53dp;height:53dp;min-width:53dp;min-height:53dp;max-width:53dp;max-height:53dp}.icon-button svg{image-color:#ccc}.icon-button:focus,.icon-button:hover{color:#f2f2f2;background-color:rgba(255,255,255,.2)}.icon-button:focus svg,.icon-button:hover svg{image-color:#f2f2f2}.icon-button:active{color:#f5f5f5;background-color:rgba(255,255,255,.1)}.icon-button:active svg{image-color:#f5f5f5}.icon-button:disabled,.icon-button[disabled]{color:#ccc;opacity:.5}.icon-button:disabled svg,.icon-button[disabled] svg{image-color:#ccc}.icon-button:not([disabled]){cursor:pointer}.icon-button svg{width:32dp;height:32dp}.icon-button--primary{background-color:rgba(185,125,242,.05);border-color:rgba(185,125,242,.8)}.icon-button--primary:focus,.icon-button--primary:hover{border-color:#b97df2;background-color:rgba(185,125,242,.3)}.icon-button--primary:active{background-color:rgba(185,125,242,.2)}.icon-button--secondary{background-color:rgba(23,214,232,.05);border-color:rgba(23,214,232,.8)}.icon-button--secondary:focus,.icon-button--secondary:hover{border-color:#17d6e8;background-color:rgba(23,214,232,.3)}.icon-button--secondary:active{background-color:rgba(23,214,232,.2)}.icon-button--tertiary{background-color:rgba(242,242,242,.05);border-color:rgba(242,242,242,.8)}.icon-button--tertiary:focus,.icon-button--tertiary:hover{border-color:#f2f2f2;background-color:rgba(242,242,242,.3)}.icon-button--tertiary:active{background-color:rgba(242,242,242,.2)}.icon-button--success{background-color:rgba(69,208,67,.05);border-color:rgba(69,208,67,.8)}.icon-button--success:focus,.icon-button--success:hover{border-color:#45d043;background-color:rgba(69,208,67,.3)}.icon-button--success:active{background-color:rgba(69,208,67,.2)}.icon-button--danger{background-color:rgba(248,96,57,.05);border-color:rgba(248,96,57,.8)}.icon-button--danger:focus,.icon-button--danger:hover{border-color:#f86039;background-color:rgba(248,96,57,.3)}.icon-button--danger:active{background-color:rgba(248,96,57,.2)}.icon-button--warning{background-color:rgba(233,205,53,.05);border-color:rgba(233,205,53,.8)}.icon-button--warning:focus,.icon-button--warning:hover{border-color:#e9cd35;background-color:rgba(233,205,53,.3)}.icon-button--warning:active{background-color:rgba(233,205,53,.2)}.launcher{display:block;flex-direction:row;justify-content:space-between;position:relative;width:100%;height:100%;background-color:#08070d}.launcher__vertical-split{display:flex;position:absolute;flex-direction:column;align-items:flex-start;justify-content:space-between;top:0;right:50%;bottom:0;left:0}.launcher__vertical-split--right{align-items:flex-end;right:0;left:50%}@keyframes slide-mm-bg-over{0%{transform:translateX(100dp)}to{transform:translateX(0dp)}}.launcher__background-wrapper{display:flex;align-items:center;justify-content:flex-start;position:absolute;left:-70vw;right:-100%;top:-55vw;bottom:-50vw;transform:translateX(0dp);animation:25s cubic-out 1 slide-mm-bg-over}@keyframes fade-mm-in{0%{opacity:0}to{opacity:.1}}.launcher__background-mm{position:absolute;left:0;top:0;bottom:0;height:100%;width:auto;opacity:.1;animation:2.5s cubic-in-out 1 fade-mm-in}.launcher__title-quadrant{flex:1 1 auto;padding-top:96dp;padding-left:96dp;width:auto;height:auto}.launcher__title-quadrant--right{padding-right:96dp;padding-left:0}.launcher__content-quadrant{display:flex;position:relative;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:32dp;width:100%;height:auto;flex:1 1 100%}.menu-list-item{color:#ccc;display:flex;flex-direction:row;align-items:center;width:100%;height:auto;padding:16dp;border-radius:8dp;background-color:rgba(0,0,0,0);cursor:pointer}.menu-list-item svg{image-color:#ccc}.menu-list-item--right{align-content:flex-end;flex-direction:row-reverse}.menu-list-item--right .menu-list-item__bullet{opacity:1;margin-left:12dp}.menu-list-item--right.menu-list-item:focus:not(:disabled,[disabled]),.menu-list-item--right.menu-list-item:hover:not(:disabled,[disabled]){decorator:gradient(horizontal #7A2AC600 #DABAF714)}.menu-list-item:focus:not(:disabled,[disabled]),.menu-list-item:hover:not(:disabled,[disabled]){color:#b97df2;decorator:gradient(horizontal #7A2AC614 #DABAF700)}.menu-list-item:focus:not(:disabled,[disabled]) svg,.menu-list-item:hover:not(:disabled,[disabled]) svg{image-color:#b97df2}.menu-list-item:focus:not(:disabled,[disabled]) .menu-list-item__bullet,.menu-list-item:hover:not(:disabled,[disabled]) .menu-list-item__bullet{opacity:1}.menu-list-item:disabled,.menu-list-item[disabled]{opacity:.5;tab-index:none;cursor:default}.menu-list-item__bullet{opacity:0;margin-right:12dp}.subtitle-title{display:block;position:relative;width:auto;height:auto;flex-direction:column;align-items:flex-start;align-content:flex-start;background-color:rgba(0,0,0,0);color:#ccc;cursor:pointer;text-align:left;padding:0}.subtitle-title--right{align-content:flex-end}.subtitle-title--right,.subtitle-title--right>*{text-align:right}.subtitle-title[selected]{color:#f2f2f2;cursor:default}.subtitle-title:focus:not(:disabled,[disabled]),.subtitle-title:hover:not(:disabled,[disabled],[selected]){color:#b97df2}.subtitle-title:disabled,.subtitle-title[disabled]{opacity:.5;cursor:default;tab-index:none}.subtitle-title h3{margin-bottom:6dp}.subtitle-title h1{margin-top:6dp}.subtitle-title__disclaimer{margin-top:16dp}body{box-sizing:border-box;color:#f2f2f2;font-family:chiaro}body[disable-mouse]{pointer-events:none}.rmlui-window{opacity:1;transition:opacity .1s quadratic-in-out}.rmlui-window--hidden{opacity:0;transition:none}*,*:before,*:after{box-sizing:border-box}button{background-color:#7a2ac6} +h1{font-size:64dp;letter-spacing:4.48dp;line-height:64dp;font-style:normal;font-weight:700}h2{font-size:48dp;letter-spacing:3.36dp;line-height:48dp;font-style:normal;font-weight:700}h3,.tab{font-size:32dp;letter-spacing:2.24dp;line-height:32dp;font-style:normal;font-weight:700}.label-lg,.menu-list-item__label,.button--large{font-size:32dp;letter-spacing:3.52dp;line-height:32dp;font-style:normal;font-weight:700}.label-md,.button,.config-option__title,.control-option__label{font-size:24dp;letter-spacing:2.64dp;line-height:24dp;font-style:normal;font-weight:700}.label-sm,.subtitle-title__disclaimer,.config-option__range-label,.config-option__list .config-option__tab-label{font-size:16dp;letter-spacing:2.24dp;line-height:16dp;font-style:normal;font-weight:700;text-transform:uppercase}body{font-size:16dp;letter-spacing:0dp;line-height:16dp;font-style:normal;font-weight:400}.toggle__icon{font-family:promptfont;font-style:normal;font-weight:400;font-size:56dp;line-height:56dp}.prompt-font{font-family:promptfont;font-style:normal;font-weight:400;font-size:40dp;line-height:40dp}.input-viz__mappings div{font-family:promptfont;font-style:normal;font-weight:400;font-size:32dp;line-height:32dp}.toggle,.subtitle-title:not(:disabled,[disabled]),.menu-list-item:not(:disabled,[disabled]),.icon-button:not([disabled]),.button:not([disabled]),.config-option__list input.radio,.tab,.control-option__binding:not([disabled]),.centered-page__modal{nav-up:auto;nav-down:auto;nav-right:auto;nav-left:auto}.toggle,.subtitle-title:not(:disabled,[disabled]),.menu-list-item:not(:disabled,[disabled]),.icon-button:not([disabled]),.button:not([disabled]),.config-option__list input.radio,.tab,.control-option__binding:not([disabled]),.centered-page__modal{focus:auto;tab-index:auto}h1{font-size:64dp;letter-spacing:4.48dp;line-height:64dp;font-style:normal;font-weight:700}h2{font-size:48dp;letter-spacing:3.36dp;line-height:48dp;font-style:normal;font-weight:700}h3,.tab{font-size:32dp;letter-spacing:2.24dp;line-height:32dp;font-style:normal;font-weight:700}.label-lg,.menu-list-item__label,.button--large{font-size:32dp;letter-spacing:3.52dp;line-height:32dp;font-style:normal;font-weight:700}.label-md,.button,.config-option__title,.control-option__label{font-size:24dp;letter-spacing:2.64dp;line-height:24dp;font-style:normal;font-weight:700}.label-sm,.subtitle-title__disclaimer,.config-option__range-label,.config-option__list .config-option__tab-label{font-size:16dp;letter-spacing:2.24dp;line-height:16dp;font-style:normal;font-weight:700;text-transform:uppercase}body{font-size:16dp;letter-spacing:0dp;line-height:16dp;font-style:normal;font-weight:400}.toggle__icon{font-family:promptfont;font-style:normal;font-weight:400;font-size:56dp;line-height:56dp}.prompt-font{font-family:promptfont;font-style:normal;font-weight:400;font-size:40dp;line-height:40dp}.input-viz__mappings div{font-family:promptfont;font-style:normal;font-weight:400;font-size:32dp;line-height:32dp}.toggle,.subtitle-title:not(:disabled,[disabled]),.menu-list-item:not(:disabled,[disabled]),.icon-button:not([disabled]),.button:not([disabled]),.config-option__list input.radio,.tab,.control-option__binding:not([disabled]),.centered-page__modal{nav-up:auto;nav-down:auto;nav-right:auto;nav-left:auto}.toggle,.subtitle-title:not(:disabled,[disabled]),.menu-list-item:not(:disabled,[disabled]),.icon-button:not([disabled]),.button:not([disabled]),.config-option__list input.radio,.tab,.control-option__binding:not([disabled]),.centered-page__modal{focus:auto;tab-index:auto}*{box-sizing:border-box}hr{display:block;background:#000;padding:1.5dp}body{font-family:chiaro;font-weight:normal;font-style:normal;font-size:20dp;color:#fff}div#window{position:relative;width:100%;height:100%;box-sizing:border-box;background-color:#121018;border-color:rgba(255,255,255,.2)}div#content{z-index:2;width:auto;height:100%;overflow:hidden auto;text-align:center}p{text-align:left}input.submit{margin-left:0}input.text,input.password{box-sizing:border-box;height:31dp;padding:11dp 10dp 0;cursor:text;text-align:left}textarea{padding:14dp 12dp 10dp;cursor:text;text-align:left}input.text,input.password,select,textarea{height:auto}table input.text{box-sizing:border-box;width:100%;margin:0;line-height:1;border-width:1.1dp;border-color:#000;background-color:#fff;font-size:15dp;decorator:none;height:auto}select{display:inline-block;text-align:left;box-sizing:border-box;vertical-align:center;padding:4dp;border-radius:5dp;background-color:#787878;width:100%}select selectvalue{height:auto}select:hover selectvalue{background-color:#969696}select selectbox,tbody{background-color:#787878}select selectbox option{width:auto;background-color:#787878}select selectbox option:nth-child(even),tr:nth-child(even){background-color:#646464}select selectbox option:checked{font-weight:bold;color:#fff}select selectbox option:hover{background:#969696}input.radio,input.checkbox{flex:0;tab-index:auto;focus:auto;nav-up:auto;nav-down:auto;nav-right:auto;nav-left:auto;width:0dp}scrollbarvertical,scrollbarhorizontal{margin:0;border:0}scrollbarvertical slidertrack,scrollbarhorizontal slidertrack{background:#dabaf7;opacity:.05}scrollbarvertical sliderbar,scrollbarhorizontal sliderbar{border-radius:5dp;background:#dabaf7;opacity:.1}scrollbarvertical sliderbar:hover:not(:active),scrollbarhorizontal sliderbar:hover:not(:active){opacity:.2}scrollbarvertical sliderbar:active,scrollbarhorizontal sliderbar:active{opacity:.3}scrollbarvertical sliderarrowdec,scrollbarvertical sliderarrowinc,scrollbarhorizontal sliderarrowdec,scrollbarhorizontal sliderarrowinc{width:0;height:0}scrollbarvertical{width:12dp}scrollbarvertical slidertrack{width:12dp}scrollbarvertical sliderbar{width:12dp}scrollbarhorizontal{height:12dp}scrollbarhorizontal slidertrack{height:12dp}scrollbarhorizontal sliderbar{height:12dp}.centered-page{display:flex;position:absolute;top:0;right:0;bottom:0;left:0;padding:64dp;background-color:rgba(255,255,255,.1)}.centered-page__modal{display:flex;flex-direction:column;position:relative;margin:auto;flex:1 1 100%;max-width:1692.4444444444dp;width:100%;height:100%;background:rgba(8,7,13,.9);border-radius:16dp;border-color:rgba(255,255,255,.2);border-width:1.1dp}.centered-page__modal>.tabs{display:flex;flex-direction:column;position:relative;margin:auto;flex:1 1 100%;max-width:1692.4444444444dp;width:100%;height:100%}.centered-page__modal panels{flex:1 1 100%}.control-option{color:#ccc;transition:color .05s linear-in-out,background-color .05s linear-in-out,opacity .05s linear-in-out;display:flex;position:relative;flex-direction:row;align-items:center;justify-content:space-between;width:100%;height:auto;padding:4dp 16dp 4dp 20dp;border-radius:8dp;background-color:rgba(0,0,0,0)}.control-option svg{image-color:#ccc}.control-option svg{transition:image-color .05s linear-in-out,background-color .05s linear-in-out}.control-option:focus-visible:not(:disabled,[disabled]),.control-option:hover:not(:disabled,[disabled]){color:#f2f2f2;background-color:rgba(190,184,219,.1)}.control-option:focus-visible:not(:disabled,[disabled]) svg,.control-option:hover:not(:disabled,[disabled]) svg{image-color:#f2f2f2}.control-option:disabled,.control-option[disabled]{opacity:.5}.control-option .icon-button{flex:1 1 auto}.control-option__label{flex:2 1 300dp;height:auto;white-space:nowrap}.control-option__bindings{display:flex;position:relative;flex-direction:row;align-items:center;justify-content:space-between;flex:2 1 400dp;width:100%;height:56dp;padding:0 12dp 0 4dp}.control-option__binding{color:#ccc;transition:color .05s linear-in-out,background-color .05s linear-in-out,opacity .05s linear-in-out,border-color .05s linear-in-out;display:flex;align-items:center;justify-content:center;margin:0 4dp;flex:1 1 100%;width:100%;height:56dp;padding:8dp;background-color:rgba(190,184,219,.1);border-color:rgba(190,184,219,.1);border-width:1.1dp;border-radius:8dp}.control-option__binding svg{image-color:#ccc}.control-option__binding svg{transition:image-color .05s linear-in-out,background-color .05s linear-in-out}.control-option__binding:focus,.control-option__binding:hover{color:#f2f2f2;background-color:rgba(255,255,255,.1);border-color:#f2f2f2}.control-option__binding:focus svg,.control-option__binding:hover svg{image-color:#f2f2f2}.control-option__binding:active{color:#f5f5f5}.control-option__binding:active svg{image-color:#f5f5f5}.control-option__binding:disabled,.control-option__binding[disabled]{color:#ccc;opacity:.5}.control-option__binding:disabled svg,.control-option__binding[disabled] svg{image-color:#ccc}.control-option__binding:not([disabled]){cursor:pointer}.tabs tabs{display:flex;flex-direction:row;align-items:center;justify-content:flex-start}.tab{display:block;position:relative;padding:20dp 24dp;background-color:rgba(0,0,0,0);margin:0;color:rgba(255,255,255,.6);transition:color .05s linear-in-out;opacity:.9}.tab:selected{color:#f2f2f2}.tab:selected .tab__indicator{background-color:rgba(255,255,255,.6)}.tab:selected:hover{cursor:default}.tab:hover{cursor:pointer;opacity:1}.tab:focus{color:#f2f2f2;opacity:1}.tab__indicator{position:absolute;background-color:rgba(0,0,0,0);right:0;bottom:2dp;left:0;height:2dp}.config__exit-button{position:absolute;top:8dp;right:8dp}.config__form{border-top-color:rgba(255,255,255,.1);border-top-width:1.1dp;display:flex;flex-direction:column;justify-content:space-between;flex:1 1 100%;width:100%;height:100%;border-bottom-left-radius:16dp;border-bottom-right-radius:16dp}.config__wrapper{display:flex;flex-direction:column;border-radius:0dp;flex:1 1 100%;height:100%;padding:16dp;text-align:left;background-color:rgba(0,0,0,.35)}.config__header,.config__footer{display:flex;justify-content:space-between;align-items:center;width:100%;background-color:rgba(0,0,0,.35)}.config__header{border-bottom-color:rgba(255,255,255,.1);border-bottom-width:1.1dp;padding:12dp 20dp}.config__footer{border-top-color:rgba(255,255,255,.1);border-top-width:1.1dp;padding:20dp 20dp;border-bottom-left-radius:16dp;border-bottom-right-radius:16dp}.config__header-left{display:flex;flex-direction:row;flex:1 1 auto}.config__header-left>:not(:first-child){margin-left:8dp}.config__row{display:flex;flex-direction:row}.config-option{display:flex;flex-direction:column;flex:1;align-items:flex-start;justify-content:space-between;margin:8dp 0 16dp}.config-option__title{padding:0 12dp}.config-option__list{display:flex;padding:0;flex-direction:row;width:100%;align-items:flex-start;justify-content:flex-start}.config-option__list .config-option__tab-label{display:block;padding:12dp 0;margin:0 12dp;margin-right:16dp;color:rgba(255,255,255,.6);tab-index:none;transition:color .05s linear-in-out}.config-option__list .config-option__tab-label:hover{cursor:pointer}.config-option__list input.radio{visibility:visible;width:0;height:0}.config-option__list input.radio:checked+.config-option__tab-label{border-bottom:1dp;border-color:rgba(255,255,255,.3)}.config-option__list input.radio:checked+.config-option__tab-label:hover{cursor:default}.config-option__list input.radio:focus+.config-option__tab-label{color:#f2f2f2}.config-option__list input.range slidertrack{transition:color .05s linear-in-out,background-color .05s linear-in-out;margin-top:7dp;height:2dp;background-color:rgba(255,255,255,.2)}.config-option__list input.range sliderbar{transition:color .05s linear-in-out,background-color .05s linear-in-out;margin-left:-8dp;margin-right:-6dp;width:16dp;height:16dp;background-color:#ccc;border-radius:8dp;transition:background-color .05s linear-in-out}.config-option__list input.range sliderbar:hover{cursor:pointer;background-color:#f2f2f2}.config-option__list input.range sliderbar:active,.config-option__list input.range slidertrack:active+sliderbar{background-color:#17d6e8}.config-option__list input.range sliderarrowdec,.config-option__list input.range sliderarrowinc{display:none}.config-option__range-wrapper{margin-top:4dp;max-width:360dp}.config-option__range-label{flex:0 0 16dp;display:block;padding:0;margin:0 12dp;margin-right:16dp;color:#f2f2f2;tab-index:none}.input-config{padding:0}.input-config__horizontal-split{display:flex;position:relative;flex-direction:row;height:100%}.input-config__mappings{display:block;flex:1 1 auto;height:100%;min-width:640dp}.input-config__mappings-scroll{display:block;width:100%;max-height:100%;overflow-y:auto}.input-config__mappings-wrapper{padding:8dp}.input-config__visual-wrapper{display:block;width:auto;height:auto;max-width:1040.4444444444dp;max-height:780.3333333333dp;margin:auto 0;flex:1 1 100%}.input-config__visual-aspect{position:relative;width:100%;padding-bottom:75%;background-color:rgba(0,0,0,.35);margin:auto 0}.input-config__visual{display:flex;flex-direction:column;position:absolute;top:16dp;right:16dp;bottom:16dp;left:16dp;border-radius:108dp;background-color:rgba(255,255,255,.05)}.input-config__visual-half{display:flex;position:relative;flex-direction:row;flex:1 1 100%;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%;width:auto;align-items:flex-start;justify-content:flex-start}.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;align-items:center;justify-content:center;top:0;right:0;bottom:0;left:0}.input-config__visual-stick{display:flex;position:relative;align-items:center;justify-content:center;width:200dp;height:200dp;border-radius:100dp;background-color:rgba(255,255,255,.05)}.input-viz{transition:color .05s linear-in-out,background-color .05s linear-in-out,opacity .05s linear-in-out;position:relative;display:flex;align-items:center;justify-content:center}.input-viz>svg:not(.input-viz__dpad-arrow){position:absolute;top:0;right:0;left:0;bottom:0}[cur-input=NONE] .input-viz[visual-input]{opacity:1}.input-viz[visual-input~=A]{opacity:.25}[cur-input=A] .input-viz[visual-input~=A]{opacity:1}.input-viz[visual-input~=B]{opacity:.25}[cur-input=B] .input-viz[visual-input~=B]{opacity:1}.input-viz[visual-input~=Z]{opacity:.25}[cur-input=Z] .input-viz[visual-input~=Z]{opacity:1}.input-viz[visual-input~=START]{opacity:.25}[cur-input=START] .input-viz[visual-input~=START]{opacity:1}.input-viz[visual-input~=DPAD_UP]{opacity:.25}[cur-input=DPAD_UP] .input-viz[visual-input~=DPAD_UP]{opacity:1}.input-viz[visual-input~=DPAD_DOWN]{opacity:.25}[cur-input=DPAD_DOWN] .input-viz[visual-input~=DPAD_DOWN]{opacity:1}.input-viz[visual-input~=DPAD_LEFT]{opacity:.25}[cur-input=DPAD_LEFT] .input-viz[visual-input~=DPAD_LEFT]{opacity:1}.input-viz[visual-input~=DPAD_RIGHT]{opacity:.25}[cur-input=DPAD_RIGHT] .input-viz[visual-input~=DPAD_RIGHT]{opacity:1}.input-viz[visual-input~=L]{opacity:.25}[cur-input=L] .input-viz[visual-input~=L]{opacity:1}.input-viz[visual-input~=R]{opacity:.25}[cur-input=R] .input-viz[visual-input~=R]{opacity:1}.input-viz[visual-input~=C_UP]{opacity:.25}[cur-input=C_UP] .input-viz[visual-input~=C_UP]{opacity:1}.input-viz[visual-input~=C_DOWN]{opacity:.25}[cur-input=C_DOWN] .input-viz[visual-input~=C_DOWN]{opacity:1}.input-viz[visual-input~=C_LEFT]{opacity:.25}[cur-input=C_LEFT] .input-viz[visual-input~=C_LEFT]{opacity:1}.input-viz[visual-input~=C_RIGHT]{opacity:.25}[cur-input=C_RIGHT] .input-viz[visual-input~=C_RIGHT]{opacity:1}.input-viz[visual-input~=X_AXIS_NEG]{opacity:.25}[cur-input=X_AXIS_NEG] .input-viz[visual-input~=X_AXIS_NEG]{opacity:1}.input-viz[visual-input~=X_AXIS_POS]{opacity:.25}[cur-input=X_AXIS_POS] .input-viz[visual-input~=X_AXIS_POS]{opacity:1}.input-viz[visual-input~=Y_AXIS_NEG]{opacity:.25}[cur-input=Y_AXIS_NEG] .input-viz[visual-input~=Y_AXIS_NEG]{opacity:1}.input-viz[visual-input~=Y_AXIS_POS]{opacity:.25}[cur-input=Y_AXIS_POS] .input-viz[visual-input~=Y_AXIS_POS]{opacity:1}.input-viz__button{color:#f2f2f2}.input-viz__button svg{image-color:#f2f2f2}.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:#e9cd35}.input-viz__button--A svg{image-color:#33f}.input-viz__button--B svg{image-color:#45d043}.input-viz__Z{width:136dp;height:136dp}.input-viz__Z svg{image-color:#e9cd35}.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:#f2f2f2}.input-viz.input-viz__dpad>svg{width:192dp;height:192dp}.input-viz__dpad-split{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;width:100%;height:100%}.input-viz__dpad-split--vertical{flex-direction:column;align-items:center;justify-content:space-between}.input-viz__dpad-split--horizontal{flex-direction:row;align-items:center;justify-content:space-between}.input-viz__dpad-split>div{display:flex;flex:1 1 100%;width:64dp;height:64dp;align-items:center;justify-content:center;flex-direction:row}.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:#fff}.input-viz__R>svg{width:96dp;height:96dp}.input-viz__L{width:136dp;height:136dp}.input-viz__L svg{image-color:#17d6e8}.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;left:0;bottom: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}.button{background-color:rgba(185,125,242,.05);color:#ccc;border-color:rgba(185,125,242,.8);transition:color .05s linear-in-out,background-color .05s linear-in-out;display:block;padding:23dp;border-radius:12dp;border-width:1.1dp;width:auto;height:auto}.button:focus{color:#f2f2f2;border-color:#b97df2;background-color:rgba(185,125,242,.3)}.button:disabled,.button[disabled]{color:rgba(255,255,255,.6)}.button:active{background-color:rgba(185,125,242,.2);color:#f5f5f5}.button--secondary{background-color:rgba(23,214,232,.05);color:#ccc;border-color:rgba(23,214,232,.8)}.button--secondary:focus{color:#f2f2f2;border-color:#17d6e8;background-color:rgba(23,214,232,.3)}.button--secondary:disabled,.button--secondary[disabled]{color:rgba(255,255,255,.6)}.button--secondary:active{background-color:rgba(23,214,232,.2);color:#f5f5f5}.button--tertiary{background-color:rgba(242,242,242,.05);color:#ccc;border-color:rgba(242,242,242,.8)}.button--tertiary:focus{color:#f2f2f2;border-color:#f2f2f2;background-color:rgba(242,242,242,.3)}.button--tertiary:disabled,.button--tertiary[disabled]{color:rgba(255,255,255,.6)}.button--tertiary:active{background-color:rgba(242,242,242,.2);color:#f5f5f5}.button--success{background-color:rgba(69,208,67,.05);color:#ccc;border-color:rgba(69,208,67,.8)}.button--success:focus{color:#f2f2f2;border-color:#45d043;background-color:rgba(69,208,67,.3)}.button--success:disabled,.button--success[disabled]{color:rgba(255,255,255,.6)}.button--success:active{background-color:rgba(69,208,67,.2);color:#f5f5f5}.button--error{background-color:rgba(248,96,57,.05);color:#ccc;border-color:rgba(248,96,57,.8)}.button--error:focus{color:#f2f2f2;border-color:#f86039;background-color:rgba(248,96,57,.3)}.button--error:disabled,.button--error[disabled]{color:rgba(255,255,255,.6)}.button--error:active{background-color:rgba(248,96,57,.2);color:#f5f5f5}.button--warning{background-color:rgba(233,205,53,.05);color:#ccc;border-color:rgba(233,205,53,.8)}.button--warning:focus{color:#f2f2f2;border-color:#e9cd35;background-color:rgba(233,205,53,.3)}.button--warning:disabled,.button--warning[disabled]{color:rgba(255,255,255,.6)}.button--warning:active{background-color:rgba(233,205,53,.2);color:#f5f5f5}.button:not([disabled]){cursor:pointer}.button:disabled,.button[disabled]{opacity:.5}.button__label{width:auto;height:auto}.icon-button{color:#ccc;transition:color .05s linear-in-out,background-color .05s linear-in-out,opacity .05s linear-in-out,border-color .05s linear-in-out;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:26.9dp;border-width:1.1dp;border-color:rgba(0,0,0,0);background-color:rgba(0,0,0,0);width:53.8dp;height:53.8dp;min-width:53.8dp;min-height:53.8dp;max-width:53.8dp;max-height:53.8dp}.icon-button svg{image-color:#ccc}.icon-button svg{transition:image-color .05s linear-in-out,background-color .05s linear-in-out}.icon-button:focus,.icon-button:hover{color:#f2f2f2;background-color:rgba(255,255,255,.2)}.icon-button:focus svg,.icon-button:hover svg{image-color:#f2f2f2}.icon-button:active{color:#f5f5f5;background-color:rgba(255,255,255,.1)}.icon-button:active svg{image-color:#f5f5f5}.icon-button:disabled,.icon-button[disabled]{color:#ccc;opacity:.5}.icon-button:disabled svg,.icon-button[disabled] svg{image-color:#ccc}.icon-button:not([disabled]){cursor:pointer}.icon-button svg{width:32dp;height:32dp}.icon-button--primary{background-color:rgba(185,125,242,.05);border-color:rgba(185,125,242,.8)}.icon-button--primary:focus,.icon-button--primary:hover{border-color:#b97df2;background-color:rgba(185,125,242,.3)}.icon-button--primary:active{background-color:rgba(185,125,242,.2)}.icon-button--secondary{background-color:rgba(23,214,232,.05);border-color:rgba(23,214,232,.8)}.icon-button--secondary:focus,.icon-button--secondary:hover{border-color:#17d6e8;background-color:rgba(23,214,232,.3)}.icon-button--secondary:active{background-color:rgba(23,214,232,.2)}.icon-button--tertiary{background-color:rgba(242,242,242,.05);border-color:rgba(242,242,242,.8)}.icon-button--tertiary:focus,.icon-button--tertiary:hover{border-color:#f2f2f2;background-color:rgba(242,242,242,.3)}.icon-button--tertiary:active{background-color:rgba(242,242,242,.2)}.icon-button--success{background-color:rgba(69,208,67,.05);border-color:rgba(69,208,67,.8)}.icon-button--success:focus,.icon-button--success:hover{border-color:#45d043;background-color:rgba(69,208,67,.3)}.icon-button--success:active{background-color:rgba(69,208,67,.2)}.icon-button--danger{background-color:rgba(248,96,57,.05);border-color:rgba(248,96,57,.8)}.icon-button--danger:focus,.icon-button--danger:hover{border-color:#f86039;background-color:rgba(248,96,57,.3)}.icon-button--danger:active{background-color:rgba(248,96,57,.2)}.icon-button--warning{background-color:rgba(233,205,53,.05);border-color:rgba(233,205,53,.8)}.icon-button--warning:focus,.icon-button--warning:hover{border-color:#e9cd35;background-color:rgba(233,205,53,.3)}.icon-button--warning:active{background-color:rgba(233,205,53,.2)}.launcher{display:block;flex-direction:row;justify-content:space-between;position:relative;width:100%;height:100%;background-color:#08070d}.launcher__vertical-split{display:flex;position:absolute;flex-direction:column;align-items:flex-start;justify-content:space-between;top:0;right:50%;bottom:0;left:0}.launcher__vertical-split--right{align-items:flex-end;right:0;left:50%}@keyframes slide-mm-bg-over{0%{transform:translateX(100dp)}to{transform:translateX(0dp)}}.launcher__background-wrapper{display:flex;align-items:center;justify-content:flex-start;position:absolute;left:-70vw;right:-100%;top:-55vw;bottom:-50vw;transform:translateX(0dp);animation:25s cubic-out 1 slide-mm-bg-over}@keyframes fade-mm-in{0%{opacity:0}to{opacity:.1}}.launcher__background-mm{position:absolute;left:0;top:0;bottom:0;height:100%;width:auto;opacity:.1;animation:2.5s cubic-in-out 1 fade-mm-in}.launcher__title-quadrant{flex:1 1 auto;padding-top:96dp;padding-left:96dp;width:auto;height:auto}.launcher__title-quadrant--right{padding-right:96dp;padding-left:0}.launcher__content-quadrant{display:flex;position:relative;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:32dp;width:100%;height:auto;flex:1 1 100%}.menu-list-item{color:#ccc;display:flex;flex-direction:row;align-items:center;width:100%;height:auto;padding:16dp;border-radius:8dp;background-color:rgba(0,0,0,0);cursor:pointer}.menu-list-item svg{image-color:#ccc}.menu-list-item--right{align-content:flex-end;flex-direction:row-reverse}.menu-list-item--right .menu-list-item__bullet{opacity:1;margin-left:12dp}.menu-list-item--right.menu-list-item:focus:not(:disabled,[disabled]),.menu-list-item--right.menu-list-item:hover:not(:disabled,[disabled]){decorator:gradient(horizontal #7A2AC600 #DABAF714)}.menu-list-item:focus:not(:disabled,[disabled]),.menu-list-item:hover:not(:disabled,[disabled]){color:#b97df2;decorator:gradient(horizontal #7A2AC614 #DABAF700)}.menu-list-item:focus:not(:disabled,[disabled]) svg,.menu-list-item:hover:not(:disabled,[disabled]) svg{image-color:#b97df2}.menu-list-item:focus:not(:disabled,[disabled]) .menu-list-item__bullet,.menu-list-item:hover:not(:disabled,[disabled]) .menu-list-item__bullet{opacity:1}.menu-list-item:disabled,.menu-list-item[disabled]{opacity:.5;tab-index:none;cursor:default}.menu-list-item__bullet{opacity:0;margin-right:12dp}.subtitle-title{display:block;position:relative;width:auto;height:auto;flex-direction:column;align-items:flex-start;align-content:flex-start;background-color:rgba(0,0,0,0);color:#ccc;cursor:pointer;text-align:left;padding:0}.subtitle-title--right{align-content:flex-end}.subtitle-title--right,.subtitle-title--right>*{text-align:right}.subtitle-title[selected]{color:#f2f2f2;cursor:default}.subtitle-title:focus:not(:disabled,[disabled]),.subtitle-title:hover:not(:disabled,[disabled],[selected]){color:#b97df2}.subtitle-title:disabled,.subtitle-title[disabled]{opacity:.5;cursor:default;tab-index:none}.subtitle-title h3{margin-bottom:6dp}.subtitle-title h1{margin-top:6dp}.subtitle-title__disclaimer{margin-top:16dp}.toggle{transition:color .05s linear-in-out,background-color .05s linear-in-out,opacity .05s linear-in-out;display:flex;flex-direction:row;align-items:center;justify-content:space-between;position:relative;width:162dp;height:72dp;background:rgba(0,0,0,0);border-radius:36dp;cursor:pointer;opacity:.9}.toggle:hover,.toggle:focus-visible,.toggle:focus{background-color:rgba(23,214,232,.3);opacity:1}.toggle:active{background-color:rgba(23,214,232,.05);opacity:1}.toggle .toggle__border{position:absolute;top:1.1dp;right:1.1dp;bottom:1.1dp;left:1.1dp;border-color:#a2eff6;border-width:1.1dp;display:block;border-radius:36dp}.toggle .toggle__floater{position:absolute;width:80dp;height:64dp;top:50%;left:4dp;transform:translateY(-50%);border-radius:32dp;background:#25a1ad}.toggle--checked .toggle__floater{left:78dp}.toggle--checked .toggle__icon.toggle__icon--left{color:#a2eff6;opacity:.9}.toggle--checked .toggle__icon.toggle__icon--right{color:#f2f2f2;opacity:1}.toggle__icons{display:flex;position:absolute;height:56dp;top:50%;transform:translateY(-50%);right:16dp;left:16dp;align-items:center;justify-content:space-between}.toggle__icon{transition:color .05s linear-in-out,background-color .05s linear-in-out;display:flex;align-items:center;justify-content:center;width:56dp;height:56dp;color:#f2f2f2}.toggle__icon--right{opacity:1;color:#a2eff6}body{box-sizing:border-box;color:#f2f2f2;font-family:chiaro}body[disable-mouse]{pointer-events:none}.rmlui-window{opacity:1;transition:opacity .1s quadratic-in-out}.rmlui-window--hidden{opacity:0;transition:none}*,*:before,*:after{box-sizing:border-box}button{background-color:#7a2ac6} diff --git a/assets/scss/styles/base.scss b/assets/scss/styles/base.scss index 232beb3..6f9e93f 100644 --- a/assets/scss/styles/base.scss +++ b/assets/scss/styles/base.scss @@ -6,4 +6,5 @@ @import "./vars/gradients"; @import "./vars/transitions"; @import "./mixins/typography"; +@import "./mixins/transitions"; @import "./mixins/helpers"; diff --git a/assets/scss/styles/components/Button.scss b/assets/scss/styles/components/Button.scss index cae489a..26ed796 100644 --- a/assets/scss/styles/components/Button.scss +++ b/assets/scss/styles/components/Button.scss @@ -24,6 +24,7 @@ .button { @extend %label-md; @include create-button-variation($color-primary); + @include trans-colors; display: block; // leave 1dp room for border expansion diff --git a/assets/scss/styles/components/Config.scss b/assets/scss/styles/components/Config.scss index 6b56044..eb9ede5 100644 --- a/assets/scss/styles/components/Config.scss +++ b/assets/scss/styles/components/Config.scss @@ -121,12 +121,14 @@ } input.range slidertrack { + @include trans-colors; margin-top: 7dp; height: 2dp; background-color: $color-border; } input.range sliderbar { + @include trans-colors; margin-left: -8dp; margin-right: -6dp; width: space(16); diff --git a/assets/scss/styles/components/ControlOption.scss b/assets/scss/styles/components/ControlOption.scss index 5c82c05..138ad36 100644 --- a/assets/scss/styles/components/ControlOption.scss +++ b/assets/scss/styles/components/ControlOption.scss @@ -2,6 +2,7 @@ .control-option { @include set-color($color-text-dim); + @include trans-colors-svg; display: flex; position: relative; flex-direction: row; @@ -49,6 +50,7 @@ .control-option__binding { @include set-color($color-text-dim); + @include trans-colors-border; display: flex; align-items: center; justify-content: center; diff --git a/assets/scss/styles/components/IconButton.scss b/assets/scss/styles/components/IconButton.scss index 1c1f1ef..8f0ab18 100644 --- a/assets/scss/styles/components/IconButton.scss +++ b/assets/scss/styles/components/IconButton.scss @@ -24,6 +24,7 @@ $icon-button-size: 56 - ($border-width-thickness-num * 2); .icon-button { @include set-color($color-text-dim); + @include trans-colors-border; display: flex; align-items: center; diff --git a/assets/scss/styles/components/InputConfig.scss b/assets/scss/styles/components/InputConfig.scss index 3b493fb..13eadce 100644 --- a/assets/scss/styles/components/InputConfig.scss +++ b/assets/scss/styles/components/InputConfig.scss @@ -78,11 +78,10 @@ $visual-max-width: $base-modal-max-width - $mapping-min-width - $scrollbar-width .input-config__visual-quarter-left { display: flex; - flex: 1 1 auto; + flex: 1 1 50%; width: auto; align-items: flex-start; justify-content: flex-start; - } .input-config__visual-quarter-right { @@ -115,12 +114,13 @@ $visual-max-width: $base-modal-max-width - $mapping-min-width - $scrollbar-width } .input-viz { + @include trans-colors-opa; position: relative; display: flex; align-items: center; justify-content: center; - svg { + > svg:not(.input-viz__dpad-arrow) { position: absolute; top: 0; right: 0; @@ -159,8 +159,8 @@ $all-inputs: } @each $inp in $all-inputs { - .input-viz[visual-input="#{$inp}"] { - opacity: 0.5; + .input-viz[visual-input~="#{$inp}"] { + opacity: 0.25; [cur-input="#{$inp}"] & { opacity: 1.0; @@ -172,7 +172,7 @@ $all-inputs: width: space($sz); height: space($sz); - svg { + > svg { width: space($sz); height: space($sz); } @@ -211,6 +211,77 @@ $all-inputs: @include set-sizes(136); } +$dpad-size: 192; +.input-viz.input-viz__dpad { + @include set-svgs-color($color-text); + @include set-sizes($dpad-size); + $edge-dist: space(32); + position: relative; +} + +.input-viz__dpad-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%; + width: space(math.div($dpad-size, 3)); + height: space(math.div($dpad-size, 3)); + align-items: center; + justify-content: center; + flex-direction: row; + + // .input-config__visual-mapping { + // display: block; + // } + } +} + +.input-viz__dpad-arrow { + position: absolute; + width: space(60); + height: space(60); + $edge-dist: space(4); + + &--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); diff --git a/assets/scss/styles/components/Tabs.scss b/assets/scss/styles/components/Tabs.scss index 9474998..c21fde1 100644 --- a/assets/scss/styles/components/Tabs.scss +++ b/assets/scss/styles/components/Tabs.scss @@ -23,6 +23,7 @@ margin: 0; color: $color-text-inactive; transition: color $transition-quick; + opacity: 0.9; &:selected { color: $color-text; @@ -38,10 +39,12 @@ &:hover { cursor: pointer; + opacity: 1; } &:focus { color: $color-text; + opacity: 1; } } diff --git a/assets/scss/styles/components/Toggle.scss b/assets/scss/styles/components/Toggle.scss new file mode 100644 index 0000000..daaaa06 --- /dev/null +++ b/assets/scss/styles/components/Toggle.scss @@ -0,0 +1,96 @@ +@use "sass:math"; + +$toggle-width: 162; +$toggle-height: 72; + +$toggle-floater-width: 80; +$toggle-floater-height: 64; +$toggle-floater-margin: 4; +$toggle-checked-left-offset: $toggle-width - $toggle-floater-margin - $toggle-floater-width; + +.toggle { + @extend %nav-all; + @include trans-colors-opa; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + position: relative; + width: space($toggle-width); + height: space($toggle-height); + background: $color-transparent; + border-radius: space(math.div($toggle-height, 2)); + cursor: pointer; + opacity: 0.9; + + &:hover, &:focus-visible, &:focus { + background-color: $color-secondary-a30; + opacity: 1; + } + + &:active { + background-color: $color-secondary-a5; + opacity: 1; + } + + .toggle__border { + @include inner-border-block($color-secondary-l); + border-radius: space(math.div($toggle-height, 2)); + } + + .toggle__floater { + position: absolute; + width: space($toggle-floater-width); + height: space($toggle-floater-height); + top: 50%; + left: space($toggle-floater-margin); + transform: translateY(-50%); + border-radius: space(math.div($toggle-floater-height, 2)); + background: $color-secondary-d; + } + + &--checked { + .toggle__floater { + left: space($toggle-checked-left-offset); + } + + .toggle__icon { + &.toggle__icon--left { + color: $color-secondary-l; + opacity: 0.9; + } + &.toggle__icon--right { + color: $color-text; + opacity: 1.0; + } + } + } +} + +.toggle__icons { + display: flex; + position: absolute; + height: space(56); + top: 50%; + transform: translateY(-50%); + right: space(16); + left: space(16); + align-items: center; + justify-content: space-between; +} + +.toggle__icon { + @extend %prompt-font-lg; + @include trans-colors; + display: flex; + align-items: center; + justify-content: center; + width: space(56); + height: space(56); + color: $color-text; + + &--right { + opacity: 1; + color: $color-secondary-l; + } +} diff --git a/assets/scss/styles/components/_components.scss b/assets/scss/styles/components/_components.scss index 96da984..5b99b64 100644 --- a/assets/scss/styles/components/_components.scss +++ b/assets/scss/styles/components/_components.scss @@ -8,3 +8,4 @@ @import "./Launcher"; @import "./MenuListItem"; @import "./SubtitleTitle"; +@import "./Toggle"; diff --git a/assets/scss/styles/mixins/_transitions.scss b/assets/scss/styles/mixins/_transitions.scss new file mode 100644 index 0000000..06c8677 --- /dev/null +++ b/assets/scss/styles/mixins/_transitions.scss @@ -0,0 +1,36 @@ + +/* +@include trans-colors; +*/ +@mixin trans-colors { + transition: color $transition-quick, background-color $transition-quick; +} + +/* +@include trans-colors-opa; +*/ +@mixin trans-colors-opa { + transition: color $transition-quick, background-color $transition-quick, opacity $transition-quick; +} + +/* +@include trans-colors-svg; +*/ +@mixin trans-colors-svg { + transition: color $transition-quick, background-color $transition-quick, opacity $transition-quick; + + svg { + transition: image-color $transition-quick, background-color $transition-quick; + } +} + +/* +@include trans-colors-border; +*/ +@mixin trans-colors-border { + transition: color $transition-quick, background-color $transition-quick, opacity $transition-quick, border-color $transition-quick; + + svg { + transition: image-color $transition-quick, background-color $transition-quick; + } +} diff --git a/assets/scss/styles/mixins/_typography.scss b/assets/scss/styles/mixins/_typography.scss index 107c851..21a6b26 100644 --- a/assets/scss/styles/mixins/_typography.scss +++ b/assets/scss/styles/mixins/_typography.scss @@ -51,6 +51,14 @@ $font-stack: chiaro; font-weight: 400; } +%prompt-font-lg { + font-family: promptfont; + font-style: normal; + font-weight: 400; + font-size: space(56); + line-height: space(56); +} + %prompt-font { font-family: promptfont; font-style: normal; diff --git a/assets/scss/styles/vars/_borders.scss b/assets/scss/styles/vars/_borders.scss index 1a23f15..4ae87a8 100644 --- a/assets/scss/styles/vars/_borders.scss +++ b/assets/scss/styles/vars/_borders.scss @@ -6,7 +6,8 @@ $border-radius-lg: 16dp; $border-radius-modal: $border-radius-lg; -$border-width-thickness-num: 1.5; +$border-width-thickness-num: 1.1; +// $border-width-thickness-num: 1.5; $border-width-thickness: space($border-width-thickness-num); @mixin border($col: $color-border) { @@ -23,3 +24,19 @@ $border-width-thickness: space($border-width-thickness-num); border-bottom-color: $col; border-bottom-width: $border-width-thickness; } + +@mixin inset-block($inset-amt) { + position: absolute; + top: $inset-amt; + right: $inset-amt; + bottom: $inset-amt; + left: $inset-amt; +} + +// add this to a child of the container that needs a border. +// parent must have `position: relative` +@mixin inner-border-block($col: $color-border) { + @include inset-block($border-width-thickness); + @include border($col); + display: block; +} diff --git a/assets/scss/styles/vars/_transitions.scss b/assets/scss/styles/vars/_transitions.scss index 79fe780..0586d88 100644 --- a/assets/scss/styles/vars/_transitions.scss +++ b/assets/scss/styles/vars/_transitions.scss @@ -1,2 +1,3 @@ // see: lib/RmlUi/Source/Core/PropertyParserAnimation.cpp -$transition-quick: 0.033s linear-in-out; +$transition-quick: 0.05s linear-in-out; +// $transition-quick: 0.033s linear-in-out; diff --git a/include/promptfont.h b/include/promptfont.h new file mode 100644 index 0000000..526e70d --- /dev/null +++ b/include/promptfont.h @@ -0,0 +1,82 @@ +#ifndef PROMPTFONT_H +#define PROMPTFONT_H + +#define PF_KEYBOARD_LEFT "\u23F4" +#define PF_KEYBOARD_UP "\u23F5" +#define PF_KEYBOARD_RIGHT "\u23F6" +#define PF_KEYBOARD_DOWN "\u23F7" +#define PF_KEYBOARD_WASD "\u2423" +#define PF_KEYBOARD_ARROWS "\u2424" +#define PF_KEYBOARD_IJKL "\u2425" +#define PF_KEYBOARD_FN "\u2426" +#define PF_KEYBOARD_CONTROL "\u2427" +#define PF_KEYBOARD_ALT "\u2428" +#define PF_KEYBOARD_SHIFT "\u2429" +#define PF_KEYBOARD_SUPER "\u242A" +#define PF_KEYBOARD_TAB "\u242B" +#define PF_KEYBOARD_CAPS "\u242C" +#define PF_KEYBOARD_BACKSPACE "\u242D" +#define PF_KEYBOARD_ENTER "\u242E" +#define PF_KEYBOARD_ESCAPE "\u242F" +#define PF_KEYBOARD_PRINT_SCREEN "\u2430" +#define PF_KEYBOARD_SCROLL_LOCK "\u2431" +#define PF_KEYBOARD_PAUSE "\u2432" +#define PF_KEYBOARD_NUM_LOCK "\u2433" +#define PF_KEYBOARD_INSERT "\u2434" +#define PF_KEYBOARD_HOME "\u2435" +#define PF_KEYBOARD_PAGE_UP "\u2436" +#define PF_KEYBOARD_DELETE "\u2437" +#define PF_KEYBOARD_END "\u2438" +#define PF_KEYBOARD_PAGE_DOWN "\u2439" +#define PF_KEYBOARD_SPACE "\u243A" +#define PF_KEYBOARD_F1 "\u2460" +#define PF_KEYBOARD_F2 "\u2461" +#define PF_KEYBOARD_F3 "\u2462" +#define PF_KEYBOARD_F4 "\u2463" +#define PF_KEYBOARD_F5 "\u2464" +#define PF_KEYBOARD_F6 "\u2465" +#define PF_KEYBOARD_F7 "\u2466" +#define PF_KEYBOARD_F8 "\u2467" +#define PF_KEYBOARD_F9 "\u2468" +#define PF_KEYBOARD_F10 "\u2469" +#define PF_KEYBOARD_F11 "\u246A" +#define PF_KEYBOARD_F12 "\u246B" +#define PF_KEYBOARD_KEY "\u248F" +#define PF_KEYBOARD_0 "\uFF10" +#define PF_KEYBOARD_1 "\uFF11" +#define PF_KEYBOARD_2 "\uFF12" +#define PF_KEYBOARD_3 "\uFF13" +#define PF_KEYBOARD_4 "\uFF14" +#define PF_KEYBOARD_5 "\uFF15" +#define PF_KEYBOARD_6 "\uFF16" +#define PF_KEYBOARD_7 "\uFF17" +#define PF_KEYBOARD_8 "\uFF18" +#define PF_KEYBOARD_9 "\uFF19" +#define PF_KEYBOARD_A "\uFF21" +#define PF_KEYBOARD_B "\uFF22" +#define PF_KEYBOARD_C "\uFF23" +#define PF_KEYBOARD_D "\uFF24" +#define PF_KEYBOARD_E "\uFF25" +#define PF_KEYBOARD_F "\uFF26" +#define PF_KEYBOARD_G "\uFF27" +#define PF_KEYBOARD_H "\uFF28" +#define PF_KEYBOARD_I "\uFF29" +#define PF_KEYBOARD_J "\uFF2A" +#define PF_KEYBOARD_K "\uFF2B" +#define PF_KEYBOARD_L "\uFF2C" +#define PF_KEYBOARD_M "\uFF2D" +#define PF_KEYBOARD_N "\uFF2E" +#define PF_KEYBOARD_O "\uFF2F" +#define PF_KEYBOARD_P "\uFF30" +#define PF_KEYBOARD_Q "\uFF31" +#define PF_KEYBOARD_R "\uFF32" +#define PF_KEYBOARD_S "\uFF33" +#define PF_KEYBOARD_T "\uFF34" +#define PF_KEYBOARD_U "\uFF35" +#define PF_KEYBOARD_V "\uFF36" +#define PF_KEYBOARD_W "\uFF37" +#define PF_KEYBOARD_X "\uFF38" +#define PF_KEYBOARD_Y "\uFF39" +#define PF_KEYBOARD_Z "\uFF3A" + +#endif diff --git a/include/recomp_input.h b/include/recomp_input.h index 7892597..02e97b3 100644 --- a/include/recomp_input.h +++ b/include/recomp_input.h @@ -13,26 +13,26 @@ namespace recomp { // x-macros to build input enums and arrays. // First parameter is the enum name, second parameter is the bit field for the input (or 0 if there is no associated one), third is the readable name. #define DEFINE_N64_BUTTON_INPUTS() \ - DEFINE_INPUT(A, 0x8000, "[A Button]") \ - DEFINE_INPUT(B, 0x4000, "[B Button]") \ - DEFINE_INPUT(Z, 0x2000, "[Z Button]") \ - DEFINE_INPUT(START, 0x1000, "[Start Button]") \ - DEFINE_INPUT(DPAD_UP, 0x0800, "[Dpad Up]") \ - DEFINE_INPUT(DPAD_DOWN, 0x0400, "[Dpad Down]") \ - DEFINE_INPUT(DPAD_LEFT, 0x0200, "[Dpad Left]") \ - DEFINE_INPUT(DPAD_RIGHT, 0x0100, "[Dpad Right]") \ - DEFINE_INPUT(L, 0x0020, "[L Button]") \ - DEFINE_INPUT(R, 0x0010, "[R Button]") \ - DEFINE_INPUT(C_UP, 0x0008, "[C Up]") \ - DEFINE_INPUT(C_DOWN, 0x0004, "[C Down]") \ - DEFINE_INPUT(C_LEFT, 0x0002, "[C Left]") \ - DEFINE_INPUT(C_RIGHT, 0x0001, "[C Right]") + DEFINE_INPUT(A, 0x8000, "A Button") \ + DEFINE_INPUT(B, 0x4000, "B Button") \ + DEFINE_INPUT(Z, 0x2000, "Z Button") \ + DEFINE_INPUT(START, 0x1000, "Start Button") \ + DEFINE_INPUT(DPAD_UP, 0x0800, "Dpad Up") \ + DEFINE_INPUT(DPAD_DOWN, 0x0400, "Dpad Down") \ + DEFINE_INPUT(DPAD_LEFT, 0x0200, "Dpad Left") \ + DEFINE_INPUT(DPAD_RIGHT, 0x0100, "Dpad Right") \ + DEFINE_INPUT(L, 0x0020, "L Button") \ + DEFINE_INPUT(R, 0x0010, "R Button") \ + DEFINE_INPUT(C_UP, 0x0008, "C Up") \ + DEFINE_INPUT(C_DOWN, 0x0004, "C Down") \ + DEFINE_INPUT(C_LEFT, 0x0002, "C Left") \ + DEFINE_INPUT(C_RIGHT, 0x0001, "C Right") #define DEFINE_N64_AXIS_INPUTS() \ - DEFINE_INPUT(X_AXIS_NEG, 0, "[Analog Left]") \ - DEFINE_INPUT(X_AXIS_POS, 0, "[Analog Right]") \ - DEFINE_INPUT(Y_AXIS_NEG, 0, "[Analog Down]") \ - DEFINE_INPUT(Y_AXIS_POS, 0, "[Analog Up]") \ + DEFINE_INPUT(X_AXIS_NEG, 0, "Analog Left") \ + DEFINE_INPUT(X_AXIS_POS, 0, "Analog Right") \ + DEFINE_INPUT(Y_AXIS_NEG, 0, "Analog Down") \ + DEFINE_INPUT(Y_AXIS_POS, 0, "Analog Up") \ #define DEFINE_ALL_INPUTS() \ DEFINE_N64_BUTTON_INPUTS() \ diff --git a/src/game/input.cpp b/src/game/input.cpp index a0c990b..e45d1ac 100644 --- a/src/game/input.cpp +++ b/src/game/input.cpp @@ -6,6 +6,7 @@ #include "recomp_ui.h" #include "SDL.h" #include "rt64_layer.h" +#include "promptfont.h" #include "GamepadMotion.hpp" constexpr float axis_threshold = 0.5f; @@ -497,6 +498,85 @@ std::string controller_button_to_string(SDL_GameControllerButton button) { } } +std::unordered_map scancode_codepoints { + {SDL_SCANCODE_LEFT, PF_KEYBOARD_LEFT}, + // NOTE: UP and RIGHT are swapped with promptfont. + {SDL_SCANCODE_UP, PF_KEYBOARD_RIGHT}, + {SDL_SCANCODE_RIGHT, PF_KEYBOARD_UP}, + {SDL_SCANCODE_DOWN, PF_KEYBOARD_DOWN}, + {SDL_SCANCODE_A, PF_KEYBOARD_A}, + {SDL_SCANCODE_B, PF_KEYBOARD_B}, + {SDL_SCANCODE_C, PF_KEYBOARD_C}, + {SDL_SCANCODE_D, PF_KEYBOARD_D}, + {SDL_SCANCODE_E, PF_KEYBOARD_E}, + {SDL_SCANCODE_F, PF_KEYBOARD_F}, + {SDL_SCANCODE_G, PF_KEYBOARD_G}, + {SDL_SCANCODE_H, PF_KEYBOARD_H}, + {SDL_SCANCODE_I, PF_KEYBOARD_I}, + {SDL_SCANCODE_J, PF_KEYBOARD_J}, + {SDL_SCANCODE_K, PF_KEYBOARD_K}, + {SDL_SCANCODE_L, PF_KEYBOARD_L}, + {SDL_SCANCODE_M, PF_KEYBOARD_M}, + {SDL_SCANCODE_N, PF_KEYBOARD_N}, + {SDL_SCANCODE_O, PF_KEYBOARD_O}, + {SDL_SCANCODE_P, PF_KEYBOARD_P}, + {SDL_SCANCODE_Q, PF_KEYBOARD_Q}, + {SDL_SCANCODE_R, PF_KEYBOARD_R}, + {SDL_SCANCODE_S, PF_KEYBOARD_S}, + {SDL_SCANCODE_T, PF_KEYBOARD_T}, + {SDL_SCANCODE_U, PF_KEYBOARD_U}, + {SDL_SCANCODE_V, PF_KEYBOARD_V}, + {SDL_SCANCODE_W, PF_KEYBOARD_W}, + {SDL_SCANCODE_X, PF_KEYBOARD_X}, + {SDL_SCANCODE_Y, PF_KEYBOARD_Y}, + {SDL_SCANCODE_Z, PF_KEYBOARD_Z}, + {SDL_SCANCODE_0, PF_KEYBOARD_0}, + {SDL_SCANCODE_1, PF_KEYBOARD_1}, + {SDL_SCANCODE_2, PF_KEYBOARD_2}, + {SDL_SCANCODE_3, PF_KEYBOARD_3}, + {SDL_SCANCODE_4, PF_KEYBOARD_4}, + {SDL_SCANCODE_5, PF_KEYBOARD_5}, + {SDL_SCANCODE_6, PF_KEYBOARD_6}, + {SDL_SCANCODE_7, PF_KEYBOARD_7}, + {SDL_SCANCODE_8, PF_KEYBOARD_8}, + {SDL_SCANCODE_9, PF_KEYBOARD_9}, + {SDL_SCANCODE_ESCAPE, PF_KEYBOARD_ESCAPE}, + {SDL_SCANCODE_F1, PF_KEYBOARD_F1}, + {SDL_SCANCODE_F2, PF_KEYBOARD_F2}, + {SDL_SCANCODE_F3, PF_KEYBOARD_F3}, + {SDL_SCANCODE_F4, PF_KEYBOARD_F4}, + {SDL_SCANCODE_F5, PF_KEYBOARD_F5}, + {SDL_SCANCODE_F6, PF_KEYBOARD_F6}, + {SDL_SCANCODE_F7, PF_KEYBOARD_F7}, + {SDL_SCANCODE_F8, PF_KEYBOARD_F8}, + {SDL_SCANCODE_F9, PF_KEYBOARD_F9}, + {SDL_SCANCODE_F10, PF_KEYBOARD_F10}, + {SDL_SCANCODE_F11, PF_KEYBOARD_F11}, + {SDL_SCANCODE_F12, PF_KEYBOARD_F12}, + {SDL_SCANCODE_PRINTSCREEN, PF_KEYBOARD_PRINT_SCREEN}, + {SDL_SCANCODE_SCROLLLOCK, PF_KEYBOARD_SCROLL_LOCK}, + {SDL_SCANCODE_PAUSE, PF_KEYBOARD_PAUSE}, + {SDL_SCANCODE_INSERT, PF_KEYBOARD_INSERT}, + {SDL_SCANCODE_HOME, PF_KEYBOARD_HOME}, + {SDL_SCANCODE_PAGEUP, PF_KEYBOARD_PAGE_UP}, + {SDL_SCANCODE_DELETE, PF_KEYBOARD_DELETE}, + {SDL_SCANCODE_END, PF_KEYBOARD_END}, + {SDL_SCANCODE_PAGEDOWN, PF_KEYBOARD_PAGE_DOWN}, + {SDL_SCANCODE_SPACE, PF_KEYBOARD_SPACE}, + {SDL_SCANCODE_BACKSPACE, PF_KEYBOARD_BACKSPACE}, + {SDL_SCANCODE_TAB, PF_KEYBOARD_TAB}, + {SDL_SCANCODE_RETURN, PF_KEYBOARD_ENTER}, + {SDL_SCANCODE_CAPSLOCK, PF_KEYBOARD_CAPS}, + {SDL_SCANCODE_NUMLOCKCLEAR, PF_KEYBOARD_NUM_LOCK}, +}; + +std::string keyboard_input_to_string(SDL_Scancode key) { + if (scancode_codepoints.find(key) != scancode_codepoints.end()) { + return scancode_codepoints[key]; + } + return std::to_string(key); +} + std::string controller_axis_to_string(int axis) { bool positive = axis > 0; SDL_GameControllerAxis actual_axis = SDL_GameControllerAxis(abs(axis) - 1); @@ -526,6 +606,8 @@ std::string recomp::InputField::to_string() const { return controller_button_to_string((SDL_GameControllerButton)input_id); case InputType::ControllerAnalog: return controller_axis_to_string(input_id); + case InputType::Keyboard: + return keyboard_input_to_string((SDL_Scancode)input_id); default: return std::to_string(input_type) + "," + std::to_string(input_id); } diff --git a/src/ui/ui_config.cpp b/src/ui/ui_config.cpp index 2620464..8b8fb32 100644 --- a/src/ui/ui_config.cpp +++ b/src/ui/ui_config.cpp @@ -47,7 +47,7 @@ static int scanned_binding_index = -1; static int scanned_input_index = -1; static int focused_input_index = -1; -constexpr recomp::InputDevice cur_device = recomp::InputDevice::Controller; +static recomp::InputDevice cur_device = recomp::InputDevice::Controller; void recomp::finish_scanning_input(recomp::InputField scanned_field) { recomp::set_input_binding(static_cast(scanned_input_index), scanned_binding_index, cur_device, scanned_field); @@ -105,6 +105,15 @@ public: [](const std::string& param, Rml::Event& event) { close_config_menu(); }); + + recomp::register_event(listener, "toggle_input_device", + [](const std::string& param, Rml::Event& event) { + cur_device = cur_device == recomp::InputDevice::Controller + ? recomp::InputDevice::Keyboard + : recomp::InputDevice::Controller; + controls_model_handle.DirtyVariable("input_device_is_keyboard"); + controls_model_handle.DirtyVariable("inputs"); + }); } void make_graphics_bindings(Rml::Context* context) { Rml::DataModelConstructor constructor = context->CreateDataModel("graphics_model"); @@ -147,7 +156,8 @@ public: } constructor.BindFunc("input_count", [](Rml::Variant& out) { out = recomp::get_num_inputs(); } ); - + constructor.BindFunc("input_device_is_keyboard", [](Rml::Variant& out) { out = cur_device == recomp::InputDevice::Keyboard; } ); + constructor.RegisterTransformFunc("get_input_name", [](const Rml::VariantList& inputs) { return Rml::Variant{recomp::get_input_name(static_cast(inputs.at(0).Get()))}; }); @@ -205,7 +215,7 @@ public: virtual int Size(void* ptr) override { return recomp::bindings_per_input; } virtual Rml::DataVariable Child(void* ptr, const Rml::DataAddressEntry& address) override { recomp::GameInput input = static_cast((uintptr_t)ptr); - return Rml::DataVariable{&input_field_definition_instance, &recomp::get_input_binding(input, address.index, recomp::InputDevice::Controller)}; + return Rml::DataVariable{&input_field_definition_instance, &recomp::get_input_binding(input, address.index, cur_device)}; } }; // Static instance of the InputField array variable definition to have a fixed pointer to return to RmlUi.