Add hold and special inputs to combos
All checks were successful
Deploy Sokko G / deploy (push) Successful in 6s
All checks were successful
Deploy Sokko G / deploy (push) Successful in 6s
This commit is contained in:
parent
9b72f4934c
commit
1a35dcae7b
15 changed files with 575 additions and 26 deletions
|
|
@ -252,6 +252,31 @@
|
|||
-webkit-mask-image: url("/static/icons/back.svg");
|
||||
}
|
||||
|
||||
.ui-icon-fist {
|
||||
mask-image: url("/static/icons/fist.svg");
|
||||
-webkit-mask-image: url("/static/icons/fist.svg");
|
||||
}
|
||||
|
||||
.ui-icon-foot {
|
||||
mask-image: url("/static/icons/foot.svg");
|
||||
-webkit-mask-image: url("/static/icons/foot.svg");
|
||||
}
|
||||
|
||||
.ui-icon-grab {
|
||||
mask-image: url("/static/icons/grab.svg");
|
||||
-webkit-mask-image: url("/static/icons/grab.svg");
|
||||
}
|
||||
|
||||
.ui-icon-shield {
|
||||
mask-image: url("/static/icons/shield.svg");
|
||||
-webkit-mask-image: url("/static/icons/shield.svg");
|
||||
}
|
||||
|
||||
.ui-icon-gun {
|
||||
mask-image: url("/static/icons/gun.svg");
|
||||
-webkit-mask-image: url("/static/icons/gun.svg");
|
||||
}
|
||||
|
||||
.ui-icon-trash {
|
||||
mask-image: url("/static/icons/trashcan.svg");
|
||||
-webkit-mask-image: url("/static/icons/trashcan.svg");
|
||||
|
|
|
|||
|
|
@ -2732,6 +2732,20 @@ textarea:focus {
|
|||
min-width: 0;
|
||||
}
|
||||
|
||||
.combo-step-input.is-selected .combo-input-token {
|
||||
box-shadow:
|
||||
var(--combo-token-shadow),
|
||||
0 0 0 2px rgba(246, 196, 83, 0.22);
|
||||
}
|
||||
|
||||
.combo-step-input.is-selected .combo-input-token.has-hold {
|
||||
box-shadow:
|
||||
var(--combo-token-shadow),
|
||||
0 0 0 2px rgba(246, 196, 83, 0.22),
|
||||
7px 0 0 -1px var(--combo-hold-shadow),
|
||||
9px 0 6px -3px var(--combo-hold-shadow);
|
||||
}
|
||||
|
||||
.combo-step-inputs {
|
||||
min-height: 42px;
|
||||
padding: 3px;
|
||||
|
|
@ -2775,10 +2789,18 @@ button.combo-step-inputs {
|
|||
|
||||
.combo-step-inputs.is-single.is-active .combo-input-token {
|
||||
box-shadow:
|
||||
inset 0 -2px 0 rgba(0, 0, 0, 0.2),
|
||||
var(--combo-token-shadow),
|
||||
0 0 0 2px rgba(139, 92, 246, 0.18);
|
||||
}
|
||||
|
||||
.combo-step-inputs.is-single.is-active .combo-input-token.has-hold {
|
||||
box-shadow:
|
||||
var(--combo-token-shadow),
|
||||
0 0 0 2px rgba(139, 92, 246, 0.18),
|
||||
7px 0 0 -1px var(--combo-hold-shadow),
|
||||
9px 0 6px -3px var(--combo-hold-shadow);
|
||||
}
|
||||
|
||||
.combo-step-separator,
|
||||
.combo-plus {
|
||||
color: var(--color-text-muted);
|
||||
|
|
@ -2807,6 +2829,8 @@ button.combo-step-inputs {
|
|||
--combo-token-bg: rgba(21, 26, 48, 0.82);
|
||||
--combo-token-border: rgba(165, 180, 252, 0.22);
|
||||
--combo-token-color: var(--color-text-primary);
|
||||
--combo-token-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.2);
|
||||
--combo-hold-shadow: rgba(125, 135, 159, 0.34);
|
||||
display: inline-flex;
|
||||
box-sizing: border-box;
|
||||
width: 34px;
|
||||
|
|
@ -2825,7 +2849,7 @@ button.combo-step-inputs {
|
|||
font-size: 12px;
|
||||
font-weight: 950;
|
||||
line-height: 1;
|
||||
box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.2);
|
||||
box-shadow: var(--combo-token-shadow);
|
||||
}
|
||||
|
||||
button.combo-input-token {
|
||||
|
|
@ -2852,6 +2876,36 @@ button.combo-input-token:hover {
|
|||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.combo-input-token .ui-icon {
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
}
|
||||
|
||||
.combo-input-token.has-hold {
|
||||
position: relative;
|
||||
box-shadow:
|
||||
var(--combo-token-shadow),
|
||||
7px 0 0 -1px var(--combo-hold-shadow),
|
||||
9px 0 6px -3px var(--combo-hold-shadow);
|
||||
}
|
||||
|
||||
.combo-input-hold {
|
||||
position: absolute;
|
||||
right: -7px;
|
||||
bottom: -6px;
|
||||
min-width: 20px;
|
||||
padding: 1px 4px;
|
||||
border: 1px solid rgba(246, 196, 83, 0.34);
|
||||
border-radius: var(--radius-pill);
|
||||
background: rgba(5, 7, 17, 0.92);
|
||||
color: var(--color-accent-gold);
|
||||
font-size: 9px;
|
||||
font-style: normal;
|
||||
font-weight: 950;
|
||||
line-height: 1.2;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.combo-input-key,
|
||||
.combo-input-mouse,
|
||||
.combo-value-options,
|
||||
|
|
@ -2967,9 +3021,86 @@ button.combo-input-token.combo-input-mouse {
|
|||
}
|
||||
|
||||
.combo-input-direction {
|
||||
--combo-token-bg: rgba(34, 211, 238, 0.12);
|
||||
--combo-token-border: rgba(34, 211, 238, 0.3);
|
||||
--combo-token-color: var(--color-accent-cyan);
|
||||
--combo-token-bg:
|
||||
radial-gradient(circle at 50% 42%, rgba(34, 211, 238, 0.26), transparent 64%),
|
||||
rgba(34, 211, 238, 0.12);
|
||||
--combo-token-border: rgba(34, 211, 238, 0.52);
|
||||
--combo-token-color: #67e8f9;
|
||||
--combo-token-shadow:
|
||||
inset 0 -2px 0 rgba(0, 0, 0, 0.24),
|
||||
inset 0 0 0 1px rgba(34, 211, 238, 0.16);
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
button.combo-input-token.combo-input-direction:hover {
|
||||
border-color: rgba(34, 211, 238, 0.72);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent),
|
||||
radial-gradient(circle at 50% 42%, rgba(34, 211, 238, 0.34), transparent 64%),
|
||||
rgba(18, 52, 70, 0.76);
|
||||
}
|
||||
|
||||
.combo-device-n64.combo-value-stick-up-left,
|
||||
.combo-device-n64.combo-value-stick-up,
|
||||
.combo-device-n64.combo-value-stick-up-right,
|
||||
.combo-device-n64.combo-value-stick-left,
|
||||
.combo-device-n64.combo-value-stick-right,
|
||||
.combo-device-n64.combo-value-stick-down-left,
|
||||
.combo-device-n64.combo-value-stick-down,
|
||||
.combo-device-n64.combo-value-stick-down-right {
|
||||
--combo-token-bg:
|
||||
radial-gradient(circle at 38% 30%, rgba(245, 247, 255, 0.2), transparent 28%),
|
||||
radial-gradient(circle at 50% 54%, rgba(34, 211, 238, 0.3), transparent 66%),
|
||||
rgba(14, 75, 94, 0.68);
|
||||
--combo-token-border: rgba(34, 211, 238, 0.62);
|
||||
--combo-token-color: #a5f3fc;
|
||||
--combo-token-shadow:
|
||||
inset 0 -3px 0 rgba(0, 0, 0, 0.24),
|
||||
inset 0 0 0 1px rgba(34, 211, 238, 0.18);
|
||||
}
|
||||
|
||||
.combo-device-n64.combo-value-up-left,
|
||||
.combo-device-n64.combo-value-up,
|
||||
.combo-device-n64.combo-value-up-right,
|
||||
.combo-device-n64.combo-value-left,
|
||||
.combo-device-n64.combo-value-right,
|
||||
.combo-device-n64.combo-value-down-left,
|
||||
.combo-device-n64.combo-value-down,
|
||||
.combo-device-n64.combo-value-down-right {
|
||||
--combo-token-bg:
|
||||
linear-gradient(180deg, rgba(246, 196, 83, 0.12), transparent),
|
||||
rgba(31, 34, 54, 0.92);
|
||||
--combo-token-border: rgba(246, 196, 83, 0.48);
|
||||
--combo-token-color: #f8d982;
|
||||
--combo-token-shadow:
|
||||
inset 0 -3px 0 rgba(0, 0, 0, 0.28),
|
||||
inset 0 0 0 1px rgba(246, 196, 83, 0.14);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
button.combo-device-n64.combo-value-stick-up-left:hover,
|
||||
button.combo-device-n64.combo-value-stick-up:hover,
|
||||
button.combo-device-n64.combo-value-stick-up-right:hover,
|
||||
button.combo-device-n64.combo-value-stick-left:hover,
|
||||
button.combo-device-n64.combo-value-stick-right:hover,
|
||||
button.combo-device-n64.combo-value-stick-down-left:hover,
|
||||
button.combo-device-n64.combo-value-stick-down:hover,
|
||||
button.combo-device-n64.combo-value-stick-down-right:hover {
|
||||
border-color: rgba(34, 211, 238, 0.78);
|
||||
}
|
||||
|
||||
button.combo-device-n64.combo-value-up-left:hover,
|
||||
button.combo-device-n64.combo-value-up:hover,
|
||||
button.combo-device-n64.combo-value-up-right:hover,
|
||||
button.combo-device-n64.combo-value-left:hover,
|
||||
button.combo-device-n64.combo-value-right:hover,
|
||||
button.combo-device-n64.combo-value-down-left:hover,
|
||||
button.combo-device-n64.combo-value-down:hover,
|
||||
button.combo-device-n64.combo-value-down-right:hover {
|
||||
border-color: rgba(246, 196, 83, 0.7);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(246, 196, 83, 0.16), transparent),
|
||||
rgba(38, 40, 62, 0.96);
|
||||
}
|
||||
|
||||
.combo-device-playstation.combo-value-triangle {
|
||||
|
|
@ -3066,6 +3197,104 @@ button.combo-input-token.combo-input-mouse {
|
|||
--combo-token-color: #fca5a5;
|
||||
}
|
||||
|
||||
.combo-value-fist,
|
||||
.combo-value-foot,
|
||||
.combo-value-grab,
|
||||
.combo-value-protect,
|
||||
.combo-value-shoot {
|
||||
--combo-token-bg: rgba(217, 70, 239, 0.14);
|
||||
--combo-token-border: rgba(217, 70, 239, 0.34);
|
||||
--combo-token-color: var(--color-accent-pink);
|
||||
}
|
||||
|
||||
.combo-value-grab .ui-icon {
|
||||
width: 21px;
|
||||
height: 21px;
|
||||
}
|
||||
|
||||
button.combo-input-token.combo-value-grab .ui-icon {
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
}
|
||||
|
||||
.combo-hold-field {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.combo-hold-controls {
|
||||
display: inline-flex;
|
||||
width: 92px;
|
||||
min-width: 92px;
|
||||
min-height: 34px;
|
||||
align-items: center;
|
||||
justify-content: stretch;
|
||||
gap: 3px;
|
||||
padding: 3px;
|
||||
border: 1px solid rgba(165, 180, 252, 0.12);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(5, 7, 17, 0.26);
|
||||
}
|
||||
|
||||
.combo-hold-controls button {
|
||||
min-width: 50px;
|
||||
min-height: 26px;
|
||||
padding: 0;
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius-sm);
|
||||
background: transparent;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.combo-hold-controls button.active {
|
||||
border-color: rgba(246, 196, 83, 0.34);
|
||||
background: rgba(246, 196, 83, 0.12);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.combo-hold-controls button:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.48;
|
||||
}
|
||||
|
||||
.combo-hold-field input {
|
||||
box-sizing: border-box;
|
||||
width: 26px;
|
||||
min-width: 26px;
|
||||
height: 26px;
|
||||
min-height: 26px;
|
||||
margin: 0;
|
||||
padding: 0 3px;
|
||||
border: 1px solid transparent;
|
||||
border-color: transparent;
|
||||
border-radius: var(--radius-sm);
|
||||
background: transparent;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.combo-hold-field input:focus {
|
||||
border-color: rgba(246, 196, 83, 0.34);
|
||||
}
|
||||
|
||||
.combo-hold-field input {
|
||||
appearance: textfield;
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
.combo-hold-field input::-webkit-outer-spin-button,
|
||||
.combo-hold-field input::-webkit-inner-spin-button {
|
||||
margin: 0;
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
.counters-add-form {
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue