| r1773 vs r1774 | ||
|---|---|---|
| 1 | {{{#!if ButtonSize = '50px', ButtonBdLightColor = '#ddd', ButtonBgLightColor = '#fff', ButtonArrowLightColor = '#212529', ButtonBgLightHoverColor ='#f5f5f5', ButtonBdLightActiveColor = '#0263b8', ButtonBgLightActiveColor = '#0275d8', ButtonArrowLightActiveColor = '#fff', ButtonShadowColor = '#0005' | |
| 2 | }}}{{{#!if ButtonBdDarkColor = '#383b40', ButtonBgDarkColor = '#1c1d1f', ButtonArrowDarkColor = '#e0e0e0', ButtonBgDarkHoverColor ='#2d2f34', ButtonBdDarkActiveColor = '#bd7f14', ButtonBgDarkActiveColor = '#ec9f19', ButtonArrowDarkActiveColor = '#212529' | |
| 3 | }}} | |
| 1 | 4 | {{{#!style |
| 2 | .g-test {width:50px;height:50px;border-radius:50%;background:radial-gradient(transparent, red)} | |
| 5 | .bb-button-r {width:@ButtonSize@;height:@ButtonSize@;border-radius:50%;border:1px solid @ButtonBdLightColor@;box-shadow:3px 3px 10px @ButtonShadowColor@;background:conic-gradient(from 45deg at 10% 50%, transparent 90deg, @ButtonBgLightColor@ 0), conic-gradient(from 225deg at 62% 50%, @ButtonBgLightColor@ 90deg, transparent 0), conic-gradient(from 225deg at 73% 50%, @ButtonArrowLightColor@ 90deg, @ButtonBgLightColor@ 0)} | |
| 3 | 6 | |
| 4 | .gg-test {width:50px;height:50px;border-radius:50%;background:linear-gradient(#00f, transparent)} | |
| 7 | .bb-button-r:hover {background:conic-gradient(from 45deg at 10% 50%, transparent 90deg, @ButtonBgLightHoverColor@ 0), conic-gradient(from 225deg at 62% 50%, @ButtonBgLightHoverColor@ 90deg, transparent 0), conic-gradient(from 225deg at 73% 50%, @ButtonArrowLightColor@ 90deg, @ButtonBgLightHoverColor@ 0)} | |
| 5 | 8 | |
| 6 | }}} | |
| 9 | .bb-button-r:active {border:1px solid @ButtonBdLightActiveColor@;background:conic-gradient(from 45deg at 10% 50%, transparent 90deg, @ButtonBgLightActiveColor@ 0), conic-gradient(from 225deg at 62% 50%, @ButtonBgLightActiveColor@ 90deg, transparent 0), conic-gradient(from 225deg at 73% 50%, @ButtonArrowLightActiveColor@ 90deg, @ButtonBgLightActiveColor@ 0)} | |
| 7 | 10 | |
| 8 | 11 | |
| 9 | {{{#!wiki class="g-test" | |
| 10 | {{{#!wiki class="gg-test" | |
| 11 | }}}}}} | |
| 12 | 12 | |
| 13 | {{{#!wiki style="width:50px;height:50px;border-radius:50%;border:1px solid #f00;background:linear-gradient(#00f, transparent), radial-gradient(#f00, transparent)" | |
| 14 | }}} | |
| 15 | 13 | |
| 16 | ||
| 17 | ||
| 18 | ||
| 19 | {{{#!style | |
| 20 | .bb-button {width:50px;height:50px;border-radius:50%;border:1px solid #ddd;box-shadow:3px 3px 10px #0005;background:conic-gradient(from 45deg at 10% 50%, transparent 90deg, #fff 0), conic-gradient(from 225deg at 62% 50%, #fff 90deg, transparent 0), conic-gradient(from 225deg at 73% 50%, #212529 90deg, #fff 0)} | |
| 21 | ||
| 22 | .bb-button:hover {background:conic-gradient(from 45deg at 10% 50%, transparent 90deg, #f5f5f5 0), conic-gradient(from 225deg at 62% 50%, #f5f5f5 90deg, transparent 0), conic-gradient(from 225deg at 73% 50%, #212529 90deg, #f5f5f5 0)} | |
| 23 | ||
| 24 | .bb-button:active {border:1px solid #0263b8;background:conic-gradient(from 45deg at 10% 50%, transparent 90deg, #0275d8 0), conic-gradient(from 225deg at 62% 50%, #0275d8 90deg, transparent 0), conic-gradient(from 225deg at 73% 50%, #fff 90deg, #0275d8 0)} | |
| 25 | ||
| 26 | 14 | @theseed-dark-mode { |
| 27 | .bb-button {border:1px solid | |
| 15 | .bb-button-r {border:1px solid @ButtonBdDarkColor@;background:conic-gradient(from 45deg at 10% 50%, transparent 90deg, @ButtonBgDarkColor@ 0), conic-gradient(from 225deg at 62% 50%, @ButtonBgDarkColor@ 90deg, transparent 0), conic-gradient(from 225deg at 73% 50%, @ButtonArrowDarkColor@ 90deg, @ButtonBgDarkColor@ 0)} | |
| 28 | 16 | |
| 29 | .bb-button:hover {background:conic-gradient(from 45deg at 10% 50%, transparent 90deg, | |
| 17 | .bb-button-r:hover {background:conic-gradient(from 45deg at 10% 50%, transparent 90deg, @ButtonBgDarkHoverColor@ 0), conic-gradient(from 225deg at 62% 50%, @ButtonBgDarkHoverColor@ 90deg, transparent 0), conic-gradient(from 225deg at 73% 50%, @ButtonArrowDarkColor@ 90deg, @ButtonBgDarkHoverColor@ 0)} | |
| 30 | 18 | |
| 31 | .bb-button:active {border:1px solid | |
| 19 | .bb-button-r:active {border:1px solid @ButtonBdDarkActiveColor@;background:conic-gradient(from 45deg at 10% 50%, transparent 90deg, @ButtonBgDarkActiveColor@ 0), conic-gradient(from 225deg at 62% 50%,@ButtonBgDarkActiveColor@ 90deg, transparent 0), conic-gradient(from 225deg at 73% 50%, @ButtonArrowDarkActiveColor@ 90deg, @ButtonBgDarkActiveColor@ 0)} | |
| 32 | 20 | |
| 33 | 21 | .bb-hide {display:none} |
| 34 | 22 | } |
| ... | ... | |
| 36 | 24 | |
| 37 | 25 | }}} |
| 38 | 26 | |
| 39 | {{{#!wiki class="bb-button" onclick="add-class,bb-img02,bb-hide;remove-class,bb-img01,bb-hide" | |
| 27 | {{{#!wiki class="bb-button-l" onclick="add-class,bb-img02,bb-hide;remove-class,bb-img01,bb-hide" | |
| 40 | 28 | }}} |
| 41 | 29 | |
| 42 | 30 | {{{#!wiki class="bb-img01" |
| 43 | 31 | || ㅇㅇ ||}}}{{{#!wiki class="bb-img02 bb-hide" |
| 44 | 32 | || ㅅㅅ ||}}} |
| 45 | 33 | |
| 46 | {{{#!wiki class="bb-button" onclick="add-class,bb-img01,bb-hide;remove-class,bb-img02,bb-hide" | |
| 34 | {{{#!wiki class="bb-button-r" onclick="add-class,bb-img01,bb-hide;remove-class,bb-img02,bb-hide" | |
| 47 | 35 | }}} |
| 48 | 36 | |
| 49 | 37 | |
| ... | ... |