| r1872 vs r1873 | ||
|---|---|---|
| 1 | 1 | |
| 2 | {{{#!if Subdivision = | |
| 2 | {{{#!if Subdivision = 5, DotSize = '5px', HandleSize = '20px', SliderSize = '10px', SD_HandlePosition = 2 | |
| 3 | 3 | }}}{{{#!if Subdivision == 1 |
| 4 | 4 | {{{#!if SD_HitBox01 = 'sd-edge-hitbox' |
| 5 | 5 | }}}}}}{{{#!if Subdivision == 2 |
| ... | ... | |
| 23 | 23 | }}}}}}{{{#!style |
| 24 | 24 | .sd-slider {width:100%;height:@HandleSize@;background:linear-gradient(90deg, #f0f5 calc((@HandleSize@ / 2) - (@SliderSize@ / 2)), transparent 0, transparent calc(100% - ((@HandleSize@ / 2) - (@SliderSize@ / 2))), #f0f5 0), radial-gradient(circle closest-side at calc(@DotSize@ / 2) 50%, #0f0a calc(@DotSize@ / 2), transparent 0)calc((@HandleSize@ / 2) - (@DotSize@ / 2)) 50%/calc((100% / @Subdivision@) - ((@HandleSize@ / 2) / (@Subdivision@ / 2))) 100%, no-repeat linear-gradient(#a00a, #a00a)50% 50%/calc(100% - @HandleSize@) @SliderSize@, no-repeat radial-gradient(circle closest-side, #fff 100%, transparent 0)calc((@HandleSize@ / 2) - (@SliderSize@ / 2)) 50%/@SliderSize@ @SliderSize@, no-repeat radial-gradient(circle closest-side, #fff 100%, transparent 0)calc(100% - ((@HandleSize@ / 2) - (@SliderSize@ / 2))) 50%/@SliderSize@ @SliderSize@, linear-gradient(#00a, #00a)} |
| 25 | 25 | |
| 26 | .sd-handle {width:100%;height:100%;background:no-repeat radial-gradient(circle closest-side, #fffa 100%, transparent 0)0 0/@HandleSize@ @HandleSize@;background-position: | |
| 26 | .sd-handle {width:100%;height:100%;background:no-repeat radial-gradient(circle closest-side, #fffa 100%, transparent 0)0 0/@HandleSize@ @HandleSize@;background-position:0 0} | |
| 27 | 27 | |
| 28 | 28 | |
| 29 | 29 | .sd-hitbox {width:100%;height:100%;border:1px solid red} |
| 30 | 30 | |
| 31 | .sd-handle-position-0 {background-position:calc((100% / @Subdivision@) * 0) 0} | |
| 32 | .sd-handle-position-1 {background-position:calc((100% / @Subdivision@) * 1) 0} | |
| 33 | .sd-handle-position-2 {background-position:calc((100% / @Subdivision@) * 2) 0} | |
| 34 | .sd-handle-position-3 {background-position:calc((100% / @Subdivision@) * 3) 0} | |
| 35 | .sd-handle-position-4 {background-position:calc((100% / @Subdivision@) * 4) 0} | |
| 36 | .sd-handle-position-5 {background-position:calc((100% / @Subdivision@) * 5) 0} | |
| 37 | .sd-handle-position-6 {background-position:calc((100% / @Subdivision@) * 6) 0} | |
| 38 | .sd-handle-position-7 {background-position:calc((100% / @Subdivision@) * 7) 0} | |
| 39 | .sd-handle-position-8 {background-position:calc((100% / @Subdivision@) * 8) 0} | |
| 40 | .sd-handle-position-9 {background-position:calc((100% / @Subdivision@) * 9) 0} | |
| 41 | .sd-handle-position-10 {background-position:calc((100% / @Subdivision@) * 10) 0} | |
| 31 | 42 | |
| 32 | 43 | .sd-edge-next-hitbox {width:70%;background:#0aa5} |
| 33 | 44 | .sd-active-hitbox {width:60%;background:#0005} |
| ... | ... | |
| 60 | 71 | }}}}}}{{{#!if Subdivision >= 9 |
| 61 | 72 | {{{#!wiki class="sd-hitbox h09 @SD_HitBox09@" |
| 62 | 73 | }}}}}}{{{#!if Subdivision >= 10 |
| 63 | {{{#!wiki class="sd-hitbox h10 sd-edge-hitbox @SD_HitBox10@" | |
| 74 | {{{#!wiki class="sd-hitbox h10 sd-edge-hitbox @SD_HitBox10@" onclick="add-class,sd-handle,@HandlePosition@" | |
| 64 | 75 | }}}}}}}}} |
| 65 | 76 | }}}}}} |
| 66 | 77 | |
| ... | ... |