| r1916 vs r1917 | ||
|---|---|---|
| 1 | ## light-dark(@@, @@) | |
| 2 | 1 | {{{#!if SD_Subdivision = 10, SD_DotSize = '5px', SD_HandleSize = '20px', SD_SliderSize = '10px', SD_HandlePosition = 0, SD_Debug = 1 |
| 3 | 2 | }}}{{{#!if SD_LineInnerDotsLightColor = '#fff', SD_LineInnerDotsDarkColor = '#000' |
| 4 | 3 | }}}{{{#!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' | |
| 6 | 5 | }}}}}}{{{#!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' |
| 7 | 6 | }}}{{{#!if SD_HandlePosition == 0 |
| 8 | 7 | {{{#!if SD_Ct00 = 'sd-show0' |
| ... | ... | |
| 49 | 48 | }}}}}}{{{#!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'] |
| 50 | 49 | }}}{{{#!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] |
| 51 | 50 | }}}{{{#!style |
| 52 | .sd-slider {width:100%;height:@SD_HandleSize@;background:linear-gradient(90deg, | |
| 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@))} | |
| 53 | 52 | |
| 54 | .sd-handle {width:100%;height:100%;background:no-repeat radial-gradient(circle closest-side, | |
| 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} | |
| 55 | 54 | |
| 56 | 55 | .sd-handle-position-00 {background-position:calc((100% / @SD_Subdivision@) * 0) 0} |
| 57 | 56 | .sd-handle-position-01 {background-position:calc((100% / @SD_Subdivision@) * 1) 0} |
| ... | ... | |
| 65 | 64 | .sd-handle-position-09 {background-position:calc((100% / @SD_Subdivision@) * 9) 0} |
| 66 | 65 | .sd-handle-position-10 {background-position:calc((100% / @SD_Subdivision@) * 10) 0} |
| 67 | 66 | |
| 68 | .sd-hitbox {width:100%;height:100%;border:1px solid | |
| 69 | .sd-edge-next-hitbox {width:70%;background: | |
| 70 | .sd-edge-hitbox {width:80%;background: | |
| 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@} | |
| 71 | 70 | .sd-center-hitbox {width:100%} |
| 72 | .sd-active-hitbox {width:60%;background: | |
| 73 | .sd-active-next-hitbox {width:100%;background: | |
| 71 | .sd-active-hitbox {width:60%;background:@SD_ActiveHitBoxColor@} | |
| 72 | .sd-active-next-hitbox {width:100%;background:@SD_ActiveNextHitBoxColor@} | |
| 74 | 73 | |
| 75 | 74 | .sd-hide {display:none} |
| 76 | 75 | .sd-show0 {display:block} |
| ... | ... | |
| 101 | 100 | }}}}}}{{{#!if SD_Subdivision >= 10 |
| 102 | 101 | {{{#!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" |
| 103 | 102 | }}}}}}}}}}}}}}} |
| 104 | ||
| 105 | 103 | {{{#!wiki class="sd-ct sd-ct00 sd-hide @SD_Ct00@" |
| 106 | 104 | || 00 ||}}}{{{#!wiki class="sd-ct sd-ct01 sd-hide @SD_Ct01@" |
| 107 | 105 | || 01 ||}}}{{{#!wiki class="sd-ct sd-ct02 sd-hide @SD_Ct02@" |
| ... | ... |