fix: 优化移动端沉浸工具栏

This commit is contained in:
JSR
2026-07-11 13:08:11 +08:00
parent 5595062278
commit ff6cb694d2
2 changed files with 314 additions and 65 deletions
+83
View File
@@ -345,6 +345,89 @@ html.platform-macos body {
pointer-events: none;
}
.ss-immersive-toolbar-segment {
position: relative;
height: 54px;
min-width: 0;
border: 1px solid color-mix(in srgb, var(--ss-border-color) 80%, transparent);
border-radius: 999px;
background: transparent;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.16);
padding: 0;
box-sizing: border-box;
isolation: isolate;
}
.ss-immersive-toolbar-segment::before {
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
background-color: var(--ss-card-bg);
background: color-mix(in srgb, var(--ss-card-bg) 58%, transparent);
backdrop-filter: blur(18px) saturate(1.15);
-webkit-backdrop-filter: blur(18px) saturate(1.15);
content: "";
}
.ss-immersive-toolbar-segment .ss-immersive-toolbar-search.ant-input-affix-wrapper {
width: 100%;
height: 52px;
border: none !important;
border-radius: 999px;
background: color-mix(in srgb, var(--ss-card-bg) 58%, transparent) !important;
box-shadow: none !important;
backdrop-filter: blur(18px) saturate(1.15);
-webkit-backdrop-filter: blur(18px) saturate(1.15);
display: flex;
align-items: center;
padding: 0 14px;
line-height: 52px;
}
.ss-immersive-toolbar-segment
.ss-immersive-toolbar-search.ant-input-affix-wrapper-focused,
.ss-immersive-toolbar-segment .ss-immersive-toolbar-search.ant-input-affix-wrapper:focus,
.ss-immersive-toolbar-segment .ss-immersive-toolbar-search.ant-input-affix-wrapper:hover {
border: none !important;
background: color-mix(in srgb, var(--ss-card-bg) 58%, transparent) !important;
box-shadow: none !important;
}
.ss-immersive-toolbar-segment .ss-immersive-toolbar-search .ant-input {
height: 24px;
background: transparent !important;
line-height: 24px;
padding: 0;
}
.ss-immersive-toolbar-segment .ss-immersive-toolbar-search .ant-input-prefix,
.ss-immersive-toolbar-segment .ss-immersive-toolbar-search .ant-input-suffix {
line-height: 1;
}
.ss-immersive-toolbar-menu-segment {
flex: 0 0 54px;
display: flex;
align-items: center;
justify-content: center;
}
.ss-immersive-toolbar-popover .ant-popover-inner {
border-radius: 12px;
}
.ss-immersive-toolbar-menu {
width: min(232px, calc(100vw - 32px));
display: flex;
flex-direction: column;
gap: 8px;
}
.ss-immersive-toolbar-select-popup {
z-index: 1300;
}
.ss-settings-mobile-nav-list {
display: flex;
flex-direction: column;