mirror of
https://github.com/Zelda64Recomp/Zelda64Recomp.git
synced 2025-10-30 08:03:03 +00:00
d766cf328f
Some checks are pending
validate-internal / build (push) Waiting to run
* init config opt system w/ 3 types and description support * Move config registry/option to librecomp + added Color conf opt type * Updated color option type styling * Added dropdown option type * Added TextField option type * Button config type + callback wip * init mod menu + bem class + button presets * WIP mod menu, fix some warnings * Rewrite mod details under new UI system. * Refactored mods menu entirely. * Remove ModMenu.scss. * Take ownership of created pointers on Element class. * Add styles. * Multi-style state and disabled state propagation. * Switch to string views. * Convert to spaces, hook up mod enabled to toggle. * Mod menu progress. * Layout for mod details panel, add gap property setters * Update RmlUi for gap property in flexbox * Add slot_map and begin ui context * Implement context and resource storage slotmaps * Config submenu. * Refactored to account for context changes. * Turn off tab searching when submenu is open. * Revert accidental RmlUi downgrade * Upgrade RmlUi to 6.0 release * Text input. * Radio option. * Cleanup. * Refactor Rml document handling to use new ContextId system (prompts currently unimplemented) * Add support for config schema. * Split config sub menu into separate context and fix configure button, prevent infinite loop when looking for autofocus element * Reimplement mechanism to open the config menu to a specific tab * Begin implementing mod UI API * Link storage to mod menu. * Proper enum parsing. * Enable mod reordering. * Draggable improvements to mod menu and runtime update. * Adjust styling of submenu. * Mods folder button. * Linux build fixes. * Hook up new manifest fields to mod UI * Add basic thumbnail parsing functionality. * More style changes. * Implement update event for elements * Use RT64's texture laoding instead. * Restore spacer animations. * Animation API begone. * Auto-enabled mods. * Update runtime submodule and N64Recomp commit in CI for mod config API, remove unnecessary extern C * Sub menu display name, assert on text input. * Clamp delta time to fix UI disappearing on OS with timestamps that don't always increase. * Add a state for when no mods are installed. * Unify API function naming scheme and export relevant API functions * Add actor update/init events and save init event (#536) * Expose remaining property setters to mod UI API * Implemented mod UI callbacks * Implement actor extension data and use it for transform tagging * Zero the memory allocated to hold extended actor data * Implement label and textinput in mod UI API * Patch virtual address translation to support entire extended RAM address space (#533) * Download full target build of llvm in CI Windows runners to fix missing MIPS support and update N64Recomp CI commit * Enable triple buffering in RT64 (#546) * Implement controlling input capturing for mod UI contexts * Created mod UI API functions for setting visibility, setting text, and destroying elements * Fix errant RML tag in mod menu and insert breaks for newlines when setting element text * Fix compilation after rebase * Fixes for macOS * Set the blender description manually for the UI renderer * Created mod UI API functions for imageview elements * Switch to designated initializers to work around missing aggregate initialization compiler support * Update RT64 for driver bug workarounds and misc fixes * Update RT64 to fix native sampler issues with tile copies * Update RT64 for depth clear optimization and more native sampler changes * Update RT64 and allow it to choose the graphics API when set to Auto * Update runtime to allow renderers to choose the graphics API * Update RT64 to enable early Z test shader optimization * Implement data structure mod APIs * Update lunasvg to increase its minimum cmake version * Switch to runtime concatenation of function name in data API error reporting to fix Linux compilation issue * Add missing typename to fix compilation on some compilers * Update RT64 to fix failed assert with MSAA off * Reimplement prompts as a separate UI context and make it so the quit game prompt doesn't bring up the config menu * DnD prototype. * Fix to dynamic lib path and runtime commit. * Finish drag and drop mod installation, disable mod refresh button and code mod toggle when game starts * Remove std::format usage and add missing <list> includes to fix Linux/MacOS compilation * Switch to aggregate initialization for Version to work around missing implicit constructor on some compilers * Replace use of std::bind with lambdas * Add mod install button, put mod description in scroll container, minor mod menu tweaks * Update runtime to fix renderer shutdown race condition * Implement texture pack reordering * Add mod UI API exports for slider, password input, and label radio and expose RmlUi debugger on F8 * Update runtime for mod version export * Update runtime for save swapping mod API * Apply recomp.rcss to mod UI contexts (fixes scrolls) * Updated mod list styling (#561) * Updated mod list styling * mod entry max height * Update RT64 for v5 texture hash * Update runtime for mod API to get save file path * Add special config option id to control texture pack state for code mods * Update runtime for mod default enabled state * Add exports for stars' display lists (#563) * Update runtime to fix default value of enabled_by_default * Update runtime to allow NULL recomp_free * Implement navigation and focus styling for new UI framework (no manual overrides yet) * Fix the previous scissor state bleeding when drawing the RmlUi output onto the swapchain buffer * Use a multiple file select dialog for mod install button * Add mod export for loading UI image from bytes (png/dds) * Manual navigation in UI framework and WIP mod menu navigation * Repeat key events when holding down controller inputs for UI navigation * Patch AnimationContext_SetLoadFrame to allow custom animations (#564) * Close context when showing or hiding a context and reopen afterwards to prevent deadlocks * Add quotes around xdg-open and open commands to support paths with spaces * Update RT64 for high precision texture coordinates when using texture replacements * Add support for built-in mods and convert D-Pad to a built-in mod (#567) * Add embedded mod (using mm_recomp_draw_distance as an example). * Update runtime after merge * Experiment with removing the D-Pad. * Add event needed for dpad as mod, revert remaining changes in built-in patches for dpad * Add built-in dpad mod, add remaining event calls to input.c * Add built-in mods readme --------- Co-authored-by: Dario <dariosamo@gmail.com> * Fixing navigation of mods menu. * Focused state for mod entry. * Prevent hover styling and focus on input elements when disabled * Fix up/down navigation on text input elements * Set mod tab to navigate down to first mod, fix redundant mod scanning * Remove more redundant mod scanning and fix mods being scanned during gameplay * Update runtime for mod folder export * Improve radio navigation and setup mod config submenu navigation setup * Restore fd anywhere export functionality (#570) * fix fd * add comment back in * Make config tabset navigate down to first mod entry when mod menu is open, make mod configure screen focus on configure button after closing * Add navigation exports to mod UI API * Fix opening the config menu via keyboard/controller causing a double animation warning in RmlUi --------- Co-authored-by: Dario <dariosamo@gmail.com> Co-authored-by: thecozies <79979276+thecozies@users.noreply.github.com> Co-authored-by: Garrett Cox <garrettjcox@gmail.com> Co-authored-by: David Chavez <david@dcvz.io> Co-authored-by: danielryb <59661841+danielryb@users.noreply.github.com> Co-authored-by: Reonu <danileon95@gmail.com> Co-authored-by: LittleCube <littlecubehax@gmail.com>
2511 lines
61 KiB
Text
2511 lines
61 KiB
Text
/* stylelint-disable color-no-hex, color-hex-length */
|
|
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;
|
|
}
|
|
|
|
/*
|
|
@include trans-colors;
|
|
*/
|
|
/*
|
|
@include trans-colors-opa;
|
|
*/
|
|
/*
|
|
@include trans-colors-svg;
|
|
*/
|
|
/*
|
|
@include trans-colors-border;
|
|
*/
|
|
.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;
|
|
}
|
|
|
|
/*
|
|
@include set-color(COLOR);
|
|
*/
|
|
/* stylelint-disable color-no-hex, color-hex-length */
|
|
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;
|
|
}
|
|
|
|
/*
|
|
@include trans-colors;
|
|
*/
|
|
/*
|
|
@include trans-colors-opa;
|
|
*/
|
|
/*
|
|
@include trans-colors-svg;
|
|
*/
|
|
/*
|
|
@include trans-colors-border;
|
|
*/
|
|
.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;
|
|
}
|
|
|
|
/*
|
|
@include set-color(COLOR);
|
|
*/
|
|
/* stylelint-disable color-no-hex */
|
|
/* stylelint-disable selector-max-id */
|
|
* {
|
|
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 {
|
|
focus:none;
|
|
tab-index:none;
|
|
} */
|
|
div#window {
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-color: rgba(255, 255, 255, 0.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 {
|
|
/* color: #333; */
|
|
/* font-size: 13dp */
|
|
height: auto;
|
|
}
|
|
|
|
table input.text {
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
height: auto;
|
|
/* height: 18dp; */
|
|
margin: 0;
|
|
border-width: 1.1dp;
|
|
border-color: #000;
|
|
background-color: #fff;
|
|
font-size: 15dp;
|
|
/* padding: 0 5dp; */
|
|
line-height: 1;
|
|
decorator: none;
|
|
/* vertical-align: center; */
|
|
}
|
|
|
|
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: 0.05;
|
|
}
|
|
scrollbarvertical sliderbar, scrollbarhorizontal sliderbar {
|
|
border-radius: 5dp;
|
|
background: #DABAF7;
|
|
opacity: 0.1;
|
|
}
|
|
scrollbarvertical sliderbar:hover:not(:active), scrollbarhorizontal sliderbar:hover:not(:active) {
|
|
opacity: 0.2;
|
|
}
|
|
scrollbarvertical sliderbar:active, scrollbarhorizontal sliderbar:active {
|
|
opacity: 0.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, 0.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, 0.2);
|
|
background: rgba(8, 7, 13, 0.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: #CCCCCC;
|
|
transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out, opacity 0.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: #CCCCCC;
|
|
}
|
|
.control-option svg {
|
|
transition: image-color 0.05s linear-in-out, background-color 0.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, 0.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: 0.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: #CCCCCC;
|
|
transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out, opacity 0.05s linear-in-out, border-color 0.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, 0.1);
|
|
background-color: rgba(190, 184, 219, 0.1);
|
|
}
|
|
.control-option__binding svg {
|
|
image-color: #CCCCCC;
|
|
}
|
|
.control-option__binding svg {
|
|
transition: image-color 0.05s linear-in-out, background-color 0.05s linear-in-out;
|
|
}
|
|
.control-option__binding:focus, .control-option__binding:hover {
|
|
color: #F2F2F2;
|
|
border-color: #F2F2F2;
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
}
|
|
.control-option__binding:focus svg, .control-option__binding:hover svg {
|
|
image-color: #F2F2F2;
|
|
}
|
|
.control-option__binding:active {
|
|
color: rgb(244.6, 244.6, 244.6);
|
|
}
|
|
.control-option__binding:active svg {
|
|
image-color: rgb(244.6, 244.6, 244.6);
|
|
}
|
|
.control-option__binding:disabled, .control-option__binding[disabled] {
|
|
color: #CCCCCC;
|
|
opacity: 0.5;
|
|
}
|
|
.control-option__binding:disabled svg, .control-option__binding[disabled] svg {
|
|
image-color: #CCCCCC;
|
|
}
|
|
.control-option__binding:not([disabled]) {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.control-option__binding-icon {
|
|
transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out, opacity 0.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 0.05s linear-in-out, background-color 0.05s linear-in-out, opacity 0.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;
|
|
}
|
|
|
|
/*
|
|
Example:
|
|
<tab class="tab">
|
|
<div>Graphics</div>
|
|
<div class="tab__indicator"></div>
|
|
</tab>
|
|
*/
|
|
.tabs tabs {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.tab {
|
|
display: block;
|
|
position: relative;
|
|
margin: 0;
|
|
padding: 20dp 24dp;
|
|
opacity: 0.9;
|
|
background-color: rgba(0, 0, 0, 0);
|
|
color: rgba(255, 255, 255, 0.6);
|
|
}
|
|
.tab:selected {
|
|
color: #F2F2F2;
|
|
}
|
|
.tab:selected .tab__indicator {
|
|
background-color: rgba(255, 255, 255, 0.6);
|
|
}
|
|
.tab:selected:hover {
|
|
cursor: default;
|
|
}
|
|
.rmlui-window:not([mouse-active]) .tab:focus {
|
|
transition: none;
|
|
animation: blue-pulse 0.75s infinite;
|
|
}
|
|
.rmlui-window:not([mouse-active]) .tab:focus:selected .tab__indicator {
|
|
animation: blue-pulse-background 0.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, 0.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, 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, 0.35);
|
|
}
|
|
|
|
.config__header {
|
|
border-bottom-width: 1.1dp;
|
|
border-bottom-color: rgba(255, 255, 255, 0.1);
|
|
padding: 12dp 20dp;
|
|
}
|
|
|
|
.config__footer {
|
|
border-top-width: 1.1dp;
|
|
border-top-color: rgba(255, 255, 255, 0.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 0.05s linear-in-out, background-color 0.05s linear-in-out, opacity 0.05s linear-in-out;
|
|
display: block;
|
|
position: relative;
|
|
height: auto;
|
|
margin: 4dp 12dp 0;
|
|
padding: 8dp 0;
|
|
color: rgba(255, 255, 255, 0.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 0.05s linear-in-out, background-color 0.05s linear-in-out, opacity 0.05s linear-in-out;
|
|
width: 32dp;
|
|
height: 32dp;
|
|
margin: 4dp 12dp 0;
|
|
border-radius: 8dp;
|
|
opacity: 0.5;
|
|
background-color: rgba(190, 184, 219, 0.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: #3333FF;
|
|
}
|
|
.config-option__radio-tabs .config-option__checkbox,
|
|
.config-option__list .config-option__checkbox {
|
|
transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out, opacity 0.05s linear-in-out;
|
|
visibility: visible;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
.config-option__radio-tabs input.radio,
|
|
.config-option__list input.radio {
|
|
transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out, opacity 0.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 0.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: 0.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 0.05s linear-in-out, background-color 0.05s linear-in-out;
|
|
height: 2dp;
|
|
margin-top: 8dp;
|
|
background-color: rgba(255, 255, 255, 0.2);
|
|
}
|
|
.config-option__radio-tabs input.range sliderbar,
|
|
.config-option__list input.range sliderbar {
|
|
transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out;
|
|
width: 16dp;
|
|
height: 16dp;
|
|
margin-top: 1dp;
|
|
margin-right: -8dp;
|
|
margin-left: -8dp;
|
|
transition: background-color 0.05s linear-in-out;
|
|
border-radius: 8dp;
|
|
background-color: #CCCCCC;
|
|
}
|
|
.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: #3333FF;
|
|
animation: blue-pulse-background 0.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, 0.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 0.05s linear-in-out, background-color 0.05s linear-in-out;
|
|
height: 2dp;
|
|
margin-top: 8dp;
|
|
background-color: rgba(255, 255, 255, 0.2);
|
|
}
|
|
.config-option-range__range-input sliderbar {
|
|
transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out;
|
|
width: 16dp;
|
|
height: 16dp;
|
|
margin-top: 1dp;
|
|
margin-right: -8dp;
|
|
margin-left: -8dp;
|
|
transition: background-color 0.05s linear-in-out;
|
|
border-radius: 8dp;
|
|
background-color: #CCCCCC;
|
|
}
|
|
.rmlui-window:not([mouse-active]) .config-option-range__range-input sliderbar:focus {
|
|
border-width: 1.1dp;
|
|
border-color: #3333FF;
|
|
animation: blue-pulse-background 0.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 0.05s linear-in-out, background-color 0.05s linear-in-out, opacity 0.05s linear-in-out, border-color 0.05s linear-in-out;
|
|
border-width: 1.1dp;
|
|
border-color: rgba(255, 255, 255, 0.5);
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
flex: 1 1 100%;
|
|
width: auto;
|
|
border-radius: 12dp;
|
|
background-color: rgba(255, 255, 255, 0.05);
|
|
}
|
|
.config-option-dropdown__select svg, .config-option-dropdown__wrapper svg, .config-option-textfield__select svg, .config-option-textfield__wrapper svg {
|
|
transition: image-color 0.05s linear-in-out, background-color 0.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, 0.8);
|
|
background-color: rgba(255, 255, 255, 0.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, 0.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 0.05s linear-in-out, background-color 0.05s linear-in-out;
|
|
padding: 8dp 12dp;
|
|
background-color: rgba(0, 0, 0, 0);
|
|
color: #CCCCCC;
|
|
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, 0.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, 0.05);
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.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, 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, 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, 0.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 0.05s linear-in-out, background-color 0.05s linear-in-out, opacity 0.05s linear-in-out;
|
|
display: flex;
|
|
position: relative;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.input-viz > svg:not(.input-viz__dpad-arrow) {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
[cur-input=NONE] .input-viz[visual-input] {
|
|
opacity: 1;
|
|
}
|
|
|
|
.input-viz[visual-input~=A] {
|
|
opacity: 0.25;
|
|
}
|
|
[cur-input=A] .input-viz[visual-input~=A] {
|
|
opacity: 1;
|
|
}
|
|
|
|
.input-viz[visual-input~=B] {
|
|
opacity: 0.25;
|
|
}
|
|
[cur-input=B] .input-viz[visual-input~=B] {
|
|
opacity: 1;
|
|
}
|
|
|
|
.input-viz[visual-input~=Z] {
|
|
opacity: 0.25;
|
|
}
|
|
[cur-input=Z] .input-viz[visual-input~=Z] {
|
|
opacity: 1;
|
|
}
|
|
|
|
.input-viz[visual-input~=START] {
|
|
opacity: 0.25;
|
|
}
|
|
[cur-input=START] .input-viz[visual-input~=START] {
|
|
opacity: 1;
|
|
}
|
|
|
|
.input-viz[visual-input~=DPAD_UP] {
|
|
opacity: 0.25;
|
|
}
|
|
[cur-input=DPAD_UP] .input-viz[visual-input~=DPAD_UP] {
|
|
opacity: 1;
|
|
}
|
|
|
|
.input-viz[visual-input~=DPAD_DOWN] {
|
|
opacity: 0.25;
|
|
}
|
|
[cur-input=DPAD_DOWN] .input-viz[visual-input~=DPAD_DOWN] {
|
|
opacity: 1;
|
|
}
|
|
|
|
.input-viz[visual-input~=DPAD_LEFT] {
|
|
opacity: 0.25;
|
|
}
|
|
[cur-input=DPAD_LEFT] .input-viz[visual-input~=DPAD_LEFT] {
|
|
opacity: 1;
|
|
}
|
|
|
|
.input-viz[visual-input~=DPAD_RIGHT] {
|
|
opacity: 0.25;
|
|
}
|
|
[cur-input=DPAD_RIGHT] .input-viz[visual-input~=DPAD_RIGHT] {
|
|
opacity: 1;
|
|
}
|
|
|
|
.input-viz[visual-input~=L] {
|
|
opacity: 0.25;
|
|
}
|
|
[cur-input=L] .input-viz[visual-input~=L] {
|
|
opacity: 1;
|
|
}
|
|
|
|
.input-viz[visual-input~=R] {
|
|
opacity: 0.25;
|
|
}
|
|
[cur-input=R] .input-viz[visual-input~=R] {
|
|
opacity: 1;
|
|
}
|
|
|
|
.input-viz[visual-input~=C_UP] {
|
|
opacity: 0.25;
|
|
}
|
|
[cur-input=C_UP] .input-viz[visual-input~=C_UP] {
|
|
opacity: 1;
|
|
}
|
|
|
|
.input-viz[visual-input~=C_DOWN] {
|
|
opacity: 0.25;
|
|
}
|
|
[cur-input=C_DOWN] .input-viz[visual-input~=C_DOWN] {
|
|
opacity: 1;
|
|
}
|
|
|
|
.input-viz[visual-input~=C_LEFT] {
|
|
opacity: 0.25;
|
|
}
|
|
[cur-input=C_LEFT] .input-viz[visual-input~=C_LEFT] {
|
|
opacity: 1;
|
|
}
|
|
|
|
.input-viz[visual-input~=C_RIGHT] {
|
|
opacity: 0.25;
|
|
}
|
|
[cur-input=C_RIGHT] .input-viz[visual-input~=C_RIGHT] {
|
|
opacity: 1;
|
|
}
|
|
|
|
.input-viz[visual-input~=X_AXIS_NEG] {
|
|
opacity: 0.25;
|
|
}
|
|
[cur-input=X_AXIS_NEG] .input-viz[visual-input~=X_AXIS_NEG] {
|
|
opacity: 1;
|
|
}
|
|
|
|
.input-viz[visual-input~=X_AXIS_POS] {
|
|
opacity: 0.25;
|
|
}
|
|
[cur-input=X_AXIS_POS] .input-viz[visual-input~=X_AXIS_POS] {
|
|
opacity: 1;
|
|
}
|
|
|
|
.input-viz[visual-input~=Y_AXIS_NEG] {
|
|
opacity: 0.25;
|
|
}
|
|
[cur-input=Y_AXIS_NEG] .input-viz[visual-input~=Y_AXIS_NEG] {
|
|
opacity: 1;
|
|
}
|
|
|
|
.input-viz[visual-input~=Y_AXIS_POS] {
|
|
opacity: 0.25;
|
|
}
|
|
[cur-input=Y_AXIS_POS] .input-viz[visual-input~=Y_AXIS_POS] {
|
|
opacity: 1;
|
|
}
|
|
|
|
.input-viz__button {
|
|
color: #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: #3333FF;
|
|
}
|
|
.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, 0.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: #FFFFFF;
|
|
}
|
|
.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, 0.8);
|
|
background-color: rgba(185, 125, 242, 0.05);
|
|
color: #CCCCCC;
|
|
transition: color 0.05s linear-in-out, background-color 0.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, 0.3);
|
|
color: #F2F2F2;
|
|
}
|
|
.button:disabled, .button[disabled] {
|
|
color: rgba(255, 255, 255, 0.6);
|
|
}
|
|
.button:active {
|
|
background-color: rgba(185, 125, 242, 0.2);
|
|
color: rgb(244.6, 244.6, 244.6);
|
|
}
|
|
.button--primary {
|
|
border-color: rgba(185, 125, 242, 0.8);
|
|
background-color: rgba(185, 125, 242, 0.05);
|
|
color: #CCCCCC;
|
|
}
|
|
.button--primary:focus, .button--primary:hover {
|
|
border-color: #B97DF2;
|
|
background-color: rgba(185, 125, 242, 0.3);
|
|
color: #F2F2F2;
|
|
}
|
|
.button--primary:disabled, .button--primary[disabled] {
|
|
color: rgba(255, 255, 255, 0.6);
|
|
}
|
|
.button--primary:active {
|
|
background-color: rgba(185, 125, 242, 0.2);
|
|
color: rgb(244.6, 244.6, 244.6);
|
|
}
|
|
.button--secondary {
|
|
border-color: rgba(23, 214, 232, 0.8);
|
|
background-color: rgba(23, 214, 232, 0.05);
|
|
color: #CCCCCC;
|
|
}
|
|
.button--secondary:focus, .button--secondary:hover {
|
|
border-color: #17D6E8;
|
|
background-color: rgba(23, 214, 232, 0.3);
|
|
color: #F2F2F2;
|
|
}
|
|
.button--secondary:disabled, .button--secondary[disabled] {
|
|
color: rgba(255, 255, 255, 0.6);
|
|
}
|
|
.button--secondary:active {
|
|
background-color: rgba(23, 214, 232, 0.2);
|
|
color: rgb(244.6, 244.6, 244.6);
|
|
}
|
|
.button--tertiary {
|
|
border-color: rgba(242, 242, 242, 0.8);
|
|
background-color: rgba(242, 242, 242, 0.05);
|
|
color: #CCCCCC;
|
|
}
|
|
.button--tertiary:focus, .button--tertiary:hover {
|
|
border-color: #F2F2F2;
|
|
background-color: rgba(242, 242, 242, 0.3);
|
|
color: #F2F2F2;
|
|
}
|
|
.button--tertiary:disabled, .button--tertiary[disabled] {
|
|
color: rgba(255, 255, 255, 0.6);
|
|
}
|
|
.button--tertiary:active {
|
|
background-color: rgba(242, 242, 242, 0.2);
|
|
color: rgb(244.6, 244.6, 244.6);
|
|
}
|
|
.button--success {
|
|
border-color: rgba(69, 208, 67, 0.8);
|
|
background-color: rgba(69, 208, 67, 0.05);
|
|
color: #CCCCCC;
|
|
}
|
|
.button--success:focus, .button--success:hover {
|
|
border-color: #45D043;
|
|
background-color: rgba(69, 208, 67, 0.3);
|
|
color: #F2F2F2;
|
|
}
|
|
.button--success:disabled, .button--success[disabled] {
|
|
color: rgba(255, 255, 255, 0.6);
|
|
}
|
|
.button--success:active {
|
|
background-color: rgba(69, 208, 67, 0.2);
|
|
color: rgb(244.6, 244.6, 244.6);
|
|
}
|
|
.button--error {
|
|
border-color: rgba(248, 96, 57, 0.8);
|
|
background-color: rgba(248, 96, 57, 0.05);
|
|
color: #CCCCCC;
|
|
}
|
|
.button--error:focus, .button--error:hover {
|
|
border-color: #F86039;
|
|
background-color: rgba(248, 96, 57, 0.3);
|
|
color: #F2F2F2;
|
|
}
|
|
.button--error:disabled, .button--error[disabled] {
|
|
color: rgba(255, 255, 255, 0.6);
|
|
}
|
|
.button--error:active {
|
|
background-color: rgba(248, 96, 57, 0.2);
|
|
color: rgb(244.6, 244.6, 244.6);
|
|
}
|
|
.button--warning {
|
|
border-color: rgba(233, 205, 53, 0.8);
|
|
background-color: rgba(233, 205, 53, 0.05);
|
|
color: #CCCCCC;
|
|
}
|
|
.button--warning:focus, .button--warning:hover {
|
|
border-color: #E9CD35;
|
|
background-color: rgba(233, 205, 53, 0.3);
|
|
color: #F2F2F2;
|
|
}
|
|
.button--warning:disabled, .button--warning[disabled] {
|
|
color: rgba(255, 255, 255, 0.6);
|
|
}
|
|
.button--warning:active {
|
|
background-color: rgba(233, 205, 53, 0.2);
|
|
color: rgb(244.6, 244.6, 244.6);
|
|
}
|
|
.button:not([disabled]) {
|
|
cursor: pointer;
|
|
}
|
|
.button:disabled, .button[disabled] {
|
|
opacity: 0.5;
|
|
}
|
|
.button__label {
|
|
width: auto;
|
|
height: auto;
|
|
}
|
|
|
|
/*
|
|
<button
|
|
class="icon-button icon-button--error"
|
|
>
|
|
<svg src="icons/Trash.svg" />
|
|
</button>
|
|
*/
|
|
.icon-button {
|
|
color: #CCCCCC;
|
|
transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out, opacity 0.05s linear-in-out, border-color 0.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: #CCCCCC;
|
|
}
|
|
.icon-button svg {
|
|
transition: image-color 0.05s linear-in-out, background-color 0.05s linear-in-out;
|
|
}
|
|
.icon-button:focus, .icon-button:hover {
|
|
color: #F2F2F2;
|
|
background-color: rgba(255, 255, 255, 0.2);
|
|
}
|
|
.icon-button:focus svg, .icon-button:hover svg {
|
|
image-color: #F2F2F2;
|
|
}
|
|
.icon-button:active {
|
|
color: rgb(244.6, 244.6, 244.6);
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
}
|
|
.icon-button:active svg {
|
|
image-color: rgb(244.6, 244.6, 244.6);
|
|
}
|
|
.icon-button:disabled, .icon-button[disabled] {
|
|
color: #CCCCCC;
|
|
opacity: 0.5;
|
|
}
|
|
.icon-button:disabled svg, .icon-button[disabled] svg {
|
|
image-color: #CCCCCC;
|
|
}
|
|
.icon-button:not([disabled]) {
|
|
cursor: pointer;
|
|
}
|
|
.icon-button svg {
|
|
width: 32dp;
|
|
height: 32dp;
|
|
}
|
|
.icon-button--primary {
|
|
border-color: rgba(185, 125, 242, 0.8);
|
|
background-color: rgba(185, 125, 242, 0.05);
|
|
}
|
|
.icon-button--primary:focus, .icon-button--primary:hover {
|
|
border-color: #B97DF2;
|
|
background-color: rgba(185, 125, 242, 0.3);
|
|
}
|
|
.icon-button--primary:active {
|
|
background-color: rgba(185, 125, 242, 0.2);
|
|
}
|
|
.icon-button--secondary {
|
|
border-color: rgba(23, 214, 232, 0.8);
|
|
background-color: rgba(23, 214, 232, 0.05);
|
|
}
|
|
.icon-button--secondary:focus, .icon-button--secondary:hover {
|
|
border-color: #17D6E8;
|
|
background-color: rgba(23, 214, 232, 0.3);
|
|
}
|
|
.icon-button--secondary:active {
|
|
background-color: rgba(23, 214, 232, 0.2);
|
|
}
|
|
.icon-button--tertiary {
|
|
border-color: rgba(242, 242, 242, 0.8);
|
|
background-color: rgba(242, 242, 242, 0.05);
|
|
}
|
|
.icon-button--tertiary:focus, .icon-button--tertiary:hover {
|
|
border-color: #F2F2F2;
|
|
background-color: rgba(242, 242, 242, 0.3);
|
|
}
|
|
.icon-button--tertiary:active {
|
|
background-color: rgba(242, 242, 242, 0.2);
|
|
}
|
|
.icon-button--success {
|
|
border-color: rgba(69, 208, 67, 0.8);
|
|
background-color: rgba(69, 208, 67, 0.05);
|
|
}
|
|
.icon-button--success:focus, .icon-button--success:hover {
|
|
border-color: #45D043;
|
|
background-color: rgba(69, 208, 67, 0.3);
|
|
}
|
|
.icon-button--success:active {
|
|
background-color: rgba(69, 208, 67, 0.2);
|
|
}
|
|
.icon-button--error {
|
|
border-color: rgba(248, 96, 57, 0.8);
|
|
background-color: rgba(248, 96, 57, 0.05);
|
|
}
|
|
.icon-button--error:focus, .icon-button--error:hover {
|
|
border-color: #F86039;
|
|
background-color: rgba(248, 96, 57, 0.3);
|
|
}
|
|
.icon-button--error:active {
|
|
background-color: rgba(248, 96, 57, 0.2);
|
|
}
|
|
.icon-button--warning {
|
|
border-color: rgba(233, 205, 53, 0.8);
|
|
background-color: rgba(233, 205, 53, 0.05);
|
|
}
|
|
.icon-button--warning:focus, .icon-button--warning:hover {
|
|
border-color: #E9CD35;
|
|
background-color: rgba(233, 205, 53, 0.3);
|
|
}
|
|
.icon-button--warning:active {
|
|
background-color: rgba(233, 205, 53, 0.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: 0.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: 0.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;
|
|
}
|
|
|
|
/*
|
|
Example layout:
|
|
<button class="menu-list-item menu-list-item--right">
|
|
<div class="menu-list-item__bullet">•</div>
|
|
<div class="menu-list-item__label">Setup controls</div>
|
|
</button>
|
|
- Variants:
|
|
.menu-list-item--right (align to right side)
|
|
- Optional:
|
|
- <div class="subtitle-title__disclaimer">Coming Soon™</div>
|
|
|
|
*/
|
|
.menu-list-item {
|
|
color: #CCCCCC;
|
|
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: #CCCCCC;
|
|
}
|
|
.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: 0.5;
|
|
tab-index: none;
|
|
cursor: default;
|
|
}
|
|
|
|
.menu-list-item__bullet {
|
|
margin-right: 12dp;
|
|
opacity: 0;
|
|
}
|
|
|
|
/*
|
|
Example layout:
|
|
|
|
<button class="subtitle-title" disabled>
|
|
<h3>Zelda 64: Recompiled</h3>
|
|
<h1>Ocarina of Time</h1>
|
|
<div class="subtitle-title__disclaimer">Coming Soon™</div>
|
|
</button>
|
|
- Variants:
|
|
.subtitle-title--right (align to right side)
|
|
- Optional:
|
|
- <div class="subtitle-title__disclaimer">Coming Soon™</div>
|
|
|
|
*/
|
|
.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: #CCCCCC;
|
|
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: 0.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 0.05s linear-in-out, background-color 0.05s linear-in-out, opacity 0.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: 0.9;
|
|
background: rgba(0, 0, 0, 0);
|
|
cursor: pointer;
|
|
}
|
|
.toggle:hover, .toggle:focus-visible, .toggle:focus {
|
|
opacity: 1;
|
|
background-color: rgba(23, 214, 232, 0.3);
|
|
}
|
|
.toggle:active {
|
|
opacity: 1;
|
|
background-color: rgba(23, 214, 232, 0.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: 0.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 0.05s linear-in-out, background-color 0.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, 0.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, 0.2);
|
|
background: rgba(8, 7, 13, 0.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, 0.1);
|
|
}
|
|
.prompt__controls .button {
|
|
min-width: 233.3333333333dp;
|
|
margin: 0 12dp;
|
|
text-align: center;
|
|
nav-up: none;
|
|
nav-down: none;
|
|
}
|
|
|
|
.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: #CCCCCC;
|
|
transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out, opacity 0.05s linear-in-out;
|
|
border-bottom-width: 1.1dp;
|
|
border-bottom-color: rgba(255, 255, 255, 0.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: #CCCCCC;
|
|
}
|
|
.config-debug-option svg {
|
|
transition: image-color 0.05s linear-in-out, background-color 0.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, 0.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: 0.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 0.05s linear-in-out, background-color 0.05s linear-in-out, opacity 0.05s linear-in-out, border-color 0.05s linear-in-out;
|
|
border-width: 1.1dp;
|
|
border-color: rgba(255, 255, 255, 0.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, 0.05);
|
|
cursor: pointer;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
padding: 14dp;
|
|
}
|
|
.config-debug__select-wrapper select svg {
|
|
transition: image-color 0.05s linear-in-out, background-color 0.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, 0.8);
|
|
background-color: rgba(255, 255, 255, 0.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, 0.8);
|
|
background-color: #191622;
|
|
padding: 4dp 0;
|
|
margin-top: 2dp;
|
|
border-radius: 12dp;
|
|
}
|
|
.config-debug__select-wrapper select selectbox option {
|
|
transition: color 0.05s linear-in-out, background-color 0.05s linear-in-out;
|
|
padding: 8dp 12dp;
|
|
background-color: rgba(0, 0, 0, 0);
|
|
color: #CCCCCC;
|
|
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, 0.2);
|
|
}
|
|
.config-debug__select-wrapper select selectbox option:hover:not(:checked) {
|
|
cursor: pointer;
|
|
}
|
|
.config-debug__select-wrapper select selectbox option:checked {
|
|
color: #FFFFFF;
|
|
background-color: rgba(255, 255, 255, 0.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;
|
|
}
|
|
}
|