diff --git a/dist/sai.css b/dist/sai.css index d861d0f..9145676 100644 --- a/dist/sai.css +++ b/dist/sai.css @@ -617,10 +617,6 @@ backdrop-filter: blur(16px); } -.sai-speaker-stage.can-continue .sai-speaker-card { - padding-right: clamp(8.5rem, 13vw, 12rem); -} - .sai-speaker-card.is-entering { animation: saiSpeakerIn 360ms cubic-bezier(0.2, 0.8, 0.2, 1) both; } @@ -728,37 +724,33 @@ white-space: nowrap; } -.sai-speaker-card > .sai-continue { +.sai-speaker-stage > .sai-continue { position: absolute; right: 1rem; - bottom: 1rem; - z-index: 2; + bottom: calc(128px + 0.85rem); + z-index: 7; display: inline-flex; align-items: center; justify-content: center; - min-width: 7.5rem; - min-height: 2.7rem; - padding: 0.7rem 1rem; - border-color: rgba(255, 138, 42, 0.72); - border-radius: 999px; - background: - linear-gradient(180deg, rgba(255, 138, 42, 0.28), rgba(255, 138, 42, 0.16)), - rgba(5, 8, 13, 0.88); + min-height: 2rem; + padding: 0.25rem 0; + border: 0; + background: transparent; color: rgba(255, 244, 230, 1); font-family: var(--sai-body-font); - font-size: 0.92rem; - font-weight: 700; + font-size: 0.96rem; + font-weight: 800; line-height: 1; text-align: center; white-space: nowrap; - box-shadow: - 0 0 0 1px rgba(255, 138, 42, 0.22), - 0 14px 34px rgba(0, 0, 0, 0.44), - 0 0 28px rgba(255, 138, 42, 0.16), - inset 0 1px 0 rgba(255, 255, 255, 0.12); + text-shadow: + 0 2px 10px rgba(0, 0, 0, 0.82), + 0 0 18px rgba(255, 138, 42, 0.46); + box-shadow: none; + backdrop-filter: none; } -.sai-speaker-card > .sai-continue::after { +.sai-speaker-stage > .sai-continue::after { content: ">"; margin-left: 0.55rem; color: rgba(255, 198, 120, 1); @@ -766,6 +758,12 @@ font-weight: 800; } +.sai-speaker-stage > .sai-continue:hover, +.sai-speaker-stage > .sai-continue:focus-visible { + color: rgba(255, 198, 120, 1); + transform: translateY(-1px); +} + .sai-speaker-controls .sai-choice:hover, .sai-speaker-controls .sai-choice:focus-visible, .sai-speaker-controls .sai-continue:hover, @@ -847,11 +845,6 @@ min-height: 128px; } - .sai-speaker-stage.can-continue .sai-speaker-card { - padding-right: 0; - padding-bottom: 3.7rem; - } - .sai-speaker-body { grid-template-columns: minmax(0, 1fr); } @@ -875,10 +868,9 @@ flex: 1 1 min(100%, 13rem); } - .sai-speaker-card > .sai-continue { + .sai-speaker-stage > .sai-continue { right: 0.75rem; - bottom: 0.75rem; - min-width: 7rem; + bottom: calc(128px + 0.65rem); } } diff --git a/dist/sai.js b/dist/sai.js index 9d5f815..9b12763 100644 --- a/dist/sai.js +++ b/dist/sai.js @@ -1542,7 +1542,7 @@ container.classList.add("sai-player-speaker"); variables.hidden = !showVariables; stageState.controls.append(choices); - stageState.card.append(continueButton); + stageState.stage.append(continueButton); container.replaceChildren(status, stageState.stage, variables); } else { container.replaceChildren( diff --git a/src/sai.css b/src/sai.css index d861d0f..9145676 100644 --- a/src/sai.css +++ b/src/sai.css @@ -617,10 +617,6 @@ backdrop-filter: blur(16px); } -.sai-speaker-stage.can-continue .sai-speaker-card { - padding-right: clamp(8.5rem, 13vw, 12rem); -} - .sai-speaker-card.is-entering { animation: saiSpeakerIn 360ms cubic-bezier(0.2, 0.8, 0.2, 1) both; } @@ -728,37 +724,33 @@ white-space: nowrap; } -.sai-speaker-card > .sai-continue { +.sai-speaker-stage > .sai-continue { position: absolute; right: 1rem; - bottom: 1rem; - z-index: 2; + bottom: calc(128px + 0.85rem); + z-index: 7; display: inline-flex; align-items: center; justify-content: center; - min-width: 7.5rem; - min-height: 2.7rem; - padding: 0.7rem 1rem; - border-color: rgba(255, 138, 42, 0.72); - border-radius: 999px; - background: - linear-gradient(180deg, rgba(255, 138, 42, 0.28), rgba(255, 138, 42, 0.16)), - rgba(5, 8, 13, 0.88); + min-height: 2rem; + padding: 0.25rem 0; + border: 0; + background: transparent; color: rgba(255, 244, 230, 1); font-family: var(--sai-body-font); - font-size: 0.92rem; - font-weight: 700; + font-size: 0.96rem; + font-weight: 800; line-height: 1; text-align: center; white-space: nowrap; - box-shadow: - 0 0 0 1px rgba(255, 138, 42, 0.22), - 0 14px 34px rgba(0, 0, 0, 0.44), - 0 0 28px rgba(255, 138, 42, 0.16), - inset 0 1px 0 rgba(255, 255, 255, 0.12); + text-shadow: + 0 2px 10px rgba(0, 0, 0, 0.82), + 0 0 18px rgba(255, 138, 42, 0.46); + box-shadow: none; + backdrop-filter: none; } -.sai-speaker-card > .sai-continue::after { +.sai-speaker-stage > .sai-continue::after { content: ">"; margin-left: 0.55rem; color: rgba(255, 198, 120, 1); @@ -766,6 +758,12 @@ font-weight: 800; } +.sai-speaker-stage > .sai-continue:hover, +.sai-speaker-stage > .sai-continue:focus-visible { + color: rgba(255, 198, 120, 1); + transform: translateY(-1px); +} + .sai-speaker-controls .sai-choice:hover, .sai-speaker-controls .sai-choice:focus-visible, .sai-speaker-controls .sai-continue:hover, @@ -847,11 +845,6 @@ min-height: 128px; } - .sai-speaker-stage.can-continue .sai-speaker-card { - padding-right: 0; - padding-bottom: 3.7rem; - } - .sai-speaker-body { grid-template-columns: minmax(0, 1fr); } @@ -875,10 +868,9 @@ flex: 1 1 min(100%, 13rem); } - .sai-speaker-card > .sai-continue { + .sai-speaker-stage > .sai-continue { right: 0.75rem; - bottom: 0.75rem; - min-width: 7rem; + bottom: calc(128px + 0.65rem); } } diff --git a/src/sai.js b/src/sai.js index 9d5f815..9b12763 100644 --- a/src/sai.js +++ b/src/sai.js @@ -1542,7 +1542,7 @@ container.classList.add("sai-player-speaker"); variables.hidden = !showVariables; stageState.controls.append(choices); - stageState.card.append(continueButton); + stageState.stage.append(continueButton); container.replaceChildren(status, stageState.stage, variables); } else { container.replaceChildren(