update at 2026-02-13 22:26:53

src/styles.css

@@ -548,11 +548,12 @@ body {
 .direction-control {
   display: inline-flex;
   align-items: center;
-  gap: 6px;
+  gap: 4px;
   border: 0;
   background: transparent;
   padding: 0;
   cursor: pointer;
+  flex-shrink: 0;
 }
 
 .direction-label {
@@ -565,29 +566,31 @@ body {
 .direction-switch {
   display: inline-flex;
   align-items: center;
-  gap: 2px;
-  width: 80px;
-  height: 24px;
-  padding: 2px;
-  border-radius: 999px;
+  gap: 1px;
+  min-width: 0;
+  width: auto;
+  height: 14px;
+  padding: 1px;
+  border-radius: 58.333px;
   background: var(--fill-3);
   justify-content: space-between;
 }
 
 .direction-switch-text {
-  font-size: 14px;
+  font-size: 8px;
   line-height: 1;
-  padding: 0 4px;
+  padding: 0 1px;
+  white-space: nowrap;
   color: var(--text-4);
 }
 
 .direction-switch-thumb {
-  width: 20px;
-  height: 20px;
+  width: 11.667px;
+  height: 11.667px;
   border-radius: 50%;
   background: #fff;
-  border: 1px solid var(--fill-3);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
+  border: 0;
+  box-shadow: none;
 }
 
 .direction-switch.on {
@@ -617,15 +620,7 @@ body {
 }
 
 .label-position-select {
-  min-width: 64px;
-  height: 24px;
-  border: 1px solid #c9aee0;
-  border-radius: 2px;
-  background: #fff;
-  color: #1d2129;
-  font-size: 14px;
-  padding: 0 20px 0 6px;
-  line-height: 22px;
+  min-width: 0;
 }
 
 .target-align-control {
@@ -643,15 +638,7 @@ body {
 }
 
 .target-align-select {
-  min-width: 88px;
-  height: 24px;
-  border: 1px solid #c9aee0;
-  border-radius: 2px;
-  background: #fff;
-  color: #1d2129;
-  font-size: 14px;
-  padding: 0 20px 0 6px;
-  line-height: 22px;
+  min-width: 0;
 }
 
 .compact-control {
@@ -669,15 +656,29 @@ body {
 }
 
 .compact-select {
-  height: 24px;
-  min-width: 52px;
-  border: 1px solid #c9aee0;
-  border-radius: 2px;
+  min-width: 0;
+}
+
+.label-position-select,
+.target-align-select,
+.compact-select {
+  width: auto;
+  inline-size: max-content;
+  height: 14px;
+  border: 0.5px solid #c9aee0;
+  border-radius: 4px;
   background: #fff;
   color: #1d2129;
   font-size: 12px;
-  padding: 0 16px 0 4px;
-  line-height: 22px;
+  line-height: 1;
+  padding: 0 14px 0 4px;
+  appearance: none;
+  -webkit-appearance: none;
+  background-image: url('../assets/icons/list.svg');
+  background-repeat: no-repeat;
+  background-position: right 2px center;
+  background-size: 10px 8px;
+  flex-shrink: 0;
 }
 
 .example-line {
@@ -859,7 +860,19 @@ body {
   }
 
   .upload-area {
-    display: none;
+    display: flex;
+    min-width: 92px;
+    max-width: none;
+    flex: 1 1 auto;
+    min-height: 28px;
+    padding: 2px 5px;
+  }
+
+  .upload-text {
+    font-size: 10px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   .top-bar {
@@ -870,14 +883,12 @@ body {
   .toolbar {
     width: 100%;
     flex-wrap: nowrap;
-    overflow-x: auto;
-    overflow-y: hidden;
+    overflow: hidden;
     justify-content: flex-start;
-    gap: 6px;
-    scrollbar-width: none;
+    gap: 4px;
   }
 
-  .toolbar::-webkit-scrollbar {
+  .tool-item .tool-label {
     display: none;
   }
 
@@ -886,6 +897,27 @@ body {
     flex-shrink: 0;
   }
 
+  .tool-item .icon-btn {
+    width: 28px;
+    height: 28px;
+  }
+
+  .export-box {
+    padding: 1px 4px;
+    gap: 4px;
+  }
+
+  .export-main {
+    display: block;
+    width: 12px;
+    height: 24px;
+  }
+
+  .export-item {
+    width: 28px;
+    height: 28px;
+  }
+
   .content {
     gap: 6px;
   }
@@ -948,13 +980,13 @@ body {
   }
 
   .label-position-select {
-    min-width: 46px;
+    min-width: 0;
     font-size: 12px;
     padding: 0 14px 0 4px;
   }
 
   .target-align-select {
-    min-width: 58px;
+    min-width: 0;
     font-size: 12px;
     padding: 0 14px 0 4px;
   }