Merge pull request #126 from DevChu/refine-ZK-4374

refine ZK-4374 theme
zkoss · Nov 12, 2019 · 57fa414 · 57fa414
2 parents 1242cfc + 3b37794
commit 57fa414
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 84 deletions.
diff --git a/src/archive/web/js/zkmax/slider/less/multislider.less b/src/archive/web/js/zkmax/slider/less/multislider.less
@@ -33,142 +33,111 @@
 
 	& .z-sliderbuttons {
 		&-button {
-			border-color: @multisliderButtonBorderColor;
+			width: @multisliderButtonSize;
+			height: @multisliderButtonSize;
+			background-color: @multisliderEmptyBackgroundColor;
 			border-width: @multisliderButtonBorderWidth;
+			border-color: @multisliderButtonBorderColor;
+			border-radius: 50%;
+			z-index: 2;
 		}
 
 		&-tooltip {
-			border-radius: @multisliderBorderRadius;
 			background: @multisliderTooltipBackgroundColor;
+			font-size: @fontSizeLarge;
 		}
-	}
 
-	&:not(&-disabled) {
-		& .z-sliderbuttons {
-			&-area {
-				background-color: @multisliderAreaColor;
-			}
-
-			&-button:hover {
-				background-color: @multisliderButtonHoverColor;
-			}
-
-			&-button:hover .z-sliderbuttons-tooltip {
-				display: block;
-			}
-
-			&-button:active {
-				background-color: @multisliderButtonActiveColor;
-			}
-
-			&-button:focus {
-				border-color: @multisliderButtonFocusBorderColor;
-			}
+		&-area {
+			background-color: @multisliderAreaColor;
 		}
 
-		& .z-sliderbuttons:nth-last-of-type(2n-4) .z-sliderbuttons-area {
+		&:nth-last-of-type(2n-2) .z-sliderbuttons-area {
 			background-color: @multisliderAreaColor2;
 		}
 	}
 
 	&-horizontal {
 		width: 300px;
-		padding-left: 10px;
-		padding-right: 10px;
-
 		& .z-sliderbuttons {
 			&-area {
+				margin-left: -10px;
 				height: 100%;
-				margin-left: -5px;
 			}
-
 			&-button {
-				width: 10px;
-				height: 16px;
-				margin-top: -5px;
-
-				&:nth-child(2) {
-					margin-left: -10px;
-					border-top-left-radius: 16px;
-					border-bottom-left-radius: 16px;
-				}
-
-				&:last-child {
-					border-top-right-radius: 16px;
-					border-bottom-right-radius: 16px;
-				}
+				margin-top: -6px;
+				margin-left: -10px;
+				top: 0;
 			}
-
 			&-tooltip {
-				top: -24px;
-				left: 4px;
-				transform: translateX(-50%);
-				padding: 2px 4px;
+				top: -10px;
+				left: 50%;
+				transform: translateX(-50%) translateY(-100%);
+				padding: 4px 6px;
 			}
 		}
 	}
 
 	&-horizontal &-inner {
-		width: 100%;
-		left: -10px;
 		margin: 40px 12px 30px;
 		height: @multisliderInnerSize;
 	}
 
 	&-horizontal &-mark-label {
-		top: 17px;
+		top: 22px;
 		transform: translateX(-50%);
 	}
 
 	&-vertical {
 		height: 300px;
-		padding-top: 10px;
-		padding-bottom: 10px;
-
 		& .z-sliderbuttons {
 			&-area {
-				margin-top: -5px;
+				margin-top: -10px;
 				width: 100%;
 			}
-
 			&-button {
-				width: 16px;
-				height: 10px;
-				margin-left: -5px;
-
-				&:nth-child(2) {
-					margin-top: -10px;
-					border-top-left-radius: 16px;
-					border-top-right-radius: 16px;
-				}
-
-				&:last-child {
-					border-bottom-left-radius: 16px;
-					border-bottom-right-radius: 16px;
-				}
+				margin-top: -10px;
+				margin-left: -6px;
+				left: 0;
 			}
-
 			&-tooltip {
-				top: 3px;
-				left: 25px;
+				left: 26px;
+				top: 50%;
 				transform: translateY(-50%);
-				padding: 4px 2px;
+				padding: 6px 4px;
 			}
 		}
 	}
 
 	&-vertical &-inner {
 		height: 100%;
-		top: -10px;
-		margin: 12px 40px 12px 12px;
+		margin: 12px 30px 12px 12px;
 		width: @multisliderInnerSize;
 	}
 
 	&-vertical &-mark-label {
-		left: 20px;
+		left: 22px;
 		transform: translateY(-50%);
 	}
 
+
+	&:not(&-disabled) {
+		& .z-sliderbuttons-button:hover {
+			background-color: @multisliderButtonHoverColor;
+		}
+
+		& .z-sliderbuttons-button:hover .z-sliderbuttons-tooltip {
+			display: block;
+		}
+
+		& .z-sliderbuttons-button:active {
+			background-color: @multisliderButtonActiveColor;
+		}
+
+		& .z-sliderbuttons-button:focus {
+			border-color: @multisliderButtonFocusBorderColor;
+		}
+	}
+
 	&-disabled &-track {
 		background-color: @multisliderDisabledTrackColor;
 	}
@@ -188,7 +157,7 @@
 				background-color: @multisliderDisabledTooltipBackgroundColor;
 			}
 
-			&:nth-last-of-type(2n-4) .z-sliderbuttons-area {
+			&:nth-last-of-type(2n-2) .z-sliderbuttons-area {
 				background-color: @multisliderDisabledAreaColor2;
 			}
 		}

diff --git a/src/archive/web/zul/less/_zkvariables.less b/src/archive/web/zul/less/_zkvariables.less
@@ -380,7 +380,7 @@
 // rangeslider
 @rangesliderTrackColor: @sliderBackgroundColor;
 @rangesliderLabelColor: #000000;
-@rangesliderEmptyBackgroundColor: #FFF;
+@rangesliderEmptyBackgroundColor: @white;
 @rangesliderAreaColor: @blueLighter;
 @rangesliderButtonSize: 20px;
 @rangesliderButtonBorderWidth: 1px;
@@ -398,20 +398,21 @@
 @rangesliderDotBorderWidth: @rangesliderDotSize * 0.25;
 
 // multislider
-@multisliderTrackColor: #e4e4e4;
+@multisliderTrackColor: #d9d9d9;
+@multisliderEmptyBackgroundColor: @white;
 @multisliderAreaColor: @blueLighter;
 @multisliderAreaColor2: @blue;
+@multisliderButtonSize: 20px;
 @multisliderButtonBorderWidth: 1px;
 @multisliderButtonBorderColor: @grayDrak;
 @multisliderButtonHoverColor: @hoverBackground;
 @multisliderButtonActiveColor: @blueLight;
 @multisliderButtonFocusBorderColor: @blueModerate;
 @multisliderTooltipBackgroundColor: rgba(0, 0, 0, 0.8);
 @multisliderDisabledTooltipBackgroundColor: rgba(0, 0, 0, 0.5);
-@multisliderBorderRadius: 2px;
-@multisliderInnerSize: 6px;
+@multisliderInnerSize: 8px;
 @multisliderDisabledTrackColor: #f0f0f0;
-@multisliderDisabledAreaColor: Lighten(@multisliderAreaColor, 30%);
+@multisliderDisabledAreaColor: #bbcfdc;
 @multisliderDisabledAreaColor2: Lighten(@multisliderAreaColor2, 30%);
 @multisliderDisabledButtonColor: @gray;