•  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
r1916 vs r1917
1
## light-dark(@@, @@)
21
{{{#!if SD_Subdivision = 10, SD_DotSize = '5px', SD_HandleSize = '20px', SD_SliderSize = '10px', SD_HandlePosition = 0, SD_Debug = 1
32
}}}{{{#!if SD_LineInnerDotsLightColor = '#fff', SD_LineInnerDotsDarkColor = '#000'
43
}}}{{{#!if SD_Debug == 1
5
{{{#!if SD_BgLightColor = '#00fa', SD_BgDarkColor = '#00fa', SD_LineInnerDotsDarkColor = '#0f0a', SD_LineInnerDotsDarkColor = '#0f0a', SD_LineVertexLightColor = '#fffa', SD_LineVertexDarkColor = '#fffa', SD_LineEdgeLightColor = '#a00a', SD_LineEdgeDarkColor = '#a00a'
4
{{{#!if SD_BgLightColor = '#00fa', SD_BgDarkColor = '#00fa', SD_LineInnerDotsDarkColor = '#0f0a', SD_LineInnerDotsDarkColor = '#0f0a', SD_LineInnerDotsMaskLightColor = '#f0fa', SD_LineInnerDotsMaskDarkColor = '#f0fa', SD_LineVertexLightColor = '#fffa', SD_LineVertexDarkColor = '#fffa', SD_LineEdgeLightColor = '#a00a', SD_LineEdgeDarkColor = '#a00a', SD_HandleLightColor ='#0ffa', SD_HandleDarkColor ='#0ffa', SD_HitBoxBorderColor = '#f00', SD_EdgeNextHitboxColor = '#0aa5', SD_EdgeHitboxColor = '#aa05', SD_ActiveHitBoxColor = '#0005', SD_ActiveNextHitBoxColor = '#fff5'
65
}}}}}}{{{#!if SD_Ct00 = 'sd-hide', SD_Ct01 = 'sd-hide', SD_Ct02 = 'sd-hide', SD_Ct03 = 'sd-hide', SD_Ct04 = 'sd-hide', SD_Ct05 = 'sd-hide', SD_Ct06 = 'sd-hide', SD_Ct07 = 'sd-hide', SD_Ct08 = 'sd-hide', SD_Ct09 = 'sd-hide', SD_Ct10 = 'sd-hide'
76
}}}{{{#!if SD_HandlePosition == 0
87
{{{#!if SD_Ct00 = 'sd-show0'
......
4948
}}}}}}{{{#!if SD_C = ['remove-class,sd-handle,sd-handle-position-00', 'remove-class,sd-handle,sd-handle-position-01', 'remove-class,sd-handle,sd-handle-position-02', 'remove-class,sd-handle,sd-handle-position-03', 'remove-class,sd-handle,sd-handle-position-04', 'remove-class,sd-handle,sd-handle-position-05', 'remove-class,sd-handle,sd-handle-position-06', 'remove-class,sd-handle,sd-handle-position-07', 'remove-class,sd-handle,sd-handle-position-08', 'remove-class,sd-handle,sd-handle-position-09', 'remove-class,sd-handle,sd-handle-position-10', 'remove-class,sd00,sd-active-hitbox']
5049
}}}{{{#!if SD_RC00 = SD_C[0], SD_RC01 = SD_C[1], SD_RC02 = SD_C[2], SD_RC03 = SD_C[3], SD_RC04 = SD_C[4], SD_RC05 = SD_C[5], SD_RC06 = SD_C[6], SD_RC07 = SD_C[7], SD_RC08 = SD_C[8], SD_RC09 = SD_C[9], SD_RC10 = SD_C[10]
5150
}}}{{{#!style
52
.sd-slider {width:100%;height:@SD_HandleSize@;background:linear-gradient(90deg, #f0f5 calc((@SD_HandleSize@ / 2) - (@SD_SliderSize@ / 2)), transparent 0, transparent calc(100% - ((@SD_HandleSize@ / 2) - (@SD_SliderSize@ / 2))), #f0f5 0), radial-gradient(circle closest-side at calc(@SD_DotSize@ / 2) 50%, light-dark(@SD_LineInnerDotsLightColor@, @SD_LineInnerDotsDarkColor@) calc(@SD_DotSize@ / 2), transparent 0)calc((@SD_HandleSize@ / 2) - (@SD_DotSize@ / 2)) 50%/calc((100% / @SD_Subdivision@) - ((@SD_HandleSize@ / 2) / (@SD_Subdivision@ / 2))) 100%, no-repeat linear-gradient(light-dark(@SD_LineEdgeLightColor@, @SD_LineEdgeDarkColor@), light-dark(@SD_LineEdgeLightColor@, @SD_LineEdgeDarkColor@))50% 50%/calc(100% - @SD_HandleSize@) @SD_SliderSize@, no-repeat radial-gradient(circle closest-side, light-dark(@SD_LineVertexLightColor@, @SD_LineVertexDarkColor@) 100%, transparent 0)calc((@SD_HandleSize@ / 2) - (@SD_SliderSize@ / 2)) 50%/@SD_SliderSize@ @SD_SliderSize@, no-repeat radial-gradient(circle closest-side, #fff 100%, transparent 0)calc(100% - ((@SD_HandleSize@ / 2) - (@SD_SliderSize@ / 2))) 50%/@SD_SliderSize@ @SD_SliderSize@, linear-gradient(light-dark(@SD_BgLightColor@, @SD_BgDarkColor@), light-dark(@SD_BgLightColor@, @SD_BgDarkColor@))}
51
.sd-slider {width:100%;height:@SD_HandleSize@;background:linear-gradient(90deg, light-dark(@SD_LineInnerDotsMaskLightColor@, @SD_LineInnerDotsMaskDarkColor@) calc((@SD_HandleSize@ / 2) - (@SD_SliderSize@ / 2)), transparent 0, transparent calc(100% - ((@SD_HandleSize@ / 2) - (@SD_SliderSize@ / 2))), light-dark(@SD_LineInnerDotsMaskLightColor@, @SD_LineInnerDotsMaskDarkColor@) 0), radial-gradient(circle closest-side at calc(@SD_DotSize@ / 2) 50%, light-dark(@SD_LineInnerDotsLightColor@, @SD_LineInnerDotsDarkColor@) calc(@SD_DotSize@ / 2), transparent 0)calc((@SD_HandleSize@ / 2) - (@SD_DotSize@ / 2)) 50%/calc((100% / @SD_Subdivision@) - ((@SD_HandleSize@ / 2) / (@SD_Subdivision@ / 2))) 100%, no-repeat linear-gradient(light-dark(@SD_LineEdgeLightColor@, @SD_LineEdgeDarkColor@), light-dark(@SD_LineEdgeLightColor@, @SD_LineEdgeDarkColor@))50% 50%/calc(100% - @SD_HandleSize@) @SD_SliderSize@, no-repeat radial-gradient(circle closest-side, light-dark(@SD_LineVertexLightColor@, @SD_LineVertexDarkColor@) 100%, transparent 0)calc((@SD_HandleSize@ / 2) - (@SD_SliderSize@ / 2)) 50%/@SD_SliderSize@ @SD_SliderSize@, no-repeat radial-gradient(circle closest-side, light-dark(@SD_LineVertexLightColor@, @SD_LineVertexDarkColor@) 100%, transparent 0)calc(100% - ((@SD_HandleSize@ / 2) - (@SD_SliderSize@ / 2))) 50%/@SD_SliderSize@ @SD_SliderSize@, linear-gradient(light-dark(@SD_BgLightColor@, @SD_BgDarkColor@), light-dark(@SD_BgLightColor@, @SD_BgDarkColor@))}
5352
54
.sd-handle {width:100%;height:100%;background:no-repeat radial-gradient(circle closest-side, #fffa 100%, transparent 0)0 0/@SD_HandleSize@ @SD_HandleSize@;background-position:calc((100% / @SD_Subdivision@) * @SD_HandlePosition@) 0}
53
.sd-handle {width:100%;height:100%;background:no-repeat radial-gradient(circle closest-side, light-dark(@SD_HandleLightColor@, @SD_HandleDarkColor@) 100%, transparent 0)0 0/@SD_HandleSize@ @SD_HandleSize@;background-position:calc((100% / @SD_Subdivision@) * @SD_HandlePosition@) 0}
5554
5655
.sd-handle-position-00 {background-position:calc((100% / @SD_Subdivision@) * 0) 0}
5756
.sd-handle-position-01 {background-position:calc((100% / @SD_Subdivision@) * 1) 0}
......
6564
.sd-handle-position-09 {background-position:calc((100% / @SD_Subdivision@) * 9) 0}
6665
.sd-handle-position-10 {background-position:calc((100% / @SD_Subdivision@) * 10) 0}
6766
68
.sd-hitbox {width:100%;height:100%;border:1px solid red;cursor:pointer}
69
.sd-edge-next-hitbox {width:70%;background:#0aa5}
70
.sd-edge-hitbox {width:80%;background:#aa05}
67
.sd-hitbox {width:100%;height:100%;border:1px solid @SD_HitBoxBorderColor@;cursor:pointer}
68
.sd-edge-next-hitbox {width:70%;background:@SD_EdgeNextHitboxColor@}
69
.sd-edge-hitbox {width:80%;background:@SD_EdgeHitboxColor@}
7170
.sd-center-hitbox {width:100%}
72
.sd-active-hitbox {width:60%;background:#0005}
73
.sd-active-next-hitbox {width:100%;background:#fff5}
71
.sd-active-hitbox {width:60%;background:@SD_ActiveHitBoxColor@}
72
.sd-active-next-hitbox {width:100%;background:@SD_ActiveNextHitBoxColor@}
7473
7574
.sd-hide {display:none}
7675
.sd-show0 {display:block}
......
101100
}}}}}}{{{#!if SD_Subdivision >= 10
102101
{{{#!wiki class="sd-hitbox sd10 sd-edge-hitbox @SD_HitBox10@" onclick="add-class,sd-handle,sd-handle-position-10;@SD_RC00@;@SD_RC01@;@SD_RC02@;@SD_RC03@;@SD_RC04@;@SD_RC05@;@SD_RC06@;@SD_RC07@;@SD_RC08@;@SD_RC09@;remove-class,sd-hitbox,sd-active-hitbox;add-class,sd10,sd-active-hitbox;remove-class,sd-hitbox,sd-active-next-hitbox;add-class,sd09,sd-active-next-hitbox;add-class,sd-ct,sd-hide;remove-class,sd-ct10,sd-hide;remove-class,sd-ct,sd-show0"
103102
}}}}}}}}}}}}}}}
104
105103
{{{#!wiki class="sd-ct sd-ct00 sd-hide @SD_Ct00@"
106104
|| 00 ||}}}{{{#!wiki class="sd-ct sd-ct01 sd-hide @SD_Ct01@"
107105
|| 01 ||}}}{{{#!wiki class="sd-ct sd-ct02 sd-hide @SD_Ct02@"
......