| r1843 vs r1844 | ||
|---|---|---|
| 1 | {{{#!wiki style="width:100%;height:20px;background:linear-gradient(90deg, | |
| 1 | {{{#!wiki style="width:100%;height:20px;background:linear-gradient(90deg, light-dark(#fff, #f00), #000)0 0/10% 50%" | |
| 2 | 2 | }}} |
| 3 | 3 | |
| 4 | 4 | |
| ... | ... | |
| 76 | 76 | }}}{{{#!if ButtonBdDarkColor = '#383b40', ButtonBgDarkColor = '#1c1d1f', ButtonArrowDarkColor = '#e0e0e0', ButtonBgDarkHoverColor ='#2d2f34', ButtonBdDarkActiveColor = '#bd7f14', ButtonBgDarkActiveColor = '#ec9f19', ButtonArrowDarkActiveColor = '#212529' |
| 77 | 77 | }}}{{{#!if ButtonBd = '5px', DotsWidth = '50px' |
| 78 | 78 | }}}{{{#!style |
| 79 | .bb-button-r {display:inline-block;vertical-align:middle;width:@ButtonSize@;height:@ButtonSize@;border-radius:50%;border:@ButtonBd@ 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@ | |
| 79 | .bb-button-r {display:inline-block;vertical-align:middle;width:@ButtonSize@;height:@ButtonSize@;border-radius:50%;border:@ButtonBd@ solid light-dark(@ButtonBdLightColor@, @ButtonBdDarkColor@);box-shadow:3px 3px 10px @ButtonShadowColor@;background:conic-gradient(from 45deg at 10% 50%, transparent 90deg, light-dark(@ButtonBgLightColor@, @ButtonBgDarkColor@) 0), conic-gradient(from 225deg at 62% 50%, light-dark(@ButtonBgLightColor@, @ButtonBgDarkColor@) 90deg, transparent 0), conic-gradient(from 225deg at 73% 50%, light-dark(@ButtonArrowLightColor@, @ButtonArrowDarkColor@) 90deg, light-dark(@ButtonBgLightColor@, @ButtonBgDarkColor@) 0)} | |
| 80 | 80 | |
| 81 | .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@ | |
| 81 | .bb-button-r:hover {background:conic-gradient(from 45deg at 10% 50%, transparent 90deg, light-dark(@ButtonBgLightHoverColor@, @ButtonBgDarkHoverColor@) 0), conic-gradient(from 225deg at 62% 50%, light-dark(@ButtonBgLightHoverColor@, @ButtonBgDarkHoverColor@) 90deg, transparent 0), conic-gradient(from 225deg at 73% 50%, light-dark(@ButtonArrowLightColor@, @ButtonArrowDarkColor@) 90deg, light-dark(@ButtonBgLightHoverColor@, @ButtonBgDarkHoverColor@) 0)} | |
| 82 | 82 | |
| 83 | .bb-button-r:active {border:@ButtonBd@ 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@ | |
| 83 | .bb-button-r:active {border:@ButtonBd@ solid light-dark(@ButtonBdLightActiveColor@, @ButtonBdDarkActiveColor@);background:conic-gradient(from 45deg at 10% 50%, transparent 90deg, light-dark(@ButtonBgLightActiveColor@, @ButtonBgDarkActiveColor@) 0), conic-gradient(from 225deg at 62% 50%, light-dark(@ButtonBgLightActiveColor@, @ButtonBgDarkActiveColor@) 90deg, transparent 0), conic-gradient(from 225deg at 73% 50%, light-dark(@ButtonArrowLightActiveColor@, @ButtonArrowDarkActiveColor@) 90deg, light-dark(@ButtonBgLightActiveColor@, @ButtonBgDarkActiveColor@) 0)} | |
| 84 | 84 | |
| 85 | .bb-button-l {display:inline-block;vertical-align:middle;width:@ButtonSize@;height:@ButtonSize@;border-radius:50%;border:@ButtonBd@ solid @ButtonBdLightColor@;box-shadow:3px 3px 10px @ButtonShadowColor@;background:conic-gradient(from 225deg at 90% 50%, transparent 90deg, @ButtonBgLightColor@ 0), conic-gradient(from 45deg at 38% 50%, @ButtonBgLightColor@ 90deg, transparent 0), conic-gradient(from 45deg at 27% 50%, @ButtonArrowLightColor@ | |
| 85 | .bb-button-l {display:inline-block;vertical-align:middle;width:@ButtonSize@;height:@ButtonSize@;border-radius:50%;border:@ButtonBd@ solid light-dark(@ButtonBdLightColor@, @ButtonBdDarkColor@);box-shadow:3px 3px 10px @ButtonShadowColor@;background:conic-gradient(from 225deg at 90% 50%, transparent 90deg, light-dark(@ButtonBgLightColor@, @ButtonBgDarkColor@) 0), conic-gradient(from 45deg at 38% 50%, light-dark(@ButtonBgLightColor@, @ButtonBgDarkColor@) 90deg, transparent 0), conic-gradient(from 45deg at 27% 50%, light-dark(@ButtonArrowLightColor@, @ButtonArrowDarkColor@) 90deg, light-dark(@ButtonBgLightColor@, @ButtonBgDarkColor@) 0)} | |
| 86 | 86 | |
| 87 | .bb-button-l:hover {background:conic-gradient(from 225deg at 90% 50%, transparent 90deg, @ButtonBgLightHoverColor@ 0), conic-gradient(from 45deg at 38% 50%, @ButtonBgLightHoverColor@ 90deg, transparent 0), conic-gradient(from 45deg at 27% 50%, @ButtonArrowLightColor@ | |
| 87 | .bb-button-l:hover {background:conic-gradient(from 225deg at 90% 50%, transparent 90deg, light-dark(@ButtonBgLightHoverColor@, @ButtonBgDarkHoverColor@) 0), conic-gradient(from 45deg at 38% 50%, light-dark(@ButtonBgLightHoverColor@, @ButtonBgDarkHoverColor@) 90deg, transparent 0), conic-gradient(from 45deg at 27% 50%, light-dark(@ButtonArrowLightColor@, @ButtonArrowDarkColor@) 90deg, light-dark(@ButtonBgLightHoverColor@, @ButtonBgDarkHoverColor@) 0)} | |
| 88 | 88 | |
| 89 | .bb-button-l:active {border:@ButtonBd@ 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@ | |
| 89 | .bb-button-l:active {border:@ButtonBd@ solid light-dark(@ButtonBdLightActiveColor@, @ButtonBdDarkActiveColor@);background:conic-gradient(from 225deg at 90% 50%, transparent 90deg, light-dark(@ButtonBgLightActiveColor@, @ButtonBgDarkActiveColor@) 0), conic-gradient(from 45deg at 38% 50%, light-dark(@ButtonBgLightActiveColor@, @ButtonBgDarkActiveColor@) 90deg, transparent 0), conic-gradient(from 45deg at 27% 50%, light-dark(@ButtonArrowLightActiveColor@, @ButtonArrowDarkActiveColor@) 90deg, light-dark(@ButtonBgLightActiveColor@, @ButtonBgDarkActiveColor@) 0)} | |
| 90 | 90 | |
| 91 | .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)} | |
| 91 | .bb-dots-r {width:@DotsWidth@;height:calc(@DotsWidth@ / 2);border-radius:@DotsWidth@;border:1px solid light-dark(@ButtonBdLightColor@, @ButtonBdDarkColor@);background:radial-gradient(circle closest-side at 75% 50%, light-dark(@ButtonArrowLightColor@, @ButtonArrowDarkColor@) 65%, transparent 0), radial-gradient(circle closest-side at 25% 50%, light-dark(@ButtonBdLightColor@, @ButtonBdDarkColor@) 45%, #fff 0)} | |
| 92 | 92 | |
| 93 | .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)} | |
| 93 | .bb-dots-l {width:@DotsWidth@;height:calc(@DotsWidth@ / 2);border-radius:@DotsWidth@;border:1px solid light-dark(@ButtonBdLightColor@, @ButtonBdDarkColor@);background:radial-gradient(circle closest-side at 25% 50%, light-dark(@ButtonArrowLightColor@, @ButtonArrowDarkColor@) 65%, transparent 0), radial-gradient(circle closest-side at 75% 50%, light-dark(@ButtonBdLightColor@, @ButtonBdDarkColor@) 45%, #fff 0)} | |
| 94 | 94 | |
| 95 | 95 | .bb-hide {display:none} |
| 96 | 96 | }}} |
| ... | ... |