稍微好一点点

static/web/viewer.html

@@ -108,33 +108,33 @@
         }
 
         :root {
-            --reader-controls-size: 52px;
-            --reader-controls-gap: 8px;
-            --reader-controls-radius: 18px;
-            --reader-controls-padding: 10px;
+            --reader-controls-size: 42px;
+            --reader-controls-gap: 6px;
+            --reader-controls-radius: 14px;
+            --reader-controls-padding: 8px;
             --reader-controls-surface: rgba(255, 255, 255, 0.96);
             --reader-controls-border: rgba(15, 23, 42, 0.08);
-            --reader-controls-icon: 20px;
-            --reader-controls-font: 11px;
+            --reader-controls-icon: 17px;
+            --reader-controls-font: 10px;
             --reader-controls-label: none;
         }
 
         body.reader-size-medium {
-            --reader-controls-size: 60px;
-            --reader-controls-gap: 10px;
-            --reader-controls-radius: 20px;
-            --reader-controls-padding: 12px;
-            --reader-controls-icon: 22px;
-            --reader-controls-font: 12px;
+            --reader-controls-size: 48px;
+            --reader-controls-gap: 7px;
+            --reader-controls-radius: 16px;
+            --reader-controls-padding: 9px;
+            --reader-controls-icon: 18px;
+            --reader-controls-font: 10px;
         }
 
         body.reader-size-large {
-            --reader-controls-size: 68px;
-            --reader-controls-gap: 12px;
-            --reader-controls-radius: 22px;
-            --reader-controls-padding: 14px;
-            --reader-controls-icon: 24px;
-            --reader-controls-font: 13px;
+            --reader-controls-size: 54px;
+            --reader-controls-gap: 8px;
+            --reader-controls-radius: 18px;
+            --reader-controls-padding: 10px;
+            --reader-controls-icon: 20px;
+            --reader-controls-font: 11px;
         }
 
         #mainContainer {
@@ -146,7 +146,7 @@
 
         #readerWorkspace {
             display: grid;
-            grid-template-columns: auto minmax(0, 1fr);
+            grid-template-columns: minmax(78px, auto) minmax(0, 1fr);
             grid-template-rows: minmax(0, 1fr);
             align-items: stretch;
             min-height: 0;
@@ -157,10 +157,12 @@
         #viewerContainer {
             min-width: 0;
             min-height: 0;
+            overflow: auto;
+            background: #eef2f7;
         }
 
         body.reader-position-right #readerWorkspace {
-            grid-template-columns: minmax(0, 1fr) auto;
+            grid-template-columns: minmax(0, 1fr) minmax(78px, auto);
         }
 
         body.reader-position-top #readerWorkspace,
@@ -186,6 +188,7 @@
             align-self: stretch;
             justify-content: flex-start;
             align-items: center;
+            flex-shrink: 0;
         }
 
         body.reader-position-left #readerControls,
@@ -316,7 +319,7 @@
             flex-direction: column;
             align-items: center;
             justify-content: center;
-            gap: 4px;
+            gap: 2px;
             font-size: var(--reader-controls-font);
             line-height: 1;
             letter-spacing: 0.02em;
@@ -568,7 +571,7 @@
         }
 
         /* 手机端优化 */
-        @media (max-width: 768px) {
+        @media (max-width: 768px) {
             .modal {
                 width: 95%;
                 padding: 10px;
@@ -581,8 +584,8 @@
             }
 
             #readerControls {
-                --reader-controls-padding: 8px;
-                --reader-controls-gap: 6px;
+                --reader-controls-padding: 7px;
+                --reader-controls-gap: 5px;
             }
 
             #loading-indicator {