diff --git a/src/components/image-editor/ImageCanvasBackgroundMusicPresetMarquee.tsx b/src/components/image-editor/ImageCanvasBackgroundMusicPresetMarquee.tsx index 750b46669..7f42497ba 100644 --- a/src/components/image-editor/ImageCanvasBackgroundMusicPresetMarquee.tsx +++ b/src/components/image-editor/ImageCanvasBackgroundMusicPresetMarquee.tsx @@ -47,7 +47,10 @@ const PRESET_HOVER_CONTROL_QUERY = '(hover: hover) and (pointer: fine)'; type BackgroundMusicPresetZone = 'left' | 'center' | 'right' | null; function readsMediaQueryMatches(query: string) { - if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') { + if ( + typeof window === 'undefined' || + typeof window.matchMedia !== 'function' + ) { return false; } return window.matchMedia(query).matches; @@ -102,7 +105,9 @@ export function ImageCanvasBackgroundMusicPresetMarquee({ const prefersReducedMotion = useMediaQueryMatches( PRESET_REDUCED_MOTION_QUERY, ); - const supportsHoverControls = useMediaQueryMatches(PRESET_HOVER_CONTROL_QUERY); + const supportsHoverControls = useMediaQueryMatches( + PRESET_HOVER_CONTROL_QUERY, + ); const [isTouchScrolling, setIsTouchScrolling] = useState(false); const viewportRef = useRef(null); @@ -110,7 +115,9 @@ export function ImageCanvasBackgroundMusicPresetMarquee({ const queueWidthRef = useRef(0); const frameRef = useRef(null); const frameTimestampRef = useRef(null); - const touchSettleTimerRef = useRef | null>(null); + const touchSettleTimerRef = useRef | null>( + null, + ); // 归位只按实测的单份队列宽度取模,不硬编码 chip 或轨道宽度。 const normalizeScrollPosition = useCallback(() => { @@ -316,7 +323,8 @@ export function ImageCanvasBackgroundMusicPresetMarquee({ if (!viewport) { return; } - const step = viewport.getBoundingClientRect().width * PRESET_ARROW_STEP_RATIO; + const step = + viewport.getBoundingClientRect().width * PRESET_ARROW_STEP_RATIO; // 离散滚动不使用平滑动画,供触摸和键盘使用。 viewport.scrollLeft += direction * (step || PRESET_FAST_VELOCITY); normalizeScrollPosition(); diff --git a/src/index.css b/src/index.css index 08b67f89f..2a8dd5965 100644 --- a/src/index.css +++ b/src/index.css @@ -963,7 +963,6 @@ html[data-mobile-keyboard-open='true'] #root { font-family: var(--platform-font-family) !important; } - .platform-brand-logo { display: inline-flex; flex: none; @@ -3303,8 +3302,7 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock { display: block; } -.creation-landing__asset-waterfall--masonry - > .creation-landing__asset-card { +.creation-landing__asset-waterfall--masonry > .creation-landing__asset-card { position: absolute; box-sizing: border-box; } @@ -3440,7 +3438,8 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock { place-items: center; } -.creation-landing__asset-preview--campaign .creation-landing__asset-preview-media { +.creation-landing__asset-preview--campaign + .creation-landing__asset-preview-media { position: absolute; inset: 0; width: 100%; @@ -6769,7 +6768,7 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content max-content max-content; align-items: center; - gap: 0.10rem; + gap: 0.1rem; justify-content: start; position: relative; border-top: 1px solid rgba(15, 23, 42, 0.06); @@ -8076,7 +8075,8 @@ button.image-canvas-editor__reference-chip:disabled { line-height: 1.2; } -.image-canvas-editor__asset-context-menu button:disabled +.image-canvas-editor__asset-context-menu + button:disabled .image-canvas-editor__asset-context-menu-reason { color: #94a3b8; } @@ -17082,7 +17082,9 @@ button { bottom: 0; height: 1px; background: var(--image-canvas-brand-border-strong, #f97316); - transition: left 0.12s ease, width 0.12s ease; + transition: + left 0.12s ease, + width 0.12s ease; } .image-canvas-editor__background-music-presets-hairline--left::after {