From b20d8ab7dbfbcdc23318999cb63c6b391d308aee Mon Sep 17 00:00:00 2001 From: thatsfelix Date: Wed, 22 Jul 2026 11:50:44 +0800 Subject: [PATCH] =?UTF-8?q?style(layout):=20=E9=80=82=E9=85=8D=E7=A7=BB?= =?UTF-8?q?=E5=8A=A8=E7=AB=AF=E5=BA=95=E9=83=A8=E5=AF=BC=E8=88=AA=E5=A4=96?= =?UTF-8?q?=E5=A3=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 50 +- src/hooks/index.ts | 10 +- src/hooks/useIsMobile.ts | 31 + src/index.css | 23 + src/layouts/Layout/Layout.scss | 2825 +++++++++++++++++--------------- 5 files changed, 1595 insertions(+), 1344 deletions(-) create mode 100644 src/hooks/useIsMobile.ts diff --git a/index.html b/index.html index a25646f..b6c9045 100644 --- a/index.html +++ b/index.html @@ -1,27 +1,23 @@ - - - - - POPi.art | AI动画制作平台 · 角色生成 · AI分镜（故事板） - - - - - - - - - - - - - - - -
- - - - + + + + + POPi.art | AI动画制作平台 · 角色生成 · AI分镜（故事板） + + + + + + + + + + + + + + +
+ + + diff --git a/src/hooks/index.ts b/src/hooks/index.ts index 2143192..05ed537 100644 --- a/src/hooks/index.ts +++ b/src/hooks/index.ts @@ -9,12 +9,6 @@ export { useTaskListPolling } from "./useTaskListPolling"; export type { UseTaskListPollingOptions } from "./useTaskListPolling"; export { usePaginatedList } from "./usePaginatedList"; export type { PaginatedListFetchOptions, PaginatedListFetchResult, UsePaginatedListOptions, UsePaginatedListResult } from "./usePaginatedList"; -export { - getTaskRecordId, - getTaskRecordStatus, - isTaskFailureStatus, - isTaskRechargeFailure, - notifyTaskFailure, - toTaskString, -} from "./taskFailure"; +export { MOBILE_MAIN_MEDIA_QUERY, useIsMobile } from "./useIsMobile"; +export { getTaskRecordId, getTaskRecordStatus, isTaskFailureStatus, isTaskRechargeFailure, notifyTaskFailure, toTaskString } from "./taskFailure"; export type { TaskFailureResult, TaskRecord } from "./taskFailure"; diff --git a/src/hooks/useIsMobile.ts b/src/hooks/useIsMobile.ts new file mode 100644 index 0000000..2ca5d81 --- /dev/null +++ b/src/hooks/useIsMobile.ts @@ -0,0 +1,31 @@ +import { useEffect, useState } from "react"; + +export const MOBILE_MAIN_MEDIA_QUERY = "(max-width: 900px)"; + +function getIsMobile(): boolean { + if (typeof window === "undefined" || typeof window.matchMedia !== "function") { + return false; + } + + return window.matchMedia(MOBILE_MAIN_MEDIA_QUERY).matches; +} + +export function useIsMobile(): boolean { + const [isMobile, setIsMobile] = useState(getIsMobile); + + useEffect(() => { + const mediaQueryList = window.matchMedia(MOBILE_MAIN_MEDIA_QUERY); + const sync = () => { + setIsMobile(mediaQueryList.matches); + }; + + sync(); + mediaQueryList.addEventListener("change", sync); + + return () => { + mediaQueryList.removeEventListener("change", sync); + }; + }, []); + + return isMobile; +} diff --git a/src/index.css b/src/index.css index 3e9bce7..1c74c74 100644 --- a/src/index.css +++ b/src/index.css @@ -5,10 +5,33 @@ @import "./assets/iconfont/iconfont.css"; * { + min-width: 0; + box-sizing: border-box; scrollbar-width: thin; scrollbar-color: #f0f0f0 transparent; } +html, +body { + max-width: 100%; + overflow-x: hidden; +} + +body { + min-width: 0; +} + +img, +video { + max-width: 100%; +} + +@media (max-width: 900px) { + body { + font-size: 14px; + } +} + *::-webkit-scrollbar { width: 8px; height: 8px; diff --git a/src/layouts/Layout/Layout.scss b/src/layouts/Layout/Layout.scss index bf35637..19f55b0 100644 --- a/src/layouts/Layout/Layout.scss +++ b/src/layouts/Layout/Layout.scss @@ -1,842 +1,842 @@ -// ============================================================================= -// Layout 内容区缩放（逻辑见 useViewportScale.ts） -// DOM：layoutShellViewport → layoutShell → contentFrame → layoutShellScaleSpacer → layoutShellScaleInner → contentScroll -// 变量：--layout-scale（JS 写入） / --layout-chrome-top（供页面高度计算） -// ============================================================================= - -.layoutShellViewport { - width: 100%; - height: 100vh; - overflow: hidden; - box-sizing: border-box; - scrollbar-width: none; - -ms-overflow-style: none; -} - -.layoutShellScaleSpacer { - position: relative; - width: 100%; - height: 100%; - min-width: 0; - min-height: 0; -} - -.layoutShellScaleInner { - box-sizing: border-box; - width: 100%; - height: 100%; - min-width: 0; - min-height: 0; -} - -.layoutShellViewport_scaled { - .layoutShellScaleInner { - width: 1830px; - } - - &.layoutShellViewport_scaled--zoom .layoutShellScaleInner { - zoom: var(--layout-scale, 1); - } - - &.layoutShellViewport_scaled--transform .layoutShellScaleInner { - transform-origin: top left; - transform: scale(var(--layout-scale, 1)); - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - } -} - -.layoutShell { - --layout-promo-height: 33px; - --layout-sidebar-width: 90px; - --layout-topbar-height: 87px; - --layout-chrome-top: calc(var(--layout-promo-height) + var(--layout-topbar-height)); - --layout-sidebar-transition: 0.26s cubic-bezier(0.4, 0, 0.2, 1); - - width: 100%; - height: 100vh; - min-height: 100vh; - overflow: hidden; - display: grid; - grid-template-columns: var(--layout-sidebar-width) minmax(0, 1fr); - grid-template-rows: var(--layout-promo-height) var(--layout-topbar-height) minmax(0, 1fr); - background: #ffffff; - +// ============================================================================= +// Layout 内容区缩放（逻辑见 useViewportScale.ts） +// DOM：layoutShellViewport → layoutShell → contentFrame → layoutShellScaleSpacer → layoutShellScaleInner → contentScroll +// 变量：--layout-scale（JS 写入） / --layout-chrome-top（供页面高度计算） +// ============================================================================= + +.layoutShellViewport { + width: 100%; + height: 100vh; + overflow: hidden; + box-sizing: border-box; + scrollbar-width: none; + -ms-overflow-style: none; +} + +.layoutShellScaleSpacer { + position: relative; + width: 100%; + height: 100%; + min-width: 0; + min-height: 0; +} + +.layoutShellScaleInner { + box-sizing: border-box; + width: 100%; + height: 100%; + min-width: 0; + min-height: 0; +} + +.layoutShellViewport_scaled { + .layoutShellScaleInner { + width: 1830px; + } + + &.layoutShellViewport_scaled--zoom .layoutShellScaleInner { + zoom: var(--layout-scale, 1); + } + + &.layoutShellViewport_scaled--transform .layoutShellScaleInner { + transform-origin: top left; + transform: scale(var(--layout-scale, 1)); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } +} + +.layoutShell { + --layout-promo-height: 33px; + --layout-sidebar-width: 90px; + --layout-topbar-height: 87px; + --layout-chrome-top: calc(var(--layout-promo-height) + var(--layout-topbar-height)); + --layout-sidebar-transition: 0.26s cubic-bezier(0.4, 0, 0.2, 1); + + width: 100%; + height: 100vh; + min-height: 100vh; + overflow: hidden; + display: grid; + grid-template-columns: var(--layout-sidebar-width) minmax(0, 1fr); + grid-template-rows: var(--layout-promo-height) var(--layout-topbar-height) minmax(0, 1fr); + background: #ffffff; + &.layoutShell_promoDismissed { --layout-promo-height: 0px; } .layoutShell__promoBar { - position: relative; - grid-column: 1 / -1; - grid-row: 1; - z-index: 40; - height: 100%; - min-height: 0; - display: grid; - grid-template-columns: minmax(0, 1fr); - align-items: center; - justify-content: center; - overflow: hidden; - box-sizing: border-box; - background: linear-gradient(90deg, #f2def9 0%, #7f61d5 50%, #f2def9 100%); - cursor: pointer; - } - - .layoutShell__promoBarInner { - grid-area: 1 / 1; - justify-self: center; - display: flex; - align-items: center; - justify-content: center; - gap: 43px; - max-width: 100%; - padding: 0 48px; - box-sizing: border-box; - } - - .layoutShell__promoSegment { - display: flex; - align-items: center; - gap: 5px; - flex-shrink: 0; - } - - .layoutShell__promoBadge { - display: inline-flex; - align-items: center; - justify-content: center; - min-width: 39px; - height: 16px; - padding: 0 5px; - box-sizing: border-box; - border-radius: 5px 0 5px 0; - background: rgba(255, 255, 255, 0.3); - color: #ffffff; - font-size: 12px; - font-weight: 500; - line-height: 16px; - white-space: nowrap; - } - - .layoutShell__promoText { - margin: 0; - color: #ffffff; - font-size: 14px; - font-weight: 400; - line-height: 20px; - white-space: nowrap; - - &_heavy { - font-weight: 500; - } - - &_seedance { - display: flex; - align-items: center; - } - } - - .layoutShell__promoClose { - grid-area: 1 / 1; - justify-self: end; - margin-right: 16px; - width: 16px; - height: 16px; - padding: 0; - border: 0; - background: transparent; - cursor: pointer; - - img { - width: 16px; - height: 16px; - display: block; - object-fit: contain; - } - } - - .layoutShell__topbar { - grid-column: 2; - grid-row: 2; - z-index: 30; - min-width: 0; - min-height: 0; - padding: 0 30px; - background: #f1f1f1; - box-sizing: border-box; - display: flex; - align-items: center; - justify-content: flex-end; - } - - .layoutShell__topbarRight { - display: inline-flex; - align-items: center; - justify-content: flex-end; - gap: 10px; - min-width: 0; - max-width: 100%; - } - - .layoutShell__topbarNotificationTool, - .layoutShell__topbarServiceTool { - position: relative; - flex-shrink: 0; - } - - .layoutShell__topbarPillBtn { - min-width: 76px; - height: 31px; - padding: 0 12px; - border: 1px solid #e7e7e7; - border-radius: 15.5px; - background: #ffffff; - box-sizing: border-box; - display: inline-flex; - align-items: center; - justify-content: center; - gap: 4px; - color: #333333; - cursor: pointer; - flex-shrink: 0; - } - - .layoutShell__topbarPillBtn:hover, - .layoutShell__topbarPillBtn:focus-visible { - background: #ffffff; - color: #333333; - outline: none; - } - - .layoutShell__topbarPillText { - flex-shrink: 0; - color: currentcolor; - font-size: 12px; - font-weight: 400; - line-height: 17px; - white-space: nowrap; - } - - .layoutShell__topbarTutorialBtn { - min-width: 100px; - } - - .layoutShell__topbarPillIcon { - width: 17px; - height: 17px; - flex-shrink: 0; - display: block; - object-fit: contain; - } - - .layoutShell__topbarNotificationIcon { - width: 17px; - height: 17px; - flex-shrink: 0; - display: block; - object-fit: contain; - } - - .layoutShell__topbarNotificationBtn { - position: relative; - } - - .layoutShell__topbarNotificationDot { - position: absolute; - top: 2px; - right: 2px; - width: 6px; - height: 6px; - border-radius: 50%; - background: #cc4646; - pointer-events: none; - } - - .layoutShell__notificationPopover { - position: absolute; - top: calc(100% + 18px); - left: 0; - z-index: 1300; - width: 327px; - height: 581px; - padding: 15px; - border-radius: 26px; - background: #ffffff; - box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); - box-sizing: border-box; - display: flex; - flex-direction: column; - overflow: visible; - } - - .layoutShell__notificationTabs { - width: 228px; - height: 28px; - margin: 0 auto; - display: flex; - align-items: center; - gap: 10px; - } - - .layoutShell__notificationTabBtn { - width: 109px; - height: 28px; - padding: 4px 20px; - border: 0; - border-radius: 18px; - background: #ffffff; - box-sizing: border-box; - display: flex; - align-items: center; - justify-content: center; - gap: 3px; - color: #333333; - cursor: pointer; - } - - .layoutShell__notificationTabBtn:hover, - .layoutShell__notificationTabBtn:focus-visible { - background: #ffffff; - outline: none; - } - - .layoutShell__notificationTabBtn_active, - .layoutShell__notificationTabBtn_active:hover, - .layoutShell__notificationTabBtn_active:focus-visible { - background: #f0f4f9; - color: #6f47f5; - } - - .layoutShell__notificationTabText { - color: currentcolor; - font-size: 14px; - font-weight: 400; - line-height: 20px; - white-space: nowrap; - } - - .layoutShell__notificationTabBadge { - width: 10px; - height: 10px; - padding: 2px; - border-radius: 5px; - background: #cc4646; - box-sizing: border-box; - display: flex; - align-items: center; - justify-content: center; - color: #ffffff; - font-size: 8px; - font-weight: 400; - line-height: 11px; - white-space: nowrap; - } - - .layoutShell__notificationList { - margin-top: 10px; - min-height: 0; - flex: 1; - display: flex; - flex-direction: column; - gap: 10px; - overflow-y: auto; - scrollbar-width: none; - } - - .layoutShell__notificationList::-webkit-scrollbar { - display: none; - } - - .layoutShell__notificationCard { - width: 297px; - padding: 20px; - border: 0; - border-radius: 20px; - background: #f8f8f8; - box-sizing: border-box; - display: flex; - flex-direction: column; - align-items: stretch; - justify-content: flex-start; - cursor: pointer; - text-align: left; - flex-shrink: 0; - } - - .layoutShell__notificationCard:hover, - .layoutShell__notificationCard:focus-visible, - .layoutShell__notificationCard_selected { - background: #f8f8f8; - outline: none; - } - - .layoutShell__notificationCardHeader { - height: 22px; - display: flex; - align-items: center; - gap: 5px; - } - - .layoutShell__notificationCardTitle { - min-width: 0; - color: #333333; - font-size: 14px; - font-weight: 400; - line-height: 22px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - - .layoutShell__notificationUnreadDot { - width: 6px; - height: 6px; - flex-shrink: 0; - display: block; - object-fit: contain; - } - - .layoutShell__notificationCardSummary { - margin-top: 10px; - overflow: hidden; - color: #4f4f4f; - font-size: 12px; - font-weight: 400; - line-height: 16.3px; - word-break: break-word; - display: -webkit-box; - -webkit-line-clamp: 4; - -webkit-box-orient: vertical; - } - - .layoutShell__notificationCardTime { - height: 13px; - margin-top: 10px; - color: #999999; - font-size: 12px; - font-weight: 400; - line-height: 13px; - white-space: nowrap; - } - - .layoutShell__notificationState { - width: 297px; - height: 144px; - margin: 0; - border-radius: 20px; - background: #f8f8f8; - color: #999999; - font-size: 12px; - font-weight: 400; - line-height: 144px; - text-align: center; - flex-shrink: 0; - } - - .layoutShell__notificationDetailFloat { - position: absolute; - left: -307px; - z-index: 1310; - width: 297px; - padding: 20px; - border-radius: 20px; - background: #ffffff; - box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); - box-sizing: border-box; - display: flex; - flex-direction: column; - top: calc(100% + 33px); - } - - .layoutShell__notificationDetailHeader { - height: 22px; - display: flex; - align-items: center; - justify-content: space-between; - gap: 12px; - } - - .layoutShell__notificationDetailTitle { - height: 22px; - margin: 0; - display: flex; - align-items: center; - min-width: 0; - color: #333333; - font-size: 14px; - font-weight: 400; - line-height: 22px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - - .layoutShell__notificationDetailAction { - width: 68px; - height: 22px; - padding: 0; - border: 0; - border-radius: 100px; - background: #6f47f5; - color: #ffffff; - font-size: 12px; - font-weight: 400; - line-height: 22px; - text-align: center; - white-space: nowrap; - cursor: pointer; - flex-shrink: 0; - } - - .layoutShell__notificationDetailAction:hover, - .layoutShell__notificationDetailAction:focus-visible { - background: #6f47f5; - outline: none; - } - - .layoutShell__notificationDetailContent { - margin: 10px 0 0; - color: #4f4f4f; - font-size: 12px; - font-weight: 400; - line-height: 16.3px; - word-break: break-word; - } - - .layoutShell__notificationDetailTime { - height: 13px; - margin: 10px 0 0; - color: #999999; - font-size: 12px; - font-weight: 400; - line-height: 13px; - white-space: nowrap; - } - - .layoutShell__topbarIconBtn { - width: 31px; - height: 31px; - padding: 6px; - border: 1px solid #e7e7e7; - border-radius: 15.5px; - background: #ffffff; - box-sizing: border-box; - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - flex-shrink: 0; - - img { - width: 19px; - height: 19px; - display: block; - object-fit: contain; - } - } - - .layoutShell__topbarIconBtn:hover, - .layoutShell__topbarIconBtn:focus-visible { - background: #ffffff; - outline: none; - } - - .layoutShell__topbarServiceQrFloat { - position: absolute; - top: calc(100% + 8px); - right: 0; - z-index: 1300; - width: 140px; - padding: 10px; - border: 1px solid #e8e8e8; - border-radius: 8px; - background: #ffffff; - box-shadow: 2px 4px 15px rgba(0, 0, 0, 0.12); - box-sizing: border-box; - } - - .layoutShell__topbarServiceQrImage { - width: 120px; - height: 120px; - display: block; - margin: 0 auto; - object-fit: contain; - } - - .layoutShell__topbarServiceQrTip { - margin: 8px 0 0; - color: #333333; - font-size: 12px; - line-height: 1.4; - text-align: center; - } - - .layoutShell__userPointsTool { - position: relative; - flex-shrink: 0; - } - - .layoutShell__userPoints { - height: 31px; - min-width: 214px; - padding: 0 12px; - border: 1px solid #e7e7e7; - border-radius: 15.5px; - background: #ffffff; - box-sizing: border-box; - display: flex; - align-items: center; - justify-content: center; - gap: 3px; - color: #333333; - cursor: pointer; - flex-shrink: 0; - } - - .layoutShell__userPoints:hover, - .layoutShell__userPoints:focus-visible { - background: #ffffff; - outline: none; - } - - .layoutShell__userPointsValue, - .layoutShell__userPointsLabel { - color: inherit; - font-size: 12px; - font-weight: 500; - line-height: 17px; - } - - .layoutShell__userPointsValue { - color: #6f47f5; - } - - .layoutShell__userPointsIcon { - width: 10px; - height: 10px; - flex-shrink: 0; - display: block; - object-fit: contain; - } - - .layoutShell__userPointsDivider { - width: 1px; - height: 12.5px; - margin: 0 4px; - flex-shrink: 0; - background: #e7e7e7; - } - - .layoutShell__userPointsLabel { - flex-shrink: 0; - white-space: nowrap; - } - - .layoutShell__userPointsPopover { - position: absolute; - top: calc(100% + 10px); - right: 0; - z-index: 1300; - width: 327px; - padding: 15px; - border-radius: 26px; - background: #ffffff; - box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); - box-sizing: border-box; - } - - .layoutShell__userPointsPlan { - width: 100%; - height: 42px; - padding: 10px 10px 10px 20px; - border-radius: 20px; - background: #f3efff; - box-sizing: border-box; - display: flex; - align-items: center; - justify-content: space-between; - gap: 12px; - } - - .layoutShell__userPointsPlanName { - min-width: 0; - color: #333333; - font-size: 14px; - font-weight: 400; - line-height: 22px; - white-space: nowrap; - } - - .layoutShell__userPointsPlanCta { - height: 22px; - min-width: 68px; - padding: 0 10px; - border: 0; - border-radius: 100px; - background: #6f47f5; - color: #ffffff; - font-size: 12px; - font-weight: 400; - line-height: 22px; - white-space: nowrap; - cursor: pointer; - } - - .layoutShell__userPointsBalanceCard { - width: 100%; - margin-top: 10px; - padding: 20px; - border-radius: 26px; - background: #fff6e9; - box-sizing: border-box; - } - - .layoutShell__userPointsBalanceHeader { - display: flex; - align-items: center; - justify-content: space-between; - gap: 12px; - } - - .layoutShell__userPointsBalance { - min-width: 0; - display: flex; - align-items: center; - gap: 3px; - color: #333333; - } - - .layoutShell__userPointsBalanceLabel, - .layoutShell__userPointsRechargeBtn { - color: #333333; - font-size: 12px; - font-weight: 500; - line-height: 13px; - white-space: nowrap; - } - - .layoutShell__userPointsBalanceIcon { - width: 10px; - height: 10px; - flex-shrink: 0; - display: block; - object-fit: contain; - } - - .layoutShell__userPointsBalanceValue { - color: #333333; - font-size: 16px; - font-weight: 500; - line-height: 18px; - white-space: nowrap; - } - - .layoutShell__userPointsRechargeBtn { - padding: 0; - border: 0; - background: transparent; - cursor: pointer; - } - - .layoutShell__userPointsBalanceDivider { - width: 100%; - height: 1px; - margin-top: 10px; - background: #ffd794; - } - - .layoutShell__userPointsBreakdown { - margin-top: 10px; - display: flex; - flex-direction: column; - align-items: flex-start; - gap: 5px; - color: #4f4f4f; - font-size: 12px; - font-weight: 400; - line-height: 15px; - } - - .layoutShell__userPointsPopoverLinks { - padding-top: 10px; - } - - .layoutShell__userPointsPopoverLink { - width: 100%; - height: 38px; - padding: 0 12px; - border: 0; - border-radius: 5px; - background: #ffffff; - box-sizing: border-box; - display: flex; - align-items: center; - justify-content: space-between; - color: #333333; - font-size: 14px; - font-weight: 400; - line-height: 16px; - cursor: pointer; - } - - .layoutShell__userPointsPopoverLink:hover, - .layoutShell__userPointsPopoverLink:focus-visible { - background: #ffffff; - outline: none; - } - - .layoutShell__userPointsPopoverLink img { - width: 18px; - height: 18px; - flex-shrink: 0; - display: block; - object-fit: contain; - } - - .layoutShell__loginButton { - width: 69.75px; - height: 31px; - padding: 0 8px 0 13px; - border: 0; - border-radius: 100px; - background: #333333; - box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); - box-sizing: border-box; - display: flex; - align-items: center; - justify-content: center; - gap: 2px; - cursor: pointer; - flex-shrink: 0; - } - - .layoutShell__loginButton:hover, - .layoutShell__loginButton:focus-visible { - background: #333333; - outline: none; - } - - .layoutShell__loginButtonText { - color: #ffffff; - font-size: 12px; - font-weight: 500; - line-height: 17px; - white-space: nowrap; - } - - .layoutShell__loginButtonIcon { - width: 20px; - height: 20px; - flex-shrink: 0; - display: block; - object-fit: contain; - } - - .layoutShell__body { - display: contents; - } - + position: relative; + grid-column: 1 / -1; + grid-row: 1; + z-index: 40; + height: 100%; + min-height: 0; + display: grid; + grid-template-columns: minmax(0, 1fr); + align-items: center; + justify-content: center; + overflow: hidden; + box-sizing: border-box; + background: linear-gradient(90deg, #f2def9 0%, #7f61d5 50%, #f2def9 100%); + cursor: pointer; + } + + .layoutShell__promoBarInner { + grid-area: 1 / 1; + justify-self: center; + display: flex; + align-items: center; + justify-content: center; + gap: 43px; + max-width: 100%; + padding: 0 48px; + box-sizing: border-box; + } + + .layoutShell__promoSegment { + display: flex; + align-items: center; + gap: 5px; + flex-shrink: 0; + } + + .layoutShell__promoBadge { + display: inline-flex; + align-items: center; + justify-content: center; + min-width: 39px; + height: 16px; + padding: 0 5px; + box-sizing: border-box; + border-radius: 5px 0 5px 0; + background: rgba(255, 255, 255, 0.3); + color: #ffffff; + font-size: 12px; + font-weight: 500; + line-height: 16px; + white-space: nowrap; + } + + .layoutShell__promoText { + margin: 0; + color: #ffffff; + font-size: 14px; + font-weight: 400; + line-height: 20px; + white-space: nowrap; + + &_heavy { + font-weight: 500; + } + + &_seedance { + display: flex; + align-items: center; + } + } + + .layoutShell__promoClose { + grid-area: 1 / 1; + justify-self: end; + margin-right: 16px; + width: 16px; + height: 16px; + padding: 0; + border: 0; + background: transparent; + cursor: pointer; + + img { + width: 16px; + height: 16px; + display: block; + object-fit: contain; + } + } + + .layoutShell__topbar { + grid-column: 2; + grid-row: 2; + z-index: 30; + min-width: 0; + min-height: 0; + padding: 0 30px; + background: #f1f1f1; + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: flex-end; + } + + .layoutShell__topbarRight { + display: inline-flex; + align-items: center; + justify-content: flex-end; + gap: 10px; + min-width: 0; + max-width: 100%; + } + + .layoutShell__topbarNotificationTool, + .layoutShell__topbarServiceTool { + position: relative; + flex-shrink: 0; + } + + .layoutShell__topbarPillBtn { + min-width: 76px; + height: 31px; + padding: 0 12px; + border: 1px solid #e7e7e7; + border-radius: 15.5px; + background: #ffffff; + box-sizing: border-box; + display: inline-flex; + align-items: center; + justify-content: center; + gap: 4px; + color: #333333; + cursor: pointer; + flex-shrink: 0; + } + + .layoutShell__topbarPillBtn:hover, + .layoutShell__topbarPillBtn:focus-visible { + background: #ffffff; + color: #333333; + outline: none; + } + + .layoutShell__topbarPillText { + flex-shrink: 0; + color: currentcolor; + font-size: 12px; + font-weight: 400; + line-height: 17px; + white-space: nowrap; + } + + .layoutShell__topbarTutorialBtn { + min-width: 100px; + } + + .layoutShell__topbarPillIcon { + width: 17px; + height: 17px; + flex-shrink: 0; + display: block; + object-fit: contain; + } + + .layoutShell__topbarNotificationIcon { + width: 17px; + height: 17px; + flex-shrink: 0; + display: block; + object-fit: contain; + } + + .layoutShell__topbarNotificationBtn { + position: relative; + } + + .layoutShell__topbarNotificationDot { + position: absolute; + top: 2px; + right: 2px; + width: 6px; + height: 6px; + border-radius: 50%; + background: #cc4646; + pointer-events: none; + } + + .layoutShell__notificationPopover { + position: absolute; + top: calc(100% + 18px); + left: 0; + z-index: 1300; + width: 327px; + height: 581px; + padding: 15px; + border-radius: 26px; + background: #ffffff; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); + box-sizing: border-box; + display: flex; + flex-direction: column; + overflow: visible; + } + + .layoutShell__notificationTabs { + width: 228px; + height: 28px; + margin: 0 auto; + display: flex; + align-items: center; + gap: 10px; + } + + .layoutShell__notificationTabBtn { + width: 109px; + height: 28px; + padding: 4px 20px; + border: 0; + border-radius: 18px; + background: #ffffff; + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: center; + gap: 3px; + color: #333333; + cursor: pointer; + } + + .layoutShell__notificationTabBtn:hover, + .layoutShell__notificationTabBtn:focus-visible { + background: #ffffff; + outline: none; + } + + .layoutShell__notificationTabBtn_active, + .layoutShell__notificationTabBtn_active:hover, + .layoutShell__notificationTabBtn_active:focus-visible { + background: #f0f4f9; + color: #6f47f5; + } + + .layoutShell__notificationTabText { + color: currentcolor; + font-size: 14px; + font-weight: 400; + line-height: 20px; + white-space: nowrap; + } + + .layoutShell__notificationTabBadge { + width: 10px; + height: 10px; + padding: 2px; + border-radius: 5px; + background: #cc4646; + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: center; + color: #ffffff; + font-size: 8px; + font-weight: 400; + line-height: 11px; + white-space: nowrap; + } + + .layoutShell__notificationList { + margin-top: 10px; + min-height: 0; + flex: 1; + display: flex; + flex-direction: column; + gap: 10px; + overflow-y: auto; + scrollbar-width: none; + } + + .layoutShell__notificationList::-webkit-scrollbar { + display: none; + } + + .layoutShell__notificationCard { + width: 297px; + padding: 20px; + border: 0; + border-radius: 20px; + background: #f8f8f8; + box-sizing: border-box; + display: flex; + flex-direction: column; + align-items: stretch; + justify-content: flex-start; + cursor: pointer; + text-align: left; + flex-shrink: 0; + } + + .layoutShell__notificationCard:hover, + .layoutShell__notificationCard:focus-visible, + .layoutShell__notificationCard_selected { + background: #f8f8f8; + outline: none; + } + + .layoutShell__notificationCardHeader { + height: 22px; + display: flex; + align-items: center; + gap: 5px; + } + + .layoutShell__notificationCardTitle { + min-width: 0; + color: #333333; + font-size: 14px; + font-weight: 400; + line-height: 22px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .layoutShell__notificationUnreadDot { + width: 6px; + height: 6px; + flex-shrink: 0; + display: block; + object-fit: contain; + } + + .layoutShell__notificationCardSummary { + margin-top: 10px; + overflow: hidden; + color: #4f4f4f; + font-size: 12px; + font-weight: 400; + line-height: 16.3px; + word-break: break-word; + display: -webkit-box; + -webkit-line-clamp: 4; + -webkit-box-orient: vertical; + } + + .layoutShell__notificationCardTime { + height: 13px; + margin-top: 10px; + color: #999999; + font-size: 12px; + font-weight: 400; + line-height: 13px; + white-space: nowrap; + } + + .layoutShell__notificationState { + width: 297px; + height: 144px; + margin: 0; + border-radius: 20px; + background: #f8f8f8; + color: #999999; + font-size: 12px; + font-weight: 400; + line-height: 144px; + text-align: center; + flex-shrink: 0; + } + + .layoutShell__notificationDetailFloat { + position: absolute; + left: -307px; + z-index: 1310; + width: 297px; + padding: 20px; + border-radius: 20px; + background: #ffffff; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); + box-sizing: border-box; + display: flex; + flex-direction: column; + top: calc(100% + 33px); + } + + .layoutShell__notificationDetailHeader { + height: 22px; + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; + } + + .layoutShell__notificationDetailTitle { + height: 22px; + margin: 0; + display: flex; + align-items: center; + min-width: 0; + color: #333333; + font-size: 14px; + font-weight: 400; + line-height: 22px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .layoutShell__notificationDetailAction { + width: 68px; + height: 22px; + padding: 0; + border: 0; + border-radius: 100px; + background: #6f47f5; + color: #ffffff; + font-size: 12px; + font-weight: 400; + line-height: 22px; + text-align: center; + white-space: nowrap; + cursor: pointer; + flex-shrink: 0; + } + + .layoutShell__notificationDetailAction:hover, + .layoutShell__notificationDetailAction:focus-visible { + background: #6f47f5; + outline: none; + } + + .layoutShell__notificationDetailContent { + margin: 10px 0 0; + color: #4f4f4f; + font-size: 12px; + font-weight: 400; + line-height: 16.3px; + word-break: break-word; + } + + .layoutShell__notificationDetailTime { + height: 13px; + margin: 10px 0 0; + color: #999999; + font-size: 12px; + font-weight: 400; + line-height: 13px; + white-space: nowrap; + } + + .layoutShell__topbarIconBtn { + width: 31px; + height: 31px; + padding: 6px; + border: 1px solid #e7e7e7; + border-radius: 15.5px; + background: #ffffff; + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + flex-shrink: 0; + + img { + width: 19px; + height: 19px; + display: block; + object-fit: contain; + } + } + + .layoutShell__topbarIconBtn:hover, + .layoutShell__topbarIconBtn:focus-visible { + background: #ffffff; + outline: none; + } + + .layoutShell__topbarServiceQrFloat { + position: absolute; + top: calc(100% + 8px); + right: 0; + z-index: 1300; + width: 140px; + padding: 10px; + border: 1px solid #e8e8e8; + border-radius: 8px; + background: #ffffff; + box-shadow: 2px 4px 15px rgba(0, 0, 0, 0.12); + box-sizing: border-box; + } + + .layoutShell__topbarServiceQrImage { + width: 120px; + height: 120px; + display: block; + margin: 0 auto; + object-fit: contain; + } + + .layoutShell__topbarServiceQrTip { + margin: 8px 0 0; + color: #333333; + font-size: 12px; + line-height: 1.4; + text-align: center; + } + + .layoutShell__userPointsTool { + position: relative; + flex-shrink: 0; + } + + .layoutShell__userPoints { + height: 31px; + min-width: 214px; + padding: 0 12px; + border: 1px solid #e7e7e7; + border-radius: 15.5px; + background: #ffffff; + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: center; + gap: 3px; + color: #333333; + cursor: pointer; + flex-shrink: 0; + } + + .layoutShell__userPoints:hover, + .layoutShell__userPoints:focus-visible { + background: #ffffff; + outline: none; + } + + .layoutShell__userPointsValue, + .layoutShell__userPointsLabel { + color: inherit; + font-size: 12px; + font-weight: 500; + line-height: 17px; + } + + .layoutShell__userPointsValue { + color: #6f47f5; + } + + .layoutShell__userPointsIcon { + width: 10px; + height: 10px; + flex-shrink: 0; + display: block; + object-fit: contain; + } + + .layoutShell__userPointsDivider { + width: 1px; + height: 12.5px; + margin: 0 4px; + flex-shrink: 0; + background: #e7e7e7; + } + + .layoutShell__userPointsLabel { + flex-shrink: 0; + white-space: nowrap; + } + + .layoutShell__userPointsPopover { + position: absolute; + top: calc(100% + 10px); + right: 0; + z-index: 1300; + width: 327px; + padding: 15px; + border-radius: 26px; + background: #ffffff; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); + box-sizing: border-box; + } + + .layoutShell__userPointsPlan { + width: 100%; + height: 42px; + padding: 10px 10px 10px 20px; + border-radius: 20px; + background: #f3efff; + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; + } + + .layoutShell__userPointsPlanName { + min-width: 0; + color: #333333; + font-size: 14px; + font-weight: 400; + line-height: 22px; + white-space: nowrap; + } + + .layoutShell__userPointsPlanCta { + height: 22px; + min-width: 68px; + padding: 0 10px; + border: 0; + border-radius: 100px; + background: #6f47f5; + color: #ffffff; + font-size: 12px; + font-weight: 400; + line-height: 22px; + white-space: nowrap; + cursor: pointer; + } + + .layoutShell__userPointsBalanceCard { + width: 100%; + margin-top: 10px; + padding: 20px; + border-radius: 26px; + background: #fff6e9; + box-sizing: border-box; + } + + .layoutShell__userPointsBalanceHeader { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; + } + + .layoutShell__userPointsBalance { + min-width: 0; + display: flex; + align-items: center; + gap: 3px; + color: #333333; + } + + .layoutShell__userPointsBalanceLabel, + .layoutShell__userPointsRechargeBtn { + color: #333333; + font-size: 12px; + font-weight: 500; + line-height: 13px; + white-space: nowrap; + } + + .layoutShell__userPointsBalanceIcon { + width: 10px; + height: 10px; + flex-shrink: 0; + display: block; + object-fit: contain; + } + + .layoutShell__userPointsBalanceValue { + color: #333333; + font-size: 16px; + font-weight: 500; + line-height: 18px; + white-space: nowrap; + } + + .layoutShell__userPointsRechargeBtn { + padding: 0; + border: 0; + background: transparent; + cursor: pointer; + } + + .layoutShell__userPointsBalanceDivider { + width: 100%; + height: 1px; + margin-top: 10px; + background: #ffd794; + } + + .layoutShell__userPointsBreakdown { + margin-top: 10px; + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 5px; + color: #4f4f4f; + font-size: 12px; + font-weight: 400; + line-height: 15px; + } + + .layoutShell__userPointsPopoverLinks { + padding-top: 10px; + } + + .layoutShell__userPointsPopoverLink { + width: 100%; + height: 38px; + padding: 0 12px; + border: 0; + border-radius: 5px; + background: #ffffff; + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: space-between; + color: #333333; + font-size: 14px; + font-weight: 400; + line-height: 16px; + cursor: pointer; + } + + .layoutShell__userPointsPopoverLink:hover, + .layoutShell__userPointsPopoverLink:focus-visible { + background: #ffffff; + outline: none; + } + + .layoutShell__userPointsPopoverLink img { + width: 18px; + height: 18px; + flex-shrink: 0; + display: block; + object-fit: contain; + } + + .layoutShell__loginButton { + width: 69.75px; + height: 31px; + padding: 0 8px 0 13px; + border: 0; + border-radius: 100px; + background: #333333; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: center; + gap: 2px; + cursor: pointer; + flex-shrink: 0; + } + + .layoutShell__loginButton:hover, + .layoutShell__loginButton:focus-visible { + background: #333333; + outline: none; + } + + .layoutShell__loginButtonText { + color: #ffffff; + font-size: 12px; + font-weight: 500; + line-height: 17px; + white-space: nowrap; + } + + .layoutShell__loginButtonIcon { + width: 20px; + height: 20px; + flex-shrink: 0; + display: block; + object-fit: contain; + } + + .layoutShell__body { + display: contents; + } + .layoutShell__sidebar { grid-column: 1; grid-row: 2 / 4; @@ -864,484 +864,691 @@ } .layoutShell__brand { - width: 70px; - height: 36px; - border: 0; - border-radius: 24px; - background: #ffffff; - box-sizing: border-box; - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - } - - .layoutShell__brandLogo { - width: 70px; - height: 36px; - display: block; - object-fit: contain; - } - + width: 70px; + height: 36px; + border: 0; + border-radius: 24px; + background: #ffffff; + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + } + + .layoutShell__brandLogo { + width: 70px; + height: 36px; + display: block; + object-fit: contain; + } + .layoutShell__sideNav { width: 70px; margin-top: 50px; display: flex; flex-direction: column; - gap: 10px; - } - - .layoutShell__sideItem { - position: relative; - width: 70px; - height: 70px; - padding: 10px 16px; - border: 0; - border-radius: 24px; - background: #ffffff; - box-sizing: border-box; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - gap: 3px; - color: #333333; - text-align: center; - text-decoration: none; - cursor: pointer; - } - - .layoutShell__sideItem_active { - background: #f0f4f9; - } - - .layoutShell__sideIcon { - width: 25px; - height: 25px; - flex-shrink: 0; - display: grid; - place-items: center; - } - - img.layoutShell__sideIcon { - display: block; - object-fit: contain; - } - - .layoutShell__sideIconImage { - grid-area: 1 / 1; - width: 25px; - height: 25px; - display: block; - object-fit: contain; - } - - .layoutShell__sideIconImage_active { - opacity: 0; - } - - .layoutShell__sideItem_active .layoutShell__sideIconImage_default { - opacity: 0; - } - - .layoutShell__sideItem_active .layoutShell__sideIconImage_active { - opacity: 1; - } - - .layoutShell__sideText { - min-width: 38px; - color: #333333; - font-size: 14px; - font-weight: 500; - line-height: 20px; - white-space: nowrap; - } - - .layoutShell__sideItem_active .layoutShell__sideText { - color: #6f47f5; - } - - .layoutShell__sideBadge { - position: absolute; - top: 10px; - right: 0; - width: 27px; - height: 12px; - border: 1px solid #b59ce6; - border-radius: 7.5px; - background: linear-gradient(90deg, #f2def9 0%, #7f61d5 100%); - color: #ffffff; - box-sizing: border-box; - display: flex; - align-items: center; - justify-content: center; - font-size: 6px; - font-weight: 700; - line-height: 7px; - } - - .layoutShell__footer { - width: 70px; - height: 205px; - margin-top: auto; - position: relative; - display: flex; - flex-direction: column; - } - - .layoutShell__footerNav { - width: 70px; - display: flex; - flex-direction: column; - gap: 20px; - } - - .layoutShell__footerPopoverTrigger { - position: relative; - width: 25px; - height: 25px; - margin: 20px auto 0; - background: #f9f9f9; - } - - .layoutShell__footerMenuBtn { - width: 25px; - height: 25px; - padding: 0; - border: 0; - background: #f9f9f9; - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - - img { - width: 19.5px; - height: 14px; - display: block; - object-fit: contain; - } - } - - .layoutShell__footerPopoverPanel { - position: absolute; - left: 20px; - bottom: 30px; - z-index: 1200; - width: 235px; - padding: 5px; - border-left: 1px solid #e8e8e8; - border-radius: 8px; - background: #ffffff; - box-shadow: 2px 4px 15px rgba(0, 0, 0, 0.12); - box-sizing: border-box; - display: flex; - flex-direction: column; - } - - .layoutShell__footerPopoverLink { - width: 100%; - height: 40px; - padding-left: 10px; - border: 0; - background: transparent; - color: #666666; - font-size: 12px; - text-align: left; - text-decoration: none; - cursor: pointer; - box-sizing: border-box; - } - - .layoutShell__footerPopoverLink:hover { - background: #f0f0f0; - } - - .layoutShell__footerPopoverMeta { - margin-bottom: 20px; - padding: 16px 0 0 16px; - color: #999999; - font-size: 10px; - line-height: 1.5; - text-align: left; - } - - .layoutShell__contentFrame { - grid-column: 2; - grid-row: 3; - z-index: 20; - min-width: 0; - min-height: 0; - overflow: hidden; - background: #f2f2f2; - display: grid; - grid-template-areas: "content"; - grid-template-columns: minmax(0, 1fr); - grid-template-rows: minmax(0, 1fr); - - >.layoutShellScaleSpacer { - grid-area: content; - overflow: hidden; - } - } - - .layoutShell__contentScroll { - position: relative; - width: 100%; - height: 100%; - max-height: 100%; - min-width: 0; - min-height: 0; - box-sizing: border-box; - overflow: auto; - scrollbar-width: none; - -ms-overflow-style: none; - - >.createPage { - height: 100%; - max-height: 100%; - min-height: 0; - } - - &.layoutShell__contentScroll_scrollLocked { - overflow: hidden; - } - - &:has(> .explorePage) { - padding-left: 0; - } - - &::-webkit-scrollbar { - display: none; - } - } - - .layoutShell__modalMount { - position: relative; - grid-area: content; - z-index: 20; - min-width: 0; - min-height: 0; - overflow: hidden; - pointer-events: none; - - .arco-modal-mask { - position: absolute; - inset: 0; - width: 100%; - height: 100%; - max-width: 100%; - max-height: 100%; - box-sizing: border-box; - pointer-events: auto; - } - - .arco-modal-wrapper { - position: absolute; - inset: 0; - width: 100%; - height: 100%; - max-width: 100%; - max-height: 100%; - box-sizing: border-box; - display: flex; - flex-direction: column; - align-items: stretch; - pointer-events: auto; - background: #f9f9f9; - overflow: hidden; - overscroll-behavior: contain; - } - - .arco-modal-wrapper.layoutFullscreenDetailModalWrap { - overflow: hidden !important; - scrollbar-width: none; - -ms-overflow-style: none; - - &:has(.character-detail-arco-modal.zoomModal-exit), - &:has(.character-detail-arco-modal.zoomModal-exit-active), - &:has(.asset-details-arco-modal.zoomModal-exit), - &:has(.asset-details-arco-modal.zoomModal-exit-active) { - display: none !important; - pointer-events: none; - } - - &::-webkit-scrollbar { - display: none; - } - - .character-detail-arco-modal, - .asset-details-arco-modal { - - &.zoomModal-appear, - &.zoomModal-enter, - &.zoomModal-appear-active, - &.zoomModal-enter-active, - &.zoomModal-exit, - &.zoomModal-exit-active { - opacity: 1 !important; - transform: none !important; - transition: none !important; - } - } - } - - .arco-modal-wrapper>* { - flex: 1 1 0; - min-width: 0; - min-height: 0; - display: flex; - flex-direction: column; - } - - .arco-modal-wrapper .asset-details-arco-modal, - .arco-modal-wrapper .character-detail-arco-modal { - flex: 1 1 0; - min-width: 0; - min-height: 0; - max-width: 100%; - align-self: stretch; - overflow: hidden; - box-sizing: border-box; - display: flex; - flex-direction: column; - } - - .arco-modal-wrapper .asset-details-arco-modal.arco-modal>*, - .arco-modal-wrapper .character-detail-arco-modal.arco-modal>* { - flex: 1 1 0; - min-width: 0; - min-height: 0; - display: flex; - flex-direction: column; - align-items: stretch; - } - - .arco-modal-wrapper .asset-details-arco-modal .arco-modal-content, - .arco-modal-wrapper .character-detail-arco-modal .arco-modal-content { - flex: 1 1 0; - min-height: 0; - overflow: hidden; - display: flex; - flex-direction: column; - } - - .arco-modal-wrapper .asset-details-arco-modal .arco-modal-body, - .arco-modal-wrapper .character-detail-arco-modal .arco-modal-body { - flex: 1 1 0; - min-height: 0; - overflow: hidden; - } - } - - .layoutShell__floatingComposerMount { - --layout-floating-composer-safe-width: calc(100vw - var(--layout-sidebar-width) - 40px); - - position: fixed; - left: calc(var(--layout-sidebar-width) + ((100vw - var(--layout-sidebar-width)) / 2)); - bottom: 30px; - z-index: 25; - width: min(1040px, var(--layout-floating-composer-safe-width)); - max-width: var(--layout-floating-composer-safe-width); - transform: translateX(-50%); - - .layoutShell__composer { - width: 100%; - max-width: 100%; - } - - &:has(.layoutShell__composer_collapsed) { - width: min(369px, var(--layout-floating-composer-safe-width)); - max-width: min(369px, var(--layout-floating-composer-safe-width)); - } - - &:has(.layoutShell__composer_collapsed) .layoutShell__composer.layoutShell__composer_collapsed { - width: 100%; - max-width: 100%; - } - } -} - -@media (max-width: 1200px) { - .layoutShell { - .layoutShell__promoBarInner { - gap: 24px; - } - } -} - -@media (max-width: 960px) { - .layoutShell { - --layout-promo-height: 0px; - - .layoutShell__promoBar { - display: none; - } - } -} - -@media (max-width: 768px) { - .layoutShell { - --layout-sidebar-width: 76px; - --layout-topbar-height: 70px; - - .layoutShell__topbar { - padding: 0 10px; - } - - .layoutShell__sidebar { - width: 76px; - padding: 14px 8px; - } - - .layoutShell__brand, - .layoutShell__sideNav, - .layoutShell__footer, - .layoutShell__footerNav { - width: 60px; - } - - .layoutShell__brand { - padding: 4px 10px; - } - - .layoutShell__sideNav { - height: auto; - margin-top: 34px; - gap: 8px; - } - - .layoutShell__sideItem { - width: 60px; - height: 60px; - padding: 8px 10px; - border-radius: 20px; - } - - .layoutShell__sideText { - font-size: 12px; - line-height: 18px; - } - - .layoutShell__footer { - height: auto; - } - - .layoutShell__footerNav { - gap: 10px; - } - - .layoutShell__footerPopoverTrigger { - margin-top: 10px; - } - - .layoutShell__topbarRight { - gap: 6px; - } - - .layoutShell__topbarTutorialBtn, - .layoutShell__userPointsTool { - display: none; - } - } + gap: 10px; + } + + .layoutShell__sideItem { + position: relative; + width: 70px; + height: 70px; + padding: 10px 16px; + border: 0; + border-radius: 24px; + background: #ffffff; + box-sizing: border-box; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 3px; + color: #333333; + text-align: center; + text-decoration: none; + cursor: pointer; + } + + .layoutShell__sideItem_active { + background: #f0f4f9; + } + + .layoutShell__sideIcon { + width: 25px; + height: 25px; + flex-shrink: 0; + display: grid; + place-items: center; + } + + img.layoutShell__sideIcon { + display: block; + object-fit: contain; + } + + .layoutShell__sideIconImage { + grid-area: 1 / 1; + width: 25px; + height: 25px; + display: block; + object-fit: contain; + } + + .layoutShell__sideIconImage_active { + opacity: 0; + } + + .layoutShell__sideItem_active .layoutShell__sideIconImage_default { + opacity: 0; + } + + .layoutShell__sideItem_active .layoutShell__sideIconImage_active { + opacity: 1; + } + + .layoutShell__sideText { + min-width: 38px; + color: #333333; + font-size: 14px; + font-weight: 500; + line-height: 20px; + white-space: nowrap; + } + + .layoutShell__sideItem_active .layoutShell__sideText { + color: #6f47f5; + } + + .layoutShell__sideBadge { + position: absolute; + top: 10px; + right: 0; + width: 27px; + height: 12px; + border: 1px solid #b59ce6; + border-radius: 7.5px; + background: linear-gradient(90deg, #f2def9 0%, #7f61d5 100%); + color: #ffffff; + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: center; + font-size: 6px; + font-weight: 700; + line-height: 7px; + } + + .layoutShell__footer { + width: 70px; + height: 205px; + margin-top: auto; + position: relative; + display: flex; + flex-direction: column; + } + + .layoutShell__footerNav { + width: 70px; + display: flex; + flex-direction: column; + gap: 20px; + } + + .layoutShell__footerPopoverTrigger { + position: relative; + width: 25px; + height: 25px; + margin: 20px auto 0; + background: #f9f9f9; + } + + .layoutShell__footerMenuBtn { + width: 25px; + height: 25px; + padding: 0; + border: 0; + background: #f9f9f9; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + + img { + width: 19.5px; + height: 14px; + display: block; + object-fit: contain; + } + } + + .layoutShell__footerPopoverPanel { + position: absolute; + left: 20px; + bottom: 30px; + z-index: 1200; + width: 235px; + padding: 5px; + border-left: 1px solid #e8e8e8; + border-radius: 8px; + background: #ffffff; + box-shadow: 2px 4px 15px rgba(0, 0, 0, 0.12); + box-sizing: border-box; + display: flex; + flex-direction: column; + } + + .layoutShell__footerPopoverLink { + width: 100%; + height: 40px; + padding-left: 10px; + border: 0; + background: transparent; + color: #666666; + font-size: 12px; + text-align: left; + text-decoration: none; + cursor: pointer; + box-sizing: border-box; + } + + .layoutShell__footerPopoverLink:hover { + background: #f0f0f0; + } + + .layoutShell__footerPopoverMeta { + margin-bottom: 20px; + padding: 16px 0 0 16px; + color: #999999; + font-size: 10px; + line-height: 1.5; + text-align: left; + } + + .layoutShell__contentFrame { + grid-column: 2; + grid-row: 3; + z-index: 20; + min-width: 0; + min-height: 0; + overflow: hidden; + background: #f2f2f2; + display: grid; + grid-template-areas: "content"; + grid-template-columns: minmax(0, 1fr); + grid-template-rows: minmax(0, 1fr); + + > .layoutShellScaleSpacer { + grid-area: content; + overflow: hidden; + } + } + + .layoutShell__contentScroll { + position: relative; + width: 100%; + height: 100%; + max-height: 100%; + min-width: 0; + min-height: 0; + box-sizing: border-box; + overflow: auto; + scrollbar-width: none; + -ms-overflow-style: none; + + > .createPage { + height: 100%; + max-height: 100%; + min-height: 0; + } + + &.layoutShell__contentScroll_scrollLocked { + overflow: hidden; + } + + &:has(> .explorePage) { + padding-left: 0; + } + + &::-webkit-scrollbar { + display: none; + } + } + + .layoutShell__modalMount { + position: relative; + grid-area: content; + z-index: 20; + min-width: 0; + min-height: 0; + overflow: hidden; + pointer-events: none; + + .arco-modal-mask { + position: absolute; + inset: 0; + width: 100%; + height: 100%; + max-width: 100%; + max-height: 100%; + box-sizing: border-box; + pointer-events: auto; + } + + .arco-modal-wrapper { + position: absolute; + inset: 0; + width: 100%; + height: 100%; + max-width: 100%; + max-height: 100%; + box-sizing: border-box; + display: flex; + flex-direction: column; + align-items: stretch; + pointer-events: auto; + background: #f9f9f9; + overflow: hidden; + overscroll-behavior: contain; + } + + .arco-modal-wrapper.layoutFullscreenDetailModalWrap { + overflow: hidden !important; + scrollbar-width: none; + -ms-overflow-style: none; + + &:has(.character-detail-arco-modal.zoomModal-exit), + &:has(.character-detail-arco-modal.zoomModal-exit-active), + &:has(.asset-details-arco-modal.zoomModal-exit), + &:has(.asset-details-arco-modal.zoomModal-exit-active) { + display: none !important; + pointer-events: none; + } + + &::-webkit-scrollbar { + display: none; + } + + .character-detail-arco-modal, + .asset-details-arco-modal { + &.zoomModal-appear, + &.zoomModal-enter, + &.zoomModal-appear-active, + &.zoomModal-enter-active, + &.zoomModal-exit, + &.zoomModal-exit-active { + opacity: 1 !important; + transform: none !important; + transition: none !important; + } + } + } + + .arco-modal-wrapper > * { + flex: 1 1 0; + min-width: 0; + min-height: 0; + display: flex; + flex-direction: column; + } + + .arco-modal-wrapper .asset-details-arco-modal, + .arco-modal-wrapper .character-detail-arco-modal { + flex: 1 1 0; + min-width: 0; + min-height: 0; + max-width: 100%; + align-self: stretch; + overflow: hidden; + box-sizing: border-box; + display: flex; + flex-direction: column; + } + + .arco-modal-wrapper .asset-details-arco-modal.arco-modal > *, + .arco-modal-wrapper .character-detail-arco-modal.arco-modal > * { + flex: 1 1 0; + min-width: 0; + min-height: 0; + display: flex; + flex-direction: column; + align-items: stretch; + } + + .arco-modal-wrapper .asset-details-arco-modal .arco-modal-content, + .arco-modal-wrapper .character-detail-arco-modal .arco-modal-content { + flex: 1 1 0; + min-height: 0; + overflow: hidden; + display: flex; + flex-direction: column; + } + + .arco-modal-wrapper .asset-details-arco-modal .arco-modal-body, + .arco-modal-wrapper .character-detail-arco-modal .arco-modal-body { + flex: 1 1 0; + min-height: 0; + overflow: hidden; + } + } + + .layoutShell__floatingComposerMount { + --layout-floating-composer-safe-width: calc(100vw - var(--layout-sidebar-width) - 40px); + + position: fixed; + left: calc(var(--layout-sidebar-width) + ((100vw - var(--layout-sidebar-width)) / 2)); + bottom: 30px; + z-index: 25; + width: min(1040px, var(--layout-floating-composer-safe-width)); + max-width: var(--layout-floating-composer-safe-width); + transform: translateX(-50%); + + .layoutShell__composer { + width: 100%; + max-width: 100%; + } + + &:has(.layoutShell__composer_collapsed) { + width: min(369px, var(--layout-floating-composer-safe-width)); + max-width: min(369px, var(--layout-floating-composer-safe-width)); + } + + &:has(.layoutShell__composer_collapsed) .layoutShell__composer.layoutShell__composer_collapsed { + width: 100%; + max-width: 100%; + } + } +} + +@media (max-width: 1200px) { + .layoutShell { + .layoutShell__promoBarInner { + gap: 24px; + } + } +} + +@media (max-width: 960px) { + .layoutShell { + --layout-promo-height: 0px; + + .layoutShell__promoBar { + display: none; + } + } +} + +@media (max-width: 900px) { + .layoutShellViewport { + height: 100dvh; + } + + .layoutShellScaleSpacer, + .layoutShellScaleInner { + width: 100%; + height: 100%; + min-height: 0; + } + + .layoutShell { + --layout-promo-height: 0px; + --layout-sidebar-width: 100%; + --layout-tabbar-height: calc(64px + env(safe-area-inset-bottom, 0px)); + --layout-topbar-height: 56px; + + height: 100dvh; + min-height: 100dvh; + grid-template-columns: minmax(0, 1fr); + grid-template-rows: var(--layout-topbar-height) minmax(0, 1fr) var(--layout-tabbar-height); + + .layoutShell__promoBar { + display: none; + } + + .layoutShell__topbar { + grid-column: 1; + grid-row: 1; + padding: 0 12px; + justify-content: flex-end; + } + + .layoutShell__topbarRight { + width: 100%; + gap: 8px; + justify-content: flex-end; + } + + .layoutShell__topbarTutorialBtn { + display: none; + } + + .layoutShell__topbarPillBtn { + min-width: 36px; + width: 36px; + height: 36px; + padding: 8px; + border-radius: 18px; + } + + .layoutShell__topbarPillText { + display: none; + } + + .layoutShell__topbarIconBtn { + width: 36px; + height: 36px; + padding: 8px; + border-radius: 18px; + } + + .layoutShell__userPoints { + min-width: 0; + width: auto; + max-width: min(168px, 42vw); + height: 36px; + padding: 0 10px; + border-radius: 18px; + } + + .layoutShell__userPointsLabel, + .layoutShell__userPointsDivider { + display: none; + } + + .layoutShell__notificationPopover { + position: fixed; + top: calc(var(--layout-topbar-height) + 8px); + left: 12px; + right: 12px; + width: auto; + height: min(581px, calc(100dvh - var(--layout-topbar-height) - var(--layout-tabbar-height) - 24px)); + max-height: calc(100dvh - var(--layout-topbar-height) - var(--layout-tabbar-height) - 24px); + border-radius: 20px; + } + + .layoutShell__notificationTabs, + .layoutShell__notificationCard, + .layoutShell__notificationState { + width: 100%; + } + + .layoutShell__notificationDetailFloat { + position: fixed; + left: 12px; + right: 12px; + top: calc(var(--layout-topbar-height) + 16px); + width: auto; + max-height: calc(100dvh - var(--layout-topbar-height) - var(--layout-tabbar-height) - 32px); + overflow-y: auto; + } + + .layoutShell__topbarServiceQrFloat, + .layoutShell__userPointsPopover { + position: fixed; + top: calc(var(--layout-topbar-height) + 8px); + right: 12px; + max-width: calc(100vw - 24px); + } + + .layoutShell__sidebar { + grid-column: 1; + grid-row: 3; + z-index: 50; + width: 100%; + min-width: 0; + height: var(--layout-tabbar-height); + padding: 6px 10px calc(6px + env(safe-area-inset-bottom, 0px)); + border-top: 1px solid #eeeeee; + display: grid; + grid-template-columns: minmax(0, 1fr) auto; + align-items: center; + gap: 8px; + overflow: visible; + box-shadow: 0 -6px 18px rgba(15, 15, 15, 0.06); + } + + .layoutShell__brand { + display: none; + } + + .layoutShell__sideNav { + width: 100%; + min-width: 0; + margin-top: 0; + display: flex; + flex-direction: row; + gap: 4px; + overflow-x: auto; + overflow-y: hidden; + scrollbar-width: none; + -ms-overflow-style: none; + } + + .layoutShell__sideNav::-webkit-scrollbar { + display: none; + } + + .layoutShell__sideItem { + width: clamp(54px, 15vw, 72px); + min-width: clamp(54px, 15vw, 72px); + height: 52px; + padding: 6px 4px; + border-radius: 16px; + gap: 2px; + } + + .layoutShell__sideIcon, + .layoutShell__sideIconImage { + width: 22px; + height: 22px; + } + + .layoutShell__sideText { + min-width: 0; + max-width: 100%; + font-size: 11px; + line-height: 14px; + overflow: hidden; + text-overflow: ellipsis; + } + + .layoutShell__sideBadge { + top: 2px; + right: 2px; + transform: scale(0.86); + transform-origin: top right; + } + + .layoutShell__footer { + width: auto; + height: auto; + margin-top: 0; + display: flex; + flex-direction: row; + align-items: center; + gap: 4px; + } + + .layoutShell__footerNav { + width: auto; + display: flex; + flex-direction: row; + gap: 4px; + } + + .layoutShell__footerPopoverTrigger { + width: 44px; + height: 52px; + margin: 0; + display: flex; + align-items: center; + justify-content: center; + background: transparent; + flex-shrink: 0; + } + + .layoutShell__footerMenuBtn { + width: 36px; + height: 36px; + border-radius: 18px; + background: #f9f9f9; + } + + .layoutShell__footerPopoverPanel { + left: auto; + right: 0; + bottom: calc(100% + 8px); + width: min(235px, calc(100vw - 24px)); + max-height: calc(100dvh - var(--layout-topbar-height) - var(--layout-tabbar-height) - 24px); + overflow-y: auto; + } + + .layoutShell__contentFrame { + grid-column: 1; + grid-row: 2; + } + + .layoutShell__contentFrame > .layoutShellScaleSpacer { + width: 100%; + height: 100%; + } + + .layoutShell__contentScroll { + padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)); + } + + .layoutShell__floatingComposerMount { + --layout-floating-composer-safe-width: calc(100vw - 24px); + + left: 50%; + bottom: calc(var(--layout-tabbar-height) + 12px); + z-index: 45; + } + } +} + +@media (max-width: 640px) { + .layoutShell { + .layoutShell__topbarServiceTool { + display: none; + } + + .layoutShell__userPoints { + max-width: 96px; + } + + .layoutShell__sideItem { + width: 56px; + min-width: 56px; + } + } +} + +@media (max-width: 380px) { + .layoutShell { + .layoutShell__userPointsTool { + display: none; + } + } }