feat(web): connect quick share flow

Signed-off-by: JustMe <mr.toing@outlook.com>
2026-10-02 00:59:37 +08:00
1 parent 53768a195d
commit e02e024605
@@ -0,0 +1,120 @@
+.page {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  height: 100dvh;
+  overflow-y: auto;
+  padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
+  overscroll-behavior-y: contain;
+}
+
+.main {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  width: min(100%, 640px);
+  margin: 0 auto;
+}
+
+.dragging {
+  outline: 2px dashed var(--accent);
+  outline-offset: -8px;
+}
+
+.badge {
+  padding: 0 var(--space-2);
+  border-radius: var(--radius-sm);
+  background: var(--warn-soft);
+  color: var(--warn);
+  font-size: 12px;
+}
+
+.empty {
+  margin: 0;
+  padding: var(--space-6) var(--space-4);
+  color: var(--text-dim);
+}
+
+.list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.settings {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: var(--space-3);
+  margin-top: auto;
+  padding: var(--space-4);
+  border-top: 1px solid var(--line);
+  font-size: 13px;
+}
+
+.settings label {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+
+.settings select {
+  min-height: 40px;
+  padding: 0 var(--space-3);
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-md);
+  background: var(--surface);
+  font-size: 15px;
+}
+
+.footer {
+  position: sticky;
+  bottom: 0;
+  z-index: 10;
+  display: flex;
+  justify-content: center;
+  padding: var(--space-3) var(--space-4);
+  padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
+  background: var(--glass);
+  /* stylelint-disable-next-line property-no-vendor-prefix */
+  -webkit-backdrop-filter: var(--blur-bar);
+  backdrop-filter: var(--blur-bar);
+}
+
+.footer > * {
+  width: min(100%, 640px);
+  min-height: 48px;
+}
+
+@supports not (backdrop-filter: blur(1px)) {
+  .footer {
+    background: var(--bg);
+  }
+}
+
+@media (prefers-reduced-transparency: reduce) {
+  .footer {
+    background: var(--bg);
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+  }
+}
+
+.confirm {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+.confirm p {
+  margin: 0;
+}
+
+.dim {
+  color: var(--text-dim);
+  font-size: 13px;
+}
+
+.confirmActions {
+  display: flex;
+  gap: var(--space-2);
+}