Switch to VectorEngine gpt-image-2 and edits
Replace uses of the legacy `gpt-image-2-all` model with `gpt-image-2` and standardize image workflows: no-reference generation uses POST /v1/images/generations, any-reference flows use POST /v1/images/edits with multipart `image` parts. Update SKILLs, generation scripts, decision logs, and docs to reflect the contract change and edits-vs-generations guidance. Apply corresponding changes across backend (api-server match3d/puzzle modules, openai image adapter, mappers, telemetry, spacetime client/module), frontend components and services (Match3D, Puzzle, CreativeImageInputPanel, runtime shells), and add new spritesheet/parser files and tests. Also add media/logo.png. These changes align repository code and documentation with the VectorEngine image API contract and update generation/upload handling (green-screen -> alpha processing, spritesheet handling, and related tests).
This commit is contained in:
552
src/index.css
552
src/index.css
@@ -250,26 +250,22 @@ body {
|
||||
|
||||
62% {
|
||||
opacity: 1;
|
||||
transform:
|
||||
translate3d(
|
||||
transform: translate3d(
|
||||
calc(-50% + var(--match3d-fly-dx, 0px) * 0.82),
|
||||
calc(-50% + var(--match3d-fly-dy, 0px) * 0.82 - 10px),
|
||||
0
|
||||
)
|
||||
scale(calc(var(--match3d-fly-scale, 0.68) * 1.06))
|
||||
rotate(4deg);
|
||||
scale(calc(var(--match3d-fly-scale, 0.68) * 1.06)) rotate(4deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform:
|
||||
translate3d(
|
||||
transform: translate3d(
|
||||
calc(-50% + var(--match3d-fly-dx, 0px)),
|
||||
calc(-50% + var(--match3d-fly-dy, 0px)),
|
||||
0
|
||||
)
|
||||
scale(var(--match3d-fly-scale, 0.68))
|
||||
rotate(0deg);
|
||||
scale(var(--match3d-fly-scale, 0.68)) rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -296,8 +292,7 @@ body {
|
||||
}
|
||||
|
||||
.match3d-tray-token-shift {
|
||||
animation: match3d-tray-token-shift 0.24s cubic-bezier(0.2, 0.8, 0.2, 1)
|
||||
both;
|
||||
animation: match3d-tray-token-shift 0.24s cubic-bezier(0.2, 0.8, 0.2, 1) both;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
@@ -309,8 +304,7 @@ body {
|
||||
|
||||
62% {
|
||||
opacity: 1;
|
||||
transform:
|
||||
translate3d(
|
||||
transform: translate3d(
|
||||
calc(-50% + var(--match3d-tray-clear-dx, 0px)),
|
||||
calc(-50% + var(--match3d-tray-clear-dy, 0px)),
|
||||
0
|
||||
@@ -320,8 +314,7 @@ body {
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform:
|
||||
translate3d(
|
||||
transform: translate3d(
|
||||
calc(-50% + var(--match3d-tray-clear-dx, 0px)),
|
||||
calc(-50% + var(--match3d-tray-clear-dy, 0px)),
|
||||
0
|
||||
@@ -359,8 +352,11 @@ body {
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
border-radius: 9999px;
|
||||
background:
|
||||
radial-gradient(circle, rgba(255, 255, 255, 0.95) 0 10%, transparent 12%),
|
||||
background: radial-gradient(
|
||||
circle,
|
||||
rgba(255, 255, 255, 0.95) 0 10%,
|
||||
transparent 12%
|
||||
),
|
||||
radial-gradient(circle, rgba(255, 236, 157, 0.48) 0 42%, transparent 64%);
|
||||
box-shadow:
|
||||
0 0 22px rgba(255, 255, 255, 0.62),
|
||||
@@ -388,8 +384,11 @@ body {
|
||||
|
||||
.match3d-merge-feedback-pulse {
|
||||
animation: match3d-merge-feedback-pulse 0.52s ease-out both;
|
||||
background:
|
||||
radial-gradient(circle, rgba(255, 255, 255, 0.56) 0 18%, transparent 20%),
|
||||
background: radial-gradient(
|
||||
circle,
|
||||
rgba(255, 255, 255, 0.56) 0 18%,
|
||||
transparent 20%
|
||||
),
|
||||
radial-gradient(circle, rgba(255, 255, 255, 0.28) 0 45%, transparent 68%);
|
||||
}
|
||||
|
||||
@@ -640,6 +639,15 @@ body {
|
||||
--platform-nav-item-icon-active-fill: rgba(255, 254, 252, 0.98);
|
||||
--platform-nav-item-icon-active-text: #c7653d;
|
||||
--platform-nav-icon-active-shadow: 0 12px 24px rgba(182, 98, 63, 0.16);
|
||||
--platform-bottom-nav-fill: linear-gradient(180deg, #fffefa, #fff9ef);
|
||||
--platform-bottom-nav-border: rgba(224, 181, 139, 0.58);
|
||||
--platform-bottom-nav-divider: rgba(225, 185, 145, 0.52);
|
||||
--platform-bottom-nav-text: #5b2b19;
|
||||
--platform-bottom-nav-muted-text: #7a4b37;
|
||||
--platform-bottom-nav-active-text: #f15a17;
|
||||
--platform-bottom-nav-primary-fill: linear-gradient(180deg, #ff7a23, #f04d12);
|
||||
--platform-bottom-nav-primary-shadow: 0 12px 24px rgba(240, 77, 18, 0.28);
|
||||
--platform-bottom-nav-primary-text: #fffaf2;
|
||||
--platform-profile-hero-fill: linear-gradient(
|
||||
180deg,
|
||||
rgba(255, 254, 252, 0.96),
|
||||
@@ -897,6 +905,15 @@ body {
|
||||
);
|
||||
--platform-nav-item-icon-active-text: rgb(238 248 255);
|
||||
--platform-nav-icon-active-shadow: 0 12px 24px rgba(8, 14, 42, 0.42);
|
||||
--platform-bottom-nav-fill: linear-gradient(180deg, #fffefa, #fff9ef);
|
||||
--platform-bottom-nav-border: rgba(224, 181, 139, 0.64);
|
||||
--platform-bottom-nav-divider: rgba(225, 185, 145, 0.56);
|
||||
--platform-bottom-nav-text: #5b2b19;
|
||||
--platform-bottom-nav-muted-text: #7a4b37;
|
||||
--platform-bottom-nav-active-text: #f15a17;
|
||||
--platform-bottom-nav-primary-fill: linear-gradient(180deg, #ff7a23, #f04d12);
|
||||
--platform-bottom-nav-primary-shadow: 0 12px 24px rgba(240, 77, 18, 0.3);
|
||||
--platform-bottom-nav-primary-text: #fffaf2;
|
||||
--platform-profile-hero-fill: linear-gradient(
|
||||
180deg,
|
||||
rgba(20, 24, 58, 0.96),
|
||||
@@ -1832,7 +1849,8 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
||||
}
|
||||
|
||||
.creation-work-card.platform-interactive-card:hover {
|
||||
transform: translateX(var(--creation-work-card-swipe-offset, 0)) translateY(-2px);
|
||||
transform: translateX(var(--creation-work-card-swipe-offset, 0))
|
||||
translateY(-2px);
|
||||
border-color: var(--platform-surface-hover-border);
|
||||
box-shadow: 0 28px 60px rgba(0, 0, 0, 0.14);
|
||||
}
|
||||
@@ -1849,7 +1867,11 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
||||
justify-content: flex-end;
|
||||
overflow: hidden;
|
||||
border-radius: inherit;
|
||||
background: linear-gradient(90deg, transparent 0%, rgba(244, 63, 94, 0.12) 62%);
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent 0%,
|
||||
rgba(244, 63, 94, 0.12) 62%
|
||||
);
|
||||
opacity: var(--creation-work-card-action-opacity, 0);
|
||||
pointer-events: none;
|
||||
transition: opacity 160ms ease;
|
||||
@@ -1915,7 +1937,9 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.creation-work-card__side-cover .custom-world-cover-artwork > div:first-of-type {
|
||||
.creation-work-card__side-cover
|
||||
.custom-world-cover-artwork
|
||||
> div:first-of-type {
|
||||
opacity: 0.18;
|
||||
}
|
||||
|
||||
@@ -2451,22 +2475,24 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
||||
}
|
||||
|
||||
.platform-bottom-nav {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
min-height: var(--platform-bottom-nav-height);
|
||||
gap: var(--platform-bottom-nav-gap);
|
||||
border: 1px solid var(--platform-desktop-panel-border);
|
||||
border: 1px solid var(--platform-bottom-nav-border);
|
||||
border-radius: var(--platform-bottom-nav-radius);
|
||||
background: var(--platform-nav-fill);
|
||||
background: var(--platform-bottom-nav-fill);
|
||||
padding: var(--platform-bottom-nav-padding);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.03),
|
||||
0 16px 40px rgba(0, 0, 0, 0.1);
|
||||
backdrop-filter: blur(20px);
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.92),
|
||||
0 10px 24px rgba(119, 63, 25, 0.1);
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
.platform-bottom-nav__button {
|
||||
position: relative;
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
min-width: 0;
|
||||
@@ -2488,7 +2514,19 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
||||
transform 180ms ease;
|
||||
}
|
||||
|
||||
.platform-bottom-nav__button:not(:first-child)::before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: calc(var(--platform-bottom-nav-gap) * -0.5 - 0.5px);
|
||||
width: 1px;
|
||||
height: 48%;
|
||||
content: '';
|
||||
background: var(--platform-bottom-nav-divider);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.platform-bottom-nav__button-content {
|
||||
position: relative;
|
||||
display: flex;
|
||||
min-height: 100%;
|
||||
min-width: 0;
|
||||
@@ -2500,37 +2538,40 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
||||
}
|
||||
|
||||
.platform-bottom-nav__button:hover {
|
||||
color: var(--platform-text-strong);
|
||||
background: var(--platform-nav-item-hover-fill);
|
||||
color: var(--platform-bottom-nav-active-text);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.platform-bottom-nav__button--active {
|
||||
border: 1px solid var(--platform-nav-active-border);
|
||||
background: var(--platform-nav-active-fill);
|
||||
color: var(--platform-text-strong);
|
||||
box-shadow: var(--platform-bottom-nav-active-shadow);
|
||||
border-color: transparent;
|
||||
background: transparent;
|
||||
color: var(--platform-bottom-nav-active-text);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.platform-bottom-nav__button--primary {
|
||||
transform: translateY(-0.18rem);
|
||||
color: var(--platform-text-strong);
|
||||
color: var(--platform-bottom-nav-active-text);
|
||||
}
|
||||
|
||||
.platform-bottom-nav__button--primary .platform-bottom-nav__button-content {
|
||||
transform: translateY(-0.32rem);
|
||||
}
|
||||
|
||||
.platform-bottom-nav__button--primary .platform-bottom-nav__icon-shell {
|
||||
width: calc(var(--platform-bottom-nav-icon-shell-size) + 0.58rem);
|
||||
height: calc(var(--platform-bottom-nav-icon-shell-size) + 0.58rem);
|
||||
background: var(--platform-nav-active-fill);
|
||||
box-shadow: var(--platform-nav-icon-active-shadow);
|
||||
background: var(--platform-bottom-nav-primary-fill);
|
||||
box-shadow: var(--platform-bottom-nav-primary-shadow);
|
||||
}
|
||||
|
||||
.platform-bottom-nav__button--primary .platform-bottom-nav__icon {
|
||||
width: calc(var(--platform-bottom-nav-icon-size) + 0.18rem);
|
||||
height: calc(var(--platform-bottom-nav-icon-size) + 0.18rem);
|
||||
color: var(--platform-nav-item-icon-active-text);
|
||||
color: var(--platform-bottom-nav-primary-text);
|
||||
}
|
||||
|
||||
.platform-bottom-nav__button--primary .platform-bottom-nav__label {
|
||||
color: var(--platform-nav-item-text-active);
|
||||
color: var(--platform-bottom-nav-active-text);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
@@ -2550,6 +2591,11 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
||||
transform 180ms ease;
|
||||
}
|
||||
|
||||
.platform-bottom-nav__icon-shell {
|
||||
background: transparent;
|
||||
color: var(--platform-bottom-nav-text);
|
||||
}
|
||||
|
||||
.platform-bottom-nav__icon-shell {
|
||||
width: var(--platform-bottom-nav-icon-shell-size);
|
||||
height: var(--platform-bottom-nav-icon-shell-size);
|
||||
@@ -2568,6 +2614,11 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
||||
transition: color 180ms ease;
|
||||
}
|
||||
|
||||
.platform-bottom-nav__icon {
|
||||
color: var(--platform-bottom-nav-text);
|
||||
stroke-width: 2.1;
|
||||
}
|
||||
|
||||
.platform-nav-unread-dot {
|
||||
position: absolute;
|
||||
right: 0.16rem;
|
||||
@@ -2591,11 +2642,32 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
||||
transition: color 180ms ease;
|
||||
}
|
||||
|
||||
.platform-bottom-nav__label {
|
||||
color: var(--platform-bottom-nav-muted-text);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.platform-bottom-nav__active-mark {
|
||||
position: absolute;
|
||||
bottom: -0.32rem;
|
||||
left: 50%;
|
||||
width: 2rem;
|
||||
height: 0.16rem;
|
||||
border-radius: 9999px;
|
||||
background: var(--platform-bottom-nav-active-text);
|
||||
transform: translateX(-50%);
|
||||
box-shadow: 0 5px 10px rgba(241, 90, 23, 0.22);
|
||||
}
|
||||
|
||||
.platform-bottom-nav__button:hover .platform-bottom-nav__icon-shell,
|
||||
.platform-desktop-rail__button:hover .platform-desktop-rail__icon-shell {
|
||||
background: var(--platform-nav-item-hover-fill);
|
||||
}
|
||||
|
||||
.platform-bottom-nav__button:hover .platform-bottom-nav__icon-shell {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.platform-bottom-nav__button:hover .platform-bottom-nav__icon,
|
||||
.platform-bottom-nav__button:hover .platform-bottom-nav__label,
|
||||
.platform-desktop-rail__button:hover .platform-desktop-rail__icon,
|
||||
@@ -2603,22 +2675,52 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
||||
color: var(--platform-text-strong);
|
||||
}
|
||||
|
||||
.platform-bottom-nav__button:hover .platform-bottom-nav__icon,
|
||||
.platform-bottom-nav__button:hover .platform-bottom-nav__label {
|
||||
color: var(--platform-bottom-nav-active-text);
|
||||
}
|
||||
|
||||
.platform-bottom-nav__button--active .platform-bottom-nav__icon-shell,
|
||||
.platform-desktop-rail__button--active .platform-desktop-rail__icon-shell {
|
||||
background: var(--platform-nav-item-icon-active-fill);
|
||||
box-shadow: var(--platform-nav-icon-active-shadow);
|
||||
}
|
||||
|
||||
.platform-bottom-nav__button--active .platform-bottom-nav__icon-shell {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.platform-bottom-nav__button--active .platform-bottom-nav__icon,
|
||||
.platform-desktop-rail__button--active .platform-desktop-rail__icon {
|
||||
color: var(--platform-nav-item-icon-active-text);
|
||||
}
|
||||
|
||||
.platform-bottom-nav__button--active .platform-bottom-nav__icon {
|
||||
color: var(--platform-bottom-nav-active-text);
|
||||
}
|
||||
|
||||
.platform-bottom-nav__button--active .platform-bottom-nav__label,
|
||||
.platform-desktop-rail__button--active .platform-desktop-rail__label {
|
||||
color: var(--platform-nav-item-text-active);
|
||||
}
|
||||
|
||||
.platform-bottom-nav__button--active .platform-bottom-nav__label {
|
||||
color: var(--platform-bottom-nav-active-text);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.platform-bottom-nav__button--primary.platform-bottom-nav__button--active
|
||||
.platform-bottom-nav__icon-shell {
|
||||
background: var(--platform-bottom-nav-primary-fill);
|
||||
box-shadow: var(--platform-bottom-nav-primary-shadow);
|
||||
}
|
||||
|
||||
.platform-bottom-nav__button--primary.platform-bottom-nav__button--active
|
||||
.platform-bottom-nav__icon {
|
||||
color: var(--platform-bottom-nav-primary-text);
|
||||
}
|
||||
|
||||
.platform-modal-shell {
|
||||
border: 1px solid var(--platform-modal-border);
|
||||
background: var(--platform-modal-fill);
|
||||
@@ -2691,23 +2793,107 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
||||
color: var(--puzzle-runtime-text-strong);
|
||||
}
|
||||
|
||||
.puzzle-runtime-icon-button--sprite {
|
||||
border-color: transparent;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
backdrop-filter: none;
|
||||
}
|
||||
|
||||
.puzzle-runtime-icon-button--sprite:hover {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.puzzle-runtime-icon-button--precise-hit {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.puzzle-runtime-top-ui-sprite {
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.puzzle-runtime-header-card {
|
||||
background: var(--puzzle-runtime-surface-fill-strong);
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: #fff7ed;
|
||||
filter: none;
|
||||
backdrop-filter: none;
|
||||
}
|
||||
|
||||
.puzzle-runtime-level-title-card {
|
||||
position: relative;
|
||||
min-width: min(14rem, calc(100vw - 7.75rem));
|
||||
min-height: 2.9rem;
|
||||
border: 2px solid rgba(255, 216, 173, 0.64);
|
||||
border-radius: 0.62rem 1.35rem 1.35rem 0.62rem;
|
||||
background: linear-gradient(180deg, rgba(255, 164, 92, 0.18), transparent 46%),
|
||||
linear-gradient(135deg, #c86a34 0%, #b54f25 56%, #a84622 100%);
|
||||
}
|
||||
|
||||
.puzzle-runtime-level-title-card::before {
|
||||
position: absolute;
|
||||
inset: 0.2rem 0.58rem auto 3.05rem;
|
||||
height: 1px;
|
||||
content: '';
|
||||
border-radius: 9999px;
|
||||
background: rgba(255, 232, 199, 0.36);
|
||||
}
|
||||
|
||||
.puzzle-runtime-level-logo {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: block;
|
||||
width: 2.95rem;
|
||||
height: 2.95rem;
|
||||
flex: 0 0 auto;
|
||||
margin: -0.62rem 0 -0.62rem -1.18rem;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.puzzle-runtime-level-logo__image {
|
||||
position: absolute;
|
||||
left: -1.1rem;
|
||||
top: -1.24rem;
|
||||
display: block;
|
||||
width: 5.3rem;
|
||||
height: 5.3rem;
|
||||
max-width: none;
|
||||
object-fit: contain;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.puzzle-runtime-level-badge {
|
||||
background: var(--puzzle-runtime-control-fill);
|
||||
color: var(--puzzle-runtime-accent-text);
|
||||
color: #fffaf2;
|
||||
text-shadow: 0 1px 0 rgba(84, 33, 15, 0.3);
|
||||
}
|
||||
|
||||
.puzzle-runtime-timer {
|
||||
background: var(--puzzle-runtime-control-fill);
|
||||
color: var(--puzzle-runtime-text-strong);
|
||||
min-width: 6.15rem;
|
||||
min-height: 2.05rem;
|
||||
border: 1px solid rgba(223, 185, 145, 0.62);
|
||||
border-top: 0;
|
||||
border-radius: 0 0 0.82rem 0.82rem;
|
||||
background: linear-gradient(180deg, #fff8ed, #fffdf7);
|
||||
color: #4e2a1d;
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.9),
|
||||
0 8px 18px rgba(86, 43, 18, 0.14);
|
||||
}
|
||||
|
||||
.puzzle-runtime-timer--urgent {
|
||||
background: var(--puzzle-runtime-danger-fill);
|
||||
color: var(--puzzle-runtime-danger-text);
|
||||
min-width: 6.15rem;
|
||||
min-height: 2.05rem;
|
||||
border: 1px solid rgba(242, 101, 33, 0.36);
|
||||
border-top: 0;
|
||||
border-radius: 0 0 0.82rem 0.82rem;
|
||||
background: linear-gradient(180deg, #fff2e6, #fffaf1);
|
||||
color: #d84012;
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.88),
|
||||
0 8px 18px rgba(211, 64, 18, 0.16);
|
||||
}
|
||||
|
||||
.puzzle-runtime-board {
|
||||
@@ -2783,6 +2969,25 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
||||
color: var(--puzzle-runtime-text-base);
|
||||
}
|
||||
|
||||
.puzzle-runtime-sprite-tool-button {
|
||||
max-width: 7rem;
|
||||
color: var(--puzzle-runtime-text-base);
|
||||
}
|
||||
|
||||
.puzzle-runtime-sprite-tool-button--precise-hit {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.puzzle-runtime-bottom-ui-sprite {
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.puzzle-runtime-ui-sprite-hit-zone {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.puzzle-runtime-tool-button:hover {
|
||||
background: var(--puzzle-runtime-control-hover-fill);
|
||||
}
|
||||
@@ -2815,6 +3020,12 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
||||
background: var(--puzzle-runtime-backdrop-fill);
|
||||
}
|
||||
|
||||
.puzzle-runtime-modal-overlay--fixed {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 130;
|
||||
}
|
||||
|
||||
.puzzle-runtime-dialog {
|
||||
position: relative;
|
||||
border: 1px solid var(--puzzle-runtime-dialog-border);
|
||||
@@ -2832,8 +3043,7 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
background:
|
||||
linear-gradient(
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(255, 255, 255, 0.16),
|
||||
transparent 36%
|
||||
@@ -2910,11 +3120,27 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
||||
}
|
||||
|
||||
.baby-object-runtime {
|
||||
--baby-object-background-image: linear-gradient(180deg, transparent, transparent);
|
||||
--baby-object-ui-frame-image: linear-gradient(180deg, transparent, transparent);
|
||||
--baby-object-gift-box-image: linear-gradient(180deg, transparent, transparent);
|
||||
--baby-object-background-image: linear-gradient(
|
||||
180deg,
|
||||
transparent,
|
||||
transparent
|
||||
);
|
||||
--baby-object-ui-frame-image: linear-gradient(
|
||||
180deg,
|
||||
transparent,
|
||||
transparent
|
||||
);
|
||||
--baby-object-gift-box-image: linear-gradient(
|
||||
180deg,
|
||||
transparent,
|
||||
transparent
|
||||
);
|
||||
--baby-object-basket-image: linear-gradient(180deg, transparent, transparent);
|
||||
--baby-object-smoke-image: radial-gradient(circle, rgba(255, 255, 255, 0.9), transparent 68%);
|
||||
--baby-object-smoke-image: radial-gradient(
|
||||
circle,
|
||||
rgba(255, 255, 255, 0.9),
|
||||
transparent 68%
|
||||
);
|
||||
--baby-object-left-hand-image: url('/edutainment-baby-object/image2-picture-book-hands/baby-object-left-hand-v8-transparent.png');
|
||||
--baby-object-right-hand-image: url('/edutainment-baby-object/image2-picture-book-hands/baby-object-right-hand-v8-transparent.png');
|
||||
--baby-object-sky: #cfefff;
|
||||
@@ -2930,10 +3156,23 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
||||
min-height: 100dvh;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
background:
|
||||
radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.9) 0 6%, transparent 6.4%),
|
||||
radial-gradient(circle at 80% 10%, rgba(255, 255, 255, 0.78) 0 7%, transparent 7.4%),
|
||||
linear-gradient(180deg, #f8fcff 0%, var(--baby-object-sky) 56%, #dff2cf 57%, #b8df9d 100%);
|
||||
background: radial-gradient(
|
||||
circle at 18% 16%,
|
||||
rgba(255, 255, 255, 0.9) 0 6%,
|
||||
transparent 6.4%
|
||||
),
|
||||
radial-gradient(
|
||||
circle at 80% 10%,
|
||||
rgba(255, 255, 255, 0.78) 0 7%,
|
||||
transparent 7.4%
|
||||
),
|
||||
linear-gradient(
|
||||
180deg,
|
||||
#f8fcff 0%,
|
||||
var(--baby-object-sky) 56%,
|
||||
#dff2cf 57%,
|
||||
#b8df9d 100%
|
||||
);
|
||||
color: var(--baby-object-text);
|
||||
touch-action: none;
|
||||
}
|
||||
@@ -2977,9 +3216,16 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
||||
inset: auto -10% 0;
|
||||
height: 39%;
|
||||
border-radius: 50% 50% 0 0 / 24% 24% 0 0;
|
||||
background:
|
||||
radial-gradient(ellipse at 30% 12%, rgba(255, 255, 255, 0.3) 0 7%, transparent 7.4%),
|
||||
linear-gradient(180deg, var(--baby-object-ground), var(--baby-object-ground-deep));
|
||||
background: radial-gradient(
|
||||
ellipse at 30% 12%,
|
||||
rgba(255, 255, 255, 0.3) 0 7%,
|
||||
transparent 7.4%
|
||||
),
|
||||
linear-gradient(
|
||||
180deg,
|
||||
var(--baby-object-ground),
|
||||
var(--baby-object-ground-deep)
|
||||
);
|
||||
box-shadow: inset 0 24px 42px rgba(255, 255, 255, 0.24);
|
||||
}
|
||||
|
||||
@@ -3053,8 +3299,12 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
||||
transform: translateX(-50%);
|
||||
border: 0.45rem solid #ffe7a8;
|
||||
border-radius: 1.35rem;
|
||||
background:
|
||||
linear-gradient(90deg, transparent 42%, rgba(255, 255, 255, 0.35) 42% 58%, transparent 58%),
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent 42%,
|
||||
rgba(255, 255, 255, 0.35) 42% 58%,
|
||||
transparent 58%
|
||||
),
|
||||
linear-gradient(180deg, #ff8f70, #ff5d78);
|
||||
color: #fff7d7;
|
||||
box-shadow:
|
||||
@@ -3156,12 +3406,31 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
||||
aspect-ratio: 1;
|
||||
transform: translate(-50%, -50%) scale(0.68);
|
||||
border-radius: 50%;
|
||||
background:
|
||||
radial-gradient(circle at 24% 62%, rgba(255, 255, 255, 0.92) 0 12%, transparent 12.8%),
|
||||
radial-gradient(circle at 40% 36%, rgba(255, 255, 255, 0.95) 0 16%, transparent 16.8%),
|
||||
radial-gradient(circle at 62% 38%, rgba(255, 255, 255, 0.9) 0 14%, transparent 14.8%),
|
||||
radial-gradient(circle at 74% 62%, rgba(255, 255, 255, 0.86) 0 12%, transparent 12.8%),
|
||||
radial-gradient(circle at 50% 54%, rgba(255, 242, 202, 0.72) 0 28%, transparent 29%);
|
||||
background: radial-gradient(
|
||||
circle at 24% 62%,
|
||||
rgba(255, 255, 255, 0.92) 0 12%,
|
||||
transparent 12.8%
|
||||
),
|
||||
radial-gradient(
|
||||
circle at 40% 36%,
|
||||
rgba(255, 255, 255, 0.95) 0 16%,
|
||||
transparent 16.8%
|
||||
),
|
||||
radial-gradient(
|
||||
circle at 62% 38%,
|
||||
rgba(255, 255, 255, 0.9) 0 14%,
|
||||
transparent 14.8%
|
||||
),
|
||||
radial-gradient(
|
||||
circle at 74% 62%,
|
||||
rgba(255, 255, 255, 0.86) 0 12%,
|
||||
transparent 12.8%
|
||||
),
|
||||
radial-gradient(
|
||||
circle at 50% 54%,
|
||||
rgba(255, 242, 202, 0.72) 0 28%,
|
||||
transparent 29%
|
||||
);
|
||||
filter: drop-shadow(0 18px 28px rgba(98, 83, 52, 0.12));
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
@@ -3172,7 +3441,11 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
||||
border-radius: 0;
|
||||
background:
|
||||
var(--baby-object-smoke-image) center / contain no-repeat,
|
||||
radial-gradient(circle at 50% 54%, rgba(255, 255, 255, 0.48), transparent 66%);
|
||||
radial-gradient(
|
||||
circle at 50% 54%,
|
||||
rgba(255, 255, 255, 0.48),
|
||||
transparent 66%
|
||||
);
|
||||
}
|
||||
|
||||
.baby-object-runtime__smoke--releasing {
|
||||
@@ -3337,7 +3610,10 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translate(var(--baby-object-intro-target-x), var(--baby-object-intro-target-y))
|
||||
transform: translate(
|
||||
var(--baby-object-intro-target-x),
|
||||
var(--baby-object-intro-target-y)
|
||||
)
|
||||
scale(0.68);
|
||||
}
|
||||
}
|
||||
@@ -3463,15 +3739,18 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
||||
|
||||
.baby-object-runtime__hand--holding {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%) rotate(var(--baby-object-hand-rotate, 0deg)) scale(1.08);
|
||||
transform: translate(-50%, -50%) rotate(var(--baby-object-hand-rotate, 0deg))
|
||||
scale(1.08);
|
||||
}
|
||||
|
||||
.baby-object-runtime__hand--holding-left-corner {
|
||||
transform: translate(-112%, -6%) rotate(var(--baby-object-hand-rotate, 0deg)) scale(1.02);
|
||||
transform: translate(-112%, -6%) rotate(var(--baby-object-hand-rotate, 0deg))
|
||||
scale(1.02);
|
||||
}
|
||||
|
||||
.baby-object-runtime__hand--holding-right-corner {
|
||||
transform: translate(12%, -6%) rotate(var(--baby-object-hand-rotate, 0deg)) scale(1.02);
|
||||
transform: translate(12%, -6%) rotate(var(--baby-object-hand-rotate, 0deg))
|
||||
scale(1.02);
|
||||
}
|
||||
|
||||
.baby-object-runtime__feedback {
|
||||
@@ -3529,7 +3808,8 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
justify-content: space-between;
|
||||
padding: 0 max(3vw, env(safe-area-inset-right)) 0 max(3vw, env(safe-area-inset-left));
|
||||
padding: 0 max(3vw, env(safe-area-inset-right)) 0
|
||||
max(3vw, env(safe-area-inset-left));
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@@ -3549,11 +3829,26 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
||||
z-index: 4;
|
||||
inset: -18% -16% 6%;
|
||||
border-radius: 50%;
|
||||
background:
|
||||
radial-gradient(circle at 50% 42%, rgba(255, 247, 181, 0.55) 0 20%, transparent 21%),
|
||||
radial-gradient(circle at 20% 22%, rgba(255, 255, 255, 0.95) 0 5%, transparent 5.5%),
|
||||
radial-gradient(circle at 82% 26%, rgba(255, 255, 255, 0.86) 0 4%, transparent 4.5%),
|
||||
radial-gradient(circle at 68% 76%, rgba(255, 226, 103, 0.9) 0 5%, transparent 5.5%);
|
||||
background: radial-gradient(
|
||||
circle at 50% 42%,
|
||||
rgba(255, 247, 181, 0.55) 0 20%,
|
||||
transparent 21%
|
||||
),
|
||||
radial-gradient(
|
||||
circle at 20% 22%,
|
||||
rgba(255, 255, 255, 0.95) 0 5%,
|
||||
transparent 5.5%
|
||||
),
|
||||
radial-gradient(
|
||||
circle at 82% 26%,
|
||||
rgba(255, 255, 255, 0.86) 0 4%,
|
||||
transparent 4.5%
|
||||
),
|
||||
radial-gradient(
|
||||
circle at 68% 76%,
|
||||
rgba(255, 226, 103, 0.9) 0 5%,
|
||||
transparent 5.5%
|
||||
);
|
||||
pointer-events: none;
|
||||
animation: baby-object-basket-spark 1.08s ease-out;
|
||||
}
|
||||
@@ -3665,8 +3960,11 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
||||
border: 0.28rem solid rgba(139, 84, 40, 0.72);
|
||||
border-top-width: 0.42rem;
|
||||
border-radius: 0.8rem 0.8rem 2rem 2rem;
|
||||
background:
|
||||
repeating-linear-gradient(90deg, rgba(139, 84, 40, 0.18) 0 0.7rem, transparent 0.7rem 1.4rem),
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
rgba(139, 84, 40, 0.18) 0 0.7rem,
|
||||
transparent 0.7rem 1.4rem
|
||||
),
|
||||
linear-gradient(180deg, #ffd980, #d99845);
|
||||
box-shadow: 0 18px 28px rgba(95, 84, 54, 0.2);
|
||||
}
|
||||
@@ -3742,10 +4040,21 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(72, 118, 72, 0.18);
|
||||
border-radius: 1.25rem;
|
||||
background:
|
||||
radial-gradient(circle at 16% 18%, rgba(255, 244, 184, 0.72) 0 12%, transparent 12.6%),
|
||||
radial-gradient(circle at 84% 20%, rgba(130, 212, 255, 0.58) 0 11%, transparent 11.8%),
|
||||
linear-gradient(135deg, rgba(255, 253, 244, 0.96), rgba(217, 247, 229, 0.92));
|
||||
background: radial-gradient(
|
||||
circle at 16% 18%,
|
||||
rgba(255, 244, 184, 0.72) 0 12%,
|
||||
transparent 12.6%
|
||||
),
|
||||
radial-gradient(
|
||||
circle at 84% 20%,
|
||||
rgba(130, 212, 255, 0.58) 0 11%,
|
||||
transparent 11.8%
|
||||
),
|
||||
linear-gradient(
|
||||
135deg,
|
||||
rgba(255, 253, 244, 0.96),
|
||||
rgba(217, 247, 229, 0.92)
|
||||
);
|
||||
padding: 1.05rem;
|
||||
text-align: left;
|
||||
color: #24422b;
|
||||
@@ -3805,14 +4114,20 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
||||
grid-template-rows: 1fr auto;
|
||||
gap: clamp(0.65rem, 1.6vw, 1.1rem);
|
||||
overflow: hidden;
|
||||
padding:
|
||||
max(0.85rem, env(safe-area-inset-top))
|
||||
padding: max(0.85rem, env(safe-area-inset-top))
|
||||
max(0.85rem, env(safe-area-inset-right))
|
||||
max(0.85rem, env(safe-area-inset-bottom))
|
||||
max(0.85rem, env(safe-area-inset-left));
|
||||
background:
|
||||
radial-gradient(circle at 14% 18%, rgba(255, 244, 184, 0.72) 0 9%, transparent 9.5%),
|
||||
radial-gradient(circle at 88% 16%, rgba(151, 224, 255, 0.58) 0 8%, transparent 8.6%),
|
||||
background: radial-gradient(
|
||||
circle at 14% 18%,
|
||||
rgba(255, 244, 184, 0.72) 0 9%,
|
||||
transparent 9.5%
|
||||
),
|
||||
radial-gradient(
|
||||
circle at 88% 16%,
|
||||
rgba(151, 224, 255, 0.58) 0 8%,
|
||||
transparent 8.6%
|
||||
),
|
||||
linear-gradient(180deg, #f5fbff 0%, #d8f0e8 52%, #f7edc7 100%);
|
||||
color: var(--baby-drawing-ink);
|
||||
touch-action: none;
|
||||
@@ -3902,8 +4217,11 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
||||
overflow: hidden;
|
||||
border: clamp(0.35rem, 1vw, 0.7rem) solid rgba(255, 255, 255, 0.82);
|
||||
border-radius: 1.35rem;
|
||||
background:
|
||||
linear-gradient(90deg, rgba(245, 216, 145, 0.16) 1px, transparent 1px),
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(245, 216, 145, 0.16) 1px,
|
||||
transparent 1px
|
||||
),
|
||||
linear-gradient(180deg, rgba(245, 216, 145, 0.16) 1px, transparent 1px),
|
||||
var(--baby-drawing-paper);
|
||||
background-size: 2.4rem 2.4rem;
|
||||
@@ -4323,15 +4641,11 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
||||
.platform-mobile-bottom-dock .platform-bottom-nav {
|
||||
width: min(100%, 24rem);
|
||||
pointer-events: auto;
|
||||
border-color: color-mix(
|
||||
in srgb,
|
||||
var(--platform-desktop-panel-border) 76%,
|
||||
transparent
|
||||
);
|
||||
background: var(--platform-nav-fill);
|
||||
border-color: var(--platform-bottom-nav-border);
|
||||
background: var(--platform-bottom-nav-fill);
|
||||
box-shadow:
|
||||
0 20px 48px rgba(0, 0, 0, 0.16),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.08);
|
||||
0 16px 34px rgba(101, 52, 19, 0.14),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.92);
|
||||
}
|
||||
|
||||
.platform-mobile-bottom-dock .platform-bottom-nav__button {
|
||||
@@ -4340,7 +4654,9 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
||||
);
|
||||
}
|
||||
|
||||
.platform-mobile-bottom-dock .platform-bottom-nav__button--primary {
|
||||
.platform-mobile-bottom-dock
|
||||
.platform-bottom-nav__button--primary
|
||||
.platform-bottom-nav__button-content {
|
||||
transform: translateY(-0.5rem);
|
||||
}
|
||||
|
||||
@@ -4349,23 +4665,21 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
||||
.platform-bottom-nav__icon-shell {
|
||||
width: calc(var(--platform-bottom-nav-icon-shell-size) + 0.72rem);
|
||||
height: calc(var(--platform-bottom-nav-icon-shell-size) + 0.72rem);
|
||||
background: var(--platform-button-primary-fill);
|
||||
color: var(--platform-button-primary-text);
|
||||
box-shadow:
|
||||
0 14px 28px rgba(0, 0, 0, 0.18),
|
||||
var(--platform-profile-action-shadow);
|
||||
background: var(--platform-bottom-nav-primary-fill);
|
||||
color: var(--platform-bottom-nav-primary-text);
|
||||
box-shadow: var(--platform-bottom-nav-primary-shadow);
|
||||
}
|
||||
|
||||
.platform-mobile-bottom-dock
|
||||
.platform-bottom-nav__button--primary
|
||||
.platform-bottom-nav__icon {
|
||||
color: var(--platform-button-primary-text);
|
||||
color: var(--platform-bottom-nav-primary-text);
|
||||
}
|
||||
|
||||
.platform-mobile-bottom-dock
|
||||
.platform-bottom-nav__button--primary
|
||||
.platform-bottom-nav__label {
|
||||
color: var(--platform-nav-item-text-active);
|
||||
color: var(--platform-bottom-nav-active-text);
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
@@ -4916,7 +5230,8 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
||||
min-height: min(58vh, 28rem);
|
||||
}
|
||||
|
||||
.platform-public-work-card--immersive .platform-public-work-card__cover::before {
|
||||
.platform-public-work-card--immersive
|
||||
.platform-public-work-card__cover::before {
|
||||
padding-top: 122%;
|
||||
}
|
||||
|
||||
@@ -4972,7 +5287,6 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
||||
.creation-work-card__side-cover {
|
||||
width: 62%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (min-width: 1180px) {
|
||||
@@ -7998,7 +8312,8 @@ button {
|
||||
z-index: 2;
|
||||
height: 30%;
|
||||
border-radius: 0;
|
||||
background: var(--child-motion-asset-floor) center bottom / 100% auto no-repeat;
|
||||
background: var(--child-motion-asset-floor) center bottom / 100% auto
|
||||
no-repeat;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@@ -8339,7 +8654,8 @@ button {
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.child-motion-gesture-guide__arm-swing--right .child-motion-gesture-guide__arm-swing-track {
|
||||
.child-motion-gesture-guide__arm-swing--right
|
||||
.child-motion-gesture-guide__arm-swing-track {
|
||||
border-inline-start-color: transparent;
|
||||
border-inline-end-color: rgba(255, 221, 124, 0.78);
|
||||
}
|
||||
@@ -8391,11 +8707,13 @@ button {
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.child-motion-gesture-guide__arm-swing--left .child-motion-gesture-guide__arm-swing-paw-asset {
|
||||
.child-motion-gesture-guide__arm-swing--left
|
||||
.child-motion-gesture-guide__arm-swing-paw-asset {
|
||||
background-image: var(--child-motion-asset-wave-cat-paw-left);
|
||||
}
|
||||
|
||||
.child-motion-gesture-guide__arm-swing--right .child-motion-gesture-guide__arm-swing-paw-asset {
|
||||
.child-motion-gesture-guide__arm-swing--right
|
||||
.child-motion-gesture-guide__arm-swing-paw-asset {
|
||||
background-image: var(--child-motion-asset-wave-cat-paw-right);
|
||||
}
|
||||
|
||||
@@ -8421,7 +8739,9 @@ button {
|
||||
|
||||
@keyframes child-motion-wave-cat-arm {
|
||||
from {
|
||||
transform: rotate(calc(var(--child-motion-wave-hand-direction, 1) * -15deg));
|
||||
transform: rotate(
|
||||
calc(var(--child-motion-wave-hand-direction, 1) * -15deg)
|
||||
);
|
||||
}
|
||||
|
||||
to {
|
||||
@@ -8486,7 +8806,8 @@ button {
|
||||
height: clamp(3.1rem, 7.6%, 4.55rem);
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
background: var(--child-motion-asset-calibration) center center / cover no-repeat;
|
||||
background: var(--child-motion-asset-calibration) center center / cover
|
||||
no-repeat;
|
||||
padding: clamp(0.4rem, 1.1vw, 0.56rem) clamp(0.66rem, 1.5vw, 0.9rem);
|
||||
backdrop-filter: none;
|
||||
box-shadow: none;
|
||||
@@ -8536,7 +8857,8 @@ button {
|
||||
gap: 0.85rem;
|
||||
border: 0;
|
||||
border-radius: 1.4rem;
|
||||
background: var(--child-motion-asset-start-panel) center center / cover no-repeat;
|
||||
background: var(--child-motion-asset-start-panel) center center / cover
|
||||
no-repeat;
|
||||
padding: clamp(0.45rem, 1.2vw, 0.7rem);
|
||||
box-shadow: none;
|
||||
backdrop-filter: none;
|
||||
|
||||
Reference in New Issue
Block a user