.keybind-selector-inner { padding: 27px 12px 6px; min-height: 25px; } .keybind-selector > * { cursor: pointer !important; } .keybind-selector .MuiInputBase-root { background-color: var(--c600) !important; } .keybind-selector-inner .keybind { padding: 2px 4px 1px; margin-right: 3px; margin-bottom: 3px; border-radius: 4px; user-select: none; cursor: pointer; transform: scale(1); display: inline-block; transition-property: background-color, opacity, transform; transition-duration: 100ms; background-color: var(--c800); color: var(--c100); } .keybind-selector-inner .placeholder { font-style: italic; color: var(--c700); margin-top: 2px; display: inline-block; } .keybind-selector-inner .keybind:hover { opacity: .7; } .keybind-selector-inner .keybind.new { opacity: 0; transform: scale(.85); } .keybind-selector * { font-family: "Inter", sans-serif !important; } .keybind-selector:focus .keybind-selector-inner .keybind { background-color: var(--gruble); } .keybind-selector:focus label { color: var(--gruble) !important; } .keybind-selector:focus .MuiFilledInput-underline:after { transform: scaleX(1); } .keybind-selector:focus { outline: none; }