diff --git a/product-source/hololake-native-desktop/src/styles.css b/product-source/hololake-native-desktop/src/styles.css index bbf55f0f2..9707f91dd 100644 --- a/product-source/hololake-native-desktop/src/styles.css +++ b/product-source/hololake-native-desktop/src/styles.css @@ -457,7 +457,8 @@ svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-lineca @keyframes pod-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } } /* 封存翻转舱:湖面上一枚封存徽舱,轻点一下翻转翻开表单面 */ -.gate-flip { display: grid; transform-style: preserve-3d; transition: transform .95s cubic-bezier(.32, .72, .3, 1); cursor: pointer; } +.gate-flip { display: grid; transform-style: preserve-3d; transition: transform .95s cubic-bezier(.32, .72, .3, 1); cursor: pointer; background: transparent; border-color: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } +.gate-flip .pod-face { border: 1px solid color-mix(in srgb, var(--accent-light) 22%, transparent); border-radius: 24px; background: color-mix(in srgb, var(--panel-bg) 62%, transparent); backdrop-filter: blur(26px) saturate(1.15); -webkit-backdrop-filter: blur(26px) saturate(1.15); box-shadow: 0 34px 90px rgba(0, 0, 0, .5), 0 0 70px color-mix(in srgb, var(--primitive-warm-glow) 9%, transparent), inset 0 1px 0 rgba(255, 255, 255, .07); } .gate-flip.open { transform: rotateY(180deg); cursor: default; } .pod-face { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .pod-form { transform: rotateY(180deg); }