GameCult/Sai
Watch
9
0
Fork
You've already forked Sai
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Make speaker continue a canvas prompt

Browse source
This commit is contained in:
Meta Vens 2026-06-04 21:13:52 +01:00
commit d070159ba5
4 changed files with 48 additions and 64 deletions
Download patch file Download diff file Expand all files Collapse all files

54
dist/sai.css vendored
View file

@ -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);
}
}

2
dist/sai.js vendored
View file

@ -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(

54
src/sai.css
View file

@ -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);
}
}

2
src/sai.js
View file

@ -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(