diff --git a/CMakeLists.txt b/CMakeLists.txt index d881e19..55cc420 100644 --- a/CMakeLists.txt +++ b/CMakeLists.txt @@ -172,6 +172,7 @@ set (SOURCES ${CMAKE_SOURCE_DIR}/src/ui/elements/ElementOptionTypeRange.cpp ${CMAKE_SOURCE_DIR}/src/ui/elements/ElementOptionTypeTextField.cpp ${CMAKE_SOURCE_DIR}/src/ui/elements/ElementModMenu.cpp + ${CMAKE_SOURCE_DIR}/src/ui/elements/ElementModDetailsPanel.cpp ${CMAKE_SOURCE_DIR}/src/ui/elements/presets.cpp ${CMAKE_SOURCE_DIR}/rsp/aspMain.cpp diff --git a/assets/recomp.rcss b/assets/recomp.rcss index 5dcbf7d..4f8f2b8 100644 --- a/assets/recomp.rcss +++ b/assets/recomp.rcss @@ -1 +1 @@ -h1{font-size:68dp;letter-spacing:4.76dp;line-height:68dp;font-style:normal;font-weight:700}h2{font-size:52dp;letter-spacing:3.64dp;line-height:52dp;font-style:normal;font-weight:700}h3,.tab{font-size:36dp;letter-spacing:2.52dp;line-height:36dp;font-style:normal;font-weight:700}.label-lg,.menu-list-item__label,.button--large{font-size:36dp;letter-spacing:3.96dp;line-height:36dp;font-style:normal;font-weight:700}.label-md,.config-debug-option__label,.button,.config-option__title,.config-option--hz .config-option__title,.config-group__title,.control-option__label{font-size:28dp;letter-spacing:3.08dp;line-height:28dp;font-style:normal;font-weight:700}.label-sm,.config-debug__select-wrapper .config-debug__select-label,.subtitle-title__disclaimer,.config-option__range-label,.config-option-range__label,.config-option__radio-tabs .config-option__tab-label,.config-option__list .config-option__tab-label,.centered-page__controls>label{font-size:20dp;letter-spacing:2.8dp;line-height:20dp;font-style:normal;font-weight:700;text-transform:uppercase}.config-option__details{font-size:18dp;letter-spacing:2.52dp;line-height:18dp;font-style:normal;font-weight:400}body,.config-debug__select-wrapper select,.config-debug__select-wrapper input,.config-description__contents,.config-option-dropdown__select,.config-option-dropdown__wrapper,.config-option-textfield__select,.config-option-textfield__wrapper,.config__wrapper p{font-size:20dp;letter-spacing:0dp;line-height:20dp;font-style:normal;font-weight:400}.toggle__icon{font-family:promptfont;font-size:56dp;font-style:normal;font-weight:400;line-height:56dp}.prompt-font{font-family:promptfont;font-size:40dp;font-style:normal;font-weight:400;line-height:40dp}.prompt-font-sm,.input-viz__mappings div{font-family:promptfont;font-size:32dp;font-style:normal;font-weight:400;line-height:32dp}.nav-vert,.nav-dir,.nav-all,.config-debug__select-wrapper select selectbox option,.config-debug__select-wrapper select,.config-debug__select-wrapper input,.toggle,.subtitle-title:not(:disabled,[disabled]),.menu-list-item:not(:disabled,[disabled]),.icon-button:not([disabled]),.button:not([disabled]),.button,.config-option-dropdown__select selectbox option,.config-option-dropdown__wrapper selectbox option,.config-option-textfield__select selectbox option,.config-option-textfield__wrapper selectbox option,.config-option-dropdown__select,.config-option-dropdown__wrapper,.config-option-textfield__select,.config-option-textfield__wrapper,.config-option__radio-tabs input.radio,.config-option__list input.radio,.config-option__radio-tabs .config-option__checkbox,.config-option__list .config-option__checkbox,.tab,.control-option__binding:not([disabled]){nav-up:auto;nav-down:auto}.nav-horiz,.nav-dir,.nav-all,.config-debug__select-wrapper select selectbox option,.config-debug__select-wrapper select,.config-debug__select-wrapper input,.toggle,.subtitle-title:not(:disabled,[disabled]),.menu-list-item:not(:disabled,[disabled]),.icon-button:not([disabled]),.button:not([disabled]),.button,.config-option-dropdown__select selectbox option,.config-option-dropdown__wrapper selectbox option,.config-option-textfield__select selectbox option,.config-option-textfield__wrapper selectbox option,.config-option-dropdown__select,.config-option-dropdown__wrapper,.config-option-textfield__select,.config-option-textfield__wrapper,.config-option__radio-tabs input.radio,.config-option__list input.radio,.config-option__radio-tabs .config-option__checkbox,.config-option__list .config-option__checkbox,.tab,.control-option__binding:not([disabled]){nav-right:auto;nav-left:auto}.nav-foc,.nav-all,.config-debug__select-wrapper select selectbox option,.config-debug__select-wrapper select,.config-debug__select-wrapper input,.toggle,.subtitle-title:not(:disabled,[disabled]),.menu-list-item:not(:disabled,[disabled]),.icon-button:not([disabled]),.button:not([disabled]),.button,.config-option-dropdown__select selectbox option,.config-option-dropdown__wrapper selectbox option,.config-option-textfield__select selectbox option,.config-option-textfield__wrapper selectbox option,.config-option-dropdown__select,.config-option-dropdown__wrapper,.config-option-textfield__select,.config-option-textfield__wrapper,.config-option__radio-tabs input.radio,.config-option__list input.radio,.config-option__radio-tabs .config-option__checkbox,.config-option__list .config-option__checkbox,.tab,.control-option__binding:not([disabled]){focus:auto;tab-index:auto}h1{font-size:68dp;letter-spacing:4.76dp;line-height:68dp;font-style:normal;font-weight:700}h2{font-size:52dp;letter-spacing:3.64dp;line-height:52dp;font-style:normal;font-weight:700}h3,.tab{font-size:36dp;letter-spacing:2.52dp;line-height:36dp;font-style:normal;font-weight:700}.label-lg,.menu-list-item__label,.button--large{font-size:36dp;letter-spacing:3.96dp;line-height:36dp;font-style:normal;font-weight:700}.label-md,.config-debug-option__label,.button,.config-option__title,.config-option--hz .config-option__title,.config-group__title,.control-option__label{font-size:28dp;letter-spacing:3.08dp;line-height:28dp;font-style:normal;font-weight:700}.label-sm,.config-debug__select-wrapper .config-debug__select-label,.subtitle-title__disclaimer,.config-option__range-label,.config-option-range__label,.config-option__radio-tabs .config-option__tab-label,.config-option__list .config-option__tab-label,.centered-page__controls>label{font-size:20dp;letter-spacing:2.8dp;line-height:20dp;font-style:normal;font-weight:700;text-transform:uppercase}.config-option__details{font-size:18dp;letter-spacing:2.52dp;line-height:18dp;font-style:normal;font-weight:400}body,.config-debug__select-wrapper select,.config-debug__select-wrapper input,.config-description__contents,.config-option-dropdown__select,.config-option-dropdown__wrapper,.config-option-textfield__select,.config-option-textfield__wrapper,.config__wrapper p{font-size:20dp;letter-spacing:0dp;line-height:20dp;font-style:normal;font-weight:400}.toggle__icon{font-family:promptfont;font-size:56dp;font-style:normal;font-weight:400;line-height:56dp}.prompt-font{font-family:promptfont;font-size:40dp;font-style:normal;font-weight:400;line-height:40dp}.prompt-font-sm,.input-viz__mappings div{font-family:promptfont;font-size:32dp;font-style:normal;font-weight:400;line-height:32dp}.nav-vert,.nav-dir,.nav-all,.config-debug__select-wrapper select selectbox option,.config-debug__select-wrapper select,.config-debug__select-wrapper input,.toggle,.subtitle-title:not(:disabled,[disabled]),.menu-list-item:not(:disabled,[disabled]),.icon-button:not([disabled]),.button:not([disabled]),.button,.config-option-dropdown__select selectbox option,.config-option-dropdown__wrapper selectbox option,.config-option-textfield__select selectbox option,.config-option-textfield__wrapper selectbox option,.config-option-dropdown__select,.config-option-dropdown__wrapper,.config-option-textfield__select,.config-option-textfield__wrapper,.config-option__radio-tabs input.radio,.config-option__list input.radio,.config-option__radio-tabs .config-option__checkbox,.config-option__list .config-option__checkbox,.tab,.control-option__binding:not([disabled]){nav-up:auto;nav-down:auto}.nav-horiz,.nav-dir,.nav-all,.config-debug__select-wrapper select selectbox option,.config-debug__select-wrapper select,.config-debug__select-wrapper input,.toggle,.subtitle-title:not(:disabled,[disabled]),.menu-list-item:not(:disabled,[disabled]),.icon-button:not([disabled]),.button:not([disabled]),.button,.config-option-dropdown__select selectbox option,.config-option-dropdown__wrapper selectbox option,.config-option-textfield__select selectbox option,.config-option-textfield__wrapper selectbox option,.config-option-dropdown__select,.config-option-dropdown__wrapper,.config-option-textfield__select,.config-option-textfield__wrapper,.config-option__radio-tabs input.radio,.config-option__list input.radio,.config-option__radio-tabs .config-option__checkbox,.config-option__list .config-option__checkbox,.tab,.control-option__binding:not([disabled]){nav-right:auto;nav-left:auto}.nav-foc,.nav-all,.config-debug__select-wrapper select selectbox option,.config-debug__select-wrapper select,.config-debug__select-wrapper input,.toggle,.subtitle-title:not(:disabled,[disabled]),.menu-list-item:not(:disabled,[disabled]),.icon-button:not([disabled]),.button:not([disabled]),.button,.config-option-dropdown__select selectbox option,.config-option-dropdown__wrapper selectbox option,.config-option-textfield__select selectbox option,.config-option-textfield__wrapper selectbox option,.config-option-dropdown__select,.config-option-dropdown__wrapper,.config-option-textfield__select,.config-option-textfield__wrapper,.config-option__radio-tabs input.radio,.config-option__list input.radio,.config-option__radio-tabs .config-option__checkbox,.config-option__list .config-option__checkbox,.tab,.control-option__binding:not([disabled]){focus:auto;tab-index:auto}*{box-sizing:border-box}hr{display:block;padding:1.5dp;background:#08070d}body{color:#fff;font-family:chiaro;font-size:20dp;font-style:normal;font-weight:normal}div#window{position:relative;box-sizing:border-box;width:100%;height:100%;border-color:rgba(255,255,255,.2);background-color:#121018}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;text-align:left;cursor:text}textarea{padding:14dp 12dp 10dp;text-align:left;cursor:text}input.text,input.password,select,textarea{height:auto}table input.text{box-sizing:border-box;width:100%;height:auto;margin:0;border-width:1.1dp;border-color:#000;background-color:#fff;font-size:15dp;line-height:1;decorator:none}input.radio{flex:0;width:0dp;nav-up:auto;nav-right:auto;nav-down:auto;nav-left:auto;tab-index:auto;focus:auto}input.checkbox{width:20dp;height:20dp;nav-up:auto;nav-right:auto;nav-down:auto;nav-left:auto;tab-index:auto;focus:auto}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;position:relative;flex:1 1 100%;flex-direction:column;width:100%;max-width:1692.4444444444dp;height:100%;margin:auto;border-width:1.1dp;border-radius:16dp;border-color:rgba(255,255,255,.2);background:rgba(8,7,13,.9)}.centered-page__modal>.tabs{display:flex;position:relative;flex:1 1 100%;flex-direction:column;width:100%;max-width:1692.4444444444dp;height:100%;margin:auto}.centered-page__modal panels{flex:1 1 100%}.centered-page__controls{display:flex;position:absolute;bottom:24dp;flex-direction:row;align-items:center;justify-content:center;width:100%;max-width:1692.4444444444dp;height:auto;margin:0 auto}.centered-page__controls>label{display:inline-block;align-items:center;justify-content:space-between;width:auto;height:24dp}.centered-page__controls>label:not(:last-child){margin-right:40dp}.centered-page__controls>label>span:first-child{margin-right:4dp}.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}[cur-binding-slot="0"] .control-option--active .control-option__binding[bind-slot="0"]{border-color:#f86039}[cur-binding-slot="0"] .control-option--active .control-option__binding[bind-slot="0"] .control-option__binding-icon{opacity:0}[cur-binding-slot="0"] .control-option--active .control-option__binding[bind-slot="0"] .control-option__binding-recording{opacity:1}[cur-binding-slot="1"] .control-option--active .control-option__binding[bind-slot="1"]{border-color:#f86039}[cur-binding-slot="1"] .control-option--active .control-option__binding[bind-slot="1"] .control-option__binding-icon{opacity:0}[cur-binding-slot="1"] .control-option--active .control-option__binding[bind-slot="1"] .control-option__binding-recording{opacity:1}.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:2 1 400dp;flex-direction:row;align-items:center;justify-content:space-between;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;position:relative;flex:1 1 100%;align-items:center;justify-content:center;width:100%;height:56dp;margin:0 4dp;padding:8dp;border-width:1.1dp;border-radius:8dp;border-color:rgba(190,184,219,.1);background-color:rgba(190,184,219,.1)}.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;border-color:#f2f2f2;background-color:rgba(255,255,255,.1)}.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}.control-option__binding-icon{transition:color .05s linear-in-out,background-color .05s linear-in-out,opacity .05s linear-in-out;opacity:1}@keyframes control-option__binding-recording-scale{0%{transform:scale(1)}50%{transform:scale(0.85)}100%{transform:scale(1)}}.control-option__binding-recording{transition:color .05s linear-in-out,background-color .05s linear-in-out,opacity .05s linear-in-out;display:flex;position:absolute;top:0;right:0;bottom:0;left:0;align-items:center;justify-content:center;opacity:0}.control-option__binding-recording .control-option__binding-circle{width:24dp;height:24dp;animation:1.5s sine-in-out infinite control-option__binding-recording-scale;border-radius:24dp;background-color:#f86039}.control-option__binding-recording .control-option__binding-edge{position:absolute;top:50%;left:50%;width:36dp;height:36dp;transform:translate(-50%, -50%)}.control-option__binding-recording .control-option__binding-edge>svg.control-option__binding-edge-svg{width:36dp;height:36dp;image-color:#f86039}.tabs tabs{display:flex;flex-direction:row;align-items:center;justify-content:flex-start}.tab{display:block;position:relative;margin:0;padding:20dp 24dp;transition:color .05s linear-in-out;opacity:.9;background-color:rgba(0,0,0,0);color:rgba(255,255,255,.6)}.tab:selected{color:#f2f2f2}.tab:selected .tab__indicator{background-color:rgba(255,255,255,.6)}.tab:selected:hover{cursor:default}.rmlui-window:not([mouse-active]) .tab:focus{transition:none;animation:blue-pulse .75s infinite}.rmlui-window:not([mouse-active]) .tab:focus:selected .tab__indicator{animation:blue-pulse-background .75s infinite}.tab:focus,.tab:hover{opacity:1;color:#f2f2f2;cursor:pointer}.tab__indicator{position:absolute;right:0;bottom:2dp;left:0;height:2dp;background-color:rgba(0,0,0,0)}.config__icon-buttons{display:flex;position:absolute;top:8dp;right:0dp;flex-direction:row;align-items:center;justify-content:flex-end;width:auto}.config__icon-buttons .icon-button{margin:0 8dp}.config__form{border-top-width:1.1dp;border-top-color:rgba(255,255,255,.1);display:flex;flex:1 1 100%;flex-direction:column;justify-content:space-between;width:100%;height:100%;border-bottom-right-radius:16dp;border-bottom-left-radius:16dp}.config__wrapper{flex:1 1 100%;width:auto;height:auto;padding:16dp;border-radius:0dp;border-bottom-right-radius:16dp;border-bottom-left-radius:16dp;background-color:rgba(0,0,0,.35);text-align:left}.config__wrapper p{padding:16dp;line-height:28dp;white-space:pre-line}.config__wrapper p b{color:#b97df2}.config__wrapper p i{color:#e9cd35;font-style:normal}.config__hz-wrapper{display:flex;flex:1 1 100%;flex-direction:row;width:100%;height:100%;border-radius:0dp;text-align:left}.config__header,.config__footer{display:flex;align-items:center;justify-content:space-between;width:100%;background-color:rgba(0,0,0,.35)}.config__header{border-bottom-width:1.1dp;border-bottom-color:rgba(255,255,255,.1);padding:12dp 20dp}.config__footer{border-top-width:1.1dp;border-top-color:rgba(255,255,255,.1);padding:20dp 20dp;border-bottom-right-radius:16dp;border-bottom-left-radius:16dp}.config__header-left{display:flex;flex:1 1 auto;flex-direction:row}.config__header-left>:not(:first-child){margin-left:8dp}.config__row{display:flex;flex-direction:row}.config-group{position:relative}.config-group--scrollable{flex:1 1 100%;width:auto;height:auto;padding:0 0 0 16dp}.config-group--scrollable .config-group__wrapper{max-height:100%;overflow-y:auto}.config-group__title{color:#b97df2}.config-group__title--hidden{display:none}.config-group__wrapper{padding:16dp 0}.config-option{display:flex;flex:1;flex-direction:column;align-items:flex-start;justify-content:flex-start;margin:16dp 0dp 24dp}.config-option--hz{flex-direction:row-reverse;align-items:center;margin-top:4dp;margin-bottom:4dp}.config-option--hz .config-option__title{flex:1 1 100%}.config-option--hz .config-option__list{flex:1 1 auto;width:auto}.config-option--hz:first-child{margin-top:0}.config-option--hz:last-child{margin-bottom:0}.config-option__title{padding:0 12dp}.config-option__radio-tabs,.config-option__list{display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;width:100%;height:auto;padding:0}.config-option__radio-tabs input:first-of-type,.config-option__list input:first-of-type{nav-left:none}.config-option__radio-tabs input:last-of-type,.config-option__list input:last-of-type{nav-right:none}.config-option__radio-tabs .config-option__tab-label,.config-option__list .config-option__tab-label{transition:color .05s linear-in-out,background-color .05s linear-in-out,opacity .05s linear-in-out;display:block;position:relative;height:auto;margin:4dp 12dp 0;padding:8dp 0;color:rgba(255,255,255,.6);tab-index:none}.config-option__radio-tabs .config-option__tab-label:hover,.config-option__list .config-option__tab-label:hover{color:#f2f2f2;cursor:pointer}.config-option__radio-tabs .config-option__checkbox-wrapper,.config-option__list .config-option__checkbox-wrapper{transition:color .05s linear-in-out,background-color .05s linear-in-out,opacity .05s linear-in-out;width:32dp;height:32dp;margin:4dp 12dp 0;border-radius:8dp;opacity:.5;background-color:rgba(190,184,219,.1);cursor:pointer}.config-option__radio-tabs .config-option__checkbox-wrapper:hover,.config-option__list .config-option__checkbox-wrapper:hover{opacity:1}.config-option__radio-tabs .config-option__checkbox-wrapper[checked],.config-option__list .config-option__checkbox-wrapper[checked]{background-color:#33f}.config-option__radio-tabs .config-option__checkbox,.config-option__list .config-option__checkbox{transition:color .05s linear-in-out,background-color .05s linear-in-out,opacity .05s linear-in-out;visibility:visible;width:0;height:0}.config-option__radio-tabs input.radio,.config-option__list input.radio{transition:color .05s linear-in-out,background-color .05s linear-in-out,opacity .05s linear-in-out;visibility:visible;width:0;height:0}.config-option__radio-tabs input.radio:not(:disabled):checked+.config-option__tab-label,.config-option__list input.radio:not(:disabled):checked+.config-option__tab-label{border-bottom:1dp;border-color:#f2f2f2;color:#f2f2f2}.config-option__radio-tabs input.radio:not(:disabled):checked+.config-option__tab-label:hover,.config-option__list input.radio:not(:disabled):checked+.config-option__tab-label:hover{cursor:default}.rmlui-window:not([mouse-active]) .config-option__radio-tabs input.radio:not(:disabled):focus+.config-option__tab-label,.rmlui-window:not([mouse-active]) .config-option__list input.radio:not(:disabled):focus+.config-option__tab-label{transition:none;animation:blue-pulse .75s infinite;border-color:#17d6e8;color:#17d6e8}.config-option__radio-tabs input.radio:not(:disabled):focus+.config-option__tab-label,.config-option__radio-tabs input.radio:not(:disabled):hover+.config-option__tab-label,.config-option__list input.radio:not(:disabled):focus+.config-option__tab-label,.config-option__list input.radio:not(:disabled):hover+.config-option__tab-label{color:#f2f2f2}.config-option__radio-tabs input.radio:disabled+.config-option__tab-label,.config-option__list input.radio:disabled+.config-option__tab-label{opacity:.5}.config-option__radio-tabs input.radio:disabled+.config-option__tab-label:hover,.config-option__list input.radio:disabled+.config-option__tab-label:hover{cursor:default}.config-option__radio-tabs input.range slidertrack,.config-option__list input.range slidertrack{transition:color .05s linear-in-out,background-color .05s linear-in-out;height:2dp;margin-top:8dp;background-color:rgba(255,255,255,.2)}.config-option__radio-tabs input.range sliderbar,.config-option__list input.range sliderbar{transition:color .05s linear-in-out,background-color .05s linear-in-out;width:16dp;height:16dp;margin-top:1dp;margin-right:-8dp;margin-left:-8dp;transition:background-color .05s linear-in-out;border-radius:8dp;background-color:#ccc}.rmlui-window:not([mouse-active]) .config-option__radio-tabs input.range sliderbar:focus,.rmlui-window:not([mouse-active]) .config-option__list input.range sliderbar:focus{border-width:1.1dp;border-color:#33f;animation:blue-pulse-background .75s infinite}.config-option__radio-tabs input.range sliderbar:hover,.config-option__list input.range sliderbar:hover{background-color:#f2f2f2;cursor:pointer}.config-option__radio-tabs input.range sliderbar:active,.config-option__radio-tabs input.range slidertrack:active+sliderbar,.config-option__list input.range sliderbar:active,.config-option__list input.range slidertrack:active+sliderbar{background-color:#17d6e8}.config-option__radio-tabs input.range sliderarrowdec,.config-option__radio-tabs input.range sliderarrowinc,.config-option__list input.range sliderarrowdec,.config-option__list input.range sliderarrowinc{display:none}.config-option__details{height:18dp;margin:14dp 12dp 0;color:#b97df2}.config-option-color{width:100%;max-width:360dp;height:auto;margin-top:4dp;margin-left:12dp;padding:0}.config-option-color__preview-wrapper{display:flex;flex-direction:row;width:100%;height:72dp}.config-option-color__preview-block{display:block;width:88dp;height:100%;border-width:1.1dp;border-radius:16dp;border-color:rgba(255,255,255,.2)}.config-option-color__hsv-wrapper{display:flex;flex:1 1 100%;flex-direction:column;width:auto;height:auto;padding-left:8dp}.config-option-color__hsv-wrapper .config-option-range{flex:1 1 auto}.config-option-color__hsv-wrapper .config-option-range label{min-width:72dp}.config-option-color__hsv-wrapper .config-option-range input{flex:1 1 auto}.config-option-range{display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;width:100%;max-width:360dp;height:auto;margin-top:4dp;padding:0}.config-option-range__label{display:block;width:56dp;margin:0 12dp;margin-right:16dp;padding:0;color:#f2f2f2;tab-index:none}.config-option-range__range-input{flex:1}.config-option-range__range-input slidertrack{transition:color .05s linear-in-out,background-color .05s linear-in-out;height:2dp;margin-top:8dp;background-color:rgba(255,255,255,.2)}.config-option-range__range-input sliderbar{transition:color .05s linear-in-out,background-color .05s linear-in-out;width:16dp;height:16dp;margin-top:1dp;margin-right:-8dp;margin-left:-8dp;transition:background-color .05s linear-in-out;border-radius:8dp;background-color:#ccc}.rmlui-window:not([mouse-active]) .config-option-range__range-input sliderbar:focus{border-width:1.1dp;border-color:#33f;animation:blue-pulse-background .75s infinite}.config-option-range__range-input sliderbar:hover{background-color:#f2f2f2;cursor:pointer}.config-option-range__range-input sliderbar:active,.config-option-range__range-input slidertrack:active+sliderbar{background-color:#17d6e8}.config-option-range__range-input sliderarrowdec,.config-option-range__range-input sliderarrowinc{display:none}.config-option__range-wrapper{max-width:360dp;margin-top:4dp}.config-option__range-label{display:block;width:56dp;margin:0 12dp;margin-right:16dp;padding:0;color:#f2f2f2;tab-index:none}.config-option-dropdown,.config-option-textfield{display:flex;position:relative;flex:1 1 100%;flex-direction:row;align-items:center;justify-content:flex-start;width:auto;height:auto;padding:8dp 24dp 8dp 12dp}.config-option-dropdown__select,.config-option-textfield__select{display:block;height:48dp;padding:14dp;cursor:pointer}.config-option-dropdown__wrapper,.config-option-textfield__wrapper{display:flex;align-items:center;justify-content:flex-start;width:100%;height:auto;padding:2dp 0 12dp;cursor:text}.config-option-dropdown__wrapper input,.config-option-textfield__wrapper input{width:100%;height:auto;vertical-align:middle}.config-option-dropdown__select,.config-option-dropdown__wrapper,.config-option-textfield__select,.config-option-textfield__wrapper{transition:color .05s linear-in-out,background-color .05s linear-in-out,opacity .05s linear-in-out,border-color .05s linear-in-out;border-width:1.1dp;border-color:rgba(255,255,255,.5);position:relative;box-sizing:border-box;flex:1 1 100%;width:auto;border-radius:12dp;background-color:rgba(255,255,255,.05)}.config-option-dropdown__select svg,.config-option-dropdown__wrapper svg,.config-option-textfield__select svg,.config-option-textfield__wrapper svg{transition:image-color .05s linear-in-out,background-color .05s linear-in-out}.config-option-dropdown__select:hover,.config-option-dropdown__select:focus,.config-option-dropdown__wrapper:hover,.config-option-dropdown__wrapper:focus,.config-option-textfield__select:hover,.config-option-textfield__select:focus,.config-option-textfield__wrapper:hover,.config-option-textfield__wrapper:focus{border-width:1.1dp;border-color:rgba(255,255,255,.8);background-color:rgba(255,255,255,.2)}.config-option-dropdown__select selectvalue,.config-option-dropdown__wrapper selectvalue,.config-option-textfield__select selectvalue,.config-option-textfield__wrapper selectvalue{display:inline;height:auto;margin:auto 0}.config-option-dropdown__select selectbox,.config-option-dropdown__wrapper selectbox,.config-option-textfield__select selectbox,.config-option-textfield__wrapper selectbox{border-width:1.1dp;border-color:rgba(255,255,255,.2);margin-top:2dp;padding:4dp 0;border-radius:12dp;background-color:#191622}.config-option-dropdown__select selectbox option,.config-option-dropdown__wrapper selectbox option,.config-option-textfield__select selectbox option,.config-option-textfield__wrapper selectbox option{transition:color .05s linear-in-out,background-color .05s linear-in-out;padding:8dp 12dp;background-color:rgba(0,0,0,0);color:#ccc;font-weight:400}.config-option-dropdown__select selectbox option:hover,.config-option-dropdown__select selectbox option:focus,.config-option-dropdown__wrapper selectbox option:hover,.config-option-dropdown__wrapper selectbox option:focus,.config-option-textfield__select selectbox option:hover,.config-option-textfield__select selectbox option:focus,.config-option-textfield__wrapper selectbox option:hover,.config-option-textfield__wrapper selectbox option:focus{background-color:rgba(255,255,255,.2)}.config-option-dropdown__select selectbox option:hover:not(:checked),.config-option-dropdown__wrapper selectbox option:hover:not(:checked),.config-option-textfield__select selectbox option:hover:not(:checked),.config-option-textfield__wrapper selectbox option:hover:not(:checked){cursor:pointer}.config-option-dropdown__select selectbox option:checked,.config-option-dropdown__wrapper selectbox option:checked,.config-option-textfield__select selectbox option:checked,.config-option-textfield__wrapper selectbox option:checked{background-color:rgba(255,255,255,.05);color:#fff}.config-description{flex:1 1 100%;width:auto;height:auto;padding:16dp;border-radius:0dp;border-bottom-right-radius:16dp;border-bottom-left-radius:16dp;background-color:rgba(0,0,0,.35);text-align:left}.config-description__contents{padding:16dp;line-height:28dp;white-space:pre-line}.config-description__contents b{color:#b97df2}.config-description__contents i{color:#e9cd35;font-style:normal}.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;min-width:640dp;height:100%}.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;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:rgba(0,0,0,.35)}.input-config__visual{display:flex;position:absolute;top:16dp;right:16dp;bottom:16dp;left:16dp;flex-direction:column;border-radius:108dp;background-color:rgba(255,255,255,.05)}.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 .05s linear-in-out,background-color .05s linear-in-out,opacity .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:.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{margin-top:auto}.input-viz__button--A svg{image-color:#33f}.input-viz__button--B svg{image-color:#45d043}.input-viz__button--Start svg{image-color:#f86039}.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-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__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:#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;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:rgba(185,125,242,.8);background-color:rgba(185,125,242,.05);color:#ccc;transition:color .05s linear-in-out,background-color .05s linear-in-out;display:block;width:auto;height:auto;padding:23dp;border-width:1.1dp;border-radius:12dp}.button:focus,.button:hover{border-color:#b97df2;background-color:rgba(185,125,242,.3);color:#f2f2f2}.button:disabled,.button[disabled]{color:rgba(255,255,255,.6)}.button:active{background-color:rgba(185,125,242,.2);color:#f5f5f5}.button--primary{border-color:rgba(185,125,242,.8);background-color:rgba(185,125,242,.05);color:#ccc}.button--primary:focus,.button--primary:hover{border-color:#b97df2;background-color:rgba(185,125,242,.3);color:#f2f2f2}.button--primary:disabled,.button--primary[disabled]{color:rgba(255,255,255,.6)}.button--primary:active{background-color:rgba(185,125,242,.2);color:#f5f5f5}.button--secondary{border-color:rgba(23,214,232,.8);background-color:rgba(23,214,232,.05);color:#ccc}.button--secondary:focus,.button--secondary:hover{border-color:#17d6e8;background-color:rgba(23,214,232,.3);color:#f2f2f2}.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{border-color:rgba(242,242,242,.8);background-color:rgba(242,242,242,.05);color:#ccc}.button--tertiary:focus,.button--tertiary:hover{border-color:#f2f2f2;background-color:rgba(242,242,242,.3);color:#f2f2f2}.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{border-color:rgba(69,208,67,.8);background-color:rgba(69,208,67,.05);color:#ccc}.button--success:focus,.button--success:hover{border-color:#45d043;background-color:rgba(69,208,67,.3);color:#f2f2f2}.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{border-color:rgba(248,96,57,.8);background-color:rgba(248,96,57,.05);color:#ccc}.button--error:focus,.button--error:hover{border-color:#f86039;background-color:rgba(248,96,57,.3);color:#f2f2f2}.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{border-color:rgba(233,205,53,.8);background-color:rgba(233,205,53,.05);color:#ccc}.button--warning:focus,.button--warning:hover{border-color:#e9cd35;background-color:rgba(233,205,53,.3);color:#f2f2f2}.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;width:53.8dp;min-width:53.8dp;max-width:53.8dp;height:53.8dp;min-height:53.8dp;max-height:53.8dp;border-width:1.1dp;border-radius:26.9dp;border-color:rgba(0,0,0,0);background-color:rgba(0,0,0,0)}.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{border-color:rgba(185,125,242,.8);background-color:rgba(185,125,242,.05)}.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{border-color:rgba(23,214,232,.8);background-color:rgba(23,214,232,.05)}.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{border-color:rgba(242,242,242,.8);background-color:rgba(242,242,242,.05)}.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{border-color:rgba(69,208,67,.8);background-color:rgba(69,208,67,.05)}.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--error{border-color:rgba(248,96,57,.8);background-color:rgba(248,96,57,.05)}.icon-button--error:focus,.icon-button--error:hover{border-color:#f86039;background-color:rgba(248,96,57,.3)}.icon-button--error:active{background-color:rgba(248,96,57,.2)}.icon-button--warning{border-color:rgba(233,205,53,.8);background-color:rgba(233,205,53,.05)}.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;position:relative;flex-direction:row;justify-content:space-between;width:100%;height:100%;background-color:#08070d}.launcher__vertical-split{display:flex;position:absolute;top:0;right:50%;bottom:0;left:0;flex-direction:column;align-items:flex-start;justify-content:space-between}.launcher__vertical-split--right{right:0;left:50%;align-items:flex-end}@keyframes slide-mm-bg-over{0%{transform:translateX(100dp)}100%{transform:translateX(0dp)}}.launcher__background-wrapper{display:flex;position:absolute;top:-55vw;right:-100%;bottom:-50vw;left:-70vw;align-items:center;justify-content:flex-start;transform:translateX(0dp);animation:25s cubic-out 1 slide-mm-bg-over}@keyframes fade-mm-in{0%{opacity:0}100%{opacity:.1}}.launcher__background-mm{position:absolute;top:0;bottom:0;left:0;width:auto;height:100%;animation:2.5s cubic-in-out 1 fade-mm-in;opacity:.1}.launcher__title-quadrant{flex:1 1 auto;width:auto;height:auto;padding-top:96dp;padding-left:96dp}.launcher__title-quadrant--right{padding-right:96dp;padding-left:0}.launcher__content-quadrant{display:flex;position:relative;flex:1 1 100%;flex-direction:column;align-items:flex-start;justify-content:flex-end;width:100%;height:auto;padding:32dp}.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{flex-direction:row-reverse;align-content:flex-end}.menu-list-item--right .menu-list-item__bullet{margin-left:12dp;opacity:1}.menu-list-item--right.menu-list-item:focus:not(:disabled,[disabled]),.menu-list-item--right.menu-list-item:hover:not(:disabled,[disabled]){decorator:horizontal-gradient(#7A2AC600 #DABAF714)}.menu-list-item:focus:not(:disabled,[disabled]),.menu-list-item:hover:not(:disabled,[disabled]){color:#b97df2;decorator:horizontal-gradient(#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{margin-right:12dp;opacity:0}.subtitle-title{display:block;position:relative;flex-direction:column;align-content:flex-start;align-items:flex-start;width:auto;height:auto;padding:0;background-color:rgba(0,0,0,0);color:#ccc;text-align:left;cursor:pointer}.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;position:relative;flex-direction:row;align-items:center;justify-content:space-between;width:162dp;height:72dp;border-radius:36dp;opacity:.9;background:rgba(0,0,0,0);cursor:pointer}.toggle:hover,.toggle:focus-visible,.toggle:focus{opacity:1;background-color:rgba(23,214,232,.3)}.toggle:active{opacity:1;background-color:rgba(23,214,232,.05)}.toggle .toggle__border{position:absolute;top:1.1dp;right:1.1dp;bottom:1.1dp;left:1.1dp;border-width:1.1dp;border-color:#a2eff6;display:block;border-radius:36dp}.toggle .toggle__floater{position:absolute;top:50%;left:4dp;width:80dp;height:64dp;transform:translateY(-50%);border-radius:32dp;background:#25a1ad}.toggle--checked .toggle__floater{left:78dp}.toggle--checked .toggle__icon.toggle__icon--left{opacity:.9;color:#a2eff6}.toggle--checked .toggle__icon.toggle__icon--right{opacity:1;color:#f2f2f2}.toggle__icons{display:flex;position:absolute;top:50%;right:16dp;left:16dp;align-items:center;justify-content:space-between;height:56dp;transform:translateY(-50%)}.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}.bottom-left{display:flex;position:absolute;bottom:4dp;flex-direction:row;align-items:flex-start;justify-content:flex-start;width:100%;max-width:1692.4444444444dp;height:auto;margin:0 4dp}.prompt__overlay{background-color:rgba(190,184,219,.1);pointer-events:auto}.prompt__overlay,.prompt__content-wrapper{position:absolute;top:0;right:0;bottom:0;left:0}.prompt__content-wrapper{display:flex;position:absolute;top:0;right:0;bottom:0;left:0;align-items:center;justify-content:center}.prompt__content{display:flex;position:relative;flex:1 1 100%;flex-direction:column;width:100%;max-width:700dp;height:auto;margin:auto;border-width:1.1dp;border-radius:16dp;border-color:rgba(255,255,255,.2);background:rgba(8,7,13,.9)}.prompt__content h3,.prompt__content p{margin:24dp}.prompt__content p{margin-top:0}.prompt__controls{display:flex;flex-direction:row;justify-content:center;padding:24dp 12dp;border-top-width:1.1dp;border-top-color:rgba(255,255,255,.1)}.prompt__controls .button{min-width:233.3333333333dp;margin:0 12dp;text-align:center;nav-up:none;nav-down:none}.mod-menu{display:flex;position:absolute;top:0;right:0;bottom:0;left:0;flex-direction:row;align-items:center;justify-content:center;padding:64dp;background-color:rgba(8,7,13,.9)}.mod-menu__modal-wrapper{display:flex;position:relative;flex:1 1 100%;flex-direction:column;width:100%;max-width:1692.4444444444dp;height:100%;margin:auto;border-width:1.1dp;border-radius:16dp;border-color:rgba(255,255,255,.2);background:rgba(0,0,0,.35)}.mod-menu__modal-header{display:flex;position:relative;flex:1 1 auto;flex-direction:row;align-items:center;justify-content:space-between;width:100%;height:auto;padding:16dp;border-bottom-width:1.1dp;border-top-left-radius:16dp;border-top-right-radius:16dp;border-bottom-color:rgba(255,255,255,.2);background-color:rgba(190,184,219,.1)}.mod-menu__modal-body{display:flex;position:relative;flex:1 1 auto;flex-direction:row;align-items:center;justify-content:center;width:100%;height:auto}.mod-menu__list{display:block;position:relative;flex:1 1 100%;flex-direction:column;align-items:center;justify-content:center;height:100%;margin:0;padding:0;border-bottom-left-radius:16dp;background-color:rgba(0,0,0,.35)}.mod-menu__list-scroll{flex:1 1 100%;width:100%;height:100%;max-height:100%;overflow-y:auto}.mod-menu__details{display:block;position:relative;flex:1 1 100%;height:100%;border-bottom-right-radius:16dp;background-color:rgba(190,184,219,.1)}.config-debug{display:block;position:relative;width:100%;max-height:100%;padding:8dp}.config-debug__scroll{display:block;position:relative;width:100%;max-height:100%;overflow-y:auto}.config-debug-option{color:#ccc;transition:color .05s linear-in-out,background-color .05s linear-in-out,opacity .05s linear-in-out;border-bottom-width:1.1dp;border-bottom-color:rgba(255,255,255,.1);display:block;position:relative;flex-direction:column;width:100%;height:auto;padding:12dp 4dp;background-color:rgba(0,0,0,0)}.config-debug-option svg{image-color:#ccc}.config-debug-option svg{transition:image-color .05s linear-in-out,background-color .05s linear-in-out}.config-debug-option:focus:not(:disabled,[disabled]),.config-debug-option:focus-visible:not(:disabled,[disabled]),.config-debug-option:hover:not(:disabled,[disabled]){color:#f2f2f2;background-color:rgba(190,184,219,.1)}.config-debug-option:focus:not(:disabled,[disabled]) svg,.config-debug-option:focus-visible:not(:disabled,[disabled]) svg,.config-debug-option:hover:not(:disabled,[disabled]) svg{image-color:#f2f2f2}.config-debug-option:disabled,.config-debug-option[disabled]{opacity:.5}.config-debug-option .icon-button{margin-left:8dp}.config-debug__option-split{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.config-debug-option__label{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;padding:4dp 16dp 12dp;width:auto;height:auto;white-space:nowrap}.config-debug__option-controls{display:block;position:relative;flex:1 1 auto;height:auto;width:auto;max-width:800dp;padding:0 12dp}.config-debug__option-trigger{flex:1 1 auto}.config-debug__select-wrapper{display:flex;position:relative;flex-direction:row;align-items:center;justify-content:flex-start;flex:1 1 100%;width:auto;max-width:800dp;height:auto;padding:4dp}.config-debug__select-wrapper .config-debug__select-label{padding-right:16dp;flex:auto;width:196dp}.config-debug__select-wrapper .config-debug__select-label>div{display:inline;width:auto;height:auto}.config-debug__select-wrapper input{display:block;position:relative;box-sizing:border-box;padding:0;flex:1 1 100%;width:auto;height:20dp;margin:auto 0}.config-debug__select-wrapper select{transition:color .05s linear-in-out,background-color .05s linear-in-out,opacity .05s linear-in-out,border-color .05s linear-in-out;border-width:1.1dp;border-color:rgba(255,255,255,.5);display:block;position:relative;box-sizing:border-box;padding:0;flex:1 1 100%;width:auto;height:48dp;border-radius:12dp;background-color:rgba(255,255,255,.05);cursor:pointer;align-items:center;justify-content:flex-start;padding:14dp}.config-debug__select-wrapper select svg{transition:image-color .05s linear-in-out,background-color .05s linear-in-out}.config-debug__select-wrapper select:hover,.config-debug__select-wrapper select:focus{border-width:1.1dp;border-color:rgba(255,255,255,.8);background-color:rgba(255,255,255,.2)}.config-debug__select-wrapper select selectvalue{display:inline;margin:auto 0;height:auto}.config-debug__select-wrapper select selectbox{border-width:1.1dp;border-color:rgba(255,255,255,.8);background-color:#191622;padding:4dp 0;margin-top:2dp;border-radius:12dp}.config-debug__select-wrapper select selectbox option{transition:color .05s linear-in-out,background-color .05s linear-in-out;padding:8dp 12dp;background-color:rgba(0,0,0,0);color:#ccc;font-weight:400}.config-debug__select-wrapper select selectbox option:hover,.config-debug__select-wrapper select selectbox option:focus{background-color:rgba(255,255,255,.2)}.config-debug__select-wrapper select selectbox option:hover:not(:checked){cursor:pointer}.config-debug__select-wrapper select selectbox option:checked{color:#fff;background-color:rgba(255,255,255,.05)}body{box-sizing:border-box;color:#f2f2f2;font-family:chiaro}.rmlui-window{opacity:1}.rmlui-window--hidden{opacity:0}.rmlui-window:not([mouse-active]){pointer-events:none}*,*:before,*:after{box-sizing:border-box}button{background-color:#7a2ac6}@keyframes blue-pulse{0%{color:#17d6e8}50%{color:#a2eff6}100%{color:#17d6e8}}@keyframes blue-pulse-with-border{0%{border-color:#17d6e8;color:#17d6e8}50%{border-color:#a2eff6;color:#a2eff6}100%{border-color:#17d6e8;color:#17d6e8}}@keyframes blue-pulse-background{0%{background-color:#17d6e8}50%{background-color:#a2eff6}100%{background-color:#17d6e8}} +h1{font-size:68dp;letter-spacing:4.76dp;line-height:68dp;font-style:normal;font-weight:700}h2{font-size:52dp;letter-spacing:3.64dp;line-height:52dp;font-style:normal;font-weight:700}h3,.mod-details__title,.tab{font-size:36dp;letter-spacing:2.52dp;line-height:36dp;font-style:normal;font-weight:700}.label-lg,.menu-list-item__label,.button--large{font-size:36dp;letter-spacing:3.96dp;line-height:36dp;font-style:normal;font-weight:700}.label-md,.config-debug-option__label,.mod-details__authors,.mod-details__description,.mod-details__version,.mod-menu__list-entry-name,.button,.config-option__title,.config-option--hz .config-option__title,.config-group__title,.control-option__label{font-size:28dp;letter-spacing:3.08dp;line-height:28dp;font-style:normal;font-weight:700}.label-sm,.config-debug__select-wrapper .config-debug__select-label,.subtitle-title__disclaimer,.config-option__range-label,.config-option-range__label,.config-option__radio-tabs .config-option__tab-label,.config-option__list .config-option__tab-label,.centered-page__controls>label{font-size:20dp;letter-spacing:2.8dp;line-height:20dp;font-style:normal;font-weight:700;text-transform:uppercase}.config-option__details{font-size:18dp;letter-spacing:2.52dp;line-height:18dp;font-style:normal;font-weight:400}body,.config-debug__select-wrapper select,.config-debug__select-wrapper input,.mod-menu__list-entry-description,.config-description__contents,.config-option-dropdown__select,.config-option-dropdown__wrapper,.config-option-textfield__select,.config-option-textfield__wrapper,.config__wrapper p{font-size:20dp;letter-spacing:0dp;line-height:20dp;font-style:normal;font-weight:400}.toggle__icon{font-family:promptfont;font-size:56dp;font-style:normal;font-weight:400;line-height:56dp}.prompt-font{font-family:promptfont;font-size:40dp;font-style:normal;font-weight:400;line-height:40dp}.prompt-font-sm,.input-viz__mappings div{font-family:promptfont;font-size:32dp;font-style:normal;font-weight:400;line-height:32dp}.nav-vert,.nav-dir,.nav-all,.config-debug__select-wrapper select selectbox option,.config-debug__select-wrapper select,.config-debug__select-wrapper input,.mod-menu__list-entry,.toggle,.subtitle-title:not(:disabled,[disabled]),.menu-list-item:not(:disabled,[disabled]),.icon-button:not([disabled]),.button:not([disabled]),.button,.config-option-dropdown__select selectbox option,.config-option-dropdown__wrapper selectbox option,.config-option-textfield__select selectbox option,.config-option-textfield__wrapper selectbox option,.config-option-dropdown__select,.config-option-dropdown__wrapper,.config-option-textfield__select,.config-option-textfield__wrapper,.config-option__radio-tabs input.radio,.config-option__list input.radio,.config-option__radio-tabs .config-option__checkbox,.config-option__list .config-option__checkbox,.tab,.control-option__binding:not([disabled]){nav-up:auto;nav-down:auto}.nav-horiz,.nav-dir,.nav-all,.config-debug__select-wrapper select selectbox option,.config-debug__select-wrapper select,.config-debug__select-wrapper input,.mod-menu__list-entry,.toggle,.subtitle-title:not(:disabled,[disabled]),.menu-list-item:not(:disabled,[disabled]),.icon-button:not([disabled]),.button:not([disabled]),.button,.config-option-dropdown__select selectbox option,.config-option-dropdown__wrapper selectbox option,.config-option-textfield__select selectbox option,.config-option-textfield__wrapper selectbox option,.config-option-dropdown__select,.config-option-dropdown__wrapper,.config-option-textfield__select,.config-option-textfield__wrapper,.config-option__radio-tabs input.radio,.config-option__list input.radio,.config-option__radio-tabs .config-option__checkbox,.config-option__list .config-option__checkbox,.tab,.control-option__binding:not([disabled]){nav-right:auto;nav-left:auto}.nav-foc,.nav-all,.config-debug__select-wrapper select selectbox option,.config-debug__select-wrapper select,.config-debug__select-wrapper input,.mod-menu__list-entry,.toggle,.subtitle-title:not(:disabled,[disabled]),.menu-list-item:not(:disabled,[disabled]),.icon-button:not([disabled]),.button:not([disabled]),.button,.config-option-dropdown__select selectbox option,.config-option-dropdown__wrapper selectbox option,.config-option-textfield__select selectbox option,.config-option-textfield__wrapper selectbox option,.config-option-dropdown__select,.config-option-dropdown__wrapper,.config-option-textfield__select,.config-option-textfield__wrapper,.config-option__radio-tabs input.radio,.config-option__list input.radio,.config-option__radio-tabs .config-option__checkbox,.config-option__list .config-option__checkbox,.tab,.control-option__binding:not([disabled]){focus:auto;tab-index:auto}h1{font-size:68dp;letter-spacing:4.76dp;line-height:68dp;font-style:normal;font-weight:700}h2{font-size:52dp;letter-spacing:3.64dp;line-height:52dp;font-style:normal;font-weight:700}h3,.mod-details__title,.tab{font-size:36dp;letter-spacing:2.52dp;line-height:36dp;font-style:normal;font-weight:700}.label-lg,.menu-list-item__label,.button--large{font-size:36dp;letter-spacing:3.96dp;line-height:36dp;font-style:normal;font-weight:700}.label-md,.config-debug-option__label,.mod-details__authors,.mod-details__description,.mod-details__version,.mod-menu__list-entry-name,.button,.config-option__title,.config-option--hz .config-option__title,.config-group__title,.control-option__label{font-size:28dp;letter-spacing:3.08dp;line-height:28dp;font-style:normal;font-weight:700}.label-sm,.config-debug__select-wrapper .config-debug__select-label,.subtitle-title__disclaimer,.config-option__range-label,.config-option-range__label,.config-option__radio-tabs .config-option__tab-label,.config-option__list .config-option__tab-label,.centered-page__controls>label{font-size:20dp;letter-spacing:2.8dp;line-height:20dp;font-style:normal;font-weight:700;text-transform:uppercase}.config-option__details{font-size:18dp;letter-spacing:2.52dp;line-height:18dp;font-style:normal;font-weight:400}body,.config-debug__select-wrapper select,.config-debug__select-wrapper input,.mod-menu__list-entry-description,.config-description__contents,.config-option-dropdown__select,.config-option-dropdown__wrapper,.config-option-textfield__select,.config-option-textfield__wrapper,.config__wrapper p{font-size:20dp;letter-spacing:0dp;line-height:20dp;font-style:normal;font-weight:400}.toggle__icon{font-family:promptfont;font-size:56dp;font-style:normal;font-weight:400;line-height:56dp}.prompt-font{font-family:promptfont;font-size:40dp;font-style:normal;font-weight:400;line-height:40dp}.prompt-font-sm,.input-viz__mappings div{font-family:promptfont;font-size:32dp;font-style:normal;font-weight:400;line-height:32dp}.nav-vert,.nav-dir,.nav-all,.config-debug__select-wrapper select selectbox option,.config-debug__select-wrapper select,.config-debug__select-wrapper input,.mod-menu__list-entry,.toggle,.subtitle-title:not(:disabled,[disabled]),.menu-list-item:not(:disabled,[disabled]),.icon-button:not([disabled]),.button:not([disabled]),.button,.config-option-dropdown__select selectbox option,.config-option-dropdown__wrapper selectbox option,.config-option-textfield__select selectbox option,.config-option-textfield__wrapper selectbox option,.config-option-dropdown__select,.config-option-dropdown__wrapper,.config-option-textfield__select,.config-option-textfield__wrapper,.config-option__radio-tabs input.radio,.config-option__list input.radio,.config-option__radio-tabs .config-option__checkbox,.config-option__list .config-option__checkbox,.tab,.control-option__binding:not([disabled]){nav-up:auto;nav-down:auto}.nav-horiz,.nav-dir,.nav-all,.config-debug__select-wrapper select selectbox option,.config-debug__select-wrapper select,.config-debug__select-wrapper input,.mod-menu__list-entry,.toggle,.subtitle-title:not(:disabled,[disabled]),.menu-list-item:not(:disabled,[disabled]),.icon-button:not([disabled]),.button:not([disabled]),.button,.config-option-dropdown__select selectbox option,.config-option-dropdown__wrapper selectbox option,.config-option-textfield__select selectbox option,.config-option-textfield__wrapper selectbox option,.config-option-dropdown__select,.config-option-dropdown__wrapper,.config-option-textfield__select,.config-option-textfield__wrapper,.config-option__radio-tabs input.radio,.config-option__list input.radio,.config-option__radio-tabs .config-option__checkbox,.config-option__list .config-option__checkbox,.tab,.control-option__binding:not([disabled]){nav-right:auto;nav-left:auto}.nav-foc,.nav-all,.config-debug__select-wrapper select selectbox option,.config-debug__select-wrapper select,.config-debug__select-wrapper input,.mod-menu__list-entry,.toggle,.subtitle-title:not(:disabled,[disabled]),.menu-list-item:not(:disabled,[disabled]),.icon-button:not([disabled]),.button:not([disabled]),.button,.config-option-dropdown__select selectbox option,.config-option-dropdown__wrapper selectbox option,.config-option-textfield__select selectbox option,.config-option-textfield__wrapper selectbox option,.config-option-dropdown__select,.config-option-dropdown__wrapper,.config-option-textfield__select,.config-option-textfield__wrapper,.config-option__radio-tabs input.radio,.config-option__list input.radio,.config-option__radio-tabs .config-option__checkbox,.config-option__list .config-option__checkbox,.tab,.control-option__binding:not([disabled]){focus:auto;tab-index:auto}*{box-sizing:border-box}hr{display:block;padding:1.5dp;background:#08070d}body{color:#fff;font-family:chiaro;font-size:20dp;font-style:normal;font-weight:normal}div#window{position:relative;box-sizing:border-box;width:100%;height:100%;border-color:rgba(255,255,255,.2);background-color:#121018}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;text-align:left;cursor:text}textarea{padding:14dp 12dp 10dp;text-align:left;cursor:text}input.text,input.password,select,textarea{height:auto}table input.text{box-sizing:border-box;width:100%;height:auto;margin:0;border-width:1.1dp;border-color:#000;background-color:#fff;font-size:15dp;line-height:1;decorator:none}input.radio{flex:0;width:0dp;nav-up:auto;nav-right:auto;nav-down:auto;nav-left:auto;tab-index:auto;focus:auto}input.checkbox{width:20dp;height:20dp;nav-up:auto;nav-right:auto;nav-down:auto;nav-left:auto;tab-index:auto;focus:auto}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;position:relative;flex:1 1 100%;flex-direction:column;width:100%;max-width:1692.4444444444dp;height:100%;margin:auto;border-width:1.1dp;border-radius:16dp;border-color:rgba(255,255,255,.2);background:rgba(8,7,13,.9)}.centered-page__modal>.tabs{display:flex;position:relative;flex:1 1 100%;flex-direction:column;width:100%;max-width:1692.4444444444dp;height:100%;margin:auto}.centered-page__modal panels{flex:1 1 100%}.centered-page__controls{display:flex;position:absolute;bottom:24dp;flex-direction:row;align-items:center;justify-content:center;width:100%;max-width:1692.4444444444dp;height:auto;margin:0 auto}.centered-page__controls>label{display:inline-block;align-items:center;justify-content:space-between;width:auto;height:24dp}.centered-page__controls>label:not(:last-child){margin-right:40dp}.centered-page__controls>label>span:first-child{margin-right:4dp}.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}[cur-binding-slot="0"] .control-option--active .control-option__binding[bind-slot="0"]{border-color:#f86039}[cur-binding-slot="0"] .control-option--active .control-option__binding[bind-slot="0"] .control-option__binding-icon{opacity:0}[cur-binding-slot="0"] .control-option--active .control-option__binding[bind-slot="0"] .control-option__binding-recording{opacity:1}[cur-binding-slot="1"] .control-option--active .control-option__binding[bind-slot="1"]{border-color:#f86039}[cur-binding-slot="1"] .control-option--active .control-option__binding[bind-slot="1"] .control-option__binding-icon{opacity:0}[cur-binding-slot="1"] .control-option--active .control-option__binding[bind-slot="1"] .control-option__binding-recording{opacity:1}.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:2 1 400dp;flex-direction:row;align-items:center;justify-content:space-between;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;position:relative;flex:1 1 100%;align-items:center;justify-content:center;width:100%;height:56dp;margin:0 4dp;padding:8dp;border-width:1.1dp;border-radius:8dp;border-color:rgba(190,184,219,.1);background-color:rgba(190,184,219,.1)}.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;border-color:#f2f2f2;background-color:rgba(255,255,255,.1)}.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}.control-option__binding-icon{transition:color .05s linear-in-out,background-color .05s linear-in-out,opacity .05s linear-in-out;opacity:1}@keyframes control-option__binding-recording-scale{0%{transform:scale(1)}50%{transform:scale(0.85)}100%{transform:scale(1)}}.control-option__binding-recording{transition:color .05s linear-in-out,background-color .05s linear-in-out,opacity .05s linear-in-out;display:flex;position:absolute;top:0;right:0;bottom:0;left:0;align-items:center;justify-content:center;opacity:0}.control-option__binding-recording .control-option__binding-circle{width:24dp;height:24dp;animation:1.5s sine-in-out infinite control-option__binding-recording-scale;border-radius:24dp;background-color:#f86039}.control-option__binding-recording .control-option__binding-edge{position:absolute;top:50%;left:50%;width:36dp;height:36dp;transform:translate(-50%, -50%)}.control-option__binding-recording .control-option__binding-edge>svg.control-option__binding-edge-svg{width:36dp;height:36dp;image-color:#f86039}.tabs tabs{display:flex;flex-direction:row;align-items:center;justify-content:flex-start}.tab{display:block;position:relative;margin:0;padding:20dp 24dp;transition:color .05s linear-in-out;opacity:.9;background-color:rgba(0,0,0,0);color:rgba(255,255,255,.6)}.tab:selected{color:#f2f2f2}.tab:selected .tab__indicator{background-color:rgba(255,255,255,.6)}.tab:selected:hover{cursor:default}.rmlui-window:not([mouse-active]) .tab:focus{transition:none;animation:blue-pulse .75s infinite}.rmlui-window:not([mouse-active]) .tab:focus:selected .tab__indicator{animation:blue-pulse-background .75s infinite}.tab:focus,.tab:hover{opacity:1;color:#f2f2f2;cursor:pointer}.tab__indicator{position:absolute;right:0;bottom:2dp;left:0;height:2dp;background-color:rgba(0,0,0,0)}.config__icon-buttons{display:flex;position:absolute;top:8dp;right:0dp;flex-direction:row;align-items:center;justify-content:flex-end;width:auto}.config__icon-buttons .icon-button{margin:0 8dp}.config__form{border-top-width:1.1dp;border-top-color:rgba(255,255,255,.1);display:flex;flex:1 1 100%;flex-direction:column;justify-content:space-between;width:100%;height:100%;border-bottom-right-radius:16dp;border-bottom-left-radius:16dp}.config__wrapper{flex:1 1 100%;width:auto;height:auto;padding:16dp;border-radius:0dp;border-bottom-right-radius:16dp;border-bottom-left-radius:16dp;background-color:rgba(0,0,0,.35);text-align:left}.config__wrapper p{padding:16dp;line-height:28dp;white-space:pre-line}.config__wrapper p b{color:#b97df2}.config__wrapper p i{color:#e9cd35;font-style:normal}.config__hz-wrapper{display:flex;flex:1 1 100%;flex-direction:row;width:100%;height:100%;border-radius:0dp;text-align:left}.config__header,.config__footer{display:flex;align-items:center;justify-content:space-between;width:100%;background-color:rgba(0,0,0,.35)}.config__header{border-bottom-width:1.1dp;border-bottom-color:rgba(255,255,255,.1);padding:12dp 20dp}.config__footer{border-top-width:1.1dp;border-top-color:rgba(255,255,255,.1);padding:20dp 20dp;border-bottom-right-radius:16dp;border-bottom-left-radius:16dp}.config__header-left{display:flex;flex:1 1 auto;flex-direction:row}.config__header-left>:not(:first-child){margin-left:8dp}.config__row{display:flex;flex-direction:row}.config-group{position:relative}.config-group--scrollable{flex:1 1 100%;width:auto;height:auto;padding:0 0 0 16dp}.config-group--scrollable .config-group__wrapper{max-height:100%;overflow-y:auto}.config-group__title{color:#b97df2}.config-group__title--hidden{display:none}.config-group__wrapper{padding:16dp 0}.config-option{display:flex;flex:1;flex-direction:column;align-items:flex-start;justify-content:flex-start;margin:16dp 0dp 24dp}.config-option--hz{flex-direction:row-reverse;align-items:center;margin-top:4dp;margin-bottom:4dp}.config-option--hz .config-option__title{flex:1 1 100%}.config-option--hz .config-option__list{flex:1 1 auto;width:auto}.config-option--hz:first-child{margin-top:0}.config-option--hz:last-child{margin-bottom:0}.config-option__title{padding:0 12dp}.config-option__radio-tabs,.config-option__list{display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;width:100%;height:auto;padding:0}.config-option__radio-tabs input:first-of-type,.config-option__list input:first-of-type{nav-left:none}.config-option__radio-tabs input:last-of-type,.config-option__list input:last-of-type{nav-right:none}.config-option__radio-tabs .config-option__tab-label,.config-option__list .config-option__tab-label{transition:color .05s linear-in-out,background-color .05s linear-in-out,opacity .05s linear-in-out;display:block;position:relative;height:auto;margin:4dp 12dp 0;padding:8dp 0;color:rgba(255,255,255,.6);tab-index:none}.config-option__radio-tabs .config-option__tab-label:hover,.config-option__list .config-option__tab-label:hover{color:#f2f2f2;cursor:pointer}.config-option__radio-tabs .config-option__checkbox-wrapper,.config-option__list .config-option__checkbox-wrapper{transition:color .05s linear-in-out,background-color .05s linear-in-out,opacity .05s linear-in-out;width:32dp;height:32dp;margin:4dp 12dp 0;border-radius:8dp;opacity:.5;background-color:rgba(190,184,219,.1);cursor:pointer}.config-option__radio-tabs .config-option__checkbox-wrapper:hover,.config-option__list .config-option__checkbox-wrapper:hover{opacity:1}.config-option__radio-tabs .config-option__checkbox-wrapper[checked],.config-option__list .config-option__checkbox-wrapper[checked]{background-color:#33f}.config-option__radio-tabs .config-option__checkbox,.config-option__list .config-option__checkbox{transition:color .05s linear-in-out,background-color .05s linear-in-out,opacity .05s linear-in-out;visibility:visible;width:0;height:0}.config-option__radio-tabs input.radio,.config-option__list input.radio{transition:color .05s linear-in-out,background-color .05s linear-in-out,opacity .05s linear-in-out;visibility:visible;width:0;height:0}.config-option__radio-tabs input.radio:not(:disabled):checked+.config-option__tab-label,.config-option__list input.radio:not(:disabled):checked+.config-option__tab-label{border-bottom:1dp;border-color:#f2f2f2;color:#f2f2f2}.config-option__radio-tabs input.radio:not(:disabled):checked+.config-option__tab-label:hover,.config-option__list input.radio:not(:disabled):checked+.config-option__tab-label:hover{cursor:default}.rmlui-window:not([mouse-active]) .config-option__radio-tabs input.radio:not(:disabled):focus+.config-option__tab-label,.rmlui-window:not([mouse-active]) .config-option__list input.radio:not(:disabled):focus+.config-option__tab-label{transition:none;animation:blue-pulse .75s infinite;border-color:#17d6e8;color:#17d6e8}.config-option__radio-tabs input.radio:not(:disabled):focus+.config-option__tab-label,.config-option__radio-tabs input.radio:not(:disabled):hover+.config-option__tab-label,.config-option__list input.radio:not(:disabled):focus+.config-option__tab-label,.config-option__list input.radio:not(:disabled):hover+.config-option__tab-label{color:#f2f2f2}.config-option__radio-tabs input.radio:disabled+.config-option__tab-label,.config-option__list input.radio:disabled+.config-option__tab-label{opacity:.5}.config-option__radio-tabs input.radio:disabled+.config-option__tab-label:hover,.config-option__list input.radio:disabled+.config-option__tab-label:hover{cursor:default}.config-option__radio-tabs input.range slidertrack,.config-option__list input.range slidertrack{transition:color .05s linear-in-out,background-color .05s linear-in-out;height:2dp;margin-top:8dp;background-color:rgba(255,255,255,.2)}.config-option__radio-tabs input.range sliderbar,.config-option__list input.range sliderbar{transition:color .05s linear-in-out,background-color .05s linear-in-out;width:16dp;height:16dp;margin-top:1dp;margin-right:-8dp;margin-left:-8dp;transition:background-color .05s linear-in-out;border-radius:8dp;background-color:#ccc}.rmlui-window:not([mouse-active]) .config-option__radio-tabs input.range sliderbar:focus,.rmlui-window:not([mouse-active]) .config-option__list input.range sliderbar:focus{border-width:1.1dp;border-color:#33f;animation:blue-pulse-background .75s infinite}.config-option__radio-tabs input.range sliderbar:hover,.config-option__list input.range sliderbar:hover{background-color:#f2f2f2;cursor:pointer}.config-option__radio-tabs input.range sliderbar:active,.config-option__radio-tabs input.range slidertrack:active+sliderbar,.config-option__list input.range sliderbar:active,.config-option__list input.range slidertrack:active+sliderbar{background-color:#17d6e8}.config-option__radio-tabs input.range sliderarrowdec,.config-option__radio-tabs input.range sliderarrowinc,.config-option__list input.range sliderarrowdec,.config-option__list input.range sliderarrowinc{display:none}.config-option__details{height:18dp;margin:14dp 12dp 0;color:#b97df2}.config-option-color{width:100%;max-width:360dp;height:auto;margin-top:4dp;margin-left:12dp;padding:0}.config-option-color__preview-wrapper{display:flex;flex-direction:row;width:100%;height:72dp}.config-option-color__preview-block{display:block;width:88dp;height:100%;border-width:1.1dp;border-radius:16dp;border-color:rgba(255,255,255,.2)}.config-option-color__hsv-wrapper{display:flex;flex:1 1 100%;flex-direction:column;width:auto;height:auto;padding-left:8dp}.config-option-color__hsv-wrapper .config-option-range{flex:1 1 auto}.config-option-color__hsv-wrapper .config-option-range label{min-width:72dp}.config-option-color__hsv-wrapper .config-option-range input{flex:1 1 auto}.config-option-range{display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;width:100%;max-width:360dp;height:auto;margin-top:4dp;padding:0}.config-option-range__label{display:block;width:56dp;margin:0 12dp;margin-right:16dp;padding:0;color:#f2f2f2;tab-index:none}.config-option-range__range-input{flex:1}.config-option-range__range-input slidertrack{transition:color .05s linear-in-out,background-color .05s linear-in-out;height:2dp;margin-top:8dp;background-color:rgba(255,255,255,.2)}.config-option-range__range-input sliderbar{transition:color .05s linear-in-out,background-color .05s linear-in-out;width:16dp;height:16dp;margin-top:1dp;margin-right:-8dp;margin-left:-8dp;transition:background-color .05s linear-in-out;border-radius:8dp;background-color:#ccc}.rmlui-window:not([mouse-active]) .config-option-range__range-input sliderbar:focus{border-width:1.1dp;border-color:#33f;animation:blue-pulse-background .75s infinite}.config-option-range__range-input sliderbar:hover{background-color:#f2f2f2;cursor:pointer}.config-option-range__range-input sliderbar:active,.config-option-range__range-input slidertrack:active+sliderbar{background-color:#17d6e8}.config-option-range__range-input sliderarrowdec,.config-option-range__range-input sliderarrowinc{display:none}.config-option__range-wrapper{max-width:360dp;margin-top:4dp}.config-option__range-label{display:block;width:56dp;margin:0 12dp;margin-right:16dp;padding:0;color:#f2f2f2;tab-index:none}.config-option-dropdown,.config-option-textfield{display:flex;position:relative;flex:1 1 100%;flex-direction:row;align-items:center;justify-content:flex-start;width:auto;height:auto;padding:8dp 24dp 8dp 12dp}.config-option-dropdown__select,.config-option-textfield__select{display:block;height:48dp;padding:14dp;cursor:pointer}.config-option-dropdown__wrapper,.config-option-textfield__wrapper{display:flex;align-items:center;justify-content:flex-start;width:100%;height:auto;padding:2dp 0 12dp;cursor:text}.config-option-dropdown__wrapper input,.config-option-textfield__wrapper input{width:100%;height:auto;vertical-align:middle}.config-option-dropdown__select,.config-option-dropdown__wrapper,.config-option-textfield__select,.config-option-textfield__wrapper{transition:color .05s linear-in-out,background-color .05s linear-in-out,opacity .05s linear-in-out,border-color .05s linear-in-out;border-width:1.1dp;border-color:rgba(255,255,255,.5);position:relative;box-sizing:border-box;flex:1 1 100%;width:auto;border-radius:12dp;background-color:rgba(255,255,255,.05)}.config-option-dropdown__select svg,.config-option-dropdown__wrapper svg,.config-option-textfield__select svg,.config-option-textfield__wrapper svg{transition:image-color .05s linear-in-out,background-color .05s linear-in-out}.config-option-dropdown__select:hover,.config-option-dropdown__select:focus,.config-option-dropdown__wrapper:hover,.config-option-dropdown__wrapper:focus,.config-option-textfield__select:hover,.config-option-textfield__select:focus,.config-option-textfield__wrapper:hover,.config-option-textfield__wrapper:focus{border-width:1.1dp;border-color:rgba(255,255,255,.8);background-color:rgba(255,255,255,.2)}.config-option-dropdown__select selectvalue,.config-option-dropdown__wrapper selectvalue,.config-option-textfield__select selectvalue,.config-option-textfield__wrapper selectvalue{display:inline;height:auto;margin:auto 0}.config-option-dropdown__select selectbox,.config-option-dropdown__wrapper selectbox,.config-option-textfield__select selectbox,.config-option-textfield__wrapper selectbox{border-width:1.1dp;border-color:rgba(255,255,255,.2);margin-top:2dp;padding:4dp 0;border-radius:12dp;background-color:#191622}.config-option-dropdown__select selectbox option,.config-option-dropdown__wrapper selectbox option,.config-option-textfield__select selectbox option,.config-option-textfield__wrapper selectbox option{transition:color .05s linear-in-out,background-color .05s linear-in-out;padding:8dp 12dp;background-color:rgba(0,0,0,0);color:#ccc;font-weight:400}.config-option-dropdown__select selectbox option:hover,.config-option-dropdown__select selectbox option:focus,.config-option-dropdown__wrapper selectbox option:hover,.config-option-dropdown__wrapper selectbox option:focus,.config-option-textfield__select selectbox option:hover,.config-option-textfield__select selectbox option:focus,.config-option-textfield__wrapper selectbox option:hover,.config-option-textfield__wrapper selectbox option:focus{background-color:rgba(255,255,255,.2)}.config-option-dropdown__select selectbox option:hover:not(:checked),.config-option-dropdown__wrapper selectbox option:hover:not(:checked),.config-option-textfield__select selectbox option:hover:not(:checked),.config-option-textfield__wrapper selectbox option:hover:not(:checked){cursor:pointer}.config-option-dropdown__select selectbox option:checked,.config-option-dropdown__wrapper selectbox option:checked,.config-option-textfield__select selectbox option:checked,.config-option-textfield__wrapper selectbox option:checked{background-color:rgba(255,255,255,.05);color:#fff}.config-description{flex:1 1 100%;width:auto;height:auto;padding:16dp;border-radius:0dp;border-bottom-right-radius:16dp;border-bottom-left-radius:16dp;background-color:rgba(0,0,0,.35);text-align:left}.config-description__contents{padding:16dp;line-height:28dp;white-space:pre-line}.config-description__contents b{color:#b97df2}.config-description__contents i{color:#e9cd35;font-style:normal}.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;min-width:640dp;height:100%}.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;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:rgba(0,0,0,.35)}.input-config__visual{display:flex;position:absolute;top:16dp;right:16dp;bottom:16dp;left:16dp;flex-direction:column;border-radius:108dp;background-color:rgba(255,255,255,.05)}.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 .05s linear-in-out,background-color .05s linear-in-out,opacity .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:.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{margin-top:auto}.input-viz__button--A svg{image-color:#33f}.input-viz__button--B svg{image-color:#45d043}.input-viz__button--Start svg{image-color:#f86039}.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-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__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:#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;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:rgba(185,125,242,.8);background-color:rgba(185,125,242,.05);color:#ccc;transition:color .05s linear-in-out,background-color .05s linear-in-out;display:block;width:auto;height:auto;padding:23dp;border-width:1.1dp;border-radius:12dp}.button:focus,.button:hover{border-color:#b97df2;background-color:rgba(185,125,242,.3);color:#f2f2f2}.button:disabled,.button[disabled]{color:rgba(255,255,255,.6)}.button:active{background-color:rgba(185,125,242,.2);color:#f5f5f5}.button--primary{border-color:rgba(185,125,242,.8);background-color:rgba(185,125,242,.05);color:#ccc}.button--primary:focus,.button--primary:hover{border-color:#b97df2;background-color:rgba(185,125,242,.3);color:#f2f2f2}.button--primary:disabled,.button--primary[disabled]{color:rgba(255,255,255,.6)}.button--primary:active{background-color:rgba(185,125,242,.2);color:#f5f5f5}.button--secondary{border-color:rgba(23,214,232,.8);background-color:rgba(23,214,232,.05);color:#ccc}.button--secondary:focus,.button--secondary:hover{border-color:#17d6e8;background-color:rgba(23,214,232,.3);color:#f2f2f2}.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{border-color:rgba(242,242,242,.8);background-color:rgba(242,242,242,.05);color:#ccc}.button--tertiary:focus,.button--tertiary:hover{border-color:#f2f2f2;background-color:rgba(242,242,242,.3);color:#f2f2f2}.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{border-color:rgba(69,208,67,.8);background-color:rgba(69,208,67,.05);color:#ccc}.button--success:focus,.button--success:hover{border-color:#45d043;background-color:rgba(69,208,67,.3);color:#f2f2f2}.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{border-color:rgba(248,96,57,.8);background-color:rgba(248,96,57,.05);color:#ccc}.button--error:focus,.button--error:hover{border-color:#f86039;background-color:rgba(248,96,57,.3);color:#f2f2f2}.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{border-color:rgba(233,205,53,.8);background-color:rgba(233,205,53,.05);color:#ccc}.button--warning:focus,.button--warning:hover{border-color:#e9cd35;background-color:rgba(233,205,53,.3);color:#f2f2f2}.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;width:53.8dp;min-width:53.8dp;max-width:53.8dp;height:53.8dp;min-height:53.8dp;max-height:53.8dp;border-width:1.1dp;border-radius:26.9dp;border-color:rgba(0,0,0,0);background-color:rgba(0,0,0,0)}.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{border-color:rgba(185,125,242,.8);background-color:rgba(185,125,242,.05)}.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{border-color:rgba(23,214,232,.8);background-color:rgba(23,214,232,.05)}.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{border-color:rgba(242,242,242,.8);background-color:rgba(242,242,242,.05)}.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{border-color:rgba(69,208,67,.8);background-color:rgba(69,208,67,.05)}.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--error{border-color:rgba(248,96,57,.8);background-color:rgba(248,96,57,.05)}.icon-button--error:focus,.icon-button--error:hover{border-color:#f86039;background-color:rgba(248,96,57,.3)}.icon-button--error:active{background-color:rgba(248,96,57,.2)}.icon-button--warning{border-color:rgba(233,205,53,.8);background-color:rgba(233,205,53,.05)}.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;position:relative;flex-direction:row;justify-content:space-between;width:100%;height:100%;background-color:#08070d}.launcher__vertical-split{display:flex;position:absolute;top:0;right:50%;bottom:0;left:0;flex-direction:column;align-items:flex-start;justify-content:space-between}.launcher__vertical-split--right{right:0;left:50%;align-items:flex-end}@keyframes slide-mm-bg-over{0%{transform:translateX(100dp)}100%{transform:translateX(0dp)}}.launcher__background-wrapper{display:flex;position:absolute;top:-55vw;right:-100%;bottom:-50vw;left:-70vw;align-items:center;justify-content:flex-start;transform:translateX(0dp);animation:25s cubic-out 1 slide-mm-bg-over}@keyframes fade-mm-in{0%{opacity:0}100%{opacity:.1}}.launcher__background-mm{position:absolute;top:0;bottom:0;left:0;width:auto;height:100%;animation:2.5s cubic-in-out 1 fade-mm-in;opacity:.1}.launcher__title-quadrant{flex:1 1 auto;width:auto;height:auto;padding-top:96dp;padding-left:96dp}.launcher__title-quadrant--right{padding-right:96dp;padding-left:0}.launcher__content-quadrant{display:flex;position:relative;flex:1 1 100%;flex-direction:column;align-items:flex-start;justify-content:flex-end;width:100%;height:auto;padding:32dp}.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{flex-direction:row-reverse;align-content:flex-end}.menu-list-item--right .menu-list-item__bullet{margin-left:12dp;opacity:1}.menu-list-item--right.menu-list-item:focus:not(:disabled,[disabled]),.menu-list-item--right.menu-list-item:hover:not(:disabled,[disabled]){decorator:horizontal-gradient(#7A2AC600 #DABAF714)}.menu-list-item:focus:not(:disabled,[disabled]),.menu-list-item:hover:not(:disabled,[disabled]){color:#b97df2;decorator:horizontal-gradient(#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{margin-right:12dp;opacity:0}.subtitle-title{display:block;position:relative;flex-direction:column;align-content:flex-start;align-items:flex-start;width:auto;height:auto;padding:0;background-color:rgba(0,0,0,0);color:#ccc;text-align:left;cursor:pointer}.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;position:relative;flex-direction:row;align-items:center;justify-content:space-between;width:162dp;height:72dp;border-radius:36dp;opacity:.9;background:rgba(0,0,0,0);cursor:pointer}.toggle:hover,.toggle:focus-visible,.toggle:focus{opacity:1;background-color:rgba(23,214,232,.3)}.toggle:active{opacity:1;background-color:rgba(23,214,232,.05)}.toggle .toggle__border{position:absolute;top:1.1dp;right:1.1dp;bottom:1.1dp;left:1.1dp;border-width:1.1dp;border-color:#a2eff6;display:block;border-radius:36dp}.toggle .toggle__floater{position:absolute;top:50%;left:4dp;width:80dp;height:64dp;transform:translateY(-50%);border-radius:32dp;background:#25a1ad}.toggle--checked .toggle__floater{left:78dp}.toggle--checked .toggle__icon.toggle__icon--left{opacity:.9;color:#a2eff6}.toggle--checked .toggle__icon.toggle__icon--right{opacity:1;color:#f2f2f2}.toggle__icons{display:flex;position:absolute;top:50%;right:16dp;left:16dp;align-items:center;justify-content:space-between;height:56dp;transform:translateY(-50%)}.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}.bottom-left{display:flex;position:absolute;bottom:4dp;flex-direction:row;align-items:flex-start;justify-content:flex-start;width:100%;max-width:1692.4444444444dp;height:auto;margin:0 4dp}.prompt__overlay{background-color:rgba(190,184,219,.1);pointer-events:auto}.prompt__overlay,.prompt__content-wrapper{position:absolute;top:0;right:0;bottom:0;left:0}.prompt__content-wrapper{display:flex;position:absolute;top:0;right:0;bottom:0;left:0;align-items:center;justify-content:center}.prompt__content{display:flex;position:relative;flex:1 1 100%;flex-direction:column;width:100%;max-width:700dp;height:auto;margin:auto;border-width:1.1dp;border-radius:16dp;border-color:rgba(255,255,255,.2);background:rgba(8,7,13,.9)}.prompt__content h3,.prompt__content p{margin:24dp}.prompt__content p{margin-top:0}.prompt__controls{display:flex;flex-direction:row;justify-content:center;padding:24dp 12dp;border-top-width:1.1dp;border-top-color:rgba(255,255,255,.1)}.prompt__controls .button{min-width:233.3333333333dp;margin:0 12dp;text-align:center;nav-up:none;nav-down:none}.mod-menu{display:flex;position:absolute;top:0;right:0;bottom:0;left:0;flex-direction:row;align-items:center;justify-content:center;padding:64dp;background-color:rgba(8,7,13,.9)}.mod-menu__modal-wrapper{display:flex;position:relative;flex:1 1 100%;flex-direction:column;width:100%;max-width:1692.4444444444dp;height:100%;margin:auto;border-width:1.1dp;border-radius:16dp;border-color:rgba(255,255,255,.2);background:rgba(0,0,0,.35)}.mod-menu__modal-header{display:flex;position:relative;flex:1 1 auto;flex-direction:row;align-items:center;justify-content:space-between;width:100%;height:auto;padding:16dp;border-bottom-width:1.1dp;border-top-left-radius:16dp;border-top-right-radius:16dp;border-bottom-color:rgba(255,255,255,.2);background-color:rgba(190,184,219,.1)}.mod-menu__modal-body{display:flex;position:relative;flex:1 1 auto;flex-direction:row;align-items:center;justify-content:center;width:100%;height:auto}.mod-menu__list{display:block;position:relative;flex:1 1 100%;flex-direction:column;align-items:center;justify-content:center;height:100%;margin:0;padding:0;border-bottom-left-radius:16dp;background-color:rgba(0,0,0,.35)}.mod-menu__list-scroll{flex:1 1 100%;width:100%;height:100%;max-height:100%;overflow-y:auto}.mod-menu__list-entry{display:flex;position:relative;flex-direction:row;width:100%;height:auto;padding:4dp 8dp 4dp 8dp;border-width:1.1dp;border-color:rgba(242,242,242,.8);background-color:rgba(242,242,242,.05);border-color:rgba(242,242,242,.05)}.mod-menu__list-entry:focus,.mod-menu__list-entry:hover{border-color:#f2f2f2;background-color:rgba(242,242,242,.3)}.mod-menu__list-entry:active{background-color:rgba(242,242,242,.2)}.mod-menu__list-entry:hover,.mod-menu__list-entry:focus{cursor:pointer}.mod-menu__list-entry[is_selected]{border-color:#fff}.mod-menu__list-entry-thumbnail{height:100dp;width:100dp;min-width:100dp;min-height:100dp;background-color:rgba(190,184,219,.1)}.mod-menu__list-entry-body{display:flex;position:relative;flex-direction:column;width:auto;height:100dp;margin-left:16dp;overflow:hidden}.mod-menu__list-entry-description{padding-top:8dp}.mod-details{display:block;position:relative;flex:1 1 200%;height:100%;flex-direction:column;border-bottom-right-radius:16dp;background-color:rgba(190,184,219,.1)}.mod-details__header{display:flex;position:relative;flex-direction:row;width:100%;height:auto;padding:16dp;background:rgba(0,0,0,.35)}.mod-details__thumbnail-container{height:auto;width:auto}.mod-details__thumbnail{height:100dp;width:100dp;background-color:rgba(190,184,219,.1)}.mod-details__header-details{display:flex;position:relative;flex-direction:column;justify-content:space-evenly;width:auto;height:auto;margin-left:16dp;overflow:hidden}.mod-details__body{display:flex;position:relative;flex-direction:column;width:100%;height:auto;padding-left:16dp}.mod-details__authors,.mod-details__description{margin-top:16dp}.config-debug{display:block;position:relative;width:100%;max-height:100%;padding:8dp}.config-debug__scroll{display:block;position:relative;width:100%;max-height:100%;overflow-y:auto}.config-debug-option{color:#ccc;transition:color .05s linear-in-out,background-color .05s linear-in-out,opacity .05s linear-in-out;border-bottom-width:1.1dp;border-bottom-color:rgba(255,255,255,.1);display:block;position:relative;flex-direction:column;width:100%;height:auto;padding:12dp 4dp;background-color:rgba(0,0,0,0)}.config-debug-option svg{image-color:#ccc}.config-debug-option svg{transition:image-color .05s linear-in-out,background-color .05s linear-in-out}.config-debug-option:focus:not(:disabled,[disabled]),.config-debug-option:focus-visible:not(:disabled,[disabled]),.config-debug-option:hover:not(:disabled,[disabled]){color:#f2f2f2;background-color:rgba(190,184,219,.1)}.config-debug-option:focus:not(:disabled,[disabled]) svg,.config-debug-option:focus-visible:not(:disabled,[disabled]) svg,.config-debug-option:hover:not(:disabled,[disabled]) svg{image-color:#f2f2f2}.config-debug-option:disabled,.config-debug-option[disabled]{opacity:.5}.config-debug-option .icon-button{margin-left:8dp}.config-debug__option-split{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.config-debug-option__label{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;padding:4dp 16dp 12dp;width:auto;height:auto;white-space:nowrap}.config-debug__option-controls{display:block;position:relative;flex:1 1 auto;height:auto;width:auto;max-width:800dp;padding:0 12dp}.config-debug__option-trigger{flex:1 1 auto}.config-debug__select-wrapper{display:flex;position:relative;flex-direction:row;align-items:center;justify-content:flex-start;flex:1 1 100%;width:auto;max-width:800dp;height:auto;padding:4dp}.config-debug__select-wrapper .config-debug__select-label{padding-right:16dp;flex:auto;width:196dp}.config-debug__select-wrapper .config-debug__select-label>div{display:inline;width:auto;height:auto}.config-debug__select-wrapper input{display:block;position:relative;box-sizing:border-box;padding:0;flex:1 1 100%;width:auto;height:20dp;margin:auto 0}.config-debug__select-wrapper select{transition:color .05s linear-in-out,background-color .05s linear-in-out,opacity .05s linear-in-out,border-color .05s linear-in-out;border-width:1.1dp;border-color:rgba(255,255,255,.5);display:block;position:relative;box-sizing:border-box;padding:0;flex:1 1 100%;width:auto;height:48dp;border-radius:12dp;background-color:rgba(255,255,255,.05);cursor:pointer;align-items:center;justify-content:flex-start;padding:14dp}.config-debug__select-wrapper select svg{transition:image-color .05s linear-in-out,background-color .05s linear-in-out}.config-debug__select-wrapper select:hover,.config-debug__select-wrapper select:focus{border-width:1.1dp;border-color:rgba(255,255,255,.8);background-color:rgba(255,255,255,.2)}.config-debug__select-wrapper select selectvalue{display:inline;margin:auto 0;height:auto}.config-debug__select-wrapper select selectbox{border-width:1.1dp;border-color:rgba(255,255,255,.8);background-color:#191622;padding:4dp 0;margin-top:2dp;border-radius:12dp}.config-debug__select-wrapper select selectbox option{transition:color .05s linear-in-out,background-color .05s linear-in-out;padding:8dp 12dp;background-color:rgba(0,0,0,0);color:#ccc;font-weight:400}.config-debug__select-wrapper select selectbox option:hover,.config-debug__select-wrapper select selectbox option:focus{background-color:rgba(255,255,255,.2)}.config-debug__select-wrapper select selectbox option:hover:not(:checked){cursor:pointer}.config-debug__select-wrapper select selectbox option:checked{color:#fff;background-color:rgba(255,255,255,.05)}body{box-sizing:border-box;color:#f2f2f2;font-family:chiaro}.rmlui-window{opacity:1}.rmlui-window--hidden{opacity:0}.rmlui-window:not([mouse-active]){pointer-events:none}*,*:before,*:after{box-sizing:border-box}button{background-color:#7a2ac6}@keyframes blue-pulse{0%{color:#17d6e8}50%{color:#a2eff6}100%{color:#17d6e8}}@keyframes blue-pulse-with-border{0%{border-color:#17d6e8;color:#17d6e8}50%{border-color:#a2eff6;color:#a2eff6}100%{border-color:#17d6e8;color:#17d6e8}}@keyframes blue-pulse-background{0%{background-color:#17d6e8}50%{background-color:#a2eff6}100%{background-color:#17d6e8}} diff --git a/assets/scss/package-lock.json b/assets/scss/package-lock.json index 87d98d0..78ab77a 100644 --- a/assets/scss/package-lock.json +++ b/assets/scss/package-lock.json @@ -307,11 +307,11 @@ "dev": true }, "node_modules/braces": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", - "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz", + "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==", "dependencies": { - "fill-range": "^7.0.1" + "fill-range": "^7.1.1" }, "engines": { "node": ">=8" @@ -638,9 +638,9 @@ } }, "node_modules/fill-range": { - "version": "7.0.1", - "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", - "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz", + "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==", "dependencies": { "to-regex-range": "^5.0.1" }, @@ -1192,12 +1192,12 @@ } }, "node_modules/micromatch": { - "version": "4.0.5", - "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz", - "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==", + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz", + "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==", "dev": true, "dependencies": { - "braces": "^3.0.2", + "braces": "^3.0.3", "picomatch": "^2.3.1" }, "engines": { diff --git a/assets/scss/styles/components/ModDetails.scss b/assets/scss/styles/components/ModDetails.scss new file mode 100644 index 0000000..7c0f0fe --- /dev/null +++ b/assets/scss/styles/components/ModDetails.scss @@ -0,0 +1,74 @@ +.mod-details { + display: block; + position: relative; + flex: 1 1 200%; + height: 100%; + flex-direction: column; + border-bottom-right-radius: $border-radius-modal; + background-color: $color-bg-overlay; + + &__header { + display: flex; + position: relative; + flex-direction: row; + width: 100%; + height: auto; + padding: space(16); + // border-width: $border-width-thickness; + // border-radius: $border-radius-modal; + // border-color: $color-border; + background: $color-bg-shadow; + } + + &__thumbnail-container { + height: auto; + width: auto; + } + + &__thumbnail { + height: 100dp; + width: 100dp; + // max-width: 100dp; + // max-height: 100dp; + // padding: space(16); + // border-bottom-width: $border-width-thickness; + // border-top-left-radius: $border-radius-modal; + // border-top-right-radius: $border-radius-modal; + // border-bottom-color: $color-border; + background-color: $color-bg-overlay; + } + + &__header-details { + display: flex; + position: relative; + flex-direction: column; + justify-content:space-evenly; + width: auto; + height: auto; + margin-left: space(16); + overflow: hidden; + } + + &__title { + @extend %header-3; + } + + &__version { + @extend %label-md; + } + + &__body { + display: flex; + position: relative; + flex-direction: column; + width: 100%; + height: auto; + padding-left: space(16); + } + + &__authors, &__description { + @extend %label-md; + margin-top: space(16); + } +} + diff --git a/assets/scss/styles/components/ModMenu.scss b/assets/scss/styles/components/ModMenu.scss index 783449e..655e04a 100644 --- a/assets/scss/styles/components/ModMenu.scss +++ b/assets/scss/styles/components/ModMenu.scss @@ -76,12 +76,50 @@ overflow-y: auto; } - &__details { - display: block; + &__list-entry { + @extend %nav-all; + display: flex; position: relative; - flex: 1 1 100%; - height: 100%; - border-bottom-right-radius: $border-radius-modal; + flex-direction: row; + width: 100%; + height: auto; + padding: space(4) space(8) space(4) space(8); + border-width: $border-width-thickness; + @include create-icon-button-variation($color-text); + border-color: rgba($color-text, 0.05); + + &:hover, &:focus { + cursor: pointer; + } + &[is_selected] { + border-color: rgb(255,255,255); + } + } + + &__list-entry-thumbnail { + height: 100dp; + width: 100dp; + min-width: 100dp; + min-height: 100dp; background-color: $color-bg-overlay; } + + &__list-entry-body { + display: flex; + position: relative; + flex-direction: column; + width: auto; + height: 100dp; + margin-left: space(16); + overflow: hidden; + } + + &__list-entry-name { + @extend %label-md; + } + + &__list-entry-description { + padding-top: space(8); + @extend %body; + } } diff --git a/assets/scss/styles/components/_components.scss b/assets/scss/styles/components/_components.scss index 1d7a78f..977672d 100644 --- a/assets/scss/styles/components/_components.scss +++ b/assets/scss/styles/components/_components.scss @@ -15,3 +15,4 @@ @import "./BottomLeft"; @import "./Prompt"; @import "./ModMenu"; +@import "./ModDetails"; diff --git a/src/ui/elements/ElementConfigGroup.cpp b/src/ui/elements/ElementConfigGroup.cpp index c79bb7d..e104758 100644 --- a/src/ui/elements/ElementConfigGroup.cpp +++ b/src/ui/elements/ElementConfigGroup.cpp @@ -123,7 +123,7 @@ void ElementConfigGroup::OnAttributeChange(const Rml::ElementAttributes& changed const nlohmann::json& options = get_options(config_key); - for (int i = 0; i < options.size(); i++) { + for (size_t i = 0; i < options.size(); i++) { const auto &el = options[i]; AddConfigOptionElement(el); } diff --git a/src/ui/elements/ElementConfigOption.cpp b/src/ui/elements/ElementConfigOption.cpp index 990f4d2..6ee98e1 100644 --- a/src/ui/elements/ElementConfigOption.cpp +++ b/src/ui/elements/ElementConfigOption.cpp @@ -132,7 +132,6 @@ void ElementConfigOption::OnAttributeChange(const Rml::ElementAttributes& change try { auto value = recomp::config::get_config_store_value("translations/" + config_key); SetTextLabel(value); - printf("found type and translation\n"); AddOptionTypeElement(); } catch (const std::runtime_error& e) { SetTextLabel(e.what()); diff --git a/src/ui/elements/ElementModDetailsPanel.cpp b/src/ui/elements/ElementModDetailsPanel.cpp new file mode 100644 index 0000000..7de11ee --- /dev/null +++ b/src/ui/elements/ElementModDetailsPanel.cpp @@ -0,0 +1,72 @@ +#include "ElementModDetailsPanel.h" +#include "presets.h" +#include "librecomp/mods.hpp" + +#include + +#define MOD_DETAILS_BEM "mod-details" + +namespace recompui { + +static const std::string cls_base = BLOCK(MOD_DETAILS_BEM); +static const std::string cls_header = EL(MOD_DETAILS_BEM, "header"); +static const std::string cls_thumbnail_container = EL(MOD_DETAILS_BEM, "thumbnail-container"); +static const std::string cls_thumbnail = EL(MOD_DETAILS_BEM, "thumbnail"); +static const std::string cls_header_details = EL(MOD_DETAILS_BEM, "header-details"); +static const std::string cls_title = EL(MOD_DETAILS_BEM, "title"); +static const std::string cls_version = EL(MOD_DETAILS_BEM, "version"); +static const std::string cls_body = EL(MOD_DETAILS_BEM, "body"); +static const std::string cls_authors = EL(MOD_DETAILS_BEM, "authors"); +static const std::string cls_description = EL(MOD_DETAILS_BEM, "description"); + +ElementModDetailsPanel::ElementModDetailsPanel(const Rml::String& tag) : Rml::Element(tag) +{ + SetAttribute("recomp-store-element", true); + Rml::ElementDocument *doc = GetOwnerDocument(); + SetClass(cls_base, true); + + { + Rml::Element *header_el = add_div_with_class(doc, this, cls_header); + { + Rml::Element *thumbnail_container_el = add_div_with_class(doc, header_el, cls_thumbnail_container); + { + Rml::Element *thumbnail_el = add_div_with_class(doc, thumbnail_container_el, cls_thumbnail); + } // thumbnail_container_el + + Rml::Element *header_details_el = add_div_with_class(doc, header_el, cls_header_details); + { + title_el = add_div_with_class(doc, header_details_el, cls_title); + version_el = add_div_with_class(doc, header_details_el, cls_version); + } // header_details_el + } + Rml::Element* body_el = add_div_with_class(doc, this, cls_body); + { + description_el = add_div_with_class(doc, body_el, cls_description); + authors_el = add_div_with_class(doc, body_el, cls_authors); + } // body_el + } +} + +ElementModDetailsPanel::~ElementModDetailsPanel() +{ +} + +void ElementModDetailsPanel::SetModDetails(const recomp::mods::ModDetails& details) { + cur_details = details; + + title_el->SetInnerRML(cur_details.mod_id); + version_el->SetInnerRML(cur_details.version.to_string()); + + std::string authors_str = "Authors:"; + bool first = true; + for (const std::string& author : details.authors) { + authors_str += (first ? " " : ", ") + author; + first = false; + } + authors_el->SetInnerRML(authors_str); + description_el->SetInnerRML("Placeholder description. Some long text to make sure that wrapping is working correctly. Yet more text and so on."); + + DirtyLayout(); +} + +} // namespace Rml diff --git a/src/ui/elements/ElementModDetailsPanel.h b/src/ui/elements/ElementModDetailsPanel.h new file mode 100644 index 0000000..78cdd3e --- /dev/null +++ b/src/ui/elements/ElementModDetailsPanel.h @@ -0,0 +1,24 @@ +#ifndef RECOMPUI_ELEMENT_MOD_DETAILS_PANEL_H +#define RECOMPUI_ELEMENT_MOD_DETAILS_PANEL_H + +#include "common.h" +#include "librecomp/mods.hpp" + +namespace recompui { + +class ElementModDetailsPanel : public Rml::Element { +public: + ElementModDetailsPanel(const Rml::String& tag); + virtual ~ElementModDetailsPanel(); + void SetModDetails(const recomp::mods::ModDetails& details); +private: + recomp::mods::ModDetails cur_details; + Rml::Element* thumbnail_el; + Rml::Element* title_el; + Rml::Element* authors_el; + Rml::Element* version_el; + Rml::Element* description_el; +}; + +} // namespace recompui +#endif diff --git a/src/ui/elements/ElementModMenu.cpp b/src/ui/elements/ElementModMenu.cpp index 43a6569..f2f557e 100644 --- a/src/ui/elements/ElementModMenu.cpp +++ b/src/ui/elements/ElementModMenu.cpp @@ -1,65 +1,160 @@ #include "ElementModMenu.h" +#include "ElementModDetailsPanel.h" #include "presets.h" #include "librecomp/mods.hpp" #include +#define MOD_MENU_BEM "mod-menu" + namespace recompui { -static const BEM mod_menu_bem("mod-menu"); +static const std::string cls_base = BLOCK(MOD_MENU_BEM); +static const std::string cls_modal_wrapper = EL(MOD_MENU_BEM, "modal-wrapper"); +static const std::string cls_modal_header = EL(MOD_MENU_BEM, "modal-header"); +static const std::string cls_modal_body = EL(MOD_MENU_BEM, "modal-body"); +static const std::string cls_list = EL(MOD_MENU_BEM, "list"); +static const std::string cls_list_scroll = EL(MOD_MENU_BEM, "list-scroll"); +static const std::string cls_list_entry = EL(MOD_MENU_BEM, "list-entry"); +static const std::string cls_list_entry_thumbnail = EL(MOD_MENU_BEM, "list-entry-thumbnail"); +static const std::string cls_list_entry_body = EL(MOD_MENU_BEM, "list-entry-body"); +static const std::string cls_list_entry_name = EL(MOD_MENU_BEM, "list-entry-name"); +static const std::string cls_list_entry_description = EL(MOD_MENU_BEM, "list-entry-description"); -static const std::string cls_base = mod_menu_bem.get_block(); -static const std::string cls_modal_wrapper = mod_menu_bem.el("modal-wrapper"); -static const std::string cls_modal_header = mod_menu_bem.el("modal-header"); -static const std::string cls_modal_body = mod_menu_bem.el("modal-body"); -static const std::string cls_list = mod_menu_bem.el("list"); -static const std::string cls_list_scroll = mod_menu_bem.el("list-scroll"); -static const std::string cls_details = mod_menu_bem.el("details"); +void ElementModMenu::ProcessEvent(Rml::Event& event) { + Rml::Element* event_element = event.GetCurrentElement(); + Rml::EventId event_id = event.GetId(); + switch (event_id) { + // Click event handlers. + case Rml::EventId::Click: + // Refresh + if (event_element == refresh_button) { + RefreshMods(); + } + // Close + else if (event_element == close_button) { -static Rml::Element *add_div_with_class(Rml::ElementDocument *doc, Rml::Element *parent_el, const std::string& cls) { - Rml::Element *el = parent_el->AppendChild(doc->CreateElement("div")); - el->SetClass(cls.c_str(), true); - return el; + } + break; + case Rml::EventId::Focus: + { + size_t mod_index; + Rml::Variant *val = event_element->GetAttribute("mod_index"); + if (val->GetInto(mod_index) && mod_index < mod_details.size()) { + details_el->SetModDetails(mod_details[mod_index]); + } + if (active_list_entry_el != nullptr) { + active_list_entry_el->RemoveAttribute("is_selected"); + } + event_element->SetAttribute("is_selected", true); + active_list_entry_el = event_element; + } + } } -ElementModMenu::ElementModMenu(const Rml::String& tag) : Rml::Element(tag) -{ +Rml::ElementPtr ElementModMenu::CreateModListEntry(const recomp::mods::ModDetails& details, size_t index) { + Rml::ElementDocument *doc = GetOwnerDocument(); + + Rml::ElementPtr mod_el = doc->CreateElement("div"); + mod_el->SetClass(cls_list_entry, true); + mod_el->SetAttribute("mod_index", index); + { + Rml::Element* thumbnail_el = add_div_with_class(doc, mod_el.get(), cls_list_entry_thumbnail); + Rml::Element *body_el = add_div_with_class(doc, mod_el.get(), cls_list_entry_body); + { + Rml::Element *name_el = add_div_with_class(doc, body_el, cls_list_entry_name); + name_el->SetInnerRML(details.mod_id); + + Rml::Element *description_el = add_div_with_class(doc, body_el, cls_list_entry_description); + description_el->SetInnerRML("Short description of mod here."); + } // body_el + } // mod_el + + return mod_el; +} + +void ElementModMenu::CreateModList() { + Rml::ElementDocument *doc = GetOwnerDocument(); + + // Clear the contents of the list scroll. + list_el_scroll->SetInnerRML(""); + Rml::Element* prev_el = refresh_button; + active_list_entry_el = nullptr; + + bool first = true; + + // Create the child elements for the list scroll. + for (size_t mod_index = 0; mod_index < mod_details.size(); mod_index++) { + const recomp::mods::ModDetails& details = mod_details[mod_index]; + Rml::Element *mod_el = list_el_scroll->AppendChild(CreateModListEntry(details, mod_index)); + mod_el->SetAttribute("mod_index", mod_index); + mod_el->AddEventListener(Rml::EventId::Focus, this, false); + mod_el->SetId("mod-list-entry-" + std::to_string(mod_index)); + + mod_el->SetProperty("nav-up", "#" + prev_el->GetId()); + prev_el->SetProperty("nav-down", "#" + mod_el->GetId()); + + if (first) { + active_list_entry_el = mod_el; + } + first = false; + + prev_el = mod_el; + } + + active_list_entry_el->SetAttribute("is_selected", true); + + DirtyLayout(); +} + +void ElementModMenu::RefreshMods() { + recomp::mods::scan_mods(); + mod_details = recomp::mods::get_mod_details(game_mod_id); + + details_el->SetModDetails(mod_details[0]); + + CreateModList(); +} + +ElementModMenu::ElementModMenu(const Rml::String& tag) : Rml::Element(tag) { + game_mod_id = "mm"; SetAttribute("recomp-store-element", true); Rml::ElementDocument *doc = GetOwnerDocument(); - SetClass(mod_menu_bem.block, true); + SetClass(cls_base, true); { Rml::Element *modal_wrapper_el = add_div_with_class(doc, this, cls_modal_wrapper); { Rml::Element *header_el = add_div_with_class(doc, modal_wrapper_el, cls_modal_header); { - add_button(doc, header_el, "Refresh", ButtonVariant::Primary); - add_icon_button(doc, header_el, "icons/X.svg", ButtonVariant::Tertiary); - } + refresh_button = add_button(doc, header_el, "Refresh", ButtonVariant::Primary); + refresh_button->AddEventListener(Rml::EventId::Click, this, false); + refresh_button->SetId("refresh-button"); + close_button = add_icon_button(doc, header_el, "icons/X.svg", ButtonVariant::Tertiary); + close_button->AddEventListener(Rml::EventId::Click, this, false); + close_button->SetId("close-button"); + + refresh_button->SetProperty("nav-right", "#" + close_button->GetId()); + close_button->SetProperty("nav-left", "#" + refresh_button->GetId()); + } // header_el Rml::Element *body_el = add_div_with_class(doc, modal_wrapper_el, cls_modal_body); { - Rml::Element *list_el = add_div_with_class(doc, body_el, cls_list); + list_el = add_div_with_class(doc, body_el, cls_list); { - Rml::Element *list_el_scroll = add_div_with_class(doc, list_el, cls_list_scroll); - { - std::vector mods = recomp::mods::get_mod_details("mm"); - for (auto& mod : mods) { - Rml::Element *mod_el = list_el_scroll->AppendChild(doc->CreateElement("div")); - mod_el->SetInnerRML(mod.mod_id); - } - } // list_el_scroll + list_el_scroll = add_div_with_class(doc, list_el, cls_list_scroll); } // list_el - Rml::Element *details_el = add_div_with_class(doc, body_el, cls_details); - details_el->SetInnerRML("two"); - } - } + details_el = + static_cast(body_el->AppendChild(doc->CreateElement("recomp-mod-details-panel"))); + } // body_el + } // modal_wrapper_el } + + RefreshMods(); } -ElementModMenu::~ElementModMenu() -{ +ElementModMenu::~ElementModMenu() { } diff --git a/src/ui/elements/ElementModMenu.h b/src/ui/elements/ElementModMenu.h index f5c939b..c004e07 100644 --- a/src/ui/elements/ElementModMenu.h +++ b/src/ui/elements/ElementModMenu.h @@ -2,13 +2,28 @@ #define RECOMPUI_ELEMENT_MOD_MENU_H #include "common.h" +#include "librecomp/mods.hpp" +#include "ElementModDetailsPanel.h" namespace recompui { -class ElementModMenu : public Rml::Element { +class ElementModMenu : public Rml::Element, public Rml::EventListener { public: ElementModMenu(const Rml::String& tag); virtual ~ElementModMenu(); + void ProcessEvent(Rml::Event& event) final; +private: + void RefreshMods(); + void CreateModList(); + Rml::ElementPtr CreateModListEntry(const recomp::mods::ModDetails& details, size_t index); + Rml::Element *refresh_button; + Rml::Element *close_button; + Rml::Element *list_el; // The root mod list element. + Rml::Element *list_el_scroll; // The scroll within the root mod list element. + ElementModDetailsPanel *details_el; // The details panel. + Rml::Element *active_list_entry_el = nullptr; + std::vector mod_details{}; + std::string game_mod_id; }; } // namespace recompui diff --git a/src/ui/elements/ElementOptionTypeColor.cpp b/src/ui/elements/ElementOptionTypeColor.cpp index a85970b..7c40acd 100644 --- a/src/ui/elements/ElementOptionTypeColor.cpp +++ b/src/ui/elements/ElementOptionTypeColor.cpp @@ -46,7 +46,7 @@ ElementOptionTypeColor::ElementOptionTypeColor(const Rml::String& tag) : Rml::El Rml::Element *hsv_wrapper = preview_wrapper->AppendChild(doc->CreateElement("div")); hsv_wrapper->SetClass(cls_color_hsv_wrapper, true); - for (int i = 0; i < 3; i++) { + for (size_t i = 0; i < 3; i++) { const auto &label = hsv_label[i]; Rml::Element *range_wrapper = hsv_wrapper->AppendChild(doc->CreateElement("div")); @@ -88,7 +88,7 @@ ElementOptionTypeColor::~ElementOptionTypeColor() { Rml::ElementList elements; GetElementsByTagName(elements, "input"); - for (int i = 0; i < elements.size(); i++) { + for (size_t i = 0; i < elements.size(); i++) { Rml::Element *el = elements[i]; el->RemoveEventListener(Rml::EventId::Click, this, false); } @@ -144,7 +144,7 @@ void ElementOptionTypeColor::init_option(std::string& _config_key) { set_preview_block_rgb(col); - for (int i = 0; i < 3; i++) { + for (size_t i = 0; i < 3; i++) { const auto &label = hsv_label[i]; Rml::ElementFormControlInput *range = (Rml::ElementFormControlInput *)GetElementById(range_input_id + label); diff --git a/src/ui/elements/ElementOptionTypeDropdown.cpp b/src/ui/elements/ElementOptionTypeDropdown.cpp index 644dcd0..c2a8875 100644 --- a/src/ui/elements/ElementOptionTypeDropdown.cpp +++ b/src/ui/elements/ElementOptionTypeDropdown.cpp @@ -48,7 +48,7 @@ void ElementOptionTypeDropdown::init_option(std::string& _config_key) { auto select_el = get_select(); - for (int i = 0; i < opt_array.size(); i++) { + for (size_t i = 0; i < opt_array.size(); i++) { const auto &j_opt = opt_array[i]; const std::string opt_val = j_opt.get(); const std::string opt_id = select_option_id + config_key + "--" + opt_val; diff --git a/src/ui/elements/ElementOptionTypeRadioTabs.cpp b/src/ui/elements/ElementOptionTypeRadioTabs.cpp index 4d35fd5..ea08360 100644 --- a/src/ui/elements/ElementOptionTypeRadioTabs.cpp +++ b/src/ui/elements/ElementOptionTypeRadioTabs.cpp @@ -19,7 +19,7 @@ ElementOptionTypeRadioTabs::~ElementOptionTypeRadioTabs() { Rml::ElementList elements; GetElementsByTagName(elements, "input"); - for (int i = 0; i < elements.size(); i++) { + for (size_t i = 0; i < elements.size(); i++) { Rml::Element *el = elements[i]; el->RemoveEventListener(Rml::EventId::Click, this, false); } @@ -28,9 +28,9 @@ ElementOptionTypeRadioTabs::~ElementOptionTypeRadioTabs() void ElementOptionTypeRadioTabs::set_cur_option(int opt) { Rml::ElementList elements; GetElementsByTagName(elements, "input"); - for (int i = 0; i < elements.size(); i++) { + for (size_t i = 0; i < elements.size(); i++) { Rml::Element *el = elements[i]; - if (i == opt) { + if (static_cast(i) == opt) { SetAttribute("checked", true); el->SetAttribute("checked", true); } else { @@ -48,7 +48,7 @@ void ElementOptionTypeRadioTabs::init_option(std::string& _config_key) { int opt = recomp::config::get_config_store_value(config_key); const json& opt_array = option_json["values"]; - for (int i = 0; i < opt_array.size(); i++) { + for (size_t i = 0; i < opt_array.size(); i++) { const auto &j_opt = opt_array[i]; const std::string opt_val = j_opt.get(); const std::string opt_id = radio_input_id + config_key + "--" + opt_val; diff --git a/src/ui/elements/presets.cpp b/src/ui/elements/presets.cpp index a11c08e..74b6d14 100644 --- a/src/ui/elements/presets.cpp +++ b/src/ui/elements/presets.cpp @@ -1,16 +1,18 @@ #include "presets.h" +#define BUTTON_BEM "button" +#define ICON_BUTTON_BEM "icon-button" + namespace recompui { -static const BEM button_bem("button"); Rml::Element *add_button(Rml::ElementDocument *doc, Rml::Element *parent_el, const Rml::String contents, ButtonVariant variant, bool isLarge) { Rml::Element *button = parent_el->AppendChild(doc->CreateElement("button")); - button->SetClass(button_bem.get_block(), true); + button->SetClass(BLOCK(BUTTON_BEM), true); - button->SetClass(button_bem.mod(button_variants.at(variant)), true); + button->SetClass(MOD_DYN(BUTTON_BEM, button_variants.at(variant)), true); if (isLarge) { - button->SetClass(button_bem.mod("large"), true); + button->SetClass(MOD(BUTTON_BEM, "large"), true); } if (contents != "") { @@ -20,16 +22,15 @@ Rml::Element *add_button(Rml::ElementDocument *doc, Rml::Element *parent_el, con return button; } -static const BEM icon_button_bem("icon-button"); Rml::Element *add_icon_button(Rml::ElementDocument *doc, Rml::Element *parent_el, const std::string &svg_src, ButtonVariant variant) { Rml::Element *button = parent_el->AppendChild(doc->CreateElement("button")); - button->SetClass(icon_button_bem.get_block(), true); - button->SetClass(icon_button_bem.mod(button_variants.at(variant)), true); + button->SetClass(BLOCK(ICON_BUTTON_BEM), true); + button->SetClass(MOD_DYN(ICON_BUTTON_BEM, button_variants.at(variant)), true); { Rml::Element *icon = button->AppendChild(doc->CreateElement("svg")); - icon->SetClass(icon_button_bem.el("icon"), true); + icon->SetClass(EL(ICON_BUTTON_BEM, "icon"), true); icon->SetAttribute("src", svg_src); } diff --git a/src/ui/elements/presets.h b/src/ui/elements/presets.h index fe7b132..7edbb0b 100644 --- a/src/ui/elements/presets.h +++ b/src/ui/elements/presets.h @@ -6,6 +6,12 @@ namespace recompui { Rml::Element *add_button(Rml::ElementDocument *doc, Rml::Element *parent_el, const Rml::String contents = "", ButtonVariant variant = ButtonVariant::Primary, bool isLarge = false); Rml::Element *add_icon_button(Rml::ElementDocument *doc, Rml::Element *parent_el, const std::string &svg_src, ButtonVariant variant = ButtonVariant::Tertiary); + + inline Rml::Element *add_div_with_class(Rml::ElementDocument *doc, Rml::Element *parent_el, const std::string& cls) { + Rml::Element *el = parent_el->AppendChild(doc->CreateElement("div")); + el->SetClass(cls, true); + return el; + } } // namespace recompui #endif diff --git a/src/ui/ui_color_hack.cpp b/src/ui/ui_color_hack.cpp index a18b2fd..9cadbbe 100644 --- a/src/ui/ui_color_hack.cpp +++ b/src/ui/ui_color_hack.cpp @@ -77,7 +77,7 @@ namespace recompui { } // Parse each of the colour elements. - for (int i = 0; i < 4; i++) + for (size_t i = 0; i < 4; i++) { int tens = Rml::Math::HexToDecimal(hex_values[i][0]); int ones = Rml::Math::HexToDecimal(hex_values[i][1]); @@ -115,7 +115,7 @@ namespace recompui { } // Parse the three RGB values. - for (int i = 0; i < 3; ++i) + for (size_t i = 0; i < 3; ++i) { int component; diff --git a/src/ui/ui_elements.cpp b/src/ui/ui_elements.cpp index da37998..59a8109 100644 --- a/src/ui/ui_elements.cpp +++ b/src/ui/ui_elements.cpp @@ -20,6 +20,7 @@ static RecompElementConfig custom_elements[] = { CUSTOM_ELEMENT("recomp-option-type-radio-tabs", recompui::ElementOptionTypeRadioTabs), CUSTOM_ELEMENT("recomp-option-type-range", recompui::ElementOptionTypeRange), CUSTOM_ELEMENT("recomp-mod-menu", recompui::ElementModMenu), + CUSTOM_ELEMENT("recomp-mod-details-panel", recompui::ElementModDetailsPanel), }; void recompui::register_custom_elements() { diff --git a/src/ui/ui_elements.h b/src/ui/ui_elements.h index 8ec01cf..f7dc96b 100644 --- a/src/ui/ui_elements.h +++ b/src/ui/ui_elements.h @@ -15,6 +15,7 @@ #include "elements/ElementOptionTypeTextField.h" #include "elements/ElementDescription.h" #include "elements/ElementModMenu.h" +#include "elements/ElementModDetailsPanel.h" namespace recompui { void register_custom_elements(); diff --git a/src/ui/ui_renderer.cpp b/src/ui/ui_renderer.cpp index 320e673..1e2bdaf 100644 --- a/src/ui/ui_renderer.cpp +++ b/src/ui/ui_renderer.cpp @@ -543,12 +543,10 @@ public: else { const Rml::byte *src_data = flip_y ? source + row_pitch * (source_dimensions.y - 1) : source; uint32_t src_stride = flip_y ? -row_pitch : row_pitch; - size_t offset = 0; - for (int row = 0; row < source_dimensions.y; row++) { //(offset + increment) <= image_size_bytes) { + for (int row = 0; row < source_dimensions.y; row++) { memcpy(dst_data, src_data, row_pitch); src_data += src_stride; - offset += row_pitch; dst_data += row_byte_width; } } @@ -1150,13 +1148,9 @@ void init_hook(RT64::RenderInterface* interface, RT64::RenderDevice* device) { if (std::filesystem::exists(test_conf_path)) { const std::string s = read_file_to_string(test_conf_path); recomp::config::register_config(read_file_to_string(test_conf_path), "cheats"); - printf("SUCC CONF\n"); if (std::filesystem::exists(test_conf_trans_path)) { recomp::config::register_translation(read_file_to_string("config_example.cheats.en_us.json"), "cheats"); - printf("SUCC TRANSLATION\n"); - } else { - printf("FAIL TRANSLATION"); } } else { printf("FAIL ALL\n"); diff --git a/src/ui/util/bem.h b/src/ui/util/bem.h index 4abc30a..f5ee7c2 100644 --- a/src/ui/util/bem.h +++ b/src/ui/util/bem.h @@ -3,31 +3,10 @@ #include -namespace recompui { - // BEM base class - class BEM { - public: - std::string block; - - BEM(const std::string &block) : block(block) {} - virtual ~BEM() = default; - - const std::string get_block() const { - return block; - } - - const std::string el(const std::string &element) const { - return block + "__" + element; - } - - const BEM bem_el(const std::string &element) const { - return BEM(el(element)); - } - - const std::string mod(const std::string &modifier) const { - return block + "--" + modifier; - } - }; -} // namespace recompui +#define EL(bem, element) bem "__" element +#define EL_DYN(bem, element) bem "__" + element +#define MOD(bem, modifier) bem "--" modifier +#define MOD_DYN(bem, modifier) bem "--" + modifier +#define BLOCK(bem) bem #endif