form-driver 0.4.10 → 0.4.12

package/dist/m3.css

@@ -503,27 +503,265 @@ table.M3_table tr:last-child td {
   width: 40px;
 }
 
-.weight-slider {
-  -ms-scroll-chaining: none;
-      overscroll-behavior: none;
-  overscroll-behavior-x: none;
-  overscroll-behavior-y: none;
-}
-.weight-slider .ant-slider-handle {
-  width: 20px;
-  height: 20px;
-  margin-top: -8px;
+/**
+ * Slider 组件样式
+ * Purpose: 提供与 antd Slider 一致的视觉效果和交互体验
+ */
+.slider {
+  position: relative;
+  box-sizing: border-box;
+  margin: 14px 6px 10px;
+  padding: 4px 0;
+  cursor: pointer;
   touch-action: none;
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
   -moz-user-select: none;
    -ms-user-select: none;
        user-select: none;
-}
-.weight-slider .ant-slider {
+  -webkit-user-select: none;
+  -webkit-touch-callout: none;
   -ms-scroll-chaining: none;
       overscroll-behavior: none;
+}
+.slider.slider-disabled {
+  cursor: not-allowed;
+}
+.slider.slider-disabled .slider-rail,
+.slider.slider-disabled .slider-track,
+.slider.slider-disabled .slider-handle {
+  cursor: not-allowed !important;
+}
+.slider.slider-disabled .slider-track {
+  background-color: rgba(0, 0, 0, 0.25) !important;
+}
+.slider.slider-disabled .slider-handle {
+  background-color: #fff;
+  border-color: rgba(0, 0, 0, 0.25);
+  box-shadow: none;
+}
+.slider.slider-disabled .slider-handle::after {
+  background-color: rgba(0, 0, 0, 0.25);
+}
+.slider.slider-horizontal {
+  height: 12px;
+}
+.slider.slider-horizontal .slider-rail {
+  width: 100%;
+  height: 4px;
+}
+.slider.slider-horizontal .slider-handle {
+  margin-left: -10px;
+  margin-top: -6px;
+}
+.slider.slider-horizontal .slider-mark {
+  top: 18px;
+  left: 0;
+  transform: translateX(-50%);
+  white-space: nowrap;
+}
+.slider.slider-horizontal .slider-dot {
+  top: 0;
+  margin-left: -4px;
+}
+.slider.slider-vertical {
+  width: 12px;
+  height: 100%;
+  min-height: 150px;
+  margin: 6px 14px;
+  padding: 0 4px;
+}
+.slider.slider-vertical .slider-rail {
+  width: 4px;
+  height: 100%;
+}
+.slider.slider-vertical .slider-handle {
+  margin-bottom: -10px;
+  margin-left: -6px;
+}
+.slider.slider-vertical .slider-mark {
+  left: 18px;
+  bottom: 0;
+  transform: translateY(50%);
+}
+.slider.slider-vertical .slider-dot {
+  left: 0;
+  margin-bottom: -4px;
+}
+.slider-rail {
+  position: relative;
+  background-color: #f5f5f5;
+  border-radius: 2px;
+  transition: background-color 0.3s;
+}
+.slider-rail:hover {
+  background-color: #e1e1e1;
+}
+.slider-track {
+  position: absolute;
+  height: 100%;
+  background-color: #1890ff;
+  border-radius: 2px;
+  transition: background-color 0.3s;
+  pointer-events: none;
+}
+.slider:hover .slider-track {
+  background-color: #40a9ff;
+}
+.slider-handle {
+  position: absolute;
+  width: 14px;
+  height: 14px;
+  background-color: #fff;
+  border: 2px solid #1890ff;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
+  outline: none;
   touch-action: none;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+}
+.slider-handle:hover,
+.slider-handle:focus {
+  border-color: #40a9ff;
+  box-shadow: 0 0 0 5px rgba(24, 144, 255, 0.12);
+}
+.slider-handle.slider-handle-dragging {
+  border-color: #40a9ff;
+  box-shadow: 0 0 0 5px rgba(24, 144, 255, 0.2);
+  transform: scale(1.1);
+}
+.slider-handle.focus-visible {
+  box-shadow: 0 0 0 5px rgba(24, 144, 255, 0.2);
+}
+.slider-handle:focus-visible {
+  box-shadow: 0 0 0 5px rgba(24, 144, 255, 0.2);
+}
+.slider-tooltip {
+  position: absolute;
+  padding: 6px 8px;
+  font-size: 12px;
+  line-height: 1.5;
+  color: #fff;
+  background-color: rgba(0, 0, 0, 0.75);
+  border-radius: 2px;
+  pointer-events: none;
+  white-space: nowrap;
+  z-index: 1060;
+}
+.slider-tooltip.slider-tooltip-top {
+  bottom: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%);
+}
+.slider-tooltip.slider-tooltip-top::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  margin-left: -4px;
+  border: 4px solid transparent;
+  border-top-color: rgba(0, 0, 0, 0.75);
+}
+.slider-tooltip.slider-tooltip-bottom {
+  top: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%);
+}
+.slider-tooltip.slider-tooltip-bottom::after {
+  content: "";
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  margin-left: -4px;
+  border: 4px solid transparent;
+  border-bottom-color: rgba(0, 0, 0, 0.75);
+}
+.slider-tooltip.slider-tooltip-left {
+  right: calc(100% + 8px);
+  top: 50%;
+  transform: translateY(-50%);
+}
+.slider-tooltip.slider-tooltip-left::after {
+  content: "";
+  position: absolute;
+  left: 100%;
+  top: 50%;
+  margin-top: -4px;
+  border: 4px solid transparent;
+  border-left-color: rgba(0, 0, 0, 0.75);
+}
+.slider-tooltip.slider-tooltip-right {
+  left: calc(100% + 8px);
+  top: 50%;
+  transform: translateY(-50%);
+}
+.slider-tooltip.slider-tooltip-right::after {
+  content: "";
+  position: absolute;
+  right: 100%;
+  top: 50%;
+  margin-top: -4px;
+  border: 4px solid transparent;
+  border-right-color: rgba(0, 0, 0, 0.75);
+}
+.slider-dot {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background-color: #fff;
+  border: 2px solid #f0f0f0;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: border-color 0.3s;
+}
+.slider-dot:hover {
+  border-color: #bfbfbf;
+}
+.slider-marks {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+}
+.slider-mark {
+  position: absolute;
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.45);
+  cursor: pointer;
+  pointer-events: auto;
+}
+.slider-mark-text {
+  display: inline-block;
+  white-space: nowrap;
+}
+@media (hover: none) and (pointer: coarse) {
+  .slider-handle {
+    width: 20px;
+    height: 20px;
+  }
+  .slider-handle::before {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 44px;
+    height: 44px;
+    transform: translate(-50%, -50%);
+  }
+  .slider-horizontal .slider-handle {
+    margin-left: -10px;
+    margin-top: -8px !important;
+  }
+  .slider-vertical .slider-handle {
+    margin-bottom: -10px;
+    margin-left: -8px;
+  }
+}
+
+.weight-slider {
+  transform: translateY(-8px);
 }
 
 .form-driver-plugin-richtext-viewer-wrap .richtext-viewer-more {