├── .gitignore ├── .editorconfig ├── source ├── CanvasView.js ├── Color.js ├── Star.js └── index.js ├── ReadMe.md ├── package.json ├── demo ├── Repository.html └── Repository.css ├── index.html └── StarMap.js /.gitignore: -------------------------------------------------------------------------------- 1 | # https://git-scm.com/docs/gitignore 2 | # https://help.github.com/articles/ignoring-files 3 | # Example .gitignore files: https://github.com/github/gitignore 4 | 5 | node_modules/* -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 4 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /source/CanvasView.js: -------------------------------------------------------------------------------- 1 | define(['jquery', 'jQueryKit'], function ($) { 2 | 3 | /* ----- 星空图 ----- */ 4 | 5 | function CanvasView($_View) { 6 | 7 | this.$_View = $( $_View ); 8 | 9 | this.init(); 10 | 11 | $( self ).on('resize', $.throttle(this.init.bind( this ))); 12 | 13 | return this; 14 | } 15 | 16 | $.Class.extend(CanvasView, null, { 17 | init: function () { 18 | 19 | var $_View = this.$_View.offsetParent(); 20 | 21 | this.width = this.$_View[0].width = $_View.width(); 22 | this.height = this.$_View[0].height = $_View.height(); 23 | } 24 | }); 25 | 26 | return CanvasView; 27 | 28 | }); 29 | -------------------------------------------------------------------------------- /ReadMe.md: -------------------------------------------------------------------------------- 1 | # 粒子/星图 交互式动画 2 | 3 | 4 | 5 | ## 【项目缘起】 6 | 7 | 公司同事为了适配 UI 设计图，在网上搜到 [@wangji5850](https://github.com/wangji5850) [原作](http://www.qdfuns.com/notes/26090/1fd69cab2d93ee4fc9c0b881a859abf5.html)，用在一个业务系统（原型版）的登录页，效果甚佳。但内部试用后 UI 重做设计，就没最终采用。 8 | 9 | 后来发现两个同技术社区的朋友博客上都有这个动画，就想可以把 **自己在公司开发时重构的版本**分享出来，就建了这个代码仓库。 10 | 11 | 12 | 13 | ## 【参与开发】 14 | 15 | UNIX-Shell、Windows-CMD 通用脚本 —— 16 | 17 | ```Shell 18 | git clone https://github.com/TechQuery/StarMap.git 19 | 20 | npm install 21 | 22 | npm run build 23 | 24 | npm test 25 | ``` 26 | 27 | 28 | ## 【同类项目】 29 | 30 | - http://git.hust.cc/canvas-nest.js/ 31 | 32 | - https://github.com/hilongjw/Qarticles 33 | 34 | - http://vincentgarreau.com/particles.js/ -------------------------------------------------------------------------------- /source/Color.js: -------------------------------------------------------------------------------- 1 | define(['jquery'], function ($) { 2 | 3 | /* ----- RGB 颜色 ----- */ 4 | 5 | function Color(min) { 6 | 7 | min = min || 0; 8 | 9 | var _Self_ = this.constructor; 10 | 11 | this.red = _Self_.random( min ); 12 | this.green = _Self_.random( min ); 13 | this.blue = _Self_.random( min ); 14 | 15 | this.style = _Self_.getStyle(this.red, this.green, this.blue); 16 | } 17 | 18 | $.extend(Color, { 19 | random: function (min) { 20 | 21 | return Math.random() * 255 + min; 22 | }, 23 | getStyle: function (red, green, blue) { 24 | 25 | return 'rgba(' + [ 26 | Math.floor(red), Math.floor(green), Math.floor(blue), 0.8 27 | ].join(', ') + ')'; 28 | } 29 | }); 30 | 31 | return Color; 32 | 33 | }); 34 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "star-map", 3 | "version": "0.2.0", 4 | "description": "Particle / Star Map interactive animation", 5 | "main": "StarMap.js", 6 | "engines": { 7 | "node": "^5.0.0" 8 | }, 9 | "scripts": { 10 | "bundle": "cd source && amd-bundle ../StarMap.js", 11 | "compress": "uglifyjs StarMap.js -o build/StarMap.min.js --config-file build/compress.json", 12 | "build": "npm run bundle && npm run compress", 13 | "test": "opn index.html" 14 | }, 15 | "repository": { 16 | "type": "git", 17 | "url": "git+https://github.com/TechQuery/StarMap.git" 18 | }, 19 | "keywords": [ 20 | "particle", 21 | "animation", 22 | "javascript", 23 | "canvas" 24 | ], 25 | "author": "shiy007@qq.com", 26 | "license": "ISC", 27 | "bugs": { 28 | "url": "https://github.com/TechQuery/StarMap/issues" 29 | }, 30 | "homepage": "https://github.com/TechQuery/StarMap#readme", 31 | "devDependencies": { 32 | "amd-bundle": "^0.4.2", 33 | "opn-cli": "^3.1.0", 34 | "uglify-js": "^3.0.24" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /source/Star.js: -------------------------------------------------------------------------------- 1 | define(['jquery', './Color'], function ($, Color) { 2 | 3 | /* ----- 恒星点 ----- */ 4 | 5 | function Star(Max_X, Max_Y, iContext) { 6 | 7 | this.x = Math.random() * Max_X; 8 | this.y = Math.random() * Max_Y; 9 | 10 | this.vx = Math.random() - 0.5; 11 | this.vy = Math.random() - 0.5; 12 | 13 | this.radius = Math.random(); 14 | 15 | this.color = new Color(); 16 | 17 | this.context = iContext; 18 | } 19 | 20 | Star.mixValue = function (comp1, weight1, comp2, weight2) { 21 | 22 | return (comp1 * weight1 + comp2 * weight2) / (weight1 + weight2); 23 | }; 24 | 25 | $.extend(Star.prototype, { 26 | draw: function () { 27 | 28 | this.context.beginPath(); 29 | 30 | this.context.fillStyle = this.color.style; 31 | 32 | this.context.arc( 33 | this.x, this.y, this.radius, 0, Math.PI * 2, false 34 | ); 35 | this.context.fill(); 36 | }, 37 | mixColor: function (iOther) { 38 | 39 | return Color.getStyle( 40 | Star.mixValue( 41 | this.color.red, this.radius, iOther.color.red, iOther.radius 42 | ), 43 | Star.mixValue( 44 | this.color.green, this.radius, iOther.color.red, iOther.radius 45 | ), 46 | Star.mixValue( 47 | this.color.blue, this.radius, iOther.color.red, iOther.radius 48 | ) 49 | ); 50 | } 51 | }); 52 | 53 | return Star; 54 | 55 | }); -------------------------------------------------------------------------------- /demo/Repository.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
5 | 6 |
7 |

8 | 10 | ${view.owner.login} 11 | 12 | / 13 | 15 | ${view.name} 16 | 17 |

18 |
19 | 21 | ${view.watchers} 22 | 23 | 25 | ${view.forks} 26 | 27 |
28 |
29 |
30 |

31 | ${view.description} 32 | — 33 | 35 | Read More 36 | 37 |

38 |

39 | ${view.homepage} 40 |

41 |
42 |
43 |
44 | Latest commit to the ${view.default_branch} branch on 45 | ${(new Date( view.pushed_at )).toLocaleString()} 46 |
47 | 49 | Download as zip 50 | 51 |
52 |
-------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 粒子 / 星图 交互式动画 11 | 12 | 31 | 34 | 35 | 36 | 37 | 56 | 57 | 58 |
60 |
61 | 62 | -------------------------------------------------------------------------------- /source/index.js: -------------------------------------------------------------------------------- 1 | define([ 2 | 'jquery', './Color', './Star', './CanvasView' 3 | ], function ($, Color, Star, CanvasView) { 4 | 5 | function StarMap($_View, iMax, iDistance, iRadius) { 6 | 7 | $.extend(CanvasView.call(this, $_View), { 8 | length: 0, 9 | max: iMax || 250, 10 | distance: iDistance || 100, 11 | radius: iRadius || 150 12 | }); 13 | 14 | this.context = this.$_View[0].getContext('2d'); 15 | 16 | this.context.lineWidth = 0.3; 17 | this.context.strokeStyle = (new Color(150)).style; 18 | 19 | var MP = this.pointer = { 20 | x: 30 * this.width / 100, 21 | y: 30 * this.height / 100 22 | }; 23 | 24 | this.$_View.on('mousemove', function (iEvent) { 25 | 26 | MP.x = iEvent.pageX; 27 | MP.y = iEvent.pageY; 28 | 29 | }).on('mouseleave', function () { 30 | 31 | MP.x = -100; 32 | MP.y = -100 33 | }); 34 | } 35 | 36 | CanvasView.extend(StarMap, null, { 37 | move: function () { 38 | var _This_ = this; 39 | 40 | return $.each(this, function () { 41 | 42 | if ((this.y < 0) || (this.y > _This_.height)) 43 | this.vy = - this.vy; 44 | else if ((this.x < 0) || (this.x > _This_.width)) 45 | this.vx = - this.vx; 46 | 47 | this.x += this.vx; 48 | this.y += this.vy; 49 | }); 50 | }, 51 | connect: function () { 52 | var _This_ = this; 53 | 54 | return $.each(this, function () { 55 | 56 | for (var i = 0; _This_[i]; i++) 57 | if (( 58 | ((this.x - _This_[i].x) < _This_.distance) && 59 | ((this.y - _This_[i].y) < _This_.distance) && 60 | ((this.x - _This_[i].x) > -_This_.distance) && 61 | ((this.y - _This_[i].y) > -_This_.distance) 62 | ) && ( 63 | ((this.x - _This_.pointer.x) < _This_.radius) && 64 | ((this.y - _This_.pointer.y) < _This_.radius) && 65 | ((this.x - _This_.pointer.x) > -_This_.radius) && 66 | ((this.y - _This_.pointer.y) > -_This_.radius) 67 | )) { 68 | _This_.context.beginPath(); 69 | 70 | _This_.context.strokeStyle = this.mixColor( _This_[i] ); 71 | 72 | _This_.context.moveTo(this.x, this.y); 73 | 74 | _This_.context.lineTo(_This_[i].x, _This_[i].y); 75 | 76 | _This_.context.stroke(); 77 | 78 | _This_.context.closePath(); 79 | } 80 | }); 81 | }, 82 | animate: function () { 83 | this.context.clearRect(0, 0, this.width, this.height); 84 | 85 | $.each(this.move().connect(), Star.prototype.draw); 86 | 87 | self.requestAnimationFrame( arguments.callee.bind(this) ); 88 | }, 89 | render: function () { 90 | 91 | for (var i = 0; i < this.max; i++) 92 | this[ this.length++ ] = new Star( 93 | this.width, this.height, this.context 94 | ); 95 | 96 | self.requestAnimationFrame( this.animate.bind(this) ); 97 | } 98 | }); 99 | 100 | return StarMap; 101 | 102 | }); 103 | -------------------------------------------------------------------------------- /StarMap.js: -------------------------------------------------------------------------------- 1 | // 2 | // Generated by https://www.npmjs.com/package/amd-bundle 3 | // 4 | (function (factory) { 5 | 6 | if ((typeof define === 'function') && define.amd) 7 | define('StarMap', ['jquery', 'jQueryKit'], factory); 8 | else if (typeof module === 'object') 9 | module.exports = factory(require('jquery'), require('jQueryKit')); 10 | else 11 | this.StarMap = factory(this['jquery'], this['jQueryKit']); 12 | 13 | })(function (jquery, jQueryKit) { 14 | 15 | 16 | var Color = (function ($) { 17 | 18 | /* ----- RGB 颜色 ----- */ 19 | 20 | function Color(min) { 21 | 22 | min = min || 0; 23 | 24 | var _Self_ = this.constructor; 25 | 26 | this.red = _Self_.random( min ); 27 | this.green = _Self_.random( min ); 28 | this.blue = _Self_.random( min ); 29 | 30 | this.style = _Self_.getStyle(this.red, this.green, this.blue); 31 | } 32 | 33 | $.extend(Color, { 34 | random: function (min) { 35 | 36 | return Math.random() * 255 + min; 37 | }, 38 | getStyle: function (red, green, blue) { 39 | 40 | return 'rgba(' + [ 41 | Math.floor(red), Math.floor(green), Math.floor(blue), 0.8 42 | ].join(', ') + ')'; 43 | } 44 | }); 45 | 46 | return Color; 47 | 48 | })(jquery); 49 | 50 | 51 | var Star = (function ($, Color) { 52 | 53 | /* ----- 恒星点 ----- */ 54 | 55 | function Star(Max_X, Max_Y, iContext) { 56 | 57 | this.x = Math.random() * Max_X; 58 | this.y = Math.random() * Max_Y; 59 | 60 | this.vx = Math.random() - 0.5; 61 | this.vy = Math.random() - 0.5; 62 | 63 | this.radius = Math.random(); 64 | 65 | this.color = new Color(); 66 | 67 | this.context = iContext; 68 | } 69 | 70 | Star.mixValue = function (comp1, weight1, comp2, weight2) { 71 | 72 | return (comp1 * weight1 + comp2 * weight2) / (weight1 + weight2); 73 | }; 74 | 75 | $.extend(Star.prototype, { 76 | draw: function () { 77 | 78 | this.context.beginPath(); 79 | 80 | this.context.fillStyle = this.color.style; 81 | 82 | this.context.arc( 83 | this.x, this.y, this.radius, 0, Math.PI * 2, false 84 | ); 85 | this.context.fill(); 86 | }, 87 | mixColor: function (iOther) { 88 | 89 | return Color.getStyle( 90 | Star.mixValue( 91 | this.color.red, this.radius, iOther.color.red, iOther.radius 92 | ), 93 | Star.mixValue( 94 | this.color.green, this.radius, iOther.color.red, iOther.radius 95 | ), 96 | Star.mixValue( 97 | this.color.blue, this.radius, iOther.color.red, iOther.radius 98 | ) 99 | ); 100 | } 101 | }); 102 | 103 | return Star; 104 | 105 | })(jquery, Color); 106 | 107 | 108 | var CanvasView = (function ($) { 109 | 110 | /* ----- 星空图 ----- */ 111 | 112 | function CanvasView($_View) { 113 | 114 | this.$_View = $( $_View ); 115 | 116 | this.init(); 117 | 118 | $( self ).on('resize', $.throttle(this.init.bind( this ))); 119 | 120 | return this; 121 | } 122 | 123 | $.Class.extend(CanvasView, null, { 124 | init: function () { 125 | 126 | var $_View = this.$_View.offsetParent(); 127 | 128 | this.width = this.$_View[0].width = $_View.width(); 129 | this.height = this.$_View[0].height = $_View.height(); 130 | } 131 | }); 132 | 133 | return CanvasView; 134 | 135 | })(jquery); 136 | 137 | 138 | return (function ($, Color, Star, CanvasView) { 139 | 140 | function StarMap($_View, iMax, iDistance, iRadius) { 141 | 142 | $.extend(CanvasView.call(this, $_View), { 143 | length: 0, 144 | max: iMax || 250, 145 | distance: iDistance || 100, 146 | radius: iRadius || 150 147 | }); 148 | 149 | this.context = this.$_View[0].getContext('2d'); 150 | 151 | this.context.lineWidth = 0.3; 152 | this.context.strokeStyle = (new Color(150)).style; 153 | 154 | var MP = this.pointer = { 155 | x: 30 * this.width / 100, 156 | y: 30 * this.height / 100 157 | }; 158 | 159 | this.$_View.on('mousemove', function (iEvent) { 160 | 161 | MP.x = iEvent.pageX; 162 | MP.y = iEvent.pageY; 163 | 164 | }).on('mouseleave', function () { 165 | 166 | MP.x = -100; 167 | MP.y = -100 168 | }); 169 | } 170 | 171 | CanvasView.extend(StarMap, null, { 172 | move: function () { 173 | var _This_ = this; 174 | 175 | return $.each(this, function () { 176 | 177 | if ((this.y < 0) || (this.y > _This_.height)) 178 | this.vy = - this.vy; 179 | else if ((this.x < 0) || (this.x > _This_.width)) 180 | this.vx = - this.vx; 181 | 182 | this.x += this.vx; 183 | this.y += this.vy; 184 | }); 185 | }, 186 | connect: function () { 187 | var _This_ = this; 188 | 189 | return $.each(this, function () { 190 | 191 | for (var i = 0; _This_[i]; i++) 192 | if (( 193 | ((this.x - _This_[i].x) < _This_.distance) && 194 | ((this.y - _This_[i].y) < _This_.distance) && 195 | ((this.x - _This_[i].x) > -_This_.distance) && 196 | ((this.y - _This_[i].y) > -_This_.distance) 197 | ) && ( 198 | ((this.x - _This_.pointer.x) < _This_.radius) && 199 | ((this.y - _This_.pointer.y) < _This_.radius) && 200 | ((this.x - _This_.pointer.x) > -_This_.radius) && 201 | ((this.y - _This_.pointer.y) > -_This_.radius) 202 | )) { 203 | _This_.context.beginPath(); 204 | 205 | _This_.context.strokeStyle = this.mixColor( _This_[i] ); 206 | 207 | _This_.context.moveTo(this.x, this.y); 208 | 209 | _This_.context.lineTo(_This_[i].x, _This_[i].y); 210 | 211 | _This_.context.stroke(); 212 | 213 | _This_.context.closePath(); 214 | } 215 | }); 216 | }, 217 | animate: function () { 218 | this.context.clearRect(0, 0, this.width, this.height); 219 | 220 | $.each(this.move().connect(), Star.prototype.draw); 221 | 222 | self.requestAnimationFrame( arguments.callee.bind(this) ); 223 | }, 224 | render: function () { 225 | 226 | for (var i = 0; i < this.max; i++) 227 | this[ this.length++ ] = new Star( 228 | this.width, this.height, this.context 229 | ); 230 | 231 | self.requestAnimationFrame( this.animate.bind(this) ); 232 | } 233 | }); 234 | 235 | return StarMap; 236 | 237 | })(jquery, Color, Star, CanvasView); 238 | }); -------------------------------------------------------------------------------- /demo/Repository.css: -------------------------------------------------------------------------------- 1 | .github-box * { 2 | -webkit-box-sizing: content-box; 3 | -moz-box-sizing: content-box; 4 | box-sizing: content-box; 5 | } 6 | .github-box { 7 | font-family: helvetica, arial, sans-serif; 8 | font-size: 13px; 9 | line-height: 18px; 10 | background: #fafafa; 11 | border: 1px solid #ddd; 12 | border-radius: 3px; 13 | color: #666; 14 | } 15 | .github-box a { 16 | color: #4183c4; 17 | border: 0; 18 | text-decoration: none; 19 | } 20 | .github-box .github-box-title { 21 | position: relative; 22 | border-bottom: 1px solid #ddd; 23 | border-radius: 3px 3px 0 0; 24 | background: #fcfcfc; 25 | background: -moz-linear-gradient(#fcfcfc, #ebebeb); 26 | background:-webkit-linear-gradient(#fcfcfc, #ebebeb); 27 | } 28 | .github-box .github-box-title h3 { 29 | word-wrap: break-word; 30 | font-family: helvetica, arial, sans-serif; 31 | font-weight: normal; 32 | font-size: 16px; 33 | color: gray; 34 | margin: 0; 35 | padding: 10px 10px 10px 30px; 36 | width: auto; 37 | background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAXCAMAAAAx3e/WAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIE1hY2ludG9zaCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpEQjIyNkJERkM0NjYxMUUxOEFDQzk3ODcxRDkzRjhCRSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpEQjIyNkJFMEM0NjYxMUUxOEFDQzk3ODcxRDkzRjhCRSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkRCMjI2QkREQzQ2NjExRTE4QUNDOTc4NzFEOTNGOEJFIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkRCMjI2QkRFQzQ2NjExRTE4QUNDOTc4NzFEOTNGOEJFIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+dka2KgAAAEVQTFRFxMTEyMjI0tLSvb29vr6+zc3Ny8vLxcXFz8/P6enp3t7ex8fH0dHR1NTUw8PDwMDAzs7OvLy8wcHBu7u7v7+/zMzM////budQFwAAABd0Uk5T/////////////////////////////wDmQOZeAAAAcklEQVR42tSQSQ7DMAwD6chOukWs5eX/Ty2coo0T9wOdEzEgdRBuzNmnDofgja52JDyz5TCqUp0O6kfrb4bzSXkRiTviEZZ6JKLMJ5VQ2v8iGbtbfEwXmjFMG0VwdQo10hQNxYqtLMv9O6xvpZ/QeAkwAKjwHiJLaJc3AAAAAElFTkSuQmCC"); 38 | background-position: 7px center; 39 | background-repeat: no-repeat; 40 | } 41 | .github-box .github-box-title h3 .repo { 42 | font-weight: bold; 43 | } 44 | .github-box .github-box-title .github-stats { 45 | float: right; 46 | position: absolute; 47 | top: 8px; 48 | right: 10px; 49 | font-size: 11px; 50 | font-weight: bold; 51 | line-height: 21px; 52 | height: auto; 53 | min-height: 21px; 54 | } 55 | .github-box .github-box-title .github-stats a { 56 | display: inline-block; 57 | height: 21px; 58 | color: #666; 59 | border: 1px solid #ddd; 60 | border-radius: 3px; 61 | padding: 0 5px 0 18px; 62 | background-color: white; 63 | background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAqCAMAAACEJ4viAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIE1hY2ludG9zaCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpEQjIyNkJEQkM0NjYxMUUxOEFDQzk3ODcxRDkzRjhCRSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpEQjIyNkJEQ0M0NjYxMUUxOEFDQzk3ODcxRDkzRjhCRSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkRCMjI2QkQ5QzQ2NjExRTE4QUNDOTc4NzFEOTNGOEJFIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkRCMjI2QkRBQzQ2NjExRTE4QUNDOTc4NzFEOTNGOEJFIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+h1kA9gAAAK5QTFRF+fn5sbGx8fHx09PTmpqa2dnZ/f3919fX9PT00NDQ1dXVpKSk+vr6+/v7vb298vLyycnJ8/PztLS0zc3N6enp/v7+q6ur2NjY9/f3srKy/Pz8p6en7u7uoaGhnJyc4eHhtbW1pqam6Ojo9fX17e3toqKirKys1NTUzs7Ox8fHwcHBwMDA5eXlnZ2dpaWl0dHR9vb25ubm4uLi3d3dqqqqwsLCv7+/oKCgmZmZ////8yEsbwAAAMBJREFUeNrE0tcOgjAUBuDSliUoMhTEvfdef9//xUQjgaLX0Ium/ZLT/+SkRPxZpGykvuf5VMJogy5jY9yjDHcWFhqlcRuHc4o6B1QK0BDg+hcZgNDh3NWTwzItH/bRrhvT+g3zSxZkNGCZpoWGIbU0a3Y6zV5VA6keyeDxiw62P0gUqEW0FbDim4nVikFJbU2zZXybUEaxhCqOQqyh5/G0wpWICUwthyqwD4InOMuXJ7/gs7WkoPdVg1vykF8CDACEFanKO3aSYwAAAABJRU5ErkJggg=="); 64 | background-repeat: no-repeat; 65 | } 66 | .github-box .github-box-title .github-stats .watchers { 67 | border-right: 1px solid #ddd; 68 | } 69 | .github-box .github-box-title .github-stats .forks { 70 | background-position: -4px -21px; 71 | padding-left: 15px; 72 | } 73 | .github-box .github-box-content { 74 | padding: 10px; 75 | font-weight: 300; 76 | } 77 | .github-box .github-box-content p { 78 | margin: 0; 79 | } 80 | .github-box .github-box-content .link { 81 | font-weight: bold; 82 | } 83 | .github-box .github-box-download { 84 | position: relative; 85 | border-top: 1px solid #ddd; 86 | background: white; 87 | border-radius: 0 0 3px 3px; 88 | padding: 10px; 89 | height: auto; 90 | min-height: 24px; 91 | } 92 | .github-box .github-box-download .updated { 93 | word-wrap: break-word; 94 | margin: 0; 95 | font-size: 11px; 96 | color: #666; 97 | line-height: 24px; 98 | font-weight: 300; 99 | width: auto; 100 | } 101 | .github-box .github-box-download .updated strong { 102 | font-weight: bold; 103 | color: #000; 104 | } 105 | .github-box .github-box-download .download { 106 | float: right; 107 | position: absolute; 108 | top: 10px; 109 | right: 10px; 110 | height: 24px; 111 | line-height: 24px; 112 | font-size: 12px; 113 | color: #666; 114 | font-weight: bold; 115 | text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9); 116 | padding: 0 10px; 117 | border: 1px solid #ddd; 118 | border-bottom-color: #bbb; 119 | border-radius: 3px; 120 | background: #f5f5f5; 121 | background: -moz-linear-gradient(#f5f5f5, #e5e5e5); 122 | background: -webkit-linear-gradient(#f5f5f5, #e5e5e5); 123 | } 124 | .github-box .github-box-download .download: hover { 125 | color: #527894; 126 | border-color: #cfe3ed; 127 | border-bottom-color: #9fc7db; 128 | background: #f1f7fa; 129 | background: -moz-linear-gradient(#f1f7fa, #dbeaf1); 130 | background: -webkit-linear-gradient(#f1f7fa, #dbeaf1); 131 | } 132 | @media (max-width: 767px) { 133 | .github-box .github-box-title { 134 | height: auto; 135 | min-height: 60px; 136 | } 137 | .github-box .github-box-title h3 .repo { 138 | display: block; 139 | } 140 | .github-box .github-box-title .github-stats a { 141 | display: block; 142 | clear: right; 143 | float: right; 144 | } 145 | .github-box .github-box-download { 146 | height: auto; 147 | min-height: 46px; 148 | } 149 | .github-box .github-box-download .download { 150 | top: 32px; 151 | } 152 | } --------------------------------------------------------------------------------