| r1784 vs r1785 | ||
|---|---|---|
| 1 | 1 | {{{#!if ButtonSize = '40px', ButtonBdLightColor = '#ddd', ButtonBgLightColor = '#fff', ButtonArrowLightColor = '#212529', ButtonBgLightHoverColor ='#f5f5f5', ButtonBdLightActiveColor = '#0263b8', ButtonBgLightActiveColor = '#0275d8', ButtonArrowLightActiveColor = '#fff', ButtonShadowColor = '#0005' |
| 2 | 2 | }}}{{{#!if ButtonBdDarkColor = '#383b40', ButtonBgDarkColor = '#1c1d1f', ButtonArrowDarkColor = '#e0e0e0', ButtonBgDarkHoverColor ='#2d2f34', ButtonBdDarkActiveColor = '#bd7f14', ButtonBgDarkActiveColor = '#ec9f19', ButtonArrowDarkActiveColor = '#212529' |
| 3 | }}}{{{#!if DotsWidth = '50px' | |
| 3 | 4 | }}}{{{#!style |
| 4 | 5 | .bb-button-r {display:inline-block;vertical-align:middle;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)} |
| 5 | 6 | |
| ... | ... | |
| 13 | 14 | |
| 14 | 15 | .bb-button-l:active {border:1px solid @ButtonBdLightActiveColor@;background:conic-gradient(from 225deg at 90% 50%, transparent 90deg, @ButtonBgLightActiveColor@ 0), conic-gradient(from 45deg at 38% 50%, @ButtonBgLightActiveColor@ 90deg, transparent 0), conic-gradient(from 45deg at 27% 50%, @ButtonArrowLightActiveColor@ 90deg, @ButtonBgLightActiveColor@ 0)} |
| 15 | 16 | |
| 16 | .bb-dots {width: | |
| 17 | .bb-dots-r {width:@DotsWidth@;height:calc(@DotsWidth@ / 2);border-radius:@DotsWidth@;border:1px solid @ButtonBdLightColor@;background:radial-gradient(circle closest-side at 75% 50%, @ButtonArrowLightColor@ 65%, transparent 0), radial-gradient(circle closest-side at 25% 50%, @ButtonBdLightColor@ 45%, #fff 0)} | |
| 17 | 18 | |
| 19 | .bb-dots-l {width:@DotsWidth@;height:calc(@DotsWidth@ / 2);border-radius:@DotsWidth@;border:1px solid @ButtonBdLightColor@;background:radial-gradient(circle closest-side at 25% 50%, @ButtonArrowLightColor@ 65%, transparent 0), radial-gradient(circle closest-side at 75% 50%, @ButtonBdLightColor@ 45%, #fff 0)} | |
| 20 | ||
| 18 | 21 | @theseed-dark-mode { |
| 19 | 22 | .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)} |
| 20 | 23 | |
| ... | ... | |
| 27 | 30 | .bb-button-l:hover {background:conic-gradient(from 225deg at 90% 50%, transparent 90deg, @ButtonBgDarkHoverColor@ 0), conic-gradient(from 45deg at 38% 50%, @ButtonBgDarkHoverColor@ 90deg, transparent 0), conic-gradient(from 45deg at 27% 50%, @ButtonArrowDarkColor@ 90deg, @ButtonBgDarkHoverColor@ 0)} |
| 28 | 31 | |
| 29 | 32 | .bb-button-l:active {border:1px solid @ButtonBdDarkActiveColor@;background:conic-gradient(from 225deg at 90% 50%, transparent 90deg, @ButtonBgDarkActiveColor@ 0), conic-gradient(from 45deg at 38% 50%, @ButtonBgDarkActiveColor@ 90deg, transparent 0), conic-gradient(from 45deg at 27% 50%, @ButtonArrowDarkActiveColor@ 90deg, @ButtonBgDarkActiveColor@ 0)} |
| 33 | ||
| 34 | .bb-dots-r {border:1px solid @ButtonBdDarkColor@;background:radial-gradient(circle closest-side at 75% 50%, @ButtonArrowDarkColor@ 65%, transparent 0), radial-gradient(circle closest-side at 25% 50%, @ButtonBdDarkColor@ 45%, @ButtonBgDarkColor@ 0)} | |
| 35 | ||
| 36 | .bb-dots-l {border:1px solid @ButtonBdDarkColor@;background:radial-gradient(circle closest-side at 25% 50%, @ButtonArrowDarkColor@ 65%, transparent 0), radial-gradient(circle closest-side at 75% 50%, @ButtonBdDarkColor@ 45%, @ButtonBgDarkColor@ 0)} | |
| 30 | 37 | } |
| 38 | ||
| 31 | 39 | .bb-hide {display:none} |
| 40 | }}} | |
| 32 | 41 | |
| 42 | {{{#!wiki class="bb-dots-r" | |
| 33 | 43 | }}} |
| 34 | ||
| 35 | {{{#!wiki class="bb-dots" | |
| 44 | {{{#!wiki class="bb-dots-l" | |
| 36 | 45 | }}} |
| 37 | 46 | |
| 38 | 47 | {{{#!wiki style="display:table;padding:0 15px" |
| ... | ... |