feat(web): add account workspaces and signed content flows

2026-10-14 04:06:03 +08:00
1 parent 7b8d61d1ba
commit b5cf3d5958
@@ -0,0 +1,129 @@
+.dock {
+  position: fixed;
+  z-index: 24;
+  left: max(var(--space-4), env(safe-area-inset-left));
+  bottom: max(var(--space-4), env(safe-area-inset-bottom));
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  width: min(288px, calc(100vw - var(--space-6)));
+  padding: var(--space-2);
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-md);
+  background: var(--surface);
+}
+
+.profile {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  gap: var(--space-2);
+  min-width: 0;
+  min-height: 44px;
+  padding: var(--space-1) var(--space-2);
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--text);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.profile:hover,
+.profile:focus-visible {
+  background: var(--accent-soft);
+}
+
+.profile:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: -2px;
+}
+
+.avatar,
+.avatarFallback {
+  display: grid;
+  flex: 0 0 36px;
+  place-items: center;
+  width: 36px;
+  height: 36px;
+  border-radius: var(--radius-avatar);
+  object-fit: cover;
+}
+
+.avatarFallback {
+  background: var(--surface-2);
+  color: var(--text);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.profileText {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  line-height: 1.35;
+}
+
+.profileName,
+.username {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.profileName {
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.username {
+  color: var(--text-dim);
+  font-size: 11px;
+}
+
+.settings {
+  flex: 0 0 44px;
+  width: 44px;
+  min-width: 44px;
+  height: 44px;
+  min-height: 44px;
+  padding: 0;
+}
+
+@media (width <= 899px) {
+  .dock {
+    left: max(var(--space-2), env(safe-area-inset-left));
+    bottom: calc(88px + env(safe-area-inset-bottom));
+    gap: var(--space-1);
+    width: auto;
+    padding: var(--space-1);
+  }
+
+  .profile {
+    flex: 0 0 40px;
+    width: 40px;
+    min-height: 40px;
+    justify-content: center;
+    padding: 0;
+  }
+
+  .avatar,
+  .avatarFallback {
+    flex-basis: 32px;
+    width: 32px;
+    height: 32px;
+  }
+
+  .profileText {
+    display: none;
+  }
+
+  .settings {
+    flex-basis: 40px;
+    width: 40px;
+    min-width: 40px;
+    height: 40px;
+    min-height: 40px;
+  }
+}