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

사용자:flyant(비교)

r1680 vs r1681
1
{{{#!if ToggleSize = '100px', TabletBgColor = '#2d2f34', TabletSideColor = '#222', ToggleOnColor = 'green', ToggleOnTopColor = 'lightgreen', ToggleOffColor = 'darkgreen', ToggleOffTopColor = 'green'
1
{{{#!if ToggleSize = '50px', TabletBgColor = '#2d2f34', TabletSideColor = '#222', ToggleOnColor = 'green', ToggleOnTopColor = 'lightgreen', ToggleOffColor = 'darkgreen', ToggleOffTopColor = 'green'
22
}}}{{{#!style
3
.fcg-tablet {display:inline-block;width:clamp(300px, 500px, 100%);height:200px;border-radius:10px;border:1px solid white;box-shadow:0px 10px white;background:#2d2f34}
4
.fcg-on {width:50px;height:50px;background:red}
5
.fcg-off {width:50px;height:50px;background:blue}
3
.fcg-tablet {display:flex;border-radius:10px;box-shadow:0 30px @TabletSideColor@;background:@TabletBgColor@;font-size:40px;font-weight:Bold}
4
5
.fcg-text-align {display:inline-block;width:200px;vertical-align:middle;border:1px solid red}
6
7
.fcg-on {display:inline-block;vertical-align:middle;width:@ToggleSize@;height:@ToggleSize@;background:no-repeat radial-gradient(circle closest-corner at 100% 50%, transparent 100%, @TabletBgColor@ 0)-50% 50%/50% 50%, no-repeat radial-gradient(circle farthest-side at 0 0, transparent 100%, @TabletBgColor@ 0)100% 66.66%/25% 25%, no-repeat radial-gradient(circle closest-side, @ToggleOnTopColor@ 100%, transparent 0)100% 0%/50% 50%, no-repeat linear-gradient(@ToggleOnColor@, @ToggleOnColor@)100% 40%/50% 33.33%, linear-gradient(@TabletBgColor@, 25%, @TabletSideColor@ 0,@TabletSideColor@ 32.6%, transparent 0, transparent 75%, @TabletBgColor@ 0), no-repeat radial-gradient(circle closest-side, @ToggleOnColor@ 100%, transparent 0)100% 65%/50% 50%, no-repeat radial-gradient(circle closest-corner at 100% 50%, transparent 100%, @TabletSideColor@ 0)-50% 65%/50% 50%, linear-gradient(@ToggleOffColor@, @ToggleOffColor@);cursor:pointer}
8
9
.fcg-off {display:inline-block;vertical-align:middle;width:@ToggleSize@;height:@ToggleSize@;background:no-repeat radial-gradient(circle closest-corner at 0% 50%, transparent 100%, @TabletBgColor@ 0)150% 50%/50% 50%, no-repeat radial-gradient(circle farthest-side at 100% 0, transparent 100%, @TabletBgColor@ 0)0% 66.66%/25% 25%, no-repeat radial-gradient(circle closest-side, @ToggleOffTopColor@ 100%, transparent 0)0% 0%/50% 50%, no-repeat linear-gradient(@ToggleOffColor@, @ToggleOffColor@)0% 40%/50% 33.33%, linear-gradient(@TabletBgColor@, 25%, @TabletSideColor@ 0,@TabletSideColor@ 32.6%, transparent 0, transparent 75%, @TabletBgColor@ 0), no-repeat radial-gradient(circle closest-side, @ToggleOffColor@ 100%, transparent 0)0% 65%/50% 50%, no-repeat radial-gradient(circle closest-corner at 0% 50%, transparent 100%, @TabletSideColor@ 0)150% 65%/50% 50%;cursor:pointer}
10
611
.fcg-hide {display:none}
712
}}}
813
14
15
16
{{{#!wiki class="fcg-tablet"
17
{{{#!wiki style="display:inline-block;background:gray;margin:auto"
18
{{{#!wiki class="fcg-text-align"
19
FAST}}}{{{#!wiki class="fcg-f fcg-f-off fcg-off fcg-hide" onclick="toggle-class,fcg-f,fcg-hide;toggle-class,fcg-c,fcg-hide"
20
}}}{{{#!wiki class="fcg-f fcg-f-on fcg-on" onclick="toggle-class,fcg-f,fcg-hide;remove-class,fcg-c-on,fcg-hide;add-class,fcg-c-off,fcg-hide;remove-class,fcg-g-on,fcg-hide;add-class,fcg-g-off,fcg-hide"
21
}}}
22
{{{#!wiki class="fcg-text-align"
23
CHEAP}}}{{{#!wiki class="fcg-c fcg-c-off fcg-off" onclick="toggle-class,fcg-c,fcg-hide;toggle-class,fcg-f,fcg-hide"
24
}}}{{{#!wiki class="fcg-c fcg-c-on fcg-on fcg-hide" onclick="toggle-class,fcg-c,fcg-hide;remove-class,fcg-f-on,fcg-hide;add-class,fcg-f-off,fcg-hide;remove-class,fcg-g-on,fcg-hide;add-class,fcg-g-off,fcg-hide"
25
}}}
26
{{{#!wiki class="fcg-text-align"
27
GOOD}}}{{{#!wiki class="fcg-g fcg-g-off fcg-off fcg-hide" onclick="toggle-class,fcg-g,fcg-hide;toggle-class,fcg-c,fcg-hide"
28
}}}{{{#!wiki class="fcg-g fcg-g-on fcg-on" onclick="toggle-class,fcg-g,fcg-hide;remove-class,fcg-f-on,fcg-hide;add-class,fcg-f-off,fcg-hide;remove-class,fcg-c-on,fcg-hide;add-class,fcg-c-off,fcg-hide"
29
}}}
30
}}}}}}
31
32
33
34
35
36
37
38
39
40
41
942
{{{#!wiki style="width:@ToggleSize@;height:@ToggleSize@;background:no-repeat radial-gradient(circle closest-corner at 0% 50%, transparent 100%, @TabletBgColor@ 0)150% 50%/50% 50%, no-repeat radial-gradient(circle farthest-side at 100% 0, transparent 100%, @TabletBgColor@ 0)0% 66.66%/25% 25%, no-repeat radial-gradient(circle closest-side, @ToggleOffTopColor@ 100%, transparent 0)0% 0%/50% 50%, no-repeat linear-gradient(@ToggleOffColor@, @ToggleOffColor@)0% 40%/50% 33.33%, linear-gradient(@TabletBgColor@, 25%, @TabletSideColor@ 0,@TabletSideColor@ 32.6%, transparent 0, transparent 75%, @TabletBgColor@ 0), no-repeat radial-gradient(circle closest-side, @ToggleOffColor@ 100%, transparent 0)0% 65%/50% 50%, no-repeat radial-gradient(circle closest-corner at 0% 50%, transparent 100%, @TabletSideColor@ 0)150% 65%/50% 50%"
1043
}}}
1144
......
3467
{{{#!wiki style="width:50%;height:calc(100% + 40px);background:radial-gradient(circle closest-side, #fff 100%, transparent 0)"
3568
}}}}}}}}}
3669
37
{{{#!wiki class="fcg-tablet"
38
}}}
3970
40
41
FAST
42
{{{#!wiki class="fcg-f fcg-f-off fcg-off fcg-hide" onclick="toggle-class,fcg-f,fcg-hide;toggle-class,fcg-c,fcg-hide"
43
}}}{{{#!wiki class="fcg-f fcg-f-on fcg-on" onclick="toggle-class,fcg-f,fcg-hide;remove-class,fcg-c-on,fcg-hide;add-class,fcg-c-off,fcg-hide;remove-class,fcg-g-on,fcg-hide;add-class,fcg-g-off,fcg-hide"
44
}}}
45
CHEAP
46
{{{#!wiki class="fcg-c fcg-c-off fcg-off" onclick="toggle-class,fcg-c,fcg-hide;toggle-class,fcg-f,fcg-hide"
47
}}}{{{#!wiki class="fcg-c fcg-c-on fcg-on fcg-hide" onclick="toggle-class,fcg-c,fcg-hide;remove-class,fcg-f-on,fcg-hide;add-class,fcg-f-off,fcg-hide;remove-class,fcg-g-on,fcg-hide;add-class,fcg-g-off,fcg-hide"
48
}}}
49
GOOD
50
{{{#!wiki class="fcg-g fcg-g-off fcg-off fcg-hide" onclick="toggle-class,fcg-g,fcg-hide;toggle-class,fcg-c,fcg-hide"
51
}}}{{{#!wiki class="fcg-g fcg-g-on fcg-on" onclick="toggle-class,fcg-g,fcg-hide;remove-class,fcg-f-on,fcg-hide;add-class,fcg-f-off,fcg-hide;remove-class,fcg-c-on,fcg-hide;add-class,fcg-c-off,fcg-hide"
52
}}}
5371
5472
5573
......