mirror of
https://github.com/Mr-Wiseguy/Zelda64Recomp.git
synced 2025-02-10 17:08:49 +01:00
2513 lines
61 KiB
Plaintext
2513 lines
61 KiB
Plaintext
/* 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;
|
|
transition: color 0.05s linear-in-out;
|
|
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;
|
|
}
|
|
}
|