diff --git a/src/pages/Voice/index.scss b/src/pages/Voice/index.scss index 8651727..c5c1676 100644 --- a/src/pages/Voice/index.scss +++ b/src/pages/Voice/index.scss @@ -147,7 +147,9 @@ opacity: 0; visibility: hidden; pointer-events: none; - transition: opacity 0.15s ease, visibility 0.15s ease; + transition: + opacity 0.15s ease, + visibility 0.15s ease; } .voicePage__uploadHint.voicePage__uploadHint_visible { @@ -386,7 +388,9 @@ font-weight: 500; line-height: 26px; color: #666666; - transition: background-color 0.2s ease, color 0.2s ease; + transition: + background-color 0.2s ease, + color 0.2s ease; } .voicePage__chipBtn.voicePage__chipBtn_instrumental { @@ -1410,7 +1414,7 @@ position: absolute; inset: 0; border-radius: 50%; - background: linear-gradient(180deg, #F0F0F0 0%, #D6CEEF 100%); + background: linear-gradient(180deg, #f0f0f0 0%, #d6ceef 100%); } .voicePage__uploadCropPlayBtnIcon { @@ -1491,7 +1495,7 @@ width: 5px; height: 12px; border: none; - background: #D6CEEF; + background: #d6ceef; cursor: pointer; } @@ -3351,8 +3355,7 @@ $upload-crop-selection-rail-height: 3px; top: 0; bottom: 0; border-radius: 6px 0 0 6px; - background: linear-gradient(90deg, #F0F0F0 0%, #D6CEEF 100%); - ; + background: linear-gradient(90deg, #f0f0f0 0%, #d6ceef 100%); } .voicePage__speechSliderFill_full { @@ -3365,7 +3368,7 @@ $upload-crop-selection-rail-height: 3px; width: 3px; height: 12px; border-radius: 1px; - background: #D6CEEF; + background: #d6ceef; transform: translate(-50%, -50%); pointer-events: none; } @@ -3454,7 +3457,9 @@ $upload-crop-selection-rail-height: 3px; border: 2px solid transparent; border-radius: 9px; background: #ffffff; - transition: background-color 0.18s ease, border-color 0.18s ease; + transition: + background-color 0.18s ease, + border-color 0.18s ease; } .voicePage__speechHistoryItem_pending { @@ -3754,8 +3759,149 @@ $upload-crop-selection-rail-height: 3px; } } -@media (max-width: 640px) { +@media (max-width: 900px) { + .voicePage { + height: auto; + min-height: calc(100vh - var(--layout-chrome-top, 0px) - var(--layout-mobile-bottom-nav-height, 72px)); + overflow: visible; + --voice-player-bar-bottom: calc(var(--layout-mobile-bottom-nav-height, 72px) + 12px); + + .voicePage_music { + --voice-player-bar-bottom: calc(var(--layout-mobile-bottom-nav-height, 72px) + 12px); + } + } + + .voicePage__toolbar { + padding: 12px 16px 0; + } + + .voicePage__creationTabs { + height: auto; + margin-bottom: 12px; + overflow-x: auto; + scrollbar-width: none; + } + + .voicePage__creationTabs::-webkit-scrollbar { + display: none; + } + + .voicePage__body { + height: auto; + padding: 0 16px 112px; + overflow: visible; + } + + .voicePage__module, + .voicePage__music, + .voicePage__left { + min-height: 0; + } + + .voicePage__composer, + .voicePage__gallery, + .voicePage__speechMain, + .voicePage__speechSide { + min-height: 0; + } + + .voicePage__uploadCard { + min-height: 82px; + padding: 16px; + border-radius: 18px; + } + + .voicePage__uploadIcon { + width: 48px; + height: 48px; + } + + .voicePage__uploadCard_hasAction { + padding-right: 48px; + } + + .voicePage__uploadRemoveBtn { + right: 16px; + } + + .voicePage__renameModal { + padding: 16px; + } + + .voicePage__renameModalDialog { + padding: 48px 20px 20px; + } + + .voicePage__renameModalClose { + top: 18px; + right: 18px; + } + + .voicePage__renameModalFieldRow { + flex-direction: column; + align-items: stretch; + } + + .voicePage__renameModalLabel { + flex-basis: auto; + } + + .voicePage__renameModalInput { + max-width: none; + } + .voicePage__uploadCropModal { + align-items: flex-start; + padding: 16px; + overflow-y: auto; + @include hide-scrollbar; + } + + .voicePage__uploadCropModalDialog { + padding: 24px 16px; + } + + .voicePage__uploadCropWorkspace { + margin-top: 24px; + padding: 14px; + overflow-x: auto; + } + + .voicePage__uploadCropToolbar { + flex-wrap: wrap; + } + + .voicePage__uploadCropTimeline { + min-width: 620px; + } + + .voicePage__speechEditorFoot, + .voicePage__speechMainFooter, + .voicePage__speechSide { + padding-left: 16px; + padding-right: 16px; + } + + .voicePage__speechEditorFoot { + flex-direction: column; + align-items: stretch; + } + + .voicePage__speechEditorMeta { + justify-content: flex-end; + } + + .voicePage__speechActions { + justify-content: flex-end; + } + + .voicePage__playerBar { + position: fixed; + padding: 0 16px; + } +} + +@media (max-width: 640px) { .voicePage__toolbar, .voicePage__body { padding-left: 14px; @@ -3770,6 +3916,42 @@ $upload-crop-selection-rail-height: 3px; width: auto; max-width: min(306px, calc(100vw - 28px)); } + + .voicePage__renameModalActions { + flex-direction: column-reverse; + align-items: stretch; + } + + .voicePage__renameModalBtn { + width: 100%; + } + + .voicePage__uploadCropZoom { + width: 100%; + } + + .voicePage__uploadCropZoomSliderWrap { + flex: 1 1 auto; + } + + .voicePage__speechShortcuts { + overflow-x: auto; + flex-wrap: nowrap; + scrollbar-width: none; + } + + .voicePage__speechShortcuts::-webkit-scrollbar { + display: none; + } + + .voicePage__speechCloneReadBox { + padding-bottom: 140px; + } + + .voicePage__speechCloneRecordBtn { + width: calc(100% - 24px); + min-height: 96px; + } } .voicePage__playerBar { @@ -4053,4 +4235,4 @@ $upload-crop-selection-rail-height: 3px; width: 100%; margin-top: 0; } -} \ No newline at end of file +}