feat: 实现文件夹和书签的持久排序与拖拽功能

apps/extension/src/style.css

@@ -1,79 +1,63 @@
 :root {
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  --bb-bg: #f8fafc;
+  --bb-text: #0f172a;
+  --bb-muted: rgba(15, 23, 42, 0.70);
+  --bb-primary: #2563eb;
+  --bb-primary-weak: rgba(37, 99, 235, 0.12);
+  --bb-cta: #f97316;
+  --bb-border: rgba(15, 23, 42, 0.14);
+  --bb-card: rgba(255, 255, 255, 0.88);
+  --bb-card-solid: #ffffff;
+
+  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
   line-height: 1.5;
   font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
+* { box-sizing: border-box; }
+
+html, body {
+  width: 100%;
+  height: 100%;
+  margin: 0;
 }
 
 body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
+  background:
+    radial-gradient(900px 520px at 10% 0%, rgba(37, 99, 235, 0.12), rgba(0,0,0,0) 60%),
+    radial-gradient(900px 520px at 90% 0%, rgba(249, 115, 22, 0.12), rgba(0,0,0,0) 60%),
+    var(--bb-bg);
+  color: var(--bb-text);
 }
 
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
+a { color: var(--bb-primary); text-decoration: none; }
+a:hover { color: #1d4ed8; }
+
+button, input, select, textarea {
+  font: inherit;
+  color: inherit;
 }
 
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
+select, input, textarea {
+  background: rgba(255,255,255,0.92);
 }
 
-.card {
-  padding: 2em;
+::placeholder {
+  color: rgba(15, 23, 42, 0.45);
 }
 
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
+a:focus-visible,
+button:focus-visible,
+input:focus-visible,
+select:focus-visible {
+  outline: 2px solid rgba(37, 99, 235, 0.55);
+  outline-offset: 2px;
 }
 
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
+@media (prefers-reduced-motion: reduce) {
+  * { transition: none !important; scroll-behavior: auto !important; }
 }