update at 2026-02-12 17:42:11

src/styles.css

@@ -76,6 +76,10 @@ body {
   gap: 4px;
 }
 
+.theme-trigger {
+  position: relative;
+}
+
 .tool-label {
   color: #1d2129;
   font-size: 14px;
@@ -100,11 +104,6 @@ body {
   object-fit: contain;
 }
 
-.icon-btn.tiny {
-  width: 14px;
-  height: 14px;
-}
-
 .upload-area {
   min-width: 280px;
   max-width: 420px;
@@ -115,6 +114,7 @@ body {
   align-items: center;
   padding: 4px 10px;
   background: var(--fill-1);
+  border: 1px solid var(--fill-3);
   cursor: pointer;
   position: relative;
 }
@@ -128,26 +128,6 @@ body {
   font-size: 12px;
 }
 
-.upload-tip {
-  position: absolute;
-  left: 0;
-  top: 44px;
-  z-index: 5;
-  width: 100%;
-  border: 1px solid var(--primary-7);
-  background: #fff;
-  border-radius: 8px;
-  padding: 8px;
-  color: var(--text-4);
-  font-size: 12px;
-}
-
-.upload-tip a {
-  color: var(--primary-7);
-  text-decoration: none;
-  font-weight: 500;
-}
-
 .export-box {
   display: flex;
   gap: 6px;
@@ -170,8 +150,9 @@ body {
 
 .theme-popover {
   position: absolute;
-  top: 80px;
-  right: 290px;
+  top: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%);
   width: 280px;
   border: 1px solid var(--primary-7);
   border-radius: 24px 24px 0 0;
@@ -180,6 +161,19 @@ body {
   padding: 8px;
 }
 
+.theme-popover::before {
+  content: '';
+  position: absolute;
+  top: -8px;
+  left: 50%;
+  width: 14px;
+  height: 14px;
+  background: #fff;
+  border-top: 1px solid var(--primary-7);
+  border-left: 1px solid var(--primary-7);
+  transform: translateX(-50%) rotate(45deg);
+}
+
 .theme-header {
   text-align: center;
   color: var(--primary-6);
@@ -388,11 +382,6 @@ body {
     flex-wrap: wrap;
   }
 
-  .theme-popover {
-    right: 12px;
-    top: 120px;
-  }
-
   .content {
     grid-template-columns: 1fr;
   }