2c12e1f8fe0f
add missing peach-vault-sheet CSS (peek/open/dragging states + drag handle) so the mobile bottom sheet actually peeks instead of overlaying the entry view full-screen
- time
- 2026-05-18 14:24 UTC · 5 months ago
- machine
- koh2
- parent
- 66c3fd7b35ec
↓ peach-browser-2c12e1f8.tar.gzatlas at this save
files changed1 file
src/popup/styles/popup.css+46 −0src/popup/styles/popup.css+46 −0
@@ -1314,6 +1314,52 @@13141314 background: var(--peach-s1);13151315 }13161316 1317+/* Mobile vault bottom sheet — peeks above the entry view at rest, slides up1318+ when the user swipes or taps the peek strip. App.tsx writes1319+ `is-peeking` / `is-open` (and a live `transform` inline style during1320+ drag). PEEK_PX in App.tsx is 60. */1321+.peach-vault-sheet {1322+ position: fixed;1323+ inset: 0;1324+ z-index: 50;1325+ background: var(--peach-bg);1326+ will-change: transform;1327+ transform: translateY(100%);1328+ transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1);1329+ box-shadow: 0 -18px 38px -22px rgba(0, 0, 0, 0.55);1330+ border-top-left-radius: 18px;1331+ border-top-right-radius: 18px;1332+ overflow: hidden;1333+}1334+.peach-vault-sheet::before {1335+ content: "";1336+ position: absolute;1337+ top: 6px;1338+ left: 50%;1339+ transform: translateX(-50%);1340+ width: 38px;1341+ height: 4px;1342+ border-radius: 999px;1343+ background: var(--peach-t3);1344+ opacity: 0.6;1345+ z-index: 3;1346+ pointer-events: none;1347+}1348+.peach-vault-sheet.is-peeking {1349+ transform: translateY(calc(100% - 60px));1350+}1351+.peach-vault-sheet.is-open {1352+ transform: translateY(0);1353+}1354+.peach-vault-sheet.is-dragging {1355+ transition: none;1356+}1357+.peach-vault-sheet .peach-overlay-view {1358+ position: absolute;1359+ inset: 0;1360+ animation: none;1361+}1362+13171363 /* Native (mobile) variant: flat search-bar look matching the extension's13181364 `.peach-search-bar`. No back arrow — the sheet is dismissed by swipe.13191365 Search-glass icon on the left, counter on the right, no nav buttons. */