33 lines
2.9 KiB
CSS
33 lines
2.9 KiB
CSS
/* Gamepad dan ubah tombol (input.js): baris di Pengaturan, dialog "Ubah tombol", cincin fokus untuk navigasi gamepad, toast cadangan. */
|
|
.in-row button{flex:0 0 auto;margin-left:12px;border:1px solid #8da8b153;background:#274352;padding:8px 12px;font-size:15px;font-weight:700;white-space:nowrap}
|
|
.in-row button:hover{background:#2f5365}
|
|
.in-row small{max-width:250px}
|
|
.in-pad-help p{line-height:1.45}
|
|
html.touch .in-keys-row{display:none}
|
|
/* Sesudah memakai gamepad, elemen yang sedang fokus selalu terlihat (fokus lewat skrip tidak selalu memicu :focus-visible). Hilang lagi saat mouse/keyboard dipakai. */
|
|
html.gp-nav :is(button,summary,input,select,a):focus{outline:2px solid #fff3d4;outline-offset:4px}
|
|
#keymap-dialog{width:540px}
|
|
#keymap-dialog h2{font-size:30px;margin:6px 0 4px}
|
|
#keymap-dialog p{margin:0}
|
|
.km-lead{font-size:15px;line-height:1.35;margin-bottom:12px!important}
|
|
.km-grid{display:grid;grid-template-rows:repeat(6,auto);grid-auto-flow:column;grid-template-columns:1fr 1fr;gap:0 26px}
|
|
.km-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:4px 0;border-bottom:1px solid #98abb72e;font-size:16px;font-weight:700}
|
|
.km-key{flex:0 0 auto;min-width:92px;padding:4px 10px;font:700 15px/20px Rajdhani,sans-serif;text-align:center;background:#ecddbb;color:#102731;border:2px solid transparent}
|
|
.km-key:hover{background:#fff1cf}
|
|
.km-key.changed{border-color:var(--gold)}
|
|
.km-key.listening{background:#102731;color:#fff3d4;border-color:#8fe3d0;animation:km-blink 1s ease-in-out infinite}
|
|
@keyframes km-blink{50%{border-color:#102731}}
|
|
.km-msg{min-height:40px;margin:10px 0 8px!important;font-size:14px!important;line-height:1.3!important;color:#bdd0d3!important}
|
|
.km-msg.bad{color:#f3bdaa!important}
|
|
.km-actions{display:flex;gap:8px}
|
|
.km-actions button{flex:1;padding:9px 12px;font-size:16px;font-weight:700;border:1px solid #8da8b153;background:#274352}
|
|
.km-actions button:hover{background:#2f5365}
|
|
.km-actions .km-done{border:0;background:var(--gold);color:#132b37}
|
|
.km-actions .km-done:hover{background:#fae0b4}
|
|
.km-note{margin-top:10px!important;font-size:12px!important;line-height:1.3!important;color:#91a7b0!important}
|
|
.in-toast{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:90;background:#101923ee;border:1px solid #e8b84a;color:#f6eedb;padding:8px 16px;border-radius:6px;font:700 17px Rajdhani,Arial,sans-serif;letter-spacing:.05em;pointer-events:none;transition:opacity .5s}
|
|
.in-toast.out{opacity:0}
|
|
@media(max-width:620px){.km-grid{grid-template-rows:none;grid-auto-flow:row;grid-template-columns:1fr}#keymap-dialog{padding:18px}}
|
|
@media(max-height:560px){#keymap-dialog{padding:16px 22px}#keymap-dialog h2{font-size:26px}.km-lead{font-size:14px;margin-bottom:8px!important}.km-row{padding:2px 0;font-size:15px}.km-key{padding:2px 10px}.km-msg{min-height:34px;margin:6px 0!important}.km-note{margin-top:6px!important}}
|
|
@media(prefers-reduced-motion:reduce){.km-key.listening{animation:none}}
|