├── public ├── images │ ├── weixin.jpg │ └── weixinpay_head.jpg └── css │ └── css.css ├── package.json ├── README.md ├── Dockerfile ├── server.js └── views ├── index.html └── weixin.html /public/images/weixin.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/malaohu/Ali-Weixin-QRPay/HEAD/public/images/weixin.jpg -------------------------------------------------------------------------------- /public/images/weixinpay_head.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/malaohu/Ali-Weixin-QRPay/HEAD/public/images/weixinpay_head.jpg -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Ali-Weixin-QRPay", 3 | "version": "0.0.1", 4 | "author": "malaohu", 5 | "description": "将支付宝微信付款码合并成一个二维码", 6 | "dependencies": { 7 | "express" : "4.*", 8 | "ejs" : "*" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 支付宝微信付款码合二为一 2 | 3 | ## 使用必读 4 | 使用前请做以下修改 5 | 1. 修改server.js 文件,alipay_link 替换成你自己的支付宝付款码的链家。 6 | 2. 替换图片 public/images/weixin.jpg 图片,换成你自己的微信二维码,为了美观最好保持默认大小。 7 | 8 | 9 | ## 部署向导 10 | 需要Nodejs 0.12.0(含) + 11 | 12 | 推荐使用NVM安装 http://51.ruyo.net/p/3214.html#3 13 | 14 | ``` 15 | git clone https://github.com/malaohu/Ali-Weixin-QRPay.git 16 | cd Ali-Weixin-QRPay 17 | npm install 18 | node server.js 19 | ``` 20 | 21 | ## 在线演示 22 | http://onepay.jike.info/ 23 | -------------------------------------------------------------------------------- /Dockerfile: -------------------------------------------------------------------------------- 1 | FROM readytalk/nodejs 2 | 3 | WORKDIR /app 4 | WORKDIR /app/views 5 | WORKDIR /app/public 6 | WORKDIR /app/public/css 7 | WORKDIR /app/public/images 8 | COPY server.js /app/ 9 | COPY package.json /app/ 10 | COPY views/index.html /app/views 11 | COPY views/weixin.html /app/views 12 | COPY public/css/css.css /app/public/css 13 | COPY public/images/weixin.jpg /app/public/images 14 | COPY public/images/weixinpay_head.jpg /app/public/images 15 | RUN npm install 16 | CMD node /app/server.js 17 | -------------------------------------------------------------------------------- /server.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | var app = express(); 3 | 4 | app.use(express.static(__dirname + '/public')); 5 | app.engine('.html', require('ejs').__express); 6 | app.set('views', __dirname + '/views'); 7 | 8 | app.get('/', function(req, res) { 9 | res.render('./index.html',{}); 10 | }); 11 | 12 | //使用前一定要替换以下地址 13 | var alipay_link = 'HTTPS://QR.ALIPAY.COM/FKX030126KTDDQSMUS9AA3'; 14 | 15 | app.get('/code',function(req,res){ 16 | var ua = req.headers['user-agent']; 17 | if(/MicroMessenger\//.test(ua)) 18 | { 19 | res.render('./weixin.html',{}); 20 | }else if(/AlipayClient\//.test(ua)) 21 | { 22 | res.redirect(alipay_link); 23 | }else 24 | res.send('请使用微信或者支付宝客户端扫码'); 25 | }); 26 | 27 | app.listen(3999, function () { 28 | console.log('Example app listening on port 3999') 29 | }) 30 | -------------------------------------------------------------------------------- /views/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 收款码合并 - 如有乐享 - 51.RUYO.net 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |

请使用支付宝或微信客户端扫码付款

16 |
17 |
18 |
19 |
20 |
21 |
22 | 23 | 24 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /views/weixin.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 微信支付 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 43 | 44 | 45 |
46 | 47 |
48 |
49 |
50 | 51 |
长按二维码识别,向商家付款
52 |
53 |
54 | 55 | 56 | -------------------------------------------------------------------------------- /public/css/css.css: -------------------------------------------------------------------------------- 1 | @media screen and (min-width: 35.5em) { 2 | .u-sm-1, 3 | .u-sm-1-1, 4 | .u-sm-1-2, 5 | .u-sm-1-3, 6 | .u-sm-2-3, 7 | .u-sm-1-4, 8 | .u-sm-3-4, 9 | .u-sm-1-5, 10 | .u-sm-2-5, 11 | .u-sm-3-5, 12 | .u-sm-4-5, 13 | .u-sm-5-5, 14 | .u-sm-1-6, 15 | .u-sm-5-6, 16 | .u-sm-1-8, 17 | .u-sm-3-8, 18 | .u-sm-5-8, 19 | .u-sm-7-8, 20 | .u-sm-1-12, 21 | .u-sm-5-12, 22 | .u-sm-7-12, 23 | .u-sm-11-12, 24 | .u-sm-1-24, 25 | .u-sm-2-24, 26 | .u-sm-3-24, 27 | .u-sm-4-24, 28 | .u-sm-5-24, 29 | .u-sm-6-24, 30 | .u-sm-7-24, 31 | .u-sm-8-24, 32 | .u-sm-9-24, 33 | .u-sm-10-24, 34 | .u-sm-11-24, 35 | .u-sm-12-24, 36 | .u-sm-13-24, 37 | .u-sm-14-24, 38 | .u-sm-15-24, 39 | .u-sm-16-24, 40 | .u-sm-17-24, 41 | .u-sm-18-24, 42 | .u-sm-19-24, 43 | .u-sm-20-24, 44 | .u-sm-21-24, 45 | .u-sm-22-24, 46 | .u-sm-23-24, 47 | .u-sm-24-24 { 48 | display: inline-block; 49 | *display: inline; 50 | zoom: 1; 51 | letter-spacing: normal; 52 | word-spacing: normal; 53 | vertical-align: top; 54 | text-rendering: auto; 55 | } 56 | 57 | .u-sm-1-24 { 58 | width: 4.1667%; 59 | *width: 4.1357%; 60 | } 61 | 62 | .u-sm-1-12, 63 | .u-sm-2-24 { 64 | width: 8.3333%; 65 | *width: 8.3023%; 66 | } 67 | 68 | .u-sm-1-8, 69 | .u-sm-3-24 { 70 | width: 12.5000%; 71 | *width: 12.4690%; 72 | } 73 | 74 | .u-sm-1-6, 75 | .u-sm-4-24 { 76 | width: 16.6667%; 77 | *width: 16.6357%; 78 | } 79 | 80 | .u-sm-1-5 { 81 | width: 20%; 82 | *width: 19.9690%; 83 | } 84 | 85 | .u-sm-5-24 { 86 | width: 20.8333%; 87 | *width: 20.8023%; 88 | } 89 | 90 | .u-sm-1-4, 91 | .u-sm-6-24 { 92 | width: 25%; 93 | *width: 24.9690%; 94 | } 95 | 96 | .u-sm-7-24 { 97 | width: 29.1667%; 98 | *width: 29.1357%; 99 | } 100 | 101 | .u-sm-1-3, 102 | .u-sm-8-24 { 103 | width: 33.3333%; 104 | *width: 33.3023%; 105 | } 106 | 107 | .u-sm-3-8, 108 | .u-sm-9-24 { 109 | width: 37.5000%; 110 | *width: 37.4690%; 111 | } 112 | 113 | .u-sm-2-5 { 114 | width: 40%; 115 | *width: 39.9690%; 116 | } 117 | 118 | .u-sm-5-12, 119 | .u-sm-10-24 { 120 | width: 41.6667%; 121 | *width: 41.6357%; 122 | } 123 | 124 | .u-sm-11-24 { 125 | width: 45.8333%; 126 | *width: 45.8023%; 127 | } 128 | 129 | .u-sm-1-2, 130 | .u-sm-12-24 { 131 | width: 50%; 132 | *width: 49.9690%; 133 | } 134 | 135 | .u-sm-13-24 { 136 | width: 54.1667%; 137 | *width: 54.1357%; 138 | } 139 | 140 | .u-sm-7-12, 141 | .u-sm-14-24 { 142 | width: 58.3333%; 143 | *width: 58.3023%; 144 | } 145 | 146 | .u-sm-3-5 { 147 | width: 60%; 148 | *width: 59.9690%; 149 | } 150 | 151 | .u-sm-5-8, 152 | .u-sm-15-24 { 153 | width: 62.5000%; 154 | *width: 62.4690%; 155 | } 156 | 157 | .u-sm-2-3, 158 | .u-sm-16-24 { 159 | width: 66.6667%; 160 | *width: 66.6357%; 161 | } 162 | 163 | .u-sm-17-24 { 164 | width: 70.8333%; 165 | *width: 70.8023%; 166 | } 167 | 168 | .u-sm-3-4, 169 | .u-sm-18-24 { 170 | width: 75%; 171 | *width: 74.9690%; 172 | } 173 | 174 | .u-sm-19-24 { 175 | width: 79.1667%; 176 | *width: 79.1357%; 177 | } 178 | 179 | .u-sm-4-5 { 180 | width: 80%; 181 | *width: 79.9690%; 182 | } 183 | 184 | .u-sm-5-6, 185 | .u-sm-20-24 { 186 | width: 83.3333%; 187 | *width: 83.3023%; 188 | } 189 | 190 | .u-sm-7-8, 191 | .u-sm-21-24 { 192 | width: 87.5000%; 193 | *width: 87.4690%; 194 | } 195 | 196 | .u-sm-11-12, 197 | .u-sm-22-24 { 198 | width: 91.6667%; 199 | *width: 91.6357%; 200 | } 201 | 202 | .u-sm-23-24 { 203 | width: 95.8333%; 204 | *width: 95.8023%; 205 | } 206 | 207 | .u-sm-1, 208 | .u-sm-1-1, 209 | .u-sm-5-5, 210 | .u-sm-24-24 { 211 | width: 100%; 212 | } 213 | } 214 | 215 | @media screen and (min-width: 48em) { 216 | .u-md-1, 217 | .u-md-1-1, 218 | .u-md-1-2, 219 | .u-md-1-3, 220 | .u-md-2-3, 221 | .u-md-1-4, 222 | .u-md-3-4, 223 | .u-md-1-5, 224 | .u-md-2-5, 225 | .u-md-3-5, 226 | .u-md-4-5, 227 | .u-md-5-5, 228 | .u-md-1-6, 229 | .u-md-5-6, 230 | .u-md-1-8, 231 | .u-md-3-8, 232 | .u-md-5-8, 233 | .u-md-7-8, 234 | .u-md-1-12, 235 | .u-md-5-12, 236 | .u-md-7-12, 237 | .u-md-11-12, 238 | .u-md-1-24, 239 | .u-md-2-24, 240 | .u-md-3-24, 241 | .u-md-4-24, 242 | .u-md-5-24, 243 | .u-md-6-24, 244 | .u-md-7-24, 245 | .u-md-8-24, 246 | .u-md-9-24, 247 | .u-md-10-24, 248 | .u-md-11-24, 249 | .u-md-12-24, 250 | .u-md-13-24, 251 | .u-md-14-24, 252 | .u-md-15-24, 253 | .u-md-16-24, 254 | .u-md-17-24, 255 | .u-md-18-24, 256 | .u-md-19-24, 257 | .u-md-20-24, 258 | .u-md-21-24, 259 | .u-md-22-24, 260 | .u-md-23-24, 261 | .u-md-24-24 { 262 | display: inline-block; 263 | *display: inline; 264 | zoom: 1; 265 | letter-spacing: normal; 266 | word-spacing: normal; 267 | vertical-align: top; 268 | text-rendering: auto; 269 | } 270 | 271 | .u-md-1-24 { 272 | width: 4.1667%; 273 | *width: 4.1357%; 274 | } 275 | 276 | .u-md-1-12, 277 | .u-md-2-24 { 278 | width: 8.3333%; 279 | *width: 8.3023%; 280 | } 281 | 282 | .u-md-1-8, 283 | .u-md-3-24 { 284 | width: 12.5000%; 285 | *width: 12.4690%; 286 | } 287 | 288 | .u-md-1-6, 289 | .u-md-4-24 { 290 | width: 16.6667%; 291 | *width: 16.6357%; 292 | } 293 | 294 | .u-md-1-5 { 295 | width: 20%; 296 | *width: 19.9690%; 297 | } 298 | 299 | .u-md-5-24 { 300 | width: 20.8333%; 301 | *width: 20.8023%; 302 | } 303 | 304 | .u-md-1-4, 305 | .u-md-6-24 { 306 | width: 25%; 307 | *width: 24.9690%; 308 | } 309 | 310 | .u-md-7-24 { 311 | width: 29.1667%; 312 | *width: 29.1357%; 313 | } 314 | 315 | .u-md-1-3, 316 | .u-md-8-24 { 317 | width: 33.3333%; 318 | *width: 33.3023%; 319 | } 320 | 321 | .u-md-3-8, 322 | .u-md-9-24 { 323 | width: 37.5000%; 324 | *width: 37.4690%; 325 | } 326 | 327 | .u-md-2-5 { 328 | width: 40%; 329 | *width: 39.9690%; 330 | } 331 | 332 | .u-md-5-12, 333 | .u-md-10-24 { 334 | width: 41.6667%; 335 | *width: 41.6357%; 336 | } 337 | 338 | .u-md-11-24 { 339 | width: 45.8333%; 340 | *width: 45.8023%; 341 | } 342 | 343 | .u-md-1-2, 344 | .u-md-12-24 { 345 | width: 50%; 346 | *width: 49.9690%; 347 | } 348 | 349 | .u-md-13-24 { 350 | width: 54.1667%; 351 | *width: 54.1357%; 352 | } 353 | 354 | .u-md-7-12, 355 | .u-md-14-24 { 356 | width: 58.3333%; 357 | *width: 58.3023%; 358 | } 359 | 360 | .u-md-3-5 { 361 | width: 60%; 362 | *width: 59.9690%; 363 | } 364 | 365 | .u-md-5-8, 366 | .u-md-15-24 { 367 | width: 62.5000%; 368 | *width: 62.4690%; 369 | } 370 | 371 | .u-md-2-3, 372 | .u-md-16-24 { 373 | width: 66.6667%; 374 | *width: 66.6357%; 375 | } 376 | 377 | .u-md-17-24 { 378 | width: 70.8333%; 379 | *width: 70.8023%; 380 | } 381 | 382 | .u-md-3-4, 383 | .u-md-18-24 { 384 | width: 75%; 385 | *width: 74.9690%; 386 | } 387 | 388 | .u-md-19-24 { 389 | width: 79.1667%; 390 | *width: 79.1357%; 391 | } 392 | 393 | .u-md-4-5 { 394 | width: 80%; 395 | *width: 79.9690%; 396 | } 397 | 398 | .u-md-5-6, 399 | .u-md-20-24 { 400 | width: 83.3333%; 401 | *width: 83.3023%; 402 | } 403 | 404 | .u-md-7-8, 405 | .u-md-21-24 { 406 | width: 87.5000%; 407 | *width: 87.4690%; 408 | } 409 | 410 | .u-md-11-12, 411 | .u-md-22-24 { 412 | width: 91.6667%; 413 | *width: 91.6357%; 414 | } 415 | 416 | .u-md-23-24 { 417 | width: 95.8333%; 418 | *width: 95.8023%; 419 | } 420 | 421 | .u-md-1, 422 | .u-md-1-1, 423 | .u-md-5-5, 424 | .u-md-24-24 { 425 | width: 100%; 426 | } 427 | } 428 | 429 | @media screen and (min-width: 58em) { 430 | .u-lg-1, 431 | .u-lg-1-1, 432 | .u-lg-1-2, 433 | .u-lg-1-3, 434 | .u-lg-2-3, 435 | .u-lg-1-4, 436 | .u-lg-3-4, 437 | .u-lg-1-5, 438 | .u-lg-2-5, 439 | .u-lg-3-5, 440 | .u-lg-4-5, 441 | .u-lg-5-5, 442 | .u-lg-1-6, 443 | .u-lg-5-6, 444 | .u-lg-1-8, 445 | .u-lg-3-8, 446 | .u-lg-5-8, 447 | .u-lg-7-8, 448 | .u-lg-1-12, 449 | .u-lg-5-12, 450 | .u-lg-7-12, 451 | .u-lg-11-12, 452 | .u-lg-1-24, 453 | .u-lg-2-24, 454 | .u-lg-3-24, 455 | .u-lg-4-24, 456 | .u-lg-5-24, 457 | .u-lg-6-24, 458 | .u-lg-7-24, 459 | .u-lg-8-24, 460 | .u-lg-9-24, 461 | .u-lg-10-24, 462 | .u-lg-11-24, 463 | .u-lg-12-24, 464 | .u-lg-13-24, 465 | .u-lg-14-24, 466 | .u-lg-15-24, 467 | .u-lg-16-24, 468 | .u-lg-17-24, 469 | .u-lg-18-24, 470 | .u-lg-19-24, 471 | .u-lg-20-24, 472 | .u-lg-21-24, 473 | .u-lg-22-24, 474 | .u-lg-23-24, 475 | .u-lg-24-24 { 476 | display: inline-block; 477 | *display: inline; 478 | zoom: 1; 479 | letter-spacing: normal; 480 | word-spacing: normal; 481 | vertical-align: top; 482 | text-rendering: auto; 483 | } 484 | 485 | .u-lg-1-24 { 486 | width: 4.1667%; 487 | *width: 4.1357%; 488 | } 489 | 490 | .u-lg-1-12, 491 | .u-lg-2-24 { 492 | width: 8.3333%; 493 | *width: 8.3023%; 494 | } 495 | 496 | .u-lg-1-8, 497 | .u-lg-3-24 { 498 | width: 12.5000%; 499 | *width: 12.4690%; 500 | } 501 | 502 | .u-lg-1-6, 503 | .u-lg-4-24 { 504 | width: 16.6667%; 505 | *width: 16.6357%; 506 | } 507 | 508 | .u-lg-1-5 { 509 | width: 20%; 510 | *width: 19.9690%; 511 | } 512 | 513 | .u-lg-5-24 { 514 | width: 20.8333%; 515 | *width: 20.8023%; 516 | } 517 | 518 | .u-lg-1-4, 519 | .u-lg-6-24 { 520 | width: 25%; 521 | *width: 24.9690%; 522 | } 523 | 524 | .u-lg-7-24 { 525 | width: 29.1667%; 526 | *width: 29.1357%; 527 | } 528 | 529 | .u-lg-1-3, 530 | .u-lg-8-24 { 531 | width: 33.3333%; 532 | *width: 33.3023%; 533 | } 534 | 535 | .u-lg-3-8, 536 | .u-lg-9-24 { 537 | width: 37.5000%; 538 | *width: 37.4690%; 539 | } 540 | 541 | .u-lg-2-5 { 542 | width: 40%; 543 | *width: 39.9690%; 544 | } 545 | 546 | .u-lg-5-12, 547 | .u-lg-10-24 { 548 | width: 41.6667%; 549 | *width: 41.6357%; 550 | } 551 | 552 | .u-lg-11-24 { 553 | width: 45.8333%; 554 | *width: 45.8023%; 555 | } 556 | 557 | .u-lg-1-2, 558 | .u-lg-12-24 { 559 | width: 50%; 560 | *width: 49.9690%; 561 | } 562 | 563 | .u-lg-13-24 { 564 | width: 54.1667%; 565 | *width: 54.1357%; 566 | } 567 | 568 | .u-lg-7-12, 569 | .u-lg-14-24 { 570 | width: 58.3333%; 571 | *width: 58.3023%; 572 | } 573 | 574 | .u-lg-3-5 { 575 | width: 60%; 576 | *width: 59.9690%; 577 | } 578 | 579 | .u-lg-5-8, 580 | .u-lg-15-24 { 581 | width: 62.5000%; 582 | *width: 62.4690%; 583 | } 584 | 585 | .u-lg-2-3, 586 | .u-lg-16-24 { 587 | width: 66.6667%; 588 | *width: 66.6357%; 589 | } 590 | 591 | .u-lg-17-24 { 592 | width: 70.8333%; 593 | *width: 70.8023%; 594 | } 595 | 596 | .u-lg-3-4, 597 | .u-lg-18-24 { 598 | width: 75%; 599 | *width: 74.9690%; 600 | } 601 | 602 | .u-lg-19-24 { 603 | width: 79.1667%; 604 | *width: 79.1357%; 605 | } 606 | 607 | .u-lg-4-5 { 608 | width: 80%; 609 | *width: 79.9690%; 610 | } 611 | 612 | .u-lg-5-6, 613 | .u-lg-20-24 { 614 | width: 83.3333%; 615 | *width: 83.3023%; 616 | } 617 | 618 | .u-lg-7-8, 619 | .u-lg-21-24 { 620 | width: 87.5000%; 621 | *width: 87.4690%; 622 | } 623 | 624 | .u-lg-11-12, 625 | .u-lg-22-24 { 626 | width: 91.6667%; 627 | *width: 91.6357%; 628 | } 629 | 630 | .u-lg-23-24 { 631 | width: 95.8333%; 632 | *width: 95.8023%; 633 | } 634 | 635 | .u-lg-1, 636 | .u-lg-1-1, 637 | .u-lg-5-5, 638 | .u-lg-24-24 { 639 | width: 100%; 640 | } 641 | } 642 | 643 | @media screen and (min-width: 75em) { 644 | .u-xl-1, 645 | .u-xl-1-1, 646 | .u-xl-1-2, 647 | .u-xl-1-3, 648 | .u-xl-2-3, 649 | .u-xl-1-4, 650 | .u-xl-3-4, 651 | .u-xl-1-5, 652 | .u-xl-2-5, 653 | .u-xl-3-5, 654 | .u-xl-4-5, 655 | .u-xl-5-5, 656 | .u-xl-1-6, 657 | .u-xl-5-6, 658 | .u-xl-1-8, 659 | .u-xl-3-8, 660 | .u-xl-5-8, 661 | .u-xl-7-8, 662 | .u-xl-1-12, 663 | .u-xl-5-12, 664 | .u-xl-7-12, 665 | .u-xl-11-12, 666 | .u-xl-1-24, 667 | .u-xl-2-24, 668 | .u-xl-3-24, 669 | .u-xl-4-24, 670 | .u-xl-5-24, 671 | .u-xl-6-24, 672 | .u-xl-7-24, 673 | .u-xl-8-24, 674 | .u-xl-9-24, 675 | .u-xl-10-24, 676 | .u-xl-11-24, 677 | .u-xl-12-24, 678 | .u-xl-13-24, 679 | .u-xl-14-24, 680 | .u-xl-15-24, 681 | .u-xl-16-24, 682 | .u-xl-17-24, 683 | .u-xl-18-24, 684 | .u-xl-19-24, 685 | .u-xl-20-24, 686 | .u-xl-21-24, 687 | .u-xl-22-24, 688 | .u-xl-23-24, 689 | .u-xl-24-24 { 690 | display: inline-block; 691 | *display: inline; 692 | zoom: 1; 693 | letter-spacing: normal; 694 | word-spacing: normal; 695 | vertical-align: top; 696 | text-rendering: auto; 697 | } 698 | 699 | .u-xl-1-24 { 700 | width: 4.1667%; 701 | *width: 4.1357%; 702 | } 703 | 704 | .u-xl-1-12, 705 | .u-xl-2-24 { 706 | width: 8.3333%; 707 | *width: 8.3023%; 708 | } 709 | 710 | .u-xl-1-8, 711 | .u-xl-3-24 { 712 | width: 12.5000%; 713 | *width: 12.4690%; 714 | } 715 | 716 | .u-xl-1-6, 717 | .u-xl-4-24 { 718 | width: 16.6667%; 719 | *width: 16.6357%; 720 | } 721 | 722 | .u-xl-1-5 { 723 | width: 20%; 724 | *width: 19.9690%; 725 | } 726 | 727 | .u-xl-5-24 { 728 | width: 20.8333%; 729 | *width: 20.8023%; 730 | } 731 | 732 | .u-xl-1-4, 733 | .u-xl-6-24 { 734 | width: 25%; 735 | *width: 24.9690%; 736 | } 737 | 738 | .u-xl-7-24 { 739 | width: 29.1667%; 740 | *width: 29.1357%; 741 | } 742 | 743 | .u-xl-1-3, 744 | .u-xl-8-24 { 745 | width: 33.3333%; 746 | *width: 33.3023%; 747 | } 748 | 749 | .u-xl-3-8, 750 | .u-xl-9-24 { 751 | width: 37.5000%; 752 | *width: 37.4690%; 753 | } 754 | 755 | .u-xl-2-5 { 756 | width: 40%; 757 | *width: 39.9690%; 758 | } 759 | 760 | .u-xl-5-12, 761 | .u-xl-10-24 { 762 | width: 41.6667%; 763 | *width: 41.6357%; 764 | } 765 | 766 | .u-xl-11-24 { 767 | width: 45.8333%; 768 | *width: 45.8023%; 769 | } 770 | 771 | .u-xl-1-2, 772 | .u-xl-12-24 { 773 | width: 50%; 774 | *width: 49.9690%; 775 | } 776 | 777 | .u-xl-13-24 { 778 | width: 54.1667%; 779 | *width: 54.1357%; 780 | } 781 | 782 | .u-xl-7-12, 783 | .u-xl-14-24 { 784 | width: 58.3333%; 785 | *width: 58.3023%; 786 | } 787 | 788 | .u-xl-3-5 { 789 | width: 60%; 790 | *width: 59.9690%; 791 | } 792 | 793 | .u-xl-5-8, 794 | .u-xl-15-24 { 795 | width: 62.5000%; 796 | *width: 62.4690%; 797 | } 798 | 799 | .u-xl-2-3, 800 | .u-xl-16-24 { 801 | width: 66.6667%; 802 | *width: 66.6357%; 803 | } 804 | 805 | .u-xl-17-24 { 806 | width: 70.8333%; 807 | *width: 70.8023%; 808 | } 809 | 810 | .u-xl-3-4, 811 | .u-xl-18-24 { 812 | width: 75%; 813 | *width: 74.9690%; 814 | } 815 | 816 | .u-xl-19-24 { 817 | width: 79.1667%; 818 | *width: 79.1357%; 819 | } 820 | 821 | .u-xl-4-5 { 822 | width: 80%; 823 | *width: 79.9690%; 824 | } 825 | 826 | .u-xl-5-6, 827 | .u-xl-20-24 { 828 | width: 83.3333%; 829 | *width: 83.3023%; 830 | } 831 | 832 | .u-xl-7-8, 833 | .u-xl-21-24 { 834 | width: 87.5000%; 835 | *width: 87.4690%; 836 | } 837 | 838 | .u-xl-11-12, 839 | .u-xl-22-24 { 840 | width: 91.6667%; 841 | *width: 91.6357%; 842 | } 843 | 844 | .u-xl-23-24 { 845 | width: 95.8333%; 846 | *width: 95.8023%; 847 | } 848 | 849 | .u-xl-1, 850 | .u-xl-1-1, 851 | .u-xl-5-5, 852 | .u-xl-24-24 { 853 | width: 100%; 854 | } 855 | } 856 | * { 857 | -webkit-box-sizing: border-box; 858 | -moz-box-sizing: border-box; 859 | box-sizing: border-box; 860 | } 861 | 862 | *:before, 863 | *:after { 864 | -webkit-box-sizing: border-box; 865 | -moz-box-sizing: border-box; 866 | box-sizing: border-box; 867 | } 868 | 869 | html, button, input, select, textarea, 870 | .pure-g [class *= "pure-u"] { 871 | font-family: sans-serif; 872 | font-weight: 100; 873 | letter-spacing: 0.01em; 874 | } 875 | 876 | 877 | /* -------------------------- 878 | * Element Styles 879 | * -------------------------- 880 | */ 881 | 882 | body { 883 | min-width: 320px; 884 | color: #777; 885 | line-height: 1.6; 886 | } 887 | 888 | h1, h2, h3, h4, h5, h6 { 889 | font-weight: bold; 890 | color: rgb(75, 75, 75); 891 | } 892 | h3 { 893 | font-size: 1.25em; 894 | } 895 | h4 { 896 | font-size: 1.125em; 897 | } 898 | 899 | a { 900 | color: #3b8bba; /* block-background-text-normal */ 901 | text-decoration: none; 902 | } 903 | 904 | a:visited { 905 | color: #265778; /* block-normal-text-normal */ 906 | } 907 | 908 | dt { 909 | font-weight: bold; 910 | } 911 | dd { 912 | margin: 0 0 10px 0; 913 | } 914 | 915 | aside { 916 | background: #1f8dd6; /* same color as selected state on site menu */ 917 | padding: 0.3em 1em; 918 | border-radius: 3px; 919 | color: #fff; 920 | } 921 | aside a, aside a:visited { 922 | color: rgb(169, 226, 255); 923 | } 924 | 925 | 926 | /* -------------------------- 927 | * Layout Styles 928 | * -------------------------- 929 | */ 930 | 931 | /* Navigation Push Styles */ 932 | #layout { 933 | position: relative; 934 | padding-left: 0; 935 | } 936 | #layout.active #menu { 937 | left: 160px; 938 | width: 160px; 939 | } 940 | 941 | /* Apply the .box class on the immediate parent of any grid element (pure-u-*) to apply some padding. */ 942 | .l-box { 943 | padding: 1em; 944 | } 945 | 946 | .l-wrap { 947 | margin-left: auto; 948 | margin-right: auto; 949 | } 950 | .content .l-wrap { 951 | margin-left: -1em; 952 | margin-right: -1em; 953 | } 954 | 955 | 956 | /* -------------------------- 957 | * Header Module Styles 958 | * -------------------------- 959 | */ 960 | 961 | .header { 962 | font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif; 963 | max-width: 768px; 964 | margin: 0 auto; 965 | padding: 1em; 966 | text-align: center; 967 | border-bottom: 1px solid #eee; 968 | background: #fff; 969 | letter-spacing: 0.05em; 970 | } 971 | .header h1 { 972 | font-size: 300%; 973 | font-weight: 100; 974 | margin: 0; 975 | } 976 | .header h2 { 977 | font-size: 125%; 978 | font-weight: 100; 979 | line-height: 1.5; 980 | margin: 0; 981 | color: #666; 982 | letter-spacing: -0.02em; 983 | } 984 | 985 | 986 | /* -------------------------- 987 | * Content Module Styles 988 | * -------------------------- 989 | */ 990 | 991 | /* The content div is placed as a wrapper around all the docs */ 992 | .content { 993 | margin-left: auto; 994 | margin-right: auto; 995 | padding-left: 1em; 996 | padding-right: 1em; 997 | max-width: 768px; 998 | } 999 | 1000 | .content .content-subhead { 1001 | margin: 2em 0 1em 0; 1002 | font-weight: 300; 1003 | color: #888; 1004 | position: relative; 1005 | } 1006 | 1007 | .content .content-spaced { 1008 | line-height: 1.8; 1009 | } 1010 | 1011 | .content .content-quote { 1012 | font-family: "Georgia", serif; 1013 | color: #666; 1014 | font-style: italic; 1015 | line-height: 1.8; 1016 | border-left: 5px solid #ddd; 1017 | padding-left: 1.5em; 1018 | } 1019 | 1020 | .content-link { 1021 | position: absolute; 1022 | top: 0; 1023 | right: 0; 1024 | display: block; 1025 | height: 100%; 1026 | width: 20px; 1027 | background: transparent url('/img/link-icon.png') no-repeat center center; 1028 | background-size: 20px 20px; 1029 | } 1030 | 1031 | @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { 1032 | .content-link { 1033 | background-image: url('/img/link-icon@2x.png'); 1034 | } 1035 | } 1036 | 1037 | 1038 | /* -------------------------- 1039 | * Code Styles 1040 | * -------------------------- 1041 | */ 1042 | 1043 | pre, 1044 | code { 1045 | font-family: Consolas, Courier, monospace; 1046 | color: #333; 1047 | background: rgb(250, 250, 250); 1048 | } 1049 | 1050 | code { 1051 | padding: 0.2em 0.4em; 1052 | white-space: nowrap; 1053 | } 1054 | .content p code { 1055 | font-size: 90%; 1056 | } 1057 | 1058 | .code { 1059 | margin-left: -1em; 1060 | margin-right: -1em; 1061 | padding: 1em; 1062 | border: 1px solid #eee; 1063 | border-left-width: 0; 1064 | border-right-width: 0; 1065 | overflow-x: auto; 1066 | -webkit-overflow-scrolling: touch; 1067 | } 1068 | .code code { 1069 | font-size: 95%; 1070 | white-space: pre; 1071 | word-wrap: normal; 1072 | padding: 0; 1073 | background: none; 1074 | } 1075 | .code-wrap code { 1076 | white-space: pre-wrap; 1077 | word-wrap: break-word; 1078 | } 1079 | 1080 | /* -------------------------- 1081 | * Footer Module Styles 1082 | * -------------------------- 1083 | */ 1084 | 1085 | .footer { 1086 | font-size: 87.5%; 1087 | border-top: 1px solid #eee; 1088 | margin-top: 3.4286em; 1089 | padding: 1.1429em; 1090 | background: rgb(250, 250, 250); 1091 | } 1092 | 1093 | .legal { 1094 | line-height: 1.6; 1095 | text-align: center; 1096 | margin: 0 auto; 1097 | } 1098 | 1099 | .legal-license { 1100 | margin-top: 0; 1101 | } 1102 | .legal-links { 1103 | list-style: none; 1104 | padding: 0; 1105 | margin-bottom: 0; 1106 | } 1107 | .legal-copyright { 1108 | margin-top: 0; 1109 | margin-bottom: 0; 1110 | } 1111 | 1112 | 1113 | /* -------------------------- 1114 | * Main Navigation Bar Styles 1115 | * -------------------------- 1116 | */ 1117 | 1118 | /* Add transition to containers so they can push in and out */ 1119 | #layout, 1120 | #menu, 1121 | .menu-link { 1122 | -webkit-transition: all 0.2s ease-out; 1123 | -moz-transition: all 0.2s ease-out; 1124 | -ms-transition: all 0.2s ease-out; 1125 | -o-transition: all 0.2s ease-out; 1126 | transition: all 0.2s ease-out; 1127 | } 1128 | 1129 | #layout.active .menu-link { 1130 | left: 160px; 1131 | } 1132 | 1133 | #menu { 1134 | margin-left: -160px; /* "#menu" width */ 1135 | width: 160px; 1136 | position: fixed; 1137 | top: 0; 1138 | left: 0; 1139 | bottom: 0; 1140 | z-index: 1000; /* so the menu or its navicon stays above all content */ 1141 | background: #191818; 1142 | overflow-y: auto; 1143 | -webkit-overflow-scrolling: touch; 1144 | } 1145 | #menu a { 1146 | color: #999; 1147 | border: none; 1148 | white-space: normal; 1149 | padding: 0.625em 1em; 1150 | } 1151 | 1152 | #menu .pure-menu-open { 1153 | background: transparent; 1154 | border: 0; 1155 | } 1156 | 1157 | #menu .pure-menu ul { 1158 | border: none; 1159 | background: transparent; 1160 | display: block; 1161 | } 1162 | 1163 | #menu .pure-menu ul, 1164 | #menu .pure-menu .menu-item-divided { 1165 | border-top: 1px solid #333; 1166 | } 1167 | 1168 | #menu .pure-menu li a:hover, 1169 | #menu .pure-menu li a:focus { 1170 | background: #333; 1171 | } 1172 | 1173 | .menu-link { 1174 | position: fixed; 1175 | display: block; /* show this only on small screens */ 1176 | top: 0; 1177 | left: 0; /* "#menu width" */ 1178 | background: #000; 1179 | background: rgba(0,0,0,0.7); 1180 | font-size: 11px; /* change this value to increase/decrease button size */ 1181 | z-index: 10; 1182 | width: 4em; 1183 | height: 4em; 1184 | padding: 1em; 1185 | } 1186 | 1187 | .menu-link:hover, 1188 | .menu-link:focus { 1189 | background: #000; 1190 | } 1191 | 1192 | .menu-link span { 1193 | position: relative; 1194 | display: block; 1195 | margin-top: 0.9em; 1196 | } 1197 | 1198 | .menu-link span, 1199 | .menu-link span:before, 1200 | .menu-link span:after { 1201 | background-color: #fff; 1202 | width: 100%; 1203 | height: .2em; 1204 | -webkit-transition: all 0.4s; 1205 | -moz-transition: all 0.4s; 1206 | -ms-transition: all 0.4s; 1207 | -o-transition: all 0.4s; 1208 | transition: all 0.4s; 1209 | } 1210 | 1211 | .menu-link span:before, 1212 | .menu-link span:after { 1213 | position: absolute; 1214 | top: -.55em; 1215 | content: " "; 1216 | } 1217 | 1218 | .menu-link span:after { 1219 | top: .55em; 1220 | } 1221 | 1222 | .menu-link.active span { 1223 | background: transparent; 1224 | } 1225 | 1226 | .menu-link.active span:before { 1227 | -webkit-transform: rotate(45deg) translate(.5em, .4em); 1228 | -moz-transform: rotate(45deg) translate(.5em, .4em); 1229 | -ms-transform: rotate(45deg) translate(.5em, .4em); 1230 | -o-transform: rotate(45deg) translate(.5em, .4em); 1231 | transform: rotate(45deg) translate(.5em, .4em); 1232 | } 1233 | 1234 | .menu-link.active span:after { 1235 | -webkit-transform: rotate(-45deg) translate(.4em, -.3em); 1236 | -moz-transform: rotate(-45deg) translate(.4em, -.3em); 1237 | -ms-transform: rotate(-45deg) translate(.4em, -.3em); 1238 | -o-transform: rotate(-45deg) translate(.4em, -.3em); 1239 | transform: rotate(-45deg) translate(.4em, -.3em); 1240 | } 1241 | 1242 | #menu .pure-menu-heading { 1243 | font-size: 125%; 1244 | font-weight: 300; 1245 | letter-spacing: 0.1em; 1246 | color: #fff; 1247 | margin-top: 0; 1248 | padding: 0.5em 0.8em; 1249 | text-transform: uppercase; 1250 | } 1251 | #menu .pure-menu-heading:hover, 1252 | #menu .pure-menu-heading:focus { 1253 | color: #999; 1254 | } 1255 | 1256 | #menu .pure-menu-selected { 1257 | background: #1f8dd6; 1258 | } 1259 | 1260 | #menu .pure-menu-selected a { 1261 | color: #fff; 1262 | } 1263 | 1264 | #menu li.pure-menu-selected a:hover, 1265 | #menu li.pure-menu-selected a:focus { 1266 | background: none; 1267 | } 1268 | 1269 | 1270 | 1271 | /* --------------------- 1272 | * Smaller Module Styles 1273 | * --------------------- 1274 | */ 1275 | 1276 | .pure-img-responsive { 1277 | max-width: 100%; 1278 | height: auto; 1279 | } 1280 | 1281 | .pure-paginator .pure-button { 1282 | -webkit-box-sizing: content-box; 1283 | -moz-box-sizing: content-box; 1284 | box-sizing: content-box; 1285 | } 1286 | 1287 | .pure-button { 1288 | font-family: inherit; 1289 | } 1290 | a.pure-button-primary { 1291 | color: white; 1292 | } 1293 | 1294 | 1295 | /* green call to action button class */ 1296 | .notice { 1297 | background-color: #61B842; 1298 | color: white; 1299 | } 1300 | 1301 | .muted { 1302 | color: #ccc; 1303 | } 1304 | 1305 | 1306 | 1307 | /* ------------- 1308 | * Table Styles 1309 | * ------------- 1310 | */ 1311 | 1312 | .pure-table th, 1313 | .pure-table td { 1314 | padding: 0.5em 1em; 1315 | } 1316 | 1317 | .table-responsive { 1318 | margin-left: -1em; 1319 | margin-right: -1em; 1320 | overflow-x: auto; 1321 | -webkit-overflow-scrolling: touch; 1322 | margin-bottom: 1em; 1323 | } 1324 | .table-responsive table { 1325 | width: 100%; 1326 | min-width: 35.5em; 1327 | border-left-width: 0; 1328 | border-right-width: 0; 1329 | } 1330 | 1331 | .table-responsive .mq-table { 1332 | width: 100%; 1333 | min-width: 44em; 1334 | } 1335 | .mq-table th.highlight { 1336 | background-color: rgb(255, 234, 133); 1337 | } 1338 | .mq-table td.highlight { 1339 | background-color: rgb(255, 250, 229); 1340 | } 1341 | .mq-table th.highlight code, 1342 | .mq-table td.highlight code { 1343 | background: rgb(255, 255, 243); 1344 | } 1345 | .mq-table-mq code { 1346 | font-size: 0.875em; 1347 | } 1348 | 1349 | /* ---------------------------- 1350 | * Example for full-width Grids 1351 | * ---------------------------- 1352 | */ 1353 | 1354 | .grids-example { 1355 | background: rgb(250, 250, 250); 1356 | margin: 2em auto; 1357 | border-top: 1px solid #ddd; 1358 | border-bottom: 1px solid #ddd; 1359 | } 1360 | 1361 | /* -------------------------- 1362 | * State Rules 1363 | * -------------------------- 1364 | */ 1365 | 1366 | 1367 | .is-code-full { 1368 | text-align: center; 1369 | } 1370 | .is-code-full .code { 1371 | margin-left: auto; 1372 | margin-right: auto; 1373 | } 1374 | 1375 | 1376 | /* -------------------------- 1377 | * Responsive Styles 1378 | * -------------------------- 1379 | */ 1380 | 1381 | @media screen and (min-width: 35.5em) { 1382 | 1383 | .legal-license { 1384 | text-align: left; 1385 | margin: 0; 1386 | } 1387 | .legal-copyright, 1388 | .legal-links, 1389 | .legal-links li { 1390 | text-align: right; 1391 | margin: 0; 1392 | } 1393 | 1394 | } 1395 | 1396 | @media screen and (min-width: 48em) { 1397 | 1398 | .l-wrap, 1399 | .l-wrap .content { 1400 | padding-left: 1em; 1401 | padding-right: 1em; 1402 | } 1403 | .content .l-wrap { 1404 | margin-left: -2em; 1405 | margin-right: -2em; 1406 | } 1407 | 1408 | .header, 1409 | .content { 1410 | padding-left: 2em; 1411 | padding-right: 2em; 1412 | } 1413 | 1414 | .header h1 { 1415 | font-size: 320%; 1416 | } 1417 | .header h2 { 1418 | font-size: 128%; 1419 | } 1420 | 1421 | .content p { 1422 | font-size: 1.125em; 1423 | } 1424 | 1425 | .code { 1426 | margin-left: auto; 1427 | margin-right: auto; 1428 | border-left-width: 1px; 1429 | border-right-width: 1px; 1430 | } 1431 | 1432 | .table-responsive { 1433 | margin-left: auto; 1434 | margin-right: auto; 1435 | } 1436 | .table-responsive table { 1437 | border-left-width: 1px; 1438 | border-right-width: 1px; 1439 | } 1440 | 1441 | } 1442 | 1443 | @media (max-width: 58em) { 1444 | /* Only apply this when the window is smaller. Otherwise, the following 1445 | case results in extra padding on the left: 1446 | * Make the window small. (Rotate to portrait on a mobile.) 1447 | * Tap the menu to trigger the active state. 1448 | * Make the window large again. (Rotate to landscape on mobile.) 1449 | */ 1450 | #layout.active { 1451 | position: relative; 1452 | left: 160px; 1453 | } 1454 | } 1455 | 1456 | @media (min-width: 58em) { 1457 | 1458 | #layout { 1459 | padding-left: 160px; /* left col width "#menu" */ 1460 | left: 0; 1461 | } 1462 | #menu { 1463 | left: 160px; 1464 | } 1465 | .menu-link { 1466 | position: fixed; 1467 | left: 160px; 1468 | display: none; 1469 | } 1470 | #layout.active .menu-link { 1471 | left: 160px; 1472 | } 1473 | 1474 | } 1475 | 1476 | /** 1477 | * Baby Blue theme for RainbowJS 1478 | * 1479 | * @author tilomitra 1480 | */ 1481 | 1482 | pre .comment { 1483 | color: #999; 1484 | } 1485 | 1486 | pre .tag, 1487 | pre .tag-name, 1488 | pre .support.tag-name { 1489 | color: rgb(85, 85, 85); 1490 | } 1491 | 1492 | pre .keyword, 1493 | pre .css-property, 1494 | pre .vendor-prefix, 1495 | pre .sass, 1496 | pre .class, 1497 | pre .id, 1498 | pre .css-value, 1499 | pre .entity.function, 1500 | pre .storage.function { 1501 | font-weight: bold; 1502 | } 1503 | 1504 | pre .css-property, 1505 | pre .css-value, 1506 | pre .vendor-prefix, 1507 | pre .support.namespace { 1508 | color: #333; 1509 | } 1510 | 1511 | pre .constant.numeric, 1512 | pre .keyword.unit, 1513 | pre .hex-color { 1514 | font-weight: normal; 1515 | color: #099; 1516 | } 1517 | 1518 | pre .attribute, 1519 | pre .variable, 1520 | pre .support { 1521 | color: #757575; /* skinbuilder block-page-text-normal with #1f8dd6 as primary */ 1522 | } 1523 | 1524 | pre .string, 1525 | pre .support.value { 1526 | font-weight: normal; 1527 | color: #3b8bba; /* skinbuilder block-mine-text-low with #1f8dd6 as primary */ 1528 | } --------------------------------------------------------------------------------