Add overlay gamepad support for keyboard-only mode (#17)

This commit is contained in:
2026-03-11 20:34:46 -07:00
committed by GitHub
parent 2f17859b7b
commit 4d7c80f2e4
49 changed files with 5677 additions and 42 deletions

View File

@@ -55,6 +55,34 @@ body {
pointer-events: auto;
}
.controller-status-toast {
position: absolute;
top: 16px;
left: 16px;
max-width: min(360px, calc(100vw - 32px));
padding: 8px 12px;
border-radius: 999px;
border: 1px solid rgba(138, 213, 202, 0.45);
background:
linear-gradient(135deg, rgba(10, 44, 40, 0.94), rgba(8, 28, 33, 0.94));
color: rgba(228, 255, 251, 0.98);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.02em;
pointer-events: none;
opacity: 0;
transform: translateY(-6px);
transition:
opacity 160ms ease,
transform 160ms ease;
z-index: 1300;
}
.controller-status-toast:not(.hidden) {
opacity: 1;
transform: translateY(0);
}
.overlay-error-toast {
position: absolute;
top: 16px;
@@ -321,6 +349,12 @@ body.settings-modal-open #subtitleContainer {
pointer-events: none !important;
}
body.settings-modal-open iframe.yomitan-popup,
body.settings-modal-open iframe[id^='yomitan-popup'] {
display: none !important;
pointer-events: none !important;
}
#subtitleRoot .c {
display: inline;
position: relative;
@@ -1013,6 +1047,10 @@ iframe[id^='yomitan-popup'] {
overflow-y: auto;
}
.runtime-options-list-entry {
list-style: none;
}
.runtime-options-item {
display: flex;
flex-direction: column;
@@ -1022,7 +1060,15 @@ iframe[id^='yomitan-popup'] {
cursor: pointer;
}
.runtime-options-item:last-child {
.runtime-options-item-button {
width: 100%;
border: none;
background: transparent;
text-align: left;
color: inherit;
}
.runtime-options-list-entry:last-child .runtime-options-item {
border-bottom: none;
}
@@ -1030,6 +1076,11 @@ iframe[id^='yomitan-popup'] {
background: rgba(100, 180, 255, 0.15);
}
.runtime-options-item-button:focus-visible {
outline: 2px solid rgba(100, 180, 255, 0.85);
outline-offset: -2px;
}
.runtime-options-label {
font-size: 14px;
color: #fff;
@@ -1055,12 +1106,84 @@ iframe[id^='yomitan-popup'] {
color: #ff8f8f;
}
.controller-debug-content {
position: relative;
width: min(760px, 94%);
}
.controller-debug-toast {
position: absolute;
top: 18px;
right: 56px;
z-index: 2;
max-width: min(320px, calc(100% - 88px));
padding: 8px 12px;
border-radius: 999px;
border: 1px solid rgba(120, 214, 168, 0.34);
background: rgba(20, 38, 30, 0.96);
color: rgba(220, 255, 232, 0.98);
font-size: 12px;
line-height: 1.3;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
}
.controller-debug-toast.error {
border-color: rgba(255, 143, 143, 0.34);
background: rgba(52, 22, 24, 0.96);
color: rgba(255, 225, 225, 0.98);
}
.controller-debug-summary {
min-height: 18px;
font-size: 13px;
color: rgba(255, 255, 255, 0.86);
line-height: 1.45;
}
.controller-debug-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.controller-debug-span {
grid-column: 1 / -1;
}
.controller-debug-section-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 8px;
}
.controller-debug-pre {
min-height: 220px;
margin: 0;
padding: 12px;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(0, 0, 0, 0.38);
color: rgba(255, 255, 255, 0.9);
font-size: 12px;
line-height: 1.5;
overflow: auto;
white-space: pre-wrap;
}
.session-help-content {
width: min(760px, 92%);
max-height: 84%;
color: rgba(255, 255, 255, 0.95);
}
@media (max-width: 720px) {
.controller-debug-grid {
grid-template-columns: 1fr;
}
}
.session-help-shortcut,
.session-help-warning,
.session-help-status {