style: 缩小编辑器工具栏间距与字体，适应小屏幕

README.md

@@ -62,6 +62,13 @@
 22. 给背景图添加编辑器，与层叠图编辑器文本编辑器通用一个工具栏，背景图工具栏功能为：背景图可以放大缩小，可以调节透明度，其余功能不受影响，点击层叠图只显示当前编辑器工具栏
 23. 校准画布编辑与图片导出文字垂直位置偏移问题，修改屏幕尺寸为960x1361像素
 24. 添加新输入框，HTML文件里三个文本输入框改为随着添加背景图片后显示，三个输入框的位置分别为left：98px, top: 232.945px；left：98px, top: 275.555px；left：98px, top: 317.548px；
+25. 适配网站子目录部署，项目路由静态资源路径改为 /tool/invitation-maker/
+26. 严格按照输入框功能不变，在这个基础上将三个输入框原本的默认文本，改为占位符，提示语为"请输入"的要求改
+27. 缩小背景图/层叠图/文本按钮宽度，优化手机端保存图片直接存入相册功能
+28. 设置默认背景图，页面打开自动加载，保留原有功能，点击背景图按钮可更换
+29. 将编辑器工具栏颜色，字体，字号间距缩小一些，美观大方
+
+
 
 
 

css/style.css

@@ -94,7 +94,7 @@ html, body {
     display: flex;
     justify-content: center;
     align-items: center;
-    padding: 10px 16px;
+    padding: 8px 12px;
     background: #fff;
     border-bottom: 1px solid #e0e0e0;
     flex-shrink: 0;
@@ -113,7 +113,7 @@ html, body {
     display: none;
     justify-content: center;
     align-items: center;
-    gap: 8px;
+    gap: 4px;
 }
 
 .toolbar-group.active {
@@ -121,12 +121,12 @@ html, body {
 }
 
 .toolbar-btn {
-    width: 40px;
-    height: 40px;
-    font-size: 18px;
+    width: 36px;
+    height: 36px;
+    font-size: 16px;
     font-weight: bold;
     border: 1px solid #ddd;
-    border-radius: 8px;
+    border-radius: 6px;
     background: #fff;
     color: #333;
     cursor: pointer;
@@ -149,39 +149,39 @@ html, body {
 
 .toolbar-divider {
     width: 1px;
-    height: 28px;
+    height: 24px;
     background: #ddd;
-    margin: 0 4px;
+    margin: 0 2px;
 }
 
 .toolbar-label {
     display: flex;
     align-items: center;
-    gap: 6px;
-    font-size: 13px;
+    gap: 4px;
+    font-size: 12px;
     color: #666;
 }
 
 .toolbar-label select {
-    padding: 6px 8px;
-    font-size: 13px;
+    padding: 4px 6px;
+    font-size: 12px;
     border: 1px solid #ddd;
-    border-radius: 6px;
+    border-radius: 4px;
     background: #fff;
     cursor: pointer;
 }
 
 .opacity-slider {
-    width: 120px;
-    height: 40px;
+    width: 100px;
+    height: 32px;
     cursor: pointer;
     accent-color: #4a90e2;
     margin: 0;
 }
 
 .scale-slider {
-    width: 120px;
-    height: 40px;
+    width: 100px;
+    height: 32px;
     cursor: pointer;
     accent-color: #4a90e2;
     margin: 0;