Refine study controls and slice rail

PACS_DICOM处理/数据处理网页端/static/styles.css

@@ -308,13 +308,14 @@ button:disabled {
 
 .sort-btn {
   height: 26px;
-  min-width: 68px;
+  min-width: 78px;
   padding: 0 8px;
   border: 1px solid var(--stroke);
   border-radius: 7px;
   background: #0b0f16;
   color: var(--muted);
   font-size: 11px;
+  white-space: nowrap;
 }
 
 .sort-arrow {
@@ -501,7 +502,7 @@ button:disabled {
 }
 
 .study-summary-line:has(.study-export-btn) {
-  grid-template-columns: minmax(0, 1fr) 28px;
+  grid-template-columns: minmax(0, 1fr) 22px;
 }
 
 .study-summary-line .study-export-btn {
@@ -509,29 +510,28 @@ button:disabled {
 }
 
 .study-export-btn {
-  width: 28px;
-  min-width: 28px;
-  height: 28px;
+  width: 22px;
+  min-width: 22px;
+  height: 22px;
   display: inline-grid;
   place-items: center;
-  border: 1px solid var(--stroke);
-  border-radius: 50%;
-  background: rgba(21, 28, 39, 0.92);
-  color: #dbe8ff;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: #9fb1cb;
   font-size: 11px;
   font-style: normal;
   font-weight: 800;
 }
 
 .study-export-btn:hover {
-  border-color: rgba(25, 212, 194, 0.68);
   color: #baf8ee;
-  background: rgba(25, 212, 194, 0.1);
+  background: transparent;
 }
 
 .study-export-btn svg {
-  width: 15px;
-  height: 15px;
+  width: 18px;
+  height: 18px;
   fill: none;
   stroke: currentColor;
   stroke-width: 2.2;
@@ -768,7 +768,7 @@ button:disabled {
 }
 
 #dicomImage {
-  max-width: calc(100% - 64px);
+  max-width: calc(100% - 82px);
   max-height: 100%;
   object-fit: contain;
   transform-origin: center center;
@@ -822,7 +822,7 @@ button:disabled {
 
 .ov-right-top {
   top: 12px;
-  right: 54px;
+  right: 72px;
   text-align: right;
 }
 
@@ -832,7 +832,7 @@ button:disabled {
 }
 
 .ov-right-bottom {
-  right: 54px;
+  right: 72px;
   bottom: 12px;
   text-align: right;
 }
@@ -840,22 +840,25 @@ button:disabled {
 .slice-rail {
   position: absolute;
   top: 16px;
-  right: 12px;
+  right: 10px;
   bottom: 16px;
-  width: 38px;
+  z-index: 4;
+  width: 52px;
   display: grid;
   grid-template-rows: 1fr auto;
   justify-items: center;
   align-items: center;
-  padding: 10px 0;
+  padding: 10px 4px;
   border: 1px solid rgba(146, 163, 186, 0.24);
   border-radius: 8px;
   background: rgba(8, 12, 18, 0.86);
   backdrop-filter: blur(6px);
+  cursor: ns-resize;
+  touch-action: none;
 }
 
 #sliceSlider {
-  width: 28px;
+  width: 44px;
   height: 100%;
   writing-mode: vertical-lr;
   direction: ltr;
@@ -873,9 +876,9 @@ button:disabled {
 }
 
 #sliceSlider::-webkit-slider-thumb {
-  width: 16px;
-  height: 16px;
-  margin-left: -6px;
+  width: 22px;
+  height: 22px;
+  margin-left: -9px;
   border: 2px solid #d8fbff;
   border-radius: 999px;
   background: var(--cyan);
@@ -896,8 +899,8 @@ button:disabled {
 }
 
 #sliceSlider::-moz-range-thumb {
-  width: 14px;
-  height: 14px;
+  width: 20px;
+  height: 20px;
   border: 2px solid #d8fbff;
   border-radius: 999px;
   background: var(--cyan);