add combos tool
All checks were successful
Deploy Sokko G / deploy (push) Successful in 7s

This commit is contained in:
Shinuwa 2026-07-31 14:46:28 +02:00
parent 025cd4bf22
commit 7b4cfb7dc2
13 changed files with 1829 additions and 2 deletions

View file

@ -233,6 +233,25 @@
grid-row: auto;
}
.combos-device-row,
.combos-form-grid,
.combos-palette {
grid-template-columns: 1fr;
}
.combo-card {
grid-template-columns: 30px minmax(0, 1fr);
}
.combo-card-main {
grid-template-columns: 1fr;
}
.combo-card-actions {
grid-column: 2;
justify-content: flex-end;
}
.toolbox-actions-row {
align-items: stretch;
flex-direction: column;

View file

@ -742,6 +742,11 @@
-webkit-mask-image: url("/static/icons/table.svg");
}
.module-icon-controller {
mask-image: url("/static/icons/controller.svg");
-webkit-mask-image: url("/static/icons/controller.svg");
}
.tabs {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
@ -2271,6 +2276,663 @@ textarea:focus {
padding-inline: 10px;
}
.combos-module {
display: grid;
gap: 12px;
padding: var(--space-4);
}
.combos-editor {
display: grid;
gap: 12px;
}
.combos-device-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 10px;
align-items: end;
}
.combos-device-row label,
.combos-form-grid label {
display: grid;
gap: 6px;
min-width: 0;
color: var(--color-text-muted);
font-size: var(--font-size-xs);
font-weight: 800;
}
.combos-device-row select,
.combos-form-grid select,
.combos-form-grid input {
min-width: 0;
}
.combos-keyboard-layout-switch {
display: inline-flex;
width: fit-content;
align-items: center;
padding: 4px;
border: 1px solid rgba(165, 180, 252, 0.12);
border-radius: var(--radius-md);
background: rgba(5, 7, 17, 0.26);
}
.combos-keyboard-layout-switch button {
min-height: 34px;
padding: 0 10px;
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;
}
.combos-keyboard-layout-switch button.active {
border-color: rgba(246, 196, 83, 0.26);
background: rgba(246, 196, 83, 0.1);
color: var(--color-text-primary);
}
.combos-add-form {
display: grid;
gap: 12px;
}
.combos-form-grid {
display: grid;
grid-template-columns: minmax(120px, 0.8fr) minmax(0, 1.2fr);
gap: 10px;
}
.combo-draft-panel {
display: grid;
gap: 10px;
padding: 10px;
border: 1px solid rgba(165, 180, 252, 0.12);
border-radius: var(--radius-md);
background: rgba(5, 7, 17, 0.32);
}
.combo-draft-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.combos-simultaneous-toggle {
display: inline-flex;
width: auto;
min-width: 116px;
min-height: 34px;
padding: 3px;
border: 1px solid rgba(165, 180, 252, 0.12);
border-radius: var(--radius-md);
background: rgba(5, 7, 17, 0.26);
color: var(--color-text-secondary);
justify-content: stretch;
gap: 3px;
}
.combos-simultaneous-toggle span {
display: inline-grid;
min-width: 50px;
min-height: 26px;
place-items: center;
border-radius: var(--radius-sm);
color: var(--color-text-secondary);
font-size: var(--font-size-xs);
font-weight: 900;
}
.combos-simultaneous-toggle span.active {
background: rgba(246, 196, 83, 0.12);
color: var(--color-text-primary);
}
.combo-draft-actions .primary {
min-width: 104px;
}
.combos-palette {
display: grid;
grid-template-columns: minmax(180px, 0.8fr) minmax(0, 1.2fr);
gap: 10px;
}
.combos-palette-column {
display: grid;
align-content: start;
gap: 10px;
min-width: 0;
}
.combos-palette-group {
display: grid;
gap: 8px;
min-width: 0;
padding: 9px;
border: 1px solid rgba(165, 180, 252, 0.12);
border-radius: var(--radius-md);
background: rgba(5, 7, 17, 0.24);
}
.combos-palette-group > span {
color: var(--color-text-muted);
font-size: var(--font-size-xs);
font-weight: 900;
}
.combos-palette-group > div {
display: flex;
flex-wrap: wrap;
gap: 7px;
}
.combos-palette-group.is-direction-grid > div {
display: grid;
width: fit-content;
grid-template-columns: repeat(3, max-content);
gap: 7px;
}
.combo-palette-empty-cell {
display: block;
width: 34px;
height: 38px;
}
.combos-custom-key-form {
grid-template-columns: minmax(0, 1fr) auto;
}
.combos-category-list {
display: grid;
gap: 10px;
}
.combos-category-title {
display: inline-flex;
min-width: 0;
align-items: center;
gap: 8px;
}
.combos-category-title h3 {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.combos-category-header > div {
gap: 6px;
}
.combos-root-list {
padding: 0;
}
.combos-root-drop-zone {
display: none;
padding: 9px 12px;
border: 1px dashed rgba(165, 180, 252, 0.22);
border-radius: var(--radius-md);
background: rgba(5, 7, 17, 0.2);
color: var(--color-text-muted);
font-size: var(--font-size-xs);
font-weight: 900;
}
.combos-root-drop-zone.is-visible,
.combos-root-drop-zone.is-drop-target {
display: block;
}
.combos-root-drop-zone.is-drop-target {
border-color: rgba(246, 196, 83, 0.72);
background: rgba(246, 196, 83, 0.08);
color: var(--color-text-primary);
}
.combos-list {
display: grid;
gap: 8px;
}
.combo-card {
position: relative;
display: grid;
grid-template-columns: 30px minmax(0, 1fr) auto;
gap: 8px;
align-items: start;
padding: 8px;
border: 1px solid rgba(165, 180, 252, 0.12);
border-radius: var(--radius-md);
background: rgba(5, 7, 17, 0.36);
}
.combo-card.is-editing {
grid-template-columns: 30px minmax(0, 1fr) auto;
}
.combo-card.is-dragging,
.combos-category.is-dragging {
cursor: grabbing;
opacity: 0.58;
transform: scale(0.99);
}
.combo-card.is-drop-target,
.combos-category.is-drop-target {
border-color: rgba(246, 196, 83, 0.72);
box-shadow: inset 0 3px 0 rgba(246, 196, 83, 0.8);
}
.combo-card.is-drop-target.drop-after,
.combos-category.is-drop-target.drop-after {
box-shadow: inset 0 -3px 0 rgba(246, 196, 83, 0.8);
}
.combo-drag-handle {
align-self: start;
}
.combo-card-main {
display: grid;
gap: 7px;
min-width: 0;
}
.combo-title-input {
color: var(--color-text-primary);
font-size: var(--font-size-sm);
font-weight: 900;
}
.combo-card-actions {
display: flex;
gap: 6px;
align-self: start;
}
.combo-save-actions {
display: inline-flex;
gap: 8px;
margin-left: auto;
}
.combo-cancel-button {
min-width: 104px;
min-height: 34px;
padding: 0 12px;
border: 1px solid rgba(165, 180, 252, 0.12);
border-radius: var(--radius-md);
background: rgba(21, 26, 48, 0.64);
color: var(--color-text-secondary);
font-size: var(--font-size-xs);
font-weight: 900;
}
.combo-sequence {
display: flex;
flex-wrap: wrap;
row-gap: 6px;
column-gap: 5px;
align-items: center;
min-width: 0;
}
.combo-step,
.combo-step-inputs,
.combo-step-input {
display: inline-flex;
align-items: center;
gap: 5px;
}
.combo-step {
min-width: 0;
}
.combo-step-inputs {
min-height: 42px;
padding: 3px;
border: 1px solid transparent;
border-radius: var(--radius-pill);
background: transparent;
}
button.combo-step-inputs {
min-width: 0;
min-height: 42px;
color: inherit;
cursor: pointer;
}
.combo-step-inputs.is-single {
min-height: 38px;
padding: 0;
}
.combo-step-inputs.is-simultaneous {
padding: 5px;
border-color: rgba(246, 196, 83, 0.34);
border-radius: var(--radius-md);
background:
linear-gradient(135deg, rgba(246, 196, 83, 0.07), transparent 64%),
rgba(5, 7, 17, 0.28);
}
.combo-step-inputs.is-active {
border-color: rgba(139, 92, 246, 0.72);
background: rgba(139, 92, 246, 0.08);
box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.12);
}
.combo-step-inputs.is-single.is-active {
border-color: transparent;
background: transparent;
box-shadow: none;
}
.combo-step-inputs.is-single.is-active .combo-input-token {
box-shadow:
inset 0 -2px 0 rgba(0, 0, 0, 0.2),
0 0 0 2px rgba(139, 92, 246, 0.18);
}
.combo-step-separator,
.combo-plus {
color: var(--color-text-muted);
font-size: var(--font-size-sm);
font-weight: 900;
}
.combo-step-separator {
margin-inline: 1px;
}
.combo-empty-sequence {
color: var(--color-text-muted);
font-size: var(--font-size-xs);
font-weight: 700;
}
.combo-empty-step {
padding: 0 8px;
color: var(--color-text-muted);
font-size: var(--font-size-xs);
font-weight: 800;
}
.combo-input-token {
--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);
display: inline-flex;
box-sizing: border-box;
width: 34px;
min-width: 34px;
height: 34px;
min-height: 34px;
align-items: center;
justify-content: center;
padding: 0;
border: 1px solid var(--combo-token-border);
border-radius: 50%;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent),
var(--combo-token-bg);
color: var(--combo-token-color);
font-size: 12px;
font-weight: 950;
line-height: 1;
box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.2);
}
button.combo-input-token {
min-width: 36px;
min-height: 36px;
width: 36px;
height: 36px;
padding: 0;
cursor: pointer;
}
button.combo-input-token:hover {
border-color: var(--color-primary-border);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent),
rgba(32, 39, 69, 0.92);
}
.combo-input-token span {
display: block;
overflow: hidden;
max-width: 100%;
text-overflow: ellipsis;
white-space: nowrap;
}
.combo-input-key,
.combo-input-mouse,
.combo-value-options,
.combo-value-share,
.combo-value-start,
.combo-value-menu,
.combo-value-view,
.combo-value-c-up,
.combo-value-c-down,
.combo-value-c-left,
.combo-value-c-right {
width: auto;
min-width: 48px;
padding: 0 10px;
border-radius: var(--radius-sm);
}
.combo-input-short {
width: 36px;
min-width: 36px;
padding: 0;
}
button.combo-input-token.combo-input-short {
width: 36px;
min-width: 36px;
padding: 0;
}
button.combo-input-token.combo-input-key,
button.combo-input-token.combo-input-mouse,
button.combo-input-token.combo-value-options,
button.combo-input-token.combo-value-share,
button.combo-input-token.combo-value-start,
button.combo-input-token.combo-value-menu,
button.combo-input-token.combo-value-view,
button.combo-input-token.combo-value-c-up,
button.combo-input-token.combo-value-c-down,
button.combo-input-token.combo-value-c-left,
button.combo-input-token.combo-value-c-right {
width: auto;
min-width: 48px;
padding: 0 10px;
}
button.combo-input-token.combo-input-short {
width: 36px;
min-width: 36px;
padding: 0;
}
.combo-input-key span,
.combo-input-mouse span,
.combo-value-options span,
.combo-value-share span,
.combo-value-start span,
.combo-value-menu span,
.combo-value-view span,
.combo-value-c-up span,
.combo-value-c-down span,
.combo-value-c-left span,
.combo-value-c-right span {
text-overflow: clip;
}
.combo-input-mouse,
button.combo-input-token.combo-input-mouse {
min-width: 62px;
}
.combo-value-l1,
.combo-value-r1,
.combo-value-l2,
.combo-value-r2,
.combo-value-l3,
.combo-value-r3,
.combo-value-lb,
.combo-value-rb,
.combo-value-lt,
.combo-value-rt,
.combo-value-ls,
.combo-value-rs,
.combo-value-zl,
.combo-value-zr {
width: 38px;
min-width: 38px;
height: 38px;
padding: 0;
font-size: 11px;
}
.combo-input-key {
height: 32px;
border-radius: 7px;
background:
linear-gradient(180deg, rgba(245, 247, 255, 0.11), rgba(5, 7, 17, 0.18)),
rgba(16, 20, 38, 0.94);
box-shadow:
inset 0 -3px 0 rgba(0, 0, 0, 0.28),
0 1px 0 rgba(245, 247, 255, 0.08);
}
.combo-value-ctrl,
.combo-value-alt,
.combo-value-shift,
.combo-value-enter,
.combo-value-tab {
min-width: 58px;
}
.combo-value-space {
min-width: 92px;
}
.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-device-playstation.combo-value-triangle {
--combo-token-bg: rgba(55, 214, 122, 0.16);
--combo-token-border: rgba(55, 214, 122, 0.4);
--combo-token-color: #37d67a;
}
.combo-device-playstation.combo-value-circle {
--combo-token-bg: rgba(248, 113, 113, 0.16);
--combo-token-border: rgba(248, 113, 113, 0.4);
--combo-token-color: #f87171;
}
.combo-device-playstation.combo-value-cross {
--combo-token-bg: rgba(96, 165, 250, 0.16);
--combo-token-border: rgba(96, 165, 250, 0.4);
--combo-token-color: #60a5fa;
}
.combo-device-playstation.combo-value-square {
--combo-token-bg: rgba(244, 114, 182, 0.16);
--combo-token-border: rgba(244, 114, 182, 0.4);
--combo-token-color: #f472b6;
}
.combo-device-xbox.combo-value-a {
--combo-token-bg: rgba(101, 212, 110, 0.16);
--combo-token-border: rgba(101, 212, 110, 0.4);
--combo-token-color: #65d46e;
}
.combo-device-xbox.combo-value-b {
--combo-token-bg: rgba(239, 68, 68, 0.16);
--combo-token-border: rgba(239, 68, 68, 0.4);
--combo-token-color: #ef4444;
}
.combo-device-xbox.combo-value-x {
--combo-token-bg: rgba(59, 130, 246, 0.16);
--combo-token-border: rgba(59, 130, 246, 0.4);
--combo-token-color: #3b82f6;
}
.combo-device-xbox.combo-value-y {
--combo-token-bg: rgba(250, 204, 21, 0.16);
--combo-token-border: rgba(250, 204, 21, 0.42);
--combo-token-color: #facc15;
}
.combo-device-switch.combo-value-a,
.combo-device-switch.combo-value-x {
--combo-token-bg: rgba(239, 68, 68, 0.14);
--combo-token-border: rgba(239, 68, 68, 0.36);
--combo-token-color: #fca5a5;
}
.combo-device-switch.combo-value-b,
.combo-device-switch.combo-value-y {
--combo-token-bg: rgba(34, 211, 238, 0.14);
--combo-token-border: rgba(34, 211, 238, 0.34);
--combo-token-color: var(--color-accent-cyan);
}
.combo-device-switch.combo-value-l,
.combo-device-switch.combo-value-r,
.combo-device-switch.combo-value-zl,
.combo-device-switch.combo-value-zr {
--combo-token-bg: rgba(245, 247, 255, 0.1);
--combo-token-border: rgba(245, 247, 255, 0.28);
}
.combo-device-n64.combo-value-a {
--combo-token-bg: rgba(34, 197, 94, 0.18);
--combo-token-color: #86efac;
}
.combo-device-n64.combo-value-b {
--combo-token-bg: rgba(59, 130, 246, 0.18);
--combo-token-color: #93c5fd;
}
.combo-device-n64.combo-value-c-up,
.combo-device-n64.combo-value-c-down,
.combo-device-n64.combo-value-c-left,
.combo-device-n64.combo-value-c-right {
--combo-token-bg: rgba(246, 196, 83, 0.2);
--combo-token-border: rgba(246, 196, 83, 0.42);
--combo-token-color: var(--color-accent-gold);
}
.combo-device-n64.combo-value-start {
--combo-token-bg: rgba(239, 68, 68, 0.16);
--combo-token-color: #fca5a5;
}
.counters-add-form {
grid-template-columns: minmax(0, 1fr) auto;
}