•  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
더 보기

사용자:flyant(비교)

r1863 vs r1864
1
{{{#!wiki style="width:100%;height:20px;background:linear-gradient(90deg, light-dark(#fff, #f00), #000)0 0/10% 50%"
2
}}}
1
{{{#!if Subdivision = 10, DotSize = '5px', HandleSize = '20px', SliderSize = '10px'
2
}}}{{{#!style
3
.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)}
34
4
{{{#!wiki style="text-align:center"
5
v}}}
6
{{{#!if Subdivision = '2', DotSize = '5px', HandleSize = '20px', SliderSize = '10px'
7
}}}{{{#!if
8
}}}{{{#!wiki style="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)"
9
{{{#!wiki style="width:100%;height:100%;background:no-repeat radial-gradient(circle closest-side, #fffa 100%, transparent 0)0 0/@HandleSize@ @HandleSize@;background-position:50% 0"
5
.sd-handle {width:100%;height:100%;background:no-repeat radial-gradient(circle closest-side, #fffa 100%, transparent 0)0 0/@HandleSize@ @HandleSize@;background-position:50% 0}
6
7
.handle-hitbox {display:inline-block;width:calc(100% / (@Subdivision@ + 1));height:@HandleSize@;border:1px solid red}
8
9
.sd-hitbox-size-l {width:calc(90% / (@Subdivision@ + 1))}
10
.sd-hitbox-size-m {}
11
.sd-hitbox-size-s {}
12
13
.sd-bg {background:#a005}
14
.sd-hide {display:none}
15
}}}{{{#!wiki class="sd-slider"
16
{{{#!wiki class="sd-handle"
17
}}}}}}{{{#!wiki class="handle-hitbox h0 sd-hitbox-size-l sd-bg"
18
}}}{{{#!if Subdivision >= 1
19
{{{#!wiki class="handle-hitbox h01"
20
}}}}}}{{{#!if Subdivision >= 2
21
{{{#!wiki class="handle-hitbox h02"
22
}}}}}}{{{#!if Subdivision >= 3
23
{{{#!wiki class="handle-hitbox h03"
24
}}}}}}{{{#!if Subdivision >= 4
25
{{{#!wiki class="handle-hitbox h04"
26
}}}}}}{{{#!if Subdivision >= 5
27
{{{#!wiki class="handle-hitbox h05"
28
}}}}}}{{{#!if Subdivision >= 6
29
{{{#!wiki class="handle-hitbox h06"
30
}}}}}}{{{#!if Subdivision >= 7
31
{{{#!wiki class="handle-hitbox h07"
32
}}}}}}{{{#!if Subdivision >= 8
33
{{{#!wiki class="handle-hitbox h08"
34
}}}}}}{{{#!if Subdivision >= 9
35
{{{#!wiki class="handle-hitbox h09"
36
}}}}}}{{{#!if Subdivision >= 10
37
{{{#!wiki class="handle-hitbox h10"
1038
}}}}}}
1139
12
{{{#!style
13
.handle-hitbox {display:inline-block;width:calc(100% / (@Subdivision@ + 1));height:30px;border:1px solid red}
14
}}}
15
{{{#!wiki class="handle-hitbox h0"
16
}}}{{{#!wiki class="handle-hitbox h01"
17
}}}{{{#!wiki class="handle-hitbox h02"
18
}}}{{{#!wiki class="handle-hitbox h03"
19
}}}{{{#!wiki class="handle-hitbox h04"
20
}}}{{{#!wiki class="handle-hitbox h05"
21
}}}{{{#!wiki class="handle-hitbox h06"
22
}}}{{{#!wiki class="handle-hitbox h07"
23
}}}{{{#!wiki class="handle-hitbox h08"
24
}}}{{{#!wiki class="handle-hitbox h09"
25
}}}{{{#!wiki class="handle-hitbox h10"
26
}}}
2740
2841
2942
30
{{{#!wiki style="width:100%;height:10px;border-radius:50px;background:no-repeat radial-gradient(circle closest-side, gray 70%, transparent 0)0 0/10px 10px, no-repeat radial-gradient(circle closest-side, gray 70%, transparent 0)10% 0/10px 10px, no-repeat radial-gradient(circle closest-side, gray 70%, transparent 0)20% 0/10px 10px, no-repeat radial-gradient(circle closest-side, gray 70%, transparent 0)30% 0/10px 10px, no-repeat radial-gradient(circle closest-side, gray 70%, transparent 0)40% 0/10px 10px, no-repeat radial-gradient(circle closest-side, gray 70%, transparent 0)50% 0/10px 10px, no-repeat radial-gradient(circle closest-side, gray 70%, transparent 0)60% 0/10px 10px, no-repeat radial-gradient(circle closest-side, gray 70%, transparent 0)70% 0/10px 10px, no-repeat radial-gradient(circle closest-side, gray 70%, transparent 0)80% 0/10px 10px, no-repeat radial-gradient(circle closest-side, gray 70%, transparent 0)90% 0/10px 10px, no-repeat radial-gradient(circle closest-side, gray 70%, transparent 0)100% 0/10px 10px, linear-gradient(#fff, #fff)"
31
{{{#!wiki style="width:20px;height:20px;margin-top: -10px;border-radius:50%;background:#a00"
32
}}}}}}
3343
3444
3545
......