├── .gitignore ├── CNAME ├── README.md ├── ZeroClipboard.swf ├── css ├── Anonymous_Pro.eot ├── Anonymous_Pro.ttf ├── Anonymous_Pro.woff ├── build.css ├── build.min.css ├── colorpicker.css ├── light.css ├── matrices.css └── stylesheet.css ├── favicon.ico ├── filtertests ├── multipleFiltersInDifferentRuleSets.html └── multipleFiltersInSameRuleSets.html ├── grunt.js ├── img ├── clipboard.png ├── colorpicker │ ├── colorpicker_background.png │ ├── colorpicker_hex.png │ ├── colorpicker_hsb_b.png │ ├── colorpicker_hsb_h.png │ ├── colorpicker_hsb_s.png │ ├── colorpicker_indic.gif │ ├── colorpicker_overlay.png │ ├── colorpicker_rgb_b.png │ ├── colorpicker_rgb_g.png │ ├── colorpicker_rgb_r.png │ ├── colorpicker_select.gif │ ├── colorpicker_submit.png │ ├── custom_background.png │ ├── custom_hex.png │ ├── custom_hsb_b.png │ ├── custom_hsb_h.png │ ├── custom_hsb_s.png │ ├── custom_indic.gif │ ├── custom_rgb_b.png │ ├── custom_rgb_g.png │ ├── custom_rgb_r.png │ ├── custom_submit.png │ ├── select.png │ ├── select2.png │ └── slider.png ├── disabled.png ├── love.png ├── off.png ├── on.png ├── reset.png └── unchecked.png ├── index.html ├── javascript ├── analytics.js ├── build.js ├── build.min.js ├── cb_plugins.js ├── detect-flash.js ├── javascript.js ├── jcoglan.com │ ├── CHANGELOG.txt │ ├── sylvester.js │ ├── sylvester.js.gz │ └── sylvester.src.js ├── jquery-1.4.2.js ├── jquery-1.7.1.min.js ├── jquery.plugins.min.js └── zc │ ├── ZeroClipboard.as │ ├── ZeroClipboard.fla │ └── ZeroClipboard.js ├── test_math.html ├── test_math.js ├── test_ui.html └── tests.html /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /CNAME: -------------------------------------------------------------------------------- 1 | css3please.com -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | ## deprecated 3 | 4 | This site isn't well maintained. **Use Autoprefixer instead**: 5 | 6 | * https://github.com/postcss/autoprefixer#autoprefixer- 7 | * https://developers.google.com/web/fundamentals/tools/build/setupbuildprocess#dont-trip-up-with-vendor-prefixes 8 | * http://css-tricks.com/autoprefixer/ 9 | * use the sublime plugin for ez pz 10 | 11 | 12 |
13 | 14 | # [CSS3 Please](http://css3please.com/) 15 | 16 | ##$$ How to build after changing the CSS or JavaScript 17 | 18 | ```bash 19 | # Install grunt-css if you haven’t already 20 | npm install grunt-css 21 | # Then, just run `grunt` from the root directory of this project 22 | grunt 23 | ``` 24 | -------------------------------------------------------------------------------- /ZeroClipboard.swf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulirish/css3please/8e10cd11f068e65021f4cc0c78e15010c219c436/ZeroClipboard.swf -------------------------------------------------------------------------------- /css/Anonymous_Pro.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulirish/css3please/8e10cd11f068e65021f4cc0c78e15010c219c436/css/Anonymous_Pro.eot -------------------------------------------------------------------------------- /css/Anonymous_Pro.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulirish/css3please/8e10cd11f068e65021f4cc0c78e15010c219c436/css/Anonymous_Pro.ttf -------------------------------------------------------------------------------- /css/Anonymous_Pro.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulirish/css3please/8e10cd11f068e65021f4cc0c78e15010c219c436/css/Anonymous_Pro.woff -------------------------------------------------------------------------------- /css/build.css: -------------------------------------------------------------------------------- 1 | /*! css3please.com | 2013-03-27 12:43:59 */ 2 | 3 | html, body { 4 | padding:0; 5 | margin:0; 6 | background:#def; 7 | } 8 | 9 | body { 10 | font-family:arial,tahoma,verdana; 11 | font-size:75%; 12 | line-height:1.5; 13 | padding:20px; 14 | } 15 | 16 | h1 { 17 | font-family:georgia, garamond, serif; 18 | font-weight:normal; 19 | color:rgba(0,0,0,0.5); 20 | text-shadow: 1px 1px 2px rgba(0,0,0,0.25); 21 | } 22 | 23 | p { 24 | width:230px; 25 | } 26 | 27 | #save { 28 | width:300px; 29 | height:300px; 30 | padding:20px; 31 | position:absolute; 32 | left:50%; 33 | top:50%; 34 | margin:-150px 0 0 -150px; 35 | border:1px dashed rgba(0,0,0,0.5); 36 | color:rgba(0,0,0,0.5); 37 | 38 | -webkit-box-sizing: border-box; 39 | -moz-box-sizing: border-box; 40 | box-sizing: border-box; 41 | 42 | 43 | } 44 | #save a.reset { 45 | position:absolute; 46 | color:rgba(0,0,0,0.5); 47 | left:20px; 48 | bottom:20px; 49 | text-decoration:none; 50 | font-size:10px; 51 | } 52 | #save a.reset:hover { 53 | -webkit-transform: matrix(1.4172,-0.3424,0.3074,1.2345,0,0); 54 | -moz-transform: matrix(1.4172,-0.3424,0.3074,1.2345,0px,0px); 55 | -ms-transform: matrix(1.4172,-0.3424,0.3074,1.2345,0,0); 56 | -o-transform: matrix(1.4172,-0.3424,0.3074,1.2345,0,0); 57 | transform: matrix(1.4172,-0.3424,0.3074,1.2345,0,0); 58 | } 59 | 60 | #play { 61 | width:300px; 62 | height:300px; 63 | padding:20px; 64 | position:absolute; 65 | left:50%; 66 | top:50%; 67 | margin:-150px 0 0 -150px; 68 | background:#ffa; 69 | 70 | -webkit-user-select: none; 71 | 72 | -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.15); 73 | -moz-box-shadow: 0 0 10px rgba(0,0,0,0.15); 74 | box-shadow: 0 0 10px rgba(0,0,0,0.15); 75 | 76 | -webkit-box-sizing: border-box; 77 | -moz-box-sizing: border-box; 78 | box-sizing: border-box; 79 | 80 | -webkit-transform: translate3d(0,0,0); 81 | } 82 | #play span { 83 | position:absolute; 84 | border:1px solid silver; 85 | background:white; 86 | font-size:14px; 87 | padding:4px 8px; 88 | white-space:nowrap; 89 | cursor:pointer; 90 | 91 | -webkit-border-radius: 5px; 92 | -moz-border-radius: 5px; 93 | border-radius: 5px; 94 | } 95 | #play span:hover { 96 | border-color:gray; 97 | } 98 | 99 | #play .rotate { 100 | right:-65px; 101 | top:45%; 102 | cursor: n-resize; 103 | } 104 | 105 | #play .scale { 106 | bottom:-40px; 107 | right:-50px; 108 | cursor: nw-resize; 109 | 110 | -webkit-transform: rotate(45deg); 111 | -moz-transform: rotate(45deg); 112 | -ms-transform: rotate(45deg); 113 | -o-transform: rotate(45deg); 114 | transform: rotate(45deg); 115 | } 116 | 117 | #play .skewx { 118 | left:42%; 119 | bottom:-15px; 120 | cursor: w-resize; 121 | } 122 | 123 | #play .skewy { 124 | left:-25px; 125 | top:45%; 126 | cursor: n-resize; 127 | 128 | -webkit-transform: rotate(-90deg); 129 | -moz-transform: rotate(-90deg); 130 | -ms-transform: rotate(-90deg); 131 | -o-transform: rotate(-90deg); 132 | transform: rotate(-90deg); 133 | } 134 | 135 | #play .move { 136 | top:10px; 137 | right:10px; 138 | cursor: move; 139 | } 140 | 141 | #output { 142 | position:absolute; 143 | width:100%; 144 | bottom:0; 145 | left:0; 146 | padding:20px 20px; 147 | border-top:1px solid gray; 148 | background:#fff; 149 | font-family: courier new; 150 | text-align:center; 151 | white-space:pre; 152 | 153 | -webkit-box-sizing: border-box; 154 | -moz-box-sizing: border-box; 155 | box-sizing: border-box; 156 | } 157 | .colorpicker { 158 | width: 356px; 159 | height: 176px; 160 | overflow: hidden; 161 | position: absolute; 162 | background: url(../img/colorpicker/colorpicker_background.png); 163 | font-family: Arial, Helvetica, sans-serif; 164 | display: none; 165 | z-index: 100; 166 | } 167 | .colorpicker_color { 168 | width: 150px; 169 | height: 150px; 170 | left: 14px; 171 | top: 13px; 172 | position: absolute; 173 | background: #f00; 174 | overflow: hidden; 175 | cursor: crosshair; 176 | } 177 | .colorpicker_color div { 178 | position: absolute; 179 | top: 0; 180 | left: 0; 181 | width: 150px; 182 | height: 150px; 183 | background: url(../img/colorpicker/colorpicker_overlay.png); 184 | } 185 | .colorpicker_color div div { 186 | position: absolute; 187 | top: 0; 188 | left: 0; 189 | width: 11px; 190 | height: 11px; 191 | overflow: hidden; 192 | background: url(../img/colorpicker/colorpicker_select.gif); 193 | margin: -5px 0 0 -5px; 194 | } 195 | .colorpicker_hue { 196 | position: absolute; 197 | top: 13px; 198 | left: 171px; 199 | width: 35px; 200 | height: 150px; 201 | cursor: n-resize; 202 | } 203 | .colorpicker_hue div { 204 | position: absolute; 205 | width: 35px; 206 | height: 9px; 207 | overflow: hidden; 208 | background: url(../img/colorpicker/colorpicker_indic.gif) left top; 209 | margin: -4px 0 0 0; 210 | left: 0px; 211 | } 212 | .colorpicker_new_color { 213 | position: absolute; 214 | width: 60px; 215 | height: 30px; 216 | left: 213px; 217 | top: 13px; 218 | background: #f00; 219 | } 220 | .colorpicker_current_color { 221 | position: absolute; 222 | width: 60px; 223 | height: 30px; 224 | left: 283px; 225 | top: 13px; 226 | background: #f00; 227 | } 228 | .colorpicker input { 229 | background-color: transparent; 230 | border: 1px solid transparent; 231 | position: absolute; 232 | font-size: 10px; 233 | font-family: Arial, Helvetica, sans-serif; 234 | color: #898989; 235 | top: 4px; 236 | right: 11px; 237 | text-align: right; 238 | margin: 0; 239 | padding: 0; 240 | height: 11px; 241 | } 242 | .colorpicker_hex { 243 | position: absolute; 244 | width: 72px; 245 | height: 22px; 246 | background: url(../img/colorpicker/colorpicker_hex.png) top; 247 | left: 212px; 248 | top: 142px; 249 | } 250 | .colorpicker_hex input { 251 | right: 6px; 252 | } 253 | .colorpicker_field { 254 | height: 22px; 255 | width: 62px; 256 | background-position: top; 257 | position: absolute; 258 | } 259 | .colorpicker_field span { 260 | position: absolute; 261 | width: 12px; 262 | height: 22px; 263 | overflow: hidden; 264 | top: 0; 265 | right: 0; 266 | cursor: n-resize; 267 | } 268 | .colorpicker_rgb_r { 269 | background-image: url(../img/colorpicker/colorpicker_rgb_r.png); 270 | top: 52px; 271 | left: 212px; 272 | } 273 | .colorpicker_rgb_g { 274 | background-image: url(../img/colorpicker/colorpicker_rgb_g.png); 275 | top: 82px; 276 | left: 212px; 277 | } 278 | .colorpicker_rgb_b { 279 | background-image: url(../img/colorpicker/colorpicker_rgb_b.png); 280 | top: 112px; 281 | left: 212px; 282 | } 283 | .colorpicker_hsb_h { 284 | background-image: url(../img/colorpicker/colorpicker_hsb_h.png); 285 | top: 52px; 286 | left: 282px; 287 | } 288 | .colorpicker_hsb_s { 289 | background-image: url(../img/colorpicker/colorpicker_hsb_s.png); 290 | top: 82px; 291 | left: 282px; 292 | } 293 | .colorpicker_hsb_b { 294 | background-image: url(../img/colorpicker/colorpicker_hsb_b.png); 295 | top: 112px; 296 | left: 282px; 297 | } 298 | .colorpicker_submit { 299 | position: absolute; 300 | width: 22px; 301 | height: 22px; 302 | background: url(../img/colorpicker/colorpicker_submit.png) top; 303 | left: 322px; 304 | top: 142px; 305 | overflow: hidden; 306 | } 307 | .colorpicker_focus { 308 | background-position: center; 309 | } 310 | .colorpicker_hex.colorpicker_focus { 311 | background-position: bottom; 312 | } 313 | .colorpicker_submit.colorpicker_focus { 314 | background-position: bottom; 315 | } 316 | .colorpicker_slider { 317 | background-position: bottom; 318 | } 319 | 320 | /* -------------------------------- 321 | Normalize CSS Reset v1.2 322 | Firefox IE Safari Chrome Opera 323 | Jonathan Neal 324 | jneal@liferay.com 325 | 01-28-2010 326 | --------------------------------*/ 327 | 328 | /* Global */ 329 | 330 | html { 331 | overflow-y: scroll; 332 | background:none; 333 | } 334 | 335 | article, 336 | aside, 337 | figure, 338 | footer, 339 | header, 340 | hgroup, 341 | nav, 342 | section { 343 | display: block; 344 | } 345 | 346 | a { 347 | cursor: pointer; 348 | outline: none; 349 | } 350 | a:link { color: #aaa;} 351 | 352 | q:before, 353 | q:after { 354 | content: ""; 355 | } 356 | 357 | img { 358 | border: 0; 359 | vertical-align: text-bottom; 360 | } 361 | 362 | table { 363 | border-collapse: collapse; 364 | } 365 | 366 | /* Box Model */ 367 | 368 | h1, 369 | h2, 370 | h3, 371 | h4, 372 | h5, 373 | h6 { 374 | margin: 20px 0; 375 | } 376 | 377 | blockquote, 378 | dl, 379 | ol, 380 | menu, 381 | p, 382 | pre, 383 | ul { 384 | margin: 16px 0; 385 | } 386 | 387 | body { 388 | margin: 8px; 389 | } 390 | 391 | ol, 392 | ul ol { 393 | list-style: decimal outside; 394 | } 395 | 396 | ul, 397 | ol ul { 398 | list-style: disc outside; 399 | } 400 | 401 | ul ul { 402 | list-style: circle; 403 | } 404 | 405 | ol ol { 406 | list-style: upper-roman; 407 | } 408 | 409 | .rule_wrapper { 410 | margin: 0 0 15px 0; 411 | position: relative; 412 | } 413 | 414 | /* Toolbox */ 415 | 416 | .toolbox_container { 417 | position: absolute; visibility:hidden; 418 | bottom: 18px; left: 15px; 419 | } 420 | 421 | .rule_wrapper:hover .toolbox_container { visibility:visible; } 422 | 423 | .toolbox { 424 | position: relative; 425 | display: block; 426 | /* 427 | background: #05070e; 428 | border: 1px solid #1b2448; 429 | width: 100px; 430 | padding: 3px; 431 | height: 24px; 432 | */ 433 | -moz-border-radius: 3px; 434 | -webkit-border-radius: 3px; 435 | border-radius: 3px; 436 | 437 | } 438 | 439 | .button_container { 440 | position: relative; 441 | float: left; 442 | } 443 | 444 | .copybutton { 445 | width: 24px; 446 | height: 24px; 447 | background: url(../img/clipboard.png) no-repeat 0 0; 448 | background-position: 0 0; 449 | background-position-x: 0; 450 | background-position-y: 0; 451 | } 452 | 453 | .copybutton.hover { 454 | background: url(../img/clipboard.png) no-repeat 0 -24px; 455 | background-position: 0 -24px; 456 | background-position-x: 0; 457 | background-position-y: -24px; 458 | } 459 | 460 | .resetbutton { 461 | width: 24px; 462 | height: 24px; 463 | background: url(../img/reset.png) no-repeat 0 0; 464 | background-position: 0 0; 465 | background-position-x: 0; 466 | background-position-y: 0; 467 | 468 | display:none; 469 | } 470 | 471 | .resetbutton:hover { 472 | background: url(../img/reset.png) no-repeat 0 -24px; 473 | background-position: 0 -24px; 474 | background-position-x: 0; 475 | background-position-y: -24px; 476 | } 477 | /* Color */ 478 | 479 | abbr { 480 | border-bottom: 1px dotted; 481 | border-bottom-color: inherit; 482 | } 483 | 484 | body { 485 | background-color: #FFF; 486 | color: #d8d8d8; 487 | } 488 | 489 | hr { 490 | border: 0 solid #808080; 491 | border-width: 0 0 1px; 492 | height: 0; 493 | } 494 | 495 | /* Fonts */ 496 | 497 | body { 498 | font: 16px/20px Times, "Times New Roman", Georgia, serif; 499 | } 500 | 501 | code, 502 | h3, 503 | h4, 504 | h5, 505 | h6, 506 | kbd, 507 | listing, 508 | pre, 509 | samp, 510 | tt { 511 | line-height: 20px; 512 | } 513 | 514 | h1 { 515 | font-size: 32px; 516 | line-height: 40px; 517 | } 518 | 519 | h2 { 520 | font-size: 24px; 521 | line-height: 30px; 522 | } 523 | 524 | h3 { 525 | font-size: 18px; 526 | } 527 | 528 | h4, 529 | h5, 530 | h6 { 531 | font-size: 16px; 532 | } 533 | 534 | sub, 535 | sup { 536 | font-size: 12px; 537 | line-height: 0; 538 | } 539 | 540 | code, 541 | kbd, 542 | listing, 543 | pre, 544 | samp, 545 | tt { 546 | font-size: 13px; 547 | } 548 | 549 | dfn { 550 | font-style: italic; 551 | } 552 | 553 | /* -------------------------------- 554 | CSS34All Theme 555 | Jonathan Neal 556 | jneal@liferay.com 557 | 01-28-2010 558 | --------------------------------*/ 559 | 560 | body { 561 | background-color: #0c1021; /*was url(../img/texture.jpg)*/ 562 | overflow-x: hidden; 563 | 564 | 565 | } 566 | 567 | #sandboxwrap { 568 | position: fixed; 569 | right: 25px; 570 | top: 50px; 571 | z-index: 10; 572 | } 573 | #sandbox { 574 | font-family: "goudy-bookletter-1911-1","goudy-bookletter-1911-2","Baskerville","Georgia",serif; 575 | border:1px solid rgba(21, 11, 11, 0.2); 576 | overflow: hidden; 577 | padding: 20px; 578 | 579 | width: 440px; 580 | z-index: 2; 581 | color: rgba(0, 0, 0, 0.6); 582 | font-size: 16px; 583 | /* text-shadow: 0px 0px 1px rgba(255, 255, 255, .1); */ 584 | } 585 | #sandbox h1{ 586 | font-weight: normal; 587 | margin: 0 0 20px 0; 588 | font-size: 56px; 589 | word-spacing: 2px; 590 | } 591 | #sandbox abbr{ 592 | cursor: help; 593 | font-size: 1.3em; 594 | color: #ff2166; 595 | text-shadow: 0px 0px 1px #333; 596 | border-bottom: 1px dashed #888; 597 | } 598 | #sandbox p{ 599 | font-size: 30px; 600 | line-height: 50px; 601 | margin: 0; 602 | width: auto; 603 | } 604 | 605 | .rule, 606 | .rule input { 607 | font: 14px/20px Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace; 608 | white-space: pre; 609 | margin: 0; 610 | position: relative; 611 | z-index: 1; 612 | display: inline 613 | } 614 | .bracket { color: #f8f8f8; } 615 | 616 | .rule .comment { 617 | color: #0088ff; 618 | color: rgba(0,136,255,.9); 619 | } 620 | .rule.comment { display:block;} 621 | .comment a { color:inherit; text-decoration:none; 622 | } 623 | 624 | .commentedout .endcomment { display:none;} 625 | .commentclose { visibility:hidden;} 626 | .commentedout .commentclose { visibility:visible;} 627 | .commentedout .rule , .commentedout .rule span{ color: #0088ff; color: rgba(0,136,255,.9) !important;} 628 | body .declaration .comment, span.comment .comment { color: rgba(0,136,255,.3) !important } 629 | 630 | pre.comment .comment { color: rgba(0,136,255,.5); 631 | -moz-transition: color 0.6s ease-out; /* FF3.7+ */ 632 | -o-transition: color 0.6s ease-out; /* Opera 10.5 */ 633 | -webkit-transition: color 0.6s ease-out; /* Saf3.2+, Chrome */ 634 | } 635 | 636 | 637 | 638 | .rule_wrapper:hover pre.comment .comment { color: rgba(0,136,255,.9);} 639 | 640 | .rule_wrapper pre.comment span.comment a:hover, 641 | .rule_wrapper pre.comment span.comment a.hover { color: rgba(0,136,255,1);} 642 | 643 | body .commentclose .comment { color: rgba(0,136,255,.9) !important;} 644 | 645 | .footer .comment a, .comment a { border-bottom: 1px solid hsla(208, 100%, 70%, 0.4) !important } 646 | 647 | .rule .selector { 648 | color: #ff6400; 649 | } 650 | 651 | .rule .property, span.ie { 652 | color: #8da6ce; 653 | } 654 | .rule .comment .declaration { color: #8da6ce; } 655 | 656 | .rule .value, span.ie .filter { 657 | color: #61ce3c; 658 | } 659 | 660 | .rule b { 661 | border-bottom: 1px dotted #808080; 662 | color: #d8fa3c; 663 | font-weight: normal; 664 | padding: 0 0 1px; 665 | position: relative; 666 | } 667 | .rule b[readonly] { border-bottom: 0; opacity: .82} 668 | .commentedout .rule b[readonly] { opacity: 1} 669 | 670 | 671 | .rule b input { 672 | background: none; 673 | border: 0; 674 | color: inherit; 675 | display: none; 676 | left: -1px; 677 | min-width: 2em; 678 | outline: 0; 679 | padding: 0; 680 | position: absolute; 681 | top: 0; 682 | width: 200%; 683 | } 684 | 685 | .rule b.edit span { 686 | visibility: hidden; 687 | } 688 | 689 | .rule b.edit input { 690 | display: inline; 691 | color: white; 692 | } 693 | #guestbook{position:absolute;right:10px;padding-bottom: 10px; } 694 | 695 | 696 | ::-moz-selection{ 697 | background: #FF5E99; 698 | color:#fff; 699 | } 700 | 701 | ::selection { 702 | background:#FF5E99; 703 | color:#fff; 704 | } 705 | 706 | /* -------------------------------- 707 | Curtis Blackwell's Changes 708 | blackwell.curtis@gmail.com 709 | 11.4.10 710 | --------------------------------*/ 711 | 712 | #sandbox { margin-bottom: 20px; } 713 | 714 | #sandboxwrap .rule.comment { text-align: right; } 715 | 716 | body { 717 | -webkit-transition: background-color 0.5s ease-out; /* Saf3.2+, Chrome */ 718 | -moz-transition: background-color 0.5s ease-out; /* FF4+ */ 719 | -ms-transition: background-color 0.5s ease-out; /* IE10? */ 720 | -o-transition: background-color 0.5s ease-out; /* Opera 10.5+ */ 721 | transition: background-color 0.5s ease-out; 722 | } 723 | 724 | /* @mathias */ 725 | 726 | .cb { display: none; } 727 | .flash .cb { display: inline; } 728 | 729 | 730 | /* overruling the new matrix stuff. */ 731 | 732 | 733 | #matrixbox { position:relative; top: 160px;} 734 | #output { position: static; background: none; border: 0; 735 | text-align: inherit; 736 | font-family: inherit; 737 | } 738 | #box_matrix { 739 | position: relative; 740 | z-index: 10; 741 | background: #0c1021; 742 | min-height: 270px; 743 | margin-right: -10px; 744 | } 745 | 746 | 747 | 748 | #play, #save { 749 | height: 160px; 750 | width: 160px; 751 | padding: 50px; 752 | text-align: center; 753 | right: 12%; 754 | z-index: 20; 755 | left: auto; 756 | color:black; 757 | } 758 | #save { color: white; 759 | border-color: white; } 760 | .light body, .light #box_matrix { 761 | background-color: #eee; 762 | background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#fff)); /* Saf4+, Chrome */ 763 | background-image: -webkit-linear-gradient(top, #eee, #fff); /* Chrome 10+, Saf5.1+, iOS 5+ */ 764 | background-image: -moz-linear-gradient(top, #eee, #fff); /* FF3.6+ */ 765 | background-image: -o-linear-gradient(top, #eee, #fff); /* Opera 11.10+ */ 766 | background-image: linear-gradient(to bottom, #eee, #fff); 767 | color: #ff6400; 768 | } 769 | 770 | .light .rule_wrapper pre.comment .comment, 771 | .light .rule .comment, 772 | .light .commentedout .rule, 773 | .light .commentedout .rule span { 774 | color: #50bd2b !important; 775 | } 776 | 777 | .light .rule_wrapper:hover pre.comment .comment, 778 | .light .rule_wrapper pre.comment span.comment a:hover, 779 | .light .rule_wrapper pre.comment span.comment a.hover { 780 | color: #2d9e06; 781 | } 782 | 783 | .light .rule .property, span.ie { 784 | color: #333; 785 | } 786 | 787 | .light .rule b { 788 | color: rgba(0, 136, 255, 0.898438); 789 | } 790 | 791 | .light .rule b.edit input { 792 | color: red; 793 | } 794 | 795 | .light .rule .value, span.ie .filter { 796 | color: saddleBrown; 797 | } 798 | 799 | .light .footer .comment a, 800 | .light .comment a { 801 | border-bottom: 1px solid #50bd2b; 802 | } 803 | 804 | .light .rule.comment .comment a { 805 | border-bottom: none; 806 | } -------------------------------------------------------------------------------- /css/build.min.css: -------------------------------------------------------------------------------- 1 | /*! css3please.com | 2013-03-27 12:43:59 */ 2 | html,body{padding:0;margin:0;background:#def}body{font-family:arial,tahoma,verdana;font-size:75%;line-height:1.5;padding:20px}h1{font-family:georgia,garamond,serif;font-weight:normal;color:rgba(0,0,0,0.5);text-shadow:1px 1px 2px rgba(0,0,0,0.25)}p{width:230px}#save{width:300px;height:300px;padding:20px;position:absolute;left:50%;top:50%;margin:-150px 0 0 -150px;border:1px dashed rgba(0,0,0,0.5);color:rgba(0,0,0,0.5);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}#save a.reset{position:absolute;color:rgba(0,0,0,0.5);left:20px;bottom:20px;text-decoration:none;font-size:10px}#save a.reset:hover{-webkit-transform:matrix(1.4172,-0.3424,0.3074,1.2345,0,0);-moz-transform:matrix(1.4172,-0.3424,0.3074,1.2345,0px,0px);-ms-transform:matrix(1.4172,-0.3424,0.3074,1.2345,0,0);-o-transform:matrix(1.4172,-0.3424,0.3074,1.2345,0,0);transform:matrix(1.4172,-0.3424,0.3074,1.2345,0,0)}#play{width:300px;height:300px;padding:20px;position:absolute;left:50%;top:50%;margin:-150px 0 0 -150px;background:#ffa;-webkit-user-select:none;-webkit-box-shadow:0 0 10px rgba(0,0,0,0.15);-moz-box-shadow:0 0 10px rgba(0,0,0,0.15);box-shadow:0 0 10px rgba(0,0,0,0.15);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-transform:translate3d(0,0,0)}#play span{position:absolute;border:1px solid silver;background:white;font-size:14px;padding:4px 8px;white-space:nowrap;cursor:pointer;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}#play span:hover{border-color:gray}#play .rotate{right:-65px;top:45%;cursor:n-resize}#play .scale{bottom:-40px;right:-50px;cursor:nw-resize;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}#play .skewx{left:42%;bottom:-15px;cursor:w-resize}#play .skewy{left:-25px;top:45%;cursor:n-resize;-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-ms-transform:rotate(-90deg);-o-transform:rotate(-90deg);transform:rotate(-90deg)}#play .move{top:10px;right:10px;cursor:move}#output{position:absolute;width:100%;bottom:0;left:0;padding:20px 20px;border-top:1px solid gray;background:#fff;font-family:courier new;text-align:center;white-space:pre;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.colorpicker{width:356px;height:176px;overflow:hidden;position:absolute;background:url(../img/colorpicker/colorpicker_background.png);font-family:Arial,Helvetica,sans-serif;display:none;z-index:100}.colorpicker_color{width:150px;height:150px;left:14px;top:13px;position:absolute;background:#f00;overflow:hidden;cursor:crosshair}.colorpicker_color div{position:absolute;top:0;left:0;width:150px;height:150px;background:url(../img/colorpicker/colorpicker_overlay.png)}.colorpicker_color div div{position:absolute;top:0;left:0;width:11px;height:11px;overflow:hidden;background:url(../img/colorpicker/colorpicker_select.gif);margin:-5px 0 0 -5px}.colorpicker_hue{position:absolute;top:13px;left:171px;width:35px;height:150px;cursor:n-resize}.colorpicker_hue div{position:absolute;width:35px;height:9px;overflow:hidden;background:url(../img/colorpicker/colorpicker_indic.gif) left top;margin:-4px 0 0 0;left:0}.colorpicker_new_color{position:absolute;width:60px;height:30px;left:213px;top:13px;background:#f00}.colorpicker_current_color{position:absolute;width:60px;height:30px;left:283px;top:13px;background:#f00}.colorpicker input{background-color:transparent;border:1px solid transparent;position:absolute;font-size:10px;font-family:Arial,Helvetica,sans-serif;color:#898989;top:4px;right:11px;text-align:right;margin:0;padding:0;height:11px}.colorpicker_hex{position:absolute;width:72px;height:22px;background:url(../img/colorpicker/colorpicker_hex.png) top;left:212px;top:142px}.colorpicker_hex input{right:6px}.colorpicker_field{height:22px;width:62px;background-position:top;position:absolute}.colorpicker_field span{position:absolute;width:12px;height:22px;overflow:hidden;top:0;right:0;cursor:n-resize}.colorpicker_rgb_r{background-image:url(../img/colorpicker/colorpicker_rgb_r.png);top:52px;left:212px}.colorpicker_rgb_g{background-image:url(../img/colorpicker/colorpicker_rgb_g.png);top:82px;left:212px}.colorpicker_rgb_b{background-image:url(../img/colorpicker/colorpicker_rgb_b.png);top:112px;left:212px}.colorpicker_hsb_h{background-image:url(../img/colorpicker/colorpicker_hsb_h.png);top:52px;left:282px}.colorpicker_hsb_s{background-image:url(../img/colorpicker/colorpicker_hsb_s.png);top:82px;left:282px}.colorpicker_hsb_b{background-image:url(../img/colorpicker/colorpicker_hsb_b.png);top:112px;left:282px}.colorpicker_submit{position:absolute;width:22px;height:22px;background:url(../img/colorpicker/colorpicker_submit.png) top;left:322px;top:142px;overflow:hidden}.colorpicker_focus{background-position:center}.colorpicker_hex.colorpicker_focus{background-position:bottom}.colorpicker_submit.colorpicker_focus{background-position:bottom}.colorpicker_slider{background-position:bottom}html{overflow-y:scroll;background:none}article,aside,figure,footer,header,hgroup,nav,section{display:block}a{cursor:pointer;outline:none}a:link{color:#aaa}q:before,q:after{content:""}img{border:0;vertical-align:text-bottom}table{border-collapse:collapse}h1,h2,h3,h4,h5,h6{margin:20px 0}blockquote,dl,ol,menu,p,pre,ul{margin:16px 0}body{margin:8px}ol,ul ol{list-style:decimal outside}ul,ol ul{list-style:disc outside}ul ul{list-style:circle}ol ol{list-style:upper-roman}.rule_wrapper{margin:0 0 15px 0;position:relative}.toolbox_container{position:absolute;visibility:hidden;bottom:18px;left:15px}.rule_wrapper:hover .toolbox_container{visibility:visible}.toolbox{position:relative;display:block;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}.button_container{position:relative;float:left}.copybutton{width:24px;height:24px;background:url(../img/clipboard.png) no-repeat 0 0;background-position:0 0;background-position-x:0;background-position-y:0}.copybutton.hover{background:url(../img/clipboard.png) no-repeat 0 -24px;background-position:0 -24px;background-position-x:0;background-position-y:-24px}.resetbutton{width:24px;height:24px;background:url(../img/reset.png) no-repeat 0 0;background-position:0 0;background-position-x:0;background-position-y:0;display:none}.resetbutton:hover{background:url(../img/reset.png) no-repeat 0 -24px;background-position:0 -24px;background-position-x:0;background-position-y:-24px}abbr{border-bottom:1px dotted;border-bottom-color:inherit}body{background-color:#FFF;color:#d8d8d8}hr{border:0 solid #808080;border-width:0 0 1px;height:0}body{font:16px/20px Times,"Times New Roman",Georgia,serif}code,h3,h4,h5,h6,kbd,listing,pre,samp,tt{line-height:20px}h1{font-size:32px;line-height:40px}h2{font-size:24px;line-height:30px}h3{font-size:18px}h4,h5,h6{font-size:16px}sub,sup{font-size:12px;line-height:0}code,kbd,listing,pre,samp,tt{font-size:13px}dfn{font-style:italic}body{background-color:#0c1021;overflow-x:hidden}#sandboxwrap{position:fixed;right:25px;top:50px;z-index:10}#sandbox{font-family:"goudy-bookletter-1911-1","goudy-bookletter-1911-2","Baskerville","Georgia",serif;border:1px solid rgba(21,11,11,0.2);overflow:hidden;padding:20px;width:440px;z-index:2;color:rgba(0,0,0,0.6);font-size:16px}#sandbox h1{font-weight:normal;margin:0 0 20px 0;font-size:56px;word-spacing:2px}#sandbox abbr{cursor:help;font-size:1.3em;color:#ff2166;text-shadow:0 0 1px #333;border-bottom:1px dashed #888}#sandbox p{font-size:30px;line-height:50px;margin:0;width:auto}.rule,.rule input{font:14px/20px Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,monospace;white-space:pre;margin:0;position:relative;z-index:1;display:inline}.bracket{color:#f8f8f8}.rule .comment{color:#08f;color:rgba(0,136,255,.9)}.rule.comment{display:block}.comment a{color:inherit;text-decoration:none}.commentedout .endcomment{display:none}.commentclose{visibility:hidden}.commentedout .commentclose{visibility:visible}.commentedout .rule,.commentedout .rule span{color:#08f;color:rgba(0,136,255,.9)!important}body .declaration .comment,span.comment .comment{color:rgba(0,136,255,.3)!important}pre.comment .comment{color:rgba(0,136,255,.5);-moz-transition:color 0.6s ease-out;-o-transition:color 0.6s ease-out;-webkit-transition:color 0.6s ease-out}.rule_wrapper:hover pre.comment .comment{color:rgba(0,136,255,.9)}.rule_wrapper pre.comment span.comment a:hover,.rule_wrapper pre.comment span.comment a.hover{color:rgba(0,136,255,1)}body .commentclose .comment{color:rgba(0,136,255,.9)!important}.footer .comment a,.comment a{border-bottom:1px solid hsla(208,100%,70%,0.4)!important}.rule .selector{color:#ff6400}.rule .property,span.ie{color:#8da6ce}.rule .comment .declaration{color:#8da6ce}.rule .value,span.ie .filter{color:#61ce3c}.rule b{border-bottom:1px dotted #808080;color:#d8fa3c;font-weight:normal;padding:0 0 1px;position:relative}.rule b[readonly]{border-bottom:0;opacity:.82}.commentedout .rule b[readonly]{opacity:1}.rule b input{background:none;border:0;color:inherit;display:none;left:-1px;min-width:2em;outline:0;padding:0;position:absolute;top:0;width:200%}.rule b.edit span{visibility:hidden}.rule b.edit input{display:inline;color:white}#guestbook{position:absolute;right:10px;padding-bottom:10px}::-moz-selection{background:#FF5E99;color:#fff}::selection{background:#FF5E99;color:#fff}#sandbox{margin-bottom:20px}#sandboxwrap .rule.comment{text-align:right}body{-webkit-transition:background-color 0.5s ease-out;-moz-transition:background-color 0.5s ease-out;-ms-transition:background-color 0.5s ease-out;-o-transition:background-color 0.5s ease-out;transition:background-color 0.5s ease-out}.cb{display:none}.flash .cb{display:inline}#matrixbox{position:relative;top:160px}#output{position:static;background:none;border:0;text-align:inherit;font-family:inherit}#box_matrix{position:relative;z-index:10;background:#0c1021;min-height:270px;margin-right:-10px}#play,#save{height:160px;width:160px;padding:50px;text-align:center;right:12%;z-index:20;left:auto;color:black}#save{color:white;border-color:white}.light body,.light #box_matrix{background-color:#eee;background-image:-webkit-gradient(linear,left top,left bottom,from(#eee),to(#fff));background-image:-webkit-linear-gradient(top,#eee,#fff);background-image:-moz-linear-gradient(top,#eee,#fff);background-image:-o-linear-gradient(top,#eee,#fff);background-image:linear-gradient(to bottom,#eee,#fff);color:#ff6400}.light .rule_wrapper pre.comment .comment,.light .rule .comment,.light .commentedout .rule,.light .commentedout .rule span{color:#50bd2b!important}.light .rule_wrapper:hover pre.comment .comment,.light .rule_wrapper pre.comment span.comment a:hover,.light .rule_wrapper pre.comment span.comment a.hover{color:#2d9e06}.light .rule .property,span.ie{color:#333}.light .rule b{color:rgba(0,136,255,0.898438)}.light .rule b.edit input{color:red}.light .rule .value,span.ie .filter{color:saddleBrown}.light .footer .comment a,.light .comment a{border-bottom:1px solid #50bd2b}.light .rule.comment .comment a{border-bottom:none} -------------------------------------------------------------------------------- /css/colorpicker.css: -------------------------------------------------------------------------------- 1 | .colorpicker { 2 | width: 356px; 3 | height: 176px; 4 | overflow: hidden; 5 | position: absolute; 6 | background: url(../img/colorpicker/colorpicker_background.png); 7 | font-family: Arial, Helvetica, sans-serif; 8 | display: none; 9 | z-index: 100; 10 | } 11 | .colorpicker_color { 12 | width: 150px; 13 | height: 150px; 14 | left: 14px; 15 | top: 13px; 16 | position: absolute; 17 | background: #f00; 18 | overflow: hidden; 19 | cursor: crosshair; 20 | } 21 | .colorpicker_color div { 22 | position: absolute; 23 | top: 0; 24 | left: 0; 25 | width: 150px; 26 | height: 150px; 27 | background: url(../img/colorpicker/colorpicker_overlay.png); 28 | } 29 | .colorpicker_color div div { 30 | position: absolute; 31 | top: 0; 32 | left: 0; 33 | width: 11px; 34 | height: 11px; 35 | overflow: hidden; 36 | background: url(../img/colorpicker/colorpicker_select.gif); 37 | margin: -5px 0 0 -5px; 38 | } 39 | .colorpicker_hue { 40 | position: absolute; 41 | top: 13px; 42 | left: 171px; 43 | width: 35px; 44 | height: 150px; 45 | cursor: n-resize; 46 | } 47 | .colorpicker_hue div { 48 | position: absolute; 49 | width: 35px; 50 | height: 9px; 51 | overflow: hidden; 52 | background: url(../img/colorpicker/colorpicker_indic.gif) left top; 53 | margin: -4px 0 0 0; 54 | left: 0px; 55 | } 56 | .colorpicker_new_color { 57 | position: absolute; 58 | width: 60px; 59 | height: 30px; 60 | left: 213px; 61 | top: 13px; 62 | background: #f00; 63 | } 64 | .colorpicker_current_color { 65 | position: absolute; 66 | width: 60px; 67 | height: 30px; 68 | left: 283px; 69 | top: 13px; 70 | background: #f00; 71 | } 72 | .colorpicker input { 73 | background-color: transparent; 74 | border: 1px solid transparent; 75 | position: absolute; 76 | font-size: 10px; 77 | font-family: Arial, Helvetica, sans-serif; 78 | color: #898989; 79 | top: 4px; 80 | right: 11px; 81 | text-align: right; 82 | margin: 0; 83 | padding: 0; 84 | height: 11px; 85 | } 86 | .colorpicker_hex { 87 | position: absolute; 88 | width: 72px; 89 | height: 22px; 90 | background: url(../img/colorpicker/colorpicker_hex.png) top; 91 | left: 212px; 92 | top: 142px; 93 | } 94 | .colorpicker_hex input { 95 | right: 6px; 96 | } 97 | .colorpicker_field { 98 | height: 22px; 99 | width: 62px; 100 | background-position: top; 101 | position: absolute; 102 | } 103 | .colorpicker_field span { 104 | position: absolute; 105 | width: 12px; 106 | height: 22px; 107 | overflow: hidden; 108 | top: 0; 109 | right: 0; 110 | cursor: n-resize; 111 | } 112 | .colorpicker_rgb_r { 113 | background-image: url(../img/colorpicker/colorpicker_rgb_r.png); 114 | top: 52px; 115 | left: 212px; 116 | } 117 | .colorpicker_rgb_g { 118 | background-image: url(../img/colorpicker/colorpicker_rgb_g.png); 119 | top: 82px; 120 | left: 212px; 121 | } 122 | .colorpicker_rgb_b { 123 | background-image: url(../img/colorpicker/colorpicker_rgb_b.png); 124 | top: 112px; 125 | left: 212px; 126 | } 127 | .colorpicker_hsb_h { 128 | background-image: url(../img/colorpicker/colorpicker_hsb_h.png); 129 | top: 52px; 130 | left: 282px; 131 | } 132 | .colorpicker_hsb_s { 133 | background-image: url(../img/colorpicker/colorpicker_hsb_s.png); 134 | top: 82px; 135 | left: 282px; 136 | } 137 | .colorpicker_hsb_b { 138 | background-image: url(../img/colorpicker/colorpicker_hsb_b.png); 139 | top: 112px; 140 | left: 282px; 141 | } 142 | .colorpicker_submit { 143 | position: absolute; 144 | width: 22px; 145 | height: 22px; 146 | background: url(../img/colorpicker/colorpicker_submit.png) top; 147 | left: 322px; 148 | top: 142px; 149 | overflow: hidden; 150 | } 151 | .colorpicker_focus { 152 | background-position: center; 153 | } 154 | .colorpicker_hex.colorpicker_focus { 155 | background-position: bottom; 156 | } 157 | .colorpicker_submit.colorpicker_focus { 158 | background-position: bottom; 159 | } 160 | .colorpicker_slider { 161 | background-position: bottom; 162 | } 163 | -------------------------------------------------------------------------------- /css/light.css: -------------------------------------------------------------------------------- 1 | .light body, .light #box_matrix { 2 | background-color: #eee; 3 | background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#fff)); /* Saf4+, Chrome */ 4 | background-image: -webkit-linear-gradient(top, #eee, #fff); /* Chrome 10+, Saf5.1+, iOS 5+ */ 5 | background-image: -moz-linear-gradient(top, #eee, #fff); /* FF3.6+ */ 6 | background-image: -o-linear-gradient(top, #eee, #fff); /* Opera 11.10+ */ 7 | background-image: linear-gradient(to bottom, #eee, #fff); 8 | color: #ff6400; 9 | } 10 | 11 | .light .rule_wrapper pre.comment .comment, 12 | .light .rule .comment, 13 | .light .commentedout .rule, 14 | .light .commentedout .rule span { 15 | color: #50bd2b !important; 16 | } 17 | 18 | .light .rule_wrapper:hover pre.comment .comment, 19 | .light .rule_wrapper pre.comment span.comment a:hover, 20 | .light .rule_wrapper pre.comment span.comment a.hover { 21 | color: #2d9e06; 22 | } 23 | 24 | .light .rule .property, span.ie { 25 | color: #333; 26 | } 27 | 28 | .light .rule b { 29 | color: rgba(0, 136, 255, 0.898438); 30 | } 31 | 32 | .light .rule b.edit input { 33 | color: red; 34 | } 35 | 36 | .light .rule .value, span.ie .filter { 37 | color: saddleBrown; 38 | } 39 | 40 | .light .footer .comment a, 41 | .light .comment a { 42 | border-bottom: 1px solid #50bd2b; 43 | } 44 | 45 | .light .rule.comment .comment a { 46 | border-bottom: none; 47 | } -------------------------------------------------------------------------------- /css/matrices.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | padding:0; 3 | margin:0; 4 | background:#def; 5 | } 6 | 7 | body { 8 | font-family:arial,tahoma,verdana; 9 | font-size:75%; 10 | line-height:1.5; 11 | padding:20px; 12 | } 13 | 14 | h1 { 15 | font-family:georgia, garamond, serif; 16 | font-weight:normal; 17 | color:rgba(0,0,0,0.5); 18 | text-shadow: 1px 1px 2px rgba(0,0,0,0.25); 19 | } 20 | 21 | p { 22 | width:230px; 23 | } 24 | 25 | #save { 26 | width:300px; 27 | height:300px; 28 | padding:20px; 29 | position:absolute; 30 | left:50%; 31 | top:50%; 32 | margin:-150px 0 0 -150px; 33 | border:1px dashed rgba(0,0,0,0.5); 34 | color:rgba(0,0,0,0.5); 35 | 36 | -webkit-box-sizing: border-box; 37 | -moz-box-sizing: border-box; 38 | box-sizing: border-box; 39 | 40 | 41 | } 42 | #save a.reset { 43 | position:absolute; 44 | color:rgba(0,0,0,0.5); 45 | left:20px; 46 | bottom:20px; 47 | text-decoration:none; 48 | font-size:10px; 49 | } 50 | #save a.reset:hover { 51 | -webkit-transform: matrix(1.4172,-0.3424,0.3074,1.2345,0,0); 52 | -moz-transform: matrix(1.4172,-0.3424,0.3074,1.2345,0px,0px); 53 | -ms-transform: matrix(1.4172,-0.3424,0.3074,1.2345,0,0); 54 | -o-transform: matrix(1.4172,-0.3424,0.3074,1.2345,0,0); 55 | transform: matrix(1.4172,-0.3424,0.3074,1.2345,0,0); 56 | } 57 | 58 | #play { 59 | width:300px; 60 | height:300px; 61 | padding:20px; 62 | position:absolute; 63 | left:50%; 64 | top:50%; 65 | margin:-150px 0 0 -150px; 66 | background:#ffa; 67 | 68 | -webkit-user-select: none; 69 | 70 | -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.15); 71 | -moz-box-shadow: 0 0 10px rgba(0,0,0,0.15); 72 | box-shadow: 0 0 10px rgba(0,0,0,0.15); 73 | 74 | -webkit-box-sizing: border-box; 75 | -moz-box-sizing: border-box; 76 | box-sizing: border-box; 77 | 78 | -webkit-transform: translate3d(0,0,0); 79 | } 80 | #play span { 81 | position:absolute; 82 | border:1px solid silver; 83 | background:white; 84 | font-size:14px; 85 | padding:4px 8px; 86 | white-space:nowrap; 87 | cursor:pointer; 88 | 89 | -webkit-border-radius: 5px; 90 | -moz-border-radius: 5px; 91 | border-radius: 5px; 92 | } 93 | #play span:hover { 94 | border-color:gray; 95 | } 96 | 97 | #play .rotate { 98 | right:-65px; 99 | top:45%; 100 | cursor: n-resize; 101 | } 102 | 103 | #play .scale { 104 | bottom:-40px; 105 | right:-50px; 106 | cursor: nw-resize; 107 | 108 | -webkit-transform: rotate(45deg); 109 | -moz-transform: rotate(45deg); 110 | -ms-transform: rotate(45deg); 111 | -o-transform: rotate(45deg); 112 | transform: rotate(45deg); 113 | } 114 | 115 | #play .skewx { 116 | left:42%; 117 | bottom:-15px; 118 | cursor: w-resize; 119 | } 120 | 121 | #play .skewy { 122 | left:-25px; 123 | top:45%; 124 | cursor: n-resize; 125 | 126 | -webkit-transform: rotate(-90deg); 127 | -moz-transform: rotate(-90deg); 128 | -ms-transform: rotate(-90deg); 129 | -o-transform: rotate(-90deg); 130 | transform: rotate(-90deg); 131 | } 132 | 133 | #play .move { 134 | top:10px; 135 | right:10px; 136 | cursor: move; 137 | } 138 | 139 | #output { 140 | position:absolute; 141 | width:100%; 142 | bottom:0; 143 | left:0; 144 | padding:20px 20px; 145 | border-top:1px solid gray; 146 | background:#fff; 147 | font-family: courier new; 148 | text-align:center; 149 | white-space:pre; 150 | 151 | -webkit-box-sizing: border-box; 152 | -moz-box-sizing: border-box; 153 | box-sizing: border-box; 154 | } -------------------------------------------------------------------------------- /css/stylesheet.css: -------------------------------------------------------------------------------- 1 | /* -------------------------------- 2 | Normalize CSS Reset v1.2 3 | Firefox IE Safari Chrome Opera 4 | Jonathan Neal 5 | jneal@liferay.com 6 | 01-28-2010 7 | --------------------------------*/ 8 | 9 | /* Global */ 10 | 11 | html { 12 | overflow-y: scroll; 13 | background:none; 14 | } 15 | 16 | article, 17 | aside, 18 | figure, 19 | footer, 20 | header, 21 | hgroup, 22 | nav, 23 | section { 24 | display: block; 25 | } 26 | 27 | a { 28 | cursor: pointer; 29 | outline: none; 30 | } 31 | a:link { color: #aaa;} 32 | 33 | q:before, 34 | q:after { 35 | content: ""; 36 | } 37 | 38 | img { 39 | border: 0; 40 | vertical-align: text-bottom; 41 | } 42 | 43 | table { 44 | border-collapse: collapse; 45 | } 46 | 47 | /* Box Model */ 48 | 49 | h1, 50 | h2, 51 | h3, 52 | h4, 53 | h5, 54 | h6 { 55 | margin: 20px 0; 56 | } 57 | 58 | blockquote, 59 | dl, 60 | ol, 61 | menu, 62 | p, 63 | pre, 64 | ul { 65 | margin: 16px 0; 66 | } 67 | 68 | body { 69 | margin: 8px; 70 | } 71 | 72 | ol, 73 | ul ol { 74 | list-style: decimal outside; 75 | } 76 | 77 | ul, 78 | ol ul { 79 | list-style: disc outside; 80 | } 81 | 82 | ul ul { 83 | list-style: circle; 84 | } 85 | 86 | ol ol { 87 | list-style: upper-roman; 88 | } 89 | 90 | .rule_wrapper { 91 | margin: 0 0 15px 0; 92 | position: relative; 93 | } 94 | 95 | /* Toolbox */ 96 | 97 | .toolbox_container { 98 | position: absolute; visibility:hidden; 99 | bottom: 18px; left: 15px; 100 | } 101 | 102 | .rule_wrapper:hover .toolbox_container { visibility:visible; } 103 | 104 | .toolbox { 105 | position: relative; 106 | display: block; 107 | /* 108 | background: #05070e; 109 | border: 1px solid #1b2448; 110 | width: 100px; 111 | padding: 3px; 112 | height: 24px; 113 | */ 114 | -moz-border-radius: 3px; 115 | -webkit-border-radius: 3px; 116 | border-radius: 3px; 117 | 118 | } 119 | 120 | .button_container { 121 | position: relative; 122 | float: left; 123 | } 124 | 125 | .copybutton { 126 | width: 24px; 127 | height: 24px; 128 | background: url(../img/clipboard.png) no-repeat 0 0; 129 | background-position: 0 0; 130 | background-position-x: 0; 131 | background-position-y: 0; 132 | } 133 | 134 | .copybutton.hover { 135 | background: url(../img/clipboard.png) no-repeat 0 -24px; 136 | background-position: 0 -24px; 137 | background-position-x: 0; 138 | background-position-y: -24px; 139 | } 140 | 141 | .resetbutton { 142 | width: 24px; 143 | height: 24px; 144 | background: url(../img/reset.png) no-repeat 0 0; 145 | background-position: 0 0; 146 | background-position-x: 0; 147 | background-position-y: 0; 148 | 149 | display:none; 150 | } 151 | 152 | .resetbutton:hover { 153 | background: url(../img/reset.png) no-repeat 0 -24px; 154 | background-position: 0 -24px; 155 | background-position-x: 0; 156 | background-position-y: -24px; 157 | } 158 | /* Color */ 159 | 160 | abbr { 161 | border-bottom: 1px dotted; 162 | border-bottom-color: inherit; 163 | } 164 | 165 | body { 166 | background-color: #FFF; 167 | color: #d8d8d8; 168 | } 169 | 170 | hr { 171 | border: 0 solid #808080; 172 | border-width: 0 0 1px; 173 | height: 0; 174 | } 175 | 176 | /* Fonts */ 177 | 178 | body { 179 | font: 16px/20px Times, "Times New Roman", Georgia, serif; 180 | } 181 | 182 | code, 183 | h3, 184 | h4, 185 | h5, 186 | h6, 187 | kbd, 188 | listing, 189 | pre, 190 | samp, 191 | tt { 192 | line-height: 20px; 193 | } 194 | 195 | h1 { 196 | font-size: 32px; 197 | line-height: 40px; 198 | } 199 | 200 | h2 { 201 | font-size: 24px; 202 | line-height: 30px; 203 | } 204 | 205 | h3 { 206 | font-size: 18px; 207 | } 208 | 209 | h4, 210 | h5, 211 | h6 { 212 | font-size: 16px; 213 | } 214 | 215 | sub, 216 | sup { 217 | font-size: 12px; 218 | line-height: 0; 219 | } 220 | 221 | code, 222 | kbd, 223 | listing, 224 | pre, 225 | samp, 226 | tt { 227 | font-size: 13px; 228 | } 229 | 230 | dfn { 231 | font-style: italic; 232 | } 233 | 234 | /* -------------------------------- 235 | CSS34All Theme 236 | Jonathan Neal 237 | jneal@liferay.com 238 | 01-28-2010 239 | --------------------------------*/ 240 | 241 | body { 242 | background-color: #0c1021; /*was url(../img/texture.jpg)*/ 243 | overflow-x: hidden; 244 | 245 | 246 | } 247 | 248 | #sandboxwrap { 249 | position: fixed; 250 | right: 25px; 251 | top: 50px; 252 | z-index: 10; 253 | } 254 | #sandbox { 255 | font-family: "goudy-bookletter-1911-1","goudy-bookletter-1911-2","Baskerville","Georgia",serif; 256 | border:1px solid rgba(21, 11, 11, 0.2); 257 | overflow: hidden; 258 | padding: 20px; 259 | 260 | width: 440px; 261 | z-index: 2; 262 | color: rgba(0, 0, 0, 0.6); 263 | font-size: 16px; 264 | /* text-shadow: 0px 0px 1px rgba(255, 255, 255, .1); */ 265 | } 266 | #sandbox h1{ 267 | font-weight: normal; 268 | margin: 0 0 20px 0; 269 | font-size: 56px; 270 | word-spacing: 2px; 271 | } 272 | #sandbox abbr{ 273 | cursor: help; 274 | font-size: 1.3em; 275 | color: #ff2166; 276 | text-shadow: 0px 0px 1px #333; 277 | border-bottom: 1px dashed #888; 278 | } 279 | #sandbox p{ 280 | font-size: 30px; 281 | line-height: 50px; 282 | margin: 0; 283 | width: auto; 284 | } 285 | 286 | .rule, 287 | .rule input { 288 | font: 14px/20px Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace; 289 | white-space: pre; 290 | margin: 0; 291 | position: relative; 292 | z-index: 1; 293 | display: inline 294 | } 295 | .bracket { color: #f8f8f8; } 296 | 297 | .rule .comment { 298 | color: #0088ff; 299 | color: rgba(0,136,255,.9); 300 | } 301 | .rule.comment { display:block;} 302 | .comment a { color:inherit; text-decoration:none; 303 | } 304 | 305 | .commentedout .endcomment { display:none;} 306 | .commentclose { visibility:hidden;} 307 | .commentedout .commentclose { visibility:visible;} 308 | .commentedout .rule , .commentedout .rule span{ color: #0088ff; color: rgba(0,136,255,.9) !important;} 309 | body .declaration .comment, span.comment .comment { color: rgba(0,136,255,.3) !important } 310 | 311 | pre.comment .comment { color: rgba(0,136,255,.5); 312 | -moz-transition: color 0.6s ease-out; /* FF3.7+ */ 313 | -o-transition: color 0.6s ease-out; /* Opera 10.5 */ 314 | -webkit-transition: color 0.6s ease-out; /* Saf3.2+, Chrome */ 315 | } 316 | 317 | 318 | 319 | .rule_wrapper:hover pre.comment .comment { color: rgba(0,136,255,.9);} 320 | 321 | .rule_wrapper pre.comment span.comment a:hover, 322 | .rule_wrapper pre.comment span.comment a.hover { color: rgba(0,136,255,1);} 323 | 324 | body .commentclose .comment { color: rgba(0,136,255,.9) !important;} 325 | 326 | .footer .comment a, .comment a { border-bottom: 1px solid hsla(208, 100%, 70%, 0.4) !important } 327 | 328 | .rule .selector { 329 | color: #ff6400; 330 | } 331 | 332 | .rule .property, span.ie { 333 | color: #8da6ce; 334 | } 335 | .rule .comment .declaration { color: #8da6ce; } 336 | 337 | .rule .value, span.ie .filter { 338 | color: #61ce3c; 339 | } 340 | 341 | .rule b { 342 | border-bottom: 1px dotted #808080; 343 | color: #d8fa3c; 344 | font-weight: normal; 345 | padding: 0 0 1px; 346 | position: relative; 347 | } 348 | .rule b[readonly] { border-bottom: 0; opacity: .82} 349 | .commentedout .rule b[readonly] { opacity: 1} 350 | 351 | 352 | .rule b input { 353 | background: none; 354 | border: 0; 355 | color: inherit; 356 | display: none; 357 | left: -1px; 358 | min-width: 2em; 359 | outline: 0; 360 | padding: 0; 361 | position: absolute; 362 | top: 0; 363 | width: 200%; 364 | } 365 | 366 | .rule b.edit span { 367 | visibility: hidden; 368 | } 369 | 370 | .rule b.edit input { 371 | display: inline; 372 | color: white; 373 | } 374 | #guestbook{position:absolute;right:10px;padding-bottom: 10px; } 375 | 376 | 377 | ::-moz-selection{ 378 | background: #FF5E99; 379 | color:#fff; 380 | } 381 | 382 | ::selection { 383 | background:#FF5E99; 384 | color:#fff; 385 | } 386 | 387 | /* -------------------------------- 388 | Curtis Blackwell's Changes 389 | blackwell.curtis@gmail.com 390 | 11.4.10 391 | --------------------------------*/ 392 | 393 | #sandbox { margin-bottom: 20px; } 394 | 395 | #sandboxwrap .rule.comment { text-align: right; } 396 | 397 | body { 398 | -webkit-transition: background-color 0.5s ease-out; /* Saf3.2+, Chrome */ 399 | -moz-transition: background-color 0.5s ease-out; /* FF4+ */ 400 | -ms-transition: background-color 0.5s ease-out; /* IE10? */ 401 | -o-transition: background-color 0.5s ease-out; /* Opera 10.5+ */ 402 | transition: background-color 0.5s ease-out; 403 | } 404 | 405 | /* @mathias */ 406 | 407 | .cb { display: none; } 408 | .flash .cb { display: inline; } 409 | 410 | 411 | /* overruling the new matrix stuff. */ 412 | 413 | 414 | #matrixbox { position:relative; top: 160px;} 415 | #output { position: static; background: none; border: 0; 416 | text-align: inherit; 417 | font-family: inherit; 418 | } 419 | #box_matrix { 420 | position: relative; 421 | z-index: 10; 422 | background: #0c1021; 423 | min-height: 270px; 424 | margin-right: -10px; 425 | } 426 | 427 | 428 | 429 | #play, #save { 430 | height: 160px; 431 | width: 160px; 432 | padding: 50px; 433 | text-align: center; 434 | right: 12%; 435 | z-index: 20; 436 | left: auto; 437 | color:black; 438 | } 439 | #save { color: white; 440 | border-color: white; } -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulirish/css3please/8e10cd11f068e65021f4cc0c78e15010c219c436/favicon.ico -------------------------------------------------------------------------------- /filtertests/multipleFiltersInDifferentRuleSets.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Untitled Document 6 | 28 | 29 | 30 | 31 | 32 |
33 | 34 | This is an example. 35 | 36 |
37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /filtertests/multipleFiltersInSameRuleSets.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Untitled Document 6 | 28 | 29 | 30 | 31 | 32 |
33 | 34 | This is an example. 35 | 36 |
37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /grunt.js: -------------------------------------------------------------------------------- 1 | module.exports = function(grunt) { 2 | 3 | grunt.initConfig({ 4 | 'meta': { 5 | 'banner': '/*! css3please.com | <%= grunt.template.today("yyyy-mm-dd HH:MM:ss") %> */', 6 | 'srcfiles': [ 7 | 'javascript/detect-flash.js', 8 | 'javascript/jquery-1.7.1.min.js', 9 | 'javascript/jquery.plugins.min.js', 10 | 'javascript/javascript.js', 11 | 'javascript/cb_plugins.js', 12 | 'javascript/analytics.js' 13 | ] 14 | }, 15 | 'concat': { 16 | 'js': { 17 | 'src': ['', ''], 18 | 'dest': 'javascript/build.js' 19 | }, 20 | 'css': { 21 | 'src': ['', 'css/matrices.css', 'css/colorpicker.css', 'css/stylesheet.css', 'css/light.css'], 22 | 'dest': 'css/build.css' 23 | } 24 | }, 25 | 'min': { 26 | 'dist': { 27 | 'src': [''], 28 | 'dest': 'javascript/build.min.js' 29 | } 30 | }, 31 | 'cssmin': { 32 | 'dist': { 33 | 'src': [''], 34 | 'dest': 'css/build.min.css' 35 | } 36 | }, 37 | 'watch': { 38 | 'files': '', 39 | 'tasks': 'default' 40 | } 41 | }); 42 | 43 | grunt.loadNpmTasks('grunt-css'); 44 | 45 | grunt.registerTask('default', 'concat min cssmin'); 46 | 47 | }; -------------------------------------------------------------------------------- /img/clipboard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulirish/css3please/8e10cd11f068e65021f4cc0c78e15010c219c436/img/clipboard.png -------------------------------------------------------------------------------- /img/colorpicker/colorpicker_background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulirish/css3please/8e10cd11f068e65021f4cc0c78e15010c219c436/img/colorpicker/colorpicker_background.png -------------------------------------------------------------------------------- /img/colorpicker/colorpicker_hex.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulirish/css3please/8e10cd11f068e65021f4cc0c78e15010c219c436/img/colorpicker/colorpicker_hex.png -------------------------------------------------------------------------------- /img/colorpicker/colorpicker_hsb_b.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulirish/css3please/8e10cd11f068e65021f4cc0c78e15010c219c436/img/colorpicker/colorpicker_hsb_b.png -------------------------------------------------------------------------------- /img/colorpicker/colorpicker_hsb_h.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulirish/css3please/8e10cd11f068e65021f4cc0c78e15010c219c436/img/colorpicker/colorpicker_hsb_h.png -------------------------------------------------------------------------------- /img/colorpicker/colorpicker_hsb_s.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulirish/css3please/8e10cd11f068e65021f4cc0c78e15010c219c436/img/colorpicker/colorpicker_hsb_s.png -------------------------------------------------------------------------------- /img/colorpicker/colorpicker_indic.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulirish/css3please/8e10cd11f068e65021f4cc0c78e15010c219c436/img/colorpicker/colorpicker_indic.gif -------------------------------------------------------------------------------- /img/colorpicker/colorpicker_overlay.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulirish/css3please/8e10cd11f068e65021f4cc0c78e15010c219c436/img/colorpicker/colorpicker_overlay.png -------------------------------------------------------------------------------- /img/colorpicker/colorpicker_rgb_b.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulirish/css3please/8e10cd11f068e65021f4cc0c78e15010c219c436/img/colorpicker/colorpicker_rgb_b.png -------------------------------------------------------------------------------- /img/colorpicker/colorpicker_rgb_g.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulirish/css3please/8e10cd11f068e65021f4cc0c78e15010c219c436/img/colorpicker/colorpicker_rgb_g.png -------------------------------------------------------------------------------- /img/colorpicker/colorpicker_rgb_r.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulirish/css3please/8e10cd11f068e65021f4cc0c78e15010c219c436/img/colorpicker/colorpicker_rgb_r.png -------------------------------------------------------------------------------- /img/colorpicker/colorpicker_select.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulirish/css3please/8e10cd11f068e65021f4cc0c78e15010c219c436/img/colorpicker/colorpicker_select.gif -------------------------------------------------------------------------------- /img/colorpicker/colorpicker_submit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulirish/css3please/8e10cd11f068e65021f4cc0c78e15010c219c436/img/colorpicker/colorpicker_submit.png -------------------------------------------------------------------------------- /img/colorpicker/custom_background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulirish/css3please/8e10cd11f068e65021f4cc0c78e15010c219c436/img/colorpicker/custom_background.png -------------------------------------------------------------------------------- /img/colorpicker/custom_hex.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulirish/css3please/8e10cd11f068e65021f4cc0c78e15010c219c436/img/colorpicker/custom_hex.png -------------------------------------------------------------------------------- /img/colorpicker/custom_hsb_b.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulirish/css3please/8e10cd11f068e65021f4cc0c78e15010c219c436/img/colorpicker/custom_hsb_b.png -------------------------------------------------------------------------------- /img/colorpicker/custom_hsb_h.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulirish/css3please/8e10cd11f068e65021f4cc0c78e15010c219c436/img/colorpicker/custom_hsb_h.png -------------------------------------------------------------------------------- /img/colorpicker/custom_hsb_s.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulirish/css3please/8e10cd11f068e65021f4cc0c78e15010c219c436/img/colorpicker/custom_hsb_s.png -------------------------------------------------------------------------------- /img/colorpicker/custom_indic.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulirish/css3please/8e10cd11f068e65021f4cc0c78e15010c219c436/img/colorpicker/custom_indic.gif -------------------------------------------------------------------------------- /img/colorpicker/custom_rgb_b.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulirish/css3please/8e10cd11f068e65021f4cc0c78e15010c219c436/img/colorpicker/custom_rgb_b.png -------------------------------------------------------------------------------- /img/colorpicker/custom_rgb_g.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulirish/css3please/8e10cd11f068e65021f4cc0c78e15010c219c436/img/colorpicker/custom_rgb_g.png -------------------------------------------------------------------------------- /img/colorpicker/custom_rgb_r.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulirish/css3please/8e10cd11f068e65021f4cc0c78e15010c219c436/img/colorpicker/custom_rgb_r.png -------------------------------------------------------------------------------- /img/colorpicker/custom_submit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulirish/css3please/8e10cd11f068e65021f4cc0c78e15010c219c436/img/colorpicker/custom_submit.png -------------------------------------------------------------------------------- /img/colorpicker/select.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulirish/css3please/8e10cd11f068e65021f4cc0c78e15010c219c436/img/colorpicker/select.png -------------------------------------------------------------------------------- /img/colorpicker/select2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulirish/css3please/8e10cd11f068e65021f4cc0c78e15010c219c436/img/colorpicker/select2.png -------------------------------------------------------------------------------- /img/colorpicker/slider.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulirish/css3please/8e10cd11f068e65021f4cc0c78e15010c219c436/img/colorpicker/slider.png -------------------------------------------------------------------------------- /img/disabled.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulirish/css3please/8e10cd11f068e65021f4cc0c78e15010c219c436/img/disabled.png -------------------------------------------------------------------------------- /img/love.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulirish/css3please/8e10cd11f068e65021f4cc0c78e15010c219c436/img/love.png -------------------------------------------------------------------------------- /img/off.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulirish/css3please/8e10cd11f068e65021f4cc0c78e15010c219c436/img/off.png -------------------------------------------------------------------------------- /img/on.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulirish/css3please/8e10cd11f068e65021f4cc0c78e15010c219c436/img/on.png -------------------------------------------------------------------------------- /img/reset.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulirish/css3please/8e10cd11f068e65021f4cc0c78e15010c219c436/img/reset.png -------------------------------------------------------------------------------- /img/unchecked.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulirish/css3please/8e10cd11f068e65021f4cc0c78e15010c219c436/img/unchecked.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CSS3 Please! The Cross-Browser CSS3 Rule Generator 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |
18 |

19 | CSS3, please! 20 |

21 |

22 | This element will receive instant changes as you edit the CSS rules on the left. Enjoy! 23 |

24 |
25 | 
/*    [toggle styling]    */
26 |
27 | 28 | 
 29 | /* -------------------------------------------------------------
 30 |       CSS3, Please!
 31 |       ===================================================
 32 | 
 33 |       Update: We recommend using Autoprefixer instead of CSS3Please.
 34 |       
 35 |       You can edit the underlined values in this css file,
 36 |       but don't worry about making sure the corresponding
 37 |       values match, that's all done automagically for you.
 38 | 
 39 |       Whenever you want, you can copy the whole or part of
 40 |       this page and paste it into your own stylesheet.
 41 | ------------------------------------------------------------- */
 42 | 
 43 |
44 | 45 |
46 | 
/*                           [to clipboard] [toggle rule off] */
47 | 
 48 | .box_round {
 49 |   border-radius: 12px; /* Android 2.1+, Chrome, Firefox 4+, IE 9+, iOS 4+, Opera 10.50+, Safari 5+ */
 50 | 
 51 |   /* useful if you don't want a bg color from leaking outside the border: */
 52 |   background-clip: padding-box; /* Android 2.2+, Chrome, Firefox 4+, IE 9+, iOS 4+, Opera 10.50+, Safari 4+ */
 53 | }
54 | 
/* */
55 |
56 | 71 | 72 |
73 | 
/*                           [to clipboard] [toggle inset on] [toggle rule off] */
74 | 
 75 | .box_shadow {
 76 |   -webkit-box-shadow: 0px 0px 4px 0px #ffffff; /* Android 2.3+, iOS 4.0.2-4.2, Safari 3-4 */
 77 |           box-shadow: 0px 0px 4px 0px #ffffff; /* Chrome 6+, Firefox 4+, IE 9+, iOS 5+, Opera 10.50+ */
 78 | }
79 | 
/* */
80 |
81 | 82 |
83 | 
/*                           [to clipboard] [toggle rule off] */
84 | 
 85 | .box_gradient {
 86 |   background-color: #444444;
 87 |   background-image: -webkit-linear-gradient(top, #444444, #999999); /* Chrome 10-25, iOS 5+, Safari 5.1+ */
 88 |   background-image:         linear-gradient(to bottom, #444444, #999999); /* Chrome 26, Firefox 16+, IE 10+, Opera */
 89 | }
90 | 
/* */
91 |
92 | 93 | 94 | 95 |
96 | 
/*                           [to clipboard] [toggle rule on] */
97 | 
 98 | .box_rgba {
 99 |   background-color: transparent;
100 |   background-color: rgba(180, 180, 144, 0.6);  /* Chrome, Firefox 3+, IE 9+, Opera 10.10+, Safari 3+ */
101 | }
102 | 
/* */
103 |
104 | 105 |
106 | 
/*                           [to clipboard] [toggle rule on] */
107 | 
108 | .box_rotate {
109 |   -webkit-transform: rotate(7.5deg);  /* Chrome, Opera 15+, Safari 3.1+ */
110 |       -ms-transform: rotate(7.5deg);  /* IE 9 */
111 |           transform: rotate(7.5deg);  /* Firefox 16+, IE 10+, Opera */
112 | }
113 | 
/* */
114 |
115 | 116 |
117 | 
/*                           [to clipboard] [toggle rule on] */
118 | 
119 | .box_scale {
120 |   -webkit-transform: scale(0.8);  /* Chrome, Opera 15+, Safari 3.1+ */
121 |       -ms-transform: scale(0.8);  /* IE 9 */
122 |           transform: scale(0.8);  /* Firefox 16+, IE 10+, Opera */
123 | }
124 | 
/* */
125 |
126 | 127 |
128 | 
/*                           [to clipboard] [toggle rule on] */
129 | 
130 | .box_3dtransforms {
131 |   -webkit-perspective: 300px;  /* Chrome 12+, Safari 4+ */
132 |       -ms-perspective: 300px;  /* IE 10 */
133 |           perspective: 300px;
134 |   -webkit-transform: rotateY(180deg);  -webkit-transform-style: preserve-3d;
135 |       -ms-transform: rotateY(180deg);      -ms-transform-style: preserve-3d;
136 |           transform: rotateY(180deg);          transform-style: preserve-3d;
137 | }
138 | 
/* */
139 |
140 | 141 | 142 |
143 | 
/*                           [to clipboard] [toggle rule off] */
144 | 
145 | .box_transition {
146 |   -webkit-transition: all 0.3s ease-out;  /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6  */
147 |           transition: all 0.3s ease-out;  /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+  */
148 | }
149 | 
/* */
150 |
151 | 152 | 153 | 154 |
155 | 
/*                           [to clipboard] [toggle rule off] */
156 | 
157 | .box_textshadow {
158 |   text-shadow: 1px 1px 3px #888; /* Chrome, Firefox 3.5+, IE 10+, Opera 9+, Safari 1+ */
159 | }
160 | 
/* */
161 |
162 | 163 | 164 |
165 | 
/*                           [to clipboard] [toggle rule off] */
166 | 
167 | .box_opacity {
168 |   opacity: 0.9; /* Android 2.1+, Chrome 4+, Firefox 2+, IE 9+, iOS 3.2+, Opera 9+, Safari 3.1+ */
169 | }
170 | 
/* */
171 |
172 | 173 | 174 | 175 |
176 | 
/*                           [to clipboard] */
177 | 
178 | * {
179 |   -webkit-box-sizing: border-box; /* Android ≤ 2.3, iOS ≤ 4 */
180 |      -moz-box-sizing: border-box; /* Firefox ≤ 28 */
181 |           box-sizing: border-box; /* Chrome, Firefox 29+, IE 8+, Opera, Safari 5.1 */
182 | }
183 | 
/* */
184 |
185 | 186 | 187 |
188 | 
/*                           [to clipboard] [toggle rule off] */
189 | 
190 | .box_bgsize {
191 |   -webkit-background-size: 100% 100%; /* Safari 3-4 */
192 |           background-size: 100% 100%; /* Chrome, Firefox 4+, IE 9+, Opera, Safari 5+ */
193 | }
194 | 
/* */
195 |
196 | 197 |
198 | 
/*                           [to clipboard] [toggle rule on] */
199 | 
200 | .box_columns {
201 |   -webkit-column-count: 2;  -webkit-column-gap: 15px; /* Chrome, Safari 3 */
202 |      -moz-column-count: 2;     -moz-column-gap: 15px; /* Firefox 3.5+ */
203 |           column-count: 2;          column-gap: 15px; /* Opera 11+ */
204 | }
205 | 
/* */
206 |
207 | 208 |
209 | 
/*                           [to clipboard] [toggle rule off] */
210 | 
211 | .box_animation:hover {
212 |   -webkit-animation: myanim 5s infinite; /* Chrome, Opera 15+, Safari 5+ */
213 |           animation: myanim 5s infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
214 | }
215 | 
216 | @-webkit-keyframes myanim {
217 |   0%   { opacity: 0.0; }
218 |   50%  { opacity: 0.5; }
219 |   100% { opacity: 1.0; }
220 | }
221 | @keyframes myanim {
222 |   0%   { opacity: 0.0; }
223 |   50%  { opacity: 0.5; }
224 |   100% { opacity: 1.0; }
225 | }
226 |
227 | 
/* */
228 |
229 | 230 | 231 | 232 |
233 | 
/*                           [to clipboard] [toggle rule off] */
234 | 235 |
236 | 237 | Oh hai :) 238 |

239 | From Peter Nederlof 240 | oh noes! 241 | 242 | 243 | Manipulate me, please! 244 | rotate 245 | scale 246 | skew 247 | skew 248 | move 249 | 250 |
251 | 252 | 
253 | .matrix {
254 |   
Play for output ...

255 | }
256 | 257 | 258 |
259 | 260 | 261 |
262 | 
/*                           [to clipboard] */
263 | 
264 | @font-face {
265 |   font-family: 'WebFont';
266 |   src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
267 |        url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
268 | }
269 | 270 |
271 | 272 | 273 |
274 | 
/*                           [to clipboard] [toggle rule off] */
275 | 
276 | .box_tabsize {
277 |   -moz-tab-size: 2; /* Firefox 4+ */
278 |        tab-size: 2;
279 | }
280 | 281 |
282 | 283 | 284 | 

285 | 
286 | 
287 | /*
288 |     btw- up/down keys work, along with your mouse wheel. ;)
289 |     coming soon.. extra css transforms (skew, scale) and more.
290 |     plz leave feedback here.
291 |     also css3please is an open source project!. report bugs or contribute!
292 | 
293 |     Notes:
294 |      + IE<10 browsers do not support gradients. Possible solutions are using SVG or using a filter with a wrapper div.
295 |      + The rotation transform ends up with a different transform-origin in IE. Look at heygrady's transform
296 |        library and his excellent guide for the best results.
297 |      + If you’re doing transitions, Matthew Lein’s Ceaser generates code with lots of presets, including the Penner equations.
298 | 
299 |     © 2012; a Paul Irish and Jonathan Neal joint, in association w/ Boaz Sender and Zoltan Hawryluk.
300 | 
301 |             if you like this, you'll probably also dig yayQuery and mothereffinghsl.com. <3
302 | */
303 | 
304 | 
305 | 
306 | 
307 |
308 | 309 | 
310 | /*
311 |     __Changelog__
312 | 
313 |     2013.04.05: Opera 12.10 supports unprefixed CSS animations, gradients, transforms, and transitions.
314 |     2013.04.05: Removed -webkit-background-clip (thx Albert Scheiner).
315 |     2013.02.11: Added inset toggle for box-shadow (thx Ryan).
316 |     2013.02.05: Chrome 26 support for unprefix transitions and unprefixed gradients.
317 |     2012.12.31: Removed -moz-background-clip (thx Mottie).
318 |     2012.08.29: Removed IE6-8 support.
319 |     2012.06.06: Removed -ms prefixes from transition, animations and gradients.
320 |     2012.03.02: Added box-sizing. Woo!
321 |     2012.01.21: Added transform scale and 3d transforms.(thx uxder)
322 |     2012.01.19: Linear Gradient Syntax Updated. (thx cssdeck and uxder!)
323 |     2012.01.14: Added tab-size. (Blame Mathias if anything breaks!)
324 |     2011.10.23: Added the sweet matrix manip demo from Peter Nederlof. Thx Peter!
325 |     2011.10.18: CSS Animations added. (thx wookiehangover!)
326 |     2011.07.27: Added multicolumn. (thx hotmeteor!)
327 |     2011.04.12: Added gradient for IE10! (thx calvein!)
328 |     2011.04.11: Added background-clip for the border-radius rule (thx matthewlein!).
329 |     2011.04.09: Simplified and corrected MS gradient filter syntax. (thanks david meister)
330 |     2011.04.07: Added background-size (thx codler!).
331 |     2011.03.26: Added Ceaser link.
332 |     2011.03.15: Added linear gradients for Opera 11.10. (Thanks, Mike!)
333 |     2012.03.01: Went one year into the future to make a minor text change. Phew!
334 |     2011.02.22: Browser support updated.
335 |     2011.02.20: Tab key support added (good idea, iszak)
336 |     2011.02.20: Fixed longstanding rgba NaN bug.
337 |     2011.02.16: Fixed IE filter sizingMethod (moved to the end) after maybe 10 bug reports for it. (Whoops.)
338 |     2011.02.10: New gradient syntax (Thx Sami). Update @font-face syntax.
339 |     2011.01.05: Removed unneeded -ms-filter declarations and added unprefixed linear-gradient. (Thx Mathias)
340 |     2010.11.19: Better handling of users without Flash. (Thx Mathias)
341 |     2010.11.06: Toggle to light skin (Thx Curtis Blackwell!). IE9 Transform added. Clipboard only grabs rules, no selector.
342 |     2010.10.05: Unprefixed transitions, transforms
343 |     2010.06.02: Clipboard click strips comments
344 |     2010.05.03: IE Rotation bug fixed. (Thx Joshua!)
345 |     2010.04.11: text-shadow added.
346 |     2010.04.05: Real rotation in IE (Thx Zoltan!). Added transition. No more DropShadow for IE (it's crap)
347 |     2010.04.04: New copy to clipboard style. Better mousewheel support.
348 |     2010.03.25: Fixed the gradient flipflop. Fixed positioning bug.
349 | */
350 | 
351 | 
352 | 
353 | 
354 |
355 | 356 | 357 | 358 | -------------------------------------------------------------------------------- /javascript/analytics.js: -------------------------------------------------------------------------------- 1 | window._gaq = [['_setAccount', 'UA-15142720-1'], ['_trackPageview']]; 2 | (function(d, t) { 3 | var g = d.createElement(t), 4 | s = d.getElementsByTagName(t)[0]; 5 | g.src = '//www.google-analytics.com/ga.js'; 6 | s.parentNode.insertBefore(g, s); 7 | }(document, 'script')); -------------------------------------------------------------------------------- /javascript/cb_plugins.js: -------------------------------------------------------------------------------- 1 | $(function(){ 2 | 3 | var $html = $(document.documentElement); 4 | 5 | /*==TOGGLE STYLING==*/ 6 | $('#sandboxwrap .off').click(function() { 7 | $html.toggleClass('light'); 8 | }); 9 | 10 | }); -------------------------------------------------------------------------------- /javascript/detect-flash.js: -------------------------------------------------------------------------------- 1 | if (((navigator.plugins && typeof navigator.plugins['Shockwave Flash'] == 'object') || (window.ActiveXObject && (new ActiveXObject('ShockwaveFlash.ShockwaveFlash')))) && location.protocol != 'file:') document.documentElement.className = 'flash'; -------------------------------------------------------------------------------- /javascript/javascript.js: -------------------------------------------------------------------------------- 1 | window.cssMath = { 2 | /* Number rounded by Length */ 3 | round: function (n, l) { 4 | l = Math.pow(10, l); 5 | 6 | return Math.round(n * l) / l; 7 | }, 8 | /* X and Y coordinates to Rotation and Strength */ 9 | xy2rs: function (x, y) { 10 | return { 11 | r: this.round(Math.atan2(x, y * -1) * 180 / Math.PI, 3), 12 | s: this.round(Math.sqrt((x * x) + (y * y)), 3) 13 | }; 14 | }, 15 | /* Rotation and Strength to X and Y coordinates */ 16 | rs2xy: function (r, s) { 17 | return { 18 | x: this.round(Math.sin(r * Math.PI / 180) * s, 3), 19 | y: this.round(Math.cos(r * Math.PI / 180) * s * -1, 3) 20 | }; 21 | }, 22 | /* Rotation to Degree */ 23 | r2d: function (r) { 24 | return r * 90; 25 | }, 26 | /* Degree to Rotation */ 27 | d2r: function (d) { 28 | return d / 90; 29 | }, 30 | 31 | /* Degrees to Radians */ 32 | d2rad: function (d){ 33 | return (d) * Math.PI / 180; 34 | }, 35 | 36 | /* Radians to Degrees */ 37 | rad2d: function (r) { 38 | return (180*r)/Math.PI + 360; 39 | }, 40 | 41 | /* matrix to IE String */ 42 | m2s: function (M) { 43 | return 'M11=' + M.e(1, 1) + ', M12=' + M.e(1,2) + ', M21=' + M.e(2,1) + ', M22=' + M.e(2,2); 44 | }, 45 | 46 | s2m: function (s) { 47 | 48 | var entries = s.split(','); 49 | var values = new Array(); 50 | 51 | for (var i=0; i -1) { 170 | return '#' + cssMath.da2ha(value.replace(/^rgb\s?\(\s?(.*?)\s?\)$/, '$1').split(/,\s?/)).join(''); 171 | } 172 | else { 173 | return cssMath.h2lh(value); 174 | } 175 | }, 176 | // dont include an AA in this hex 177 | shortHex : function (value, allValues) { 178 | 179 | return '#'+cssMath.eval.s2Hex(value,allValues).replace(/^#../,''); 180 | 181 | }, 182 | /* String to Alpha + Hexadecimals */ 183 | s2aHex: function (value, allValues) { 184 | if (value.indexOf('rgba') > -1) { 185 | return cssMath.ac2ah(value); 186 | } else if (value.indexOf('rgb') > -1){ 187 | return cssMath.ac2ah(value); 188 | } 189 | else { 190 | return value; 191 | } 192 | }, 193 | /* Hexadecimals to Short Hexadecimals */ 194 | sHex: function (value, allValues) { 195 | return cssMath.h2sh(value); 196 | }, 197 | /* Hexadecimals to Long Hexadecimals */ 198 | lHex: function (value, allValues) { 199 | return cssMath.h2lh(value); 200 | }, 201 | /* Hexadecimals to Color channels */ 202 | ch: function (value, allValues) { 203 | return cssMath.h2c(value); 204 | }, 205 | /* Alpha + Hexadecimals to Alpha + Color channels */ 206 | aCh: function (value, allValues) { 207 | return cssMath.ah2ac(value); 208 | }, 209 | s2deg: function (value, allValues) { 210 | 211 | if (value > 4) { 212 | return value; 213 | } 214 | else { 215 | return cssMath.round(cssMath.r2d(value), 3); 216 | } 217 | }, 218 | rot: function (value, allValues) { 219 | return cssMath.round(cssMath.d2r(value), 3); 220 | } , 221 | 222 | matrix2deg: function (value, allValues) { 223 | 224 | 225 | var M = cssMath.s2m(value); 226 | var asin1 = Math.asin(M.e(2,1)); 227 | var asin2 = Math.asin(M.e(1,2)); 228 | var cos = Math.acos(M.e(1,1)); 229 | 230 | 231 | if (cssMath.areClose(asin1, -asin2) && cssMath.areClose(M.e(1,1),M.e(2,2))) { 232 | return asin1; 233 | } else { 234 | return "NaN"; 235 | } 236 | }, 237 | 238 | deg2matrix: function (value, allValues) { 239 | var num = cssMath.d2rad(value); 240 | 241 | return cssMath.m2s(Matrix.Rotation(num)); 242 | } 243 | 244 | 245 | } 246 | }; 247 | 248 | window.generator = { 249 | 250 | $sandbox : undefined, // set in doc ready below 251 | 252 | styleAllRules: function (ruleList) { 253 | var item = -1, 254 | innerHTML; 255 | 256 | while (++item < ruleList.length) { 257 | innerHTML = ruleList[item].innerHTML; 258 | 259 | innerHTML = innerHTML.replace(/(\/\*((\n|.)+)\*\/)/, '$1'); 260 | innerHTML = innerHTML.replace(/{((\n|.)+)}/, '{$1}'); 261 | innerHTML = innerHTML.replace(/(.*?) {/, '$1 {'); 262 | // this next one matches the triple line @font-face rule 263 | innerHTML = innerHTML.replace(/(.*?):\s?((?!hover).*?\n.*?\n.*);/mg, '$1: $2;'); 264 | innerHTML = innerHTML.replace(/(.*?):\s?(.*?);/mg, '$1: $2;'); 265 | innerHTML = innerHTML.replace(/}/m, '}'); 266 | 267 | ruleList[item].innerHTML = innerHTML; 268 | } 269 | }, 270 | makeEditable: function (editList) { 271 | var item = -1; 272 | 273 | while (++item < editList.length) { 274 | editList[item].innerHTML = '' + editList[item].innerHTML + ''; 275 | } 276 | }, 277 | collectAllValues: function (rule) { 278 | var item = -1, 279 | editables = rule.getElementsByTagName('b'), 280 | values = []; 281 | 282 | while (++item < editables.length) { 283 | values.push( 284 | { 285 | styleProperty: editables[item].parentNode.parentNode.getElementsByTagName('span')[0].innerHTML.replace(/^\s+|\s+$/g, ''), 286 | styleValue: editables[item].parentNode.parentNode.getElementsByTagName('span')[1][(document.all) ? 'innerText' : 'textContent'].replace(/^\s+|\s+$/g, ''), 287 | node: editables[item].getElementsByTagName('span')[0], 288 | group: editables[item].getAttribute('g'), 289 | output: editables[item].getAttribute('o'), 290 | value: editables[item].getElementsByTagName('span')[0].innerHTML 291 | } 292 | ); 293 | } 294 | 295 | return values; 296 | }, 297 | grabAndSet : function(elem){ 298 | 299 | var item = -1; 300 | allValues = generator.collectAllValues( $(elem).closest('.declaration-block')[0] || $(elem).closest('.rule')[0] ), 301 | group = elem.parentNode.getAttribute('g'), 302 | input = elem.parentNode.getAttribute('i'), 303 | value = elem.value, 304 | itemValue = ''; 305 | 306 | if (input) { 307 | value = cssMath.eval[input](value, allValues); 308 | } 309 | 310 | while (++item < allValues.length) { 311 | if (allValues[item].group == group) { 312 | if (allValues[item].output) { 313 | itemValue = cssMath.eval[ allValues[item].output ](value, allValues); 314 | } else { 315 | itemValue = value; 316 | } 317 | 318 | allValues[item].node.innerHTML = itemValue; 319 | 320 | 321 | } 322 | } 323 | 324 | generator.applyStyles(elem); 325 | getFilters(); 326 | return value; 327 | }, // eo grabAndSet() 328 | 329 | // if no elem is passed in, all styles are applied. 330 | applyStyles : function(elem){ 331 | 332 | if (!elem){ 333 | $(".selector").closest('pre').each(function(){ 334 | generator.applyStyles(this); 335 | }) 336 | return; 337 | 338 | } 339 | 340 | var css = $(elem).closest("pre").not('.comment').text().replace(/(-ms-)?filter:[^\;]*\;/g, ''), 341 | wrap = $(elem).closest('.rule_wrapper'), 342 | name = wrap.attr('id'); 343 | 344 | //alert(css); 345 | $('style.'+name).remove(); 346 | 347 | if (name){ 348 | var ss = document.createElement('style'); 349 | ss.setAttribute("type", "text/css"); 350 | ss.className = name; 351 | 352 | if (ss.styleSheet && name !== 'box_webfont') { 353 | // IE crashes hard on @font-face going in through cssText 354 | ss.styleSheet.cssText = css; 355 | } else { 356 | var tt1 = document.createTextNode(css); 357 | ss.appendChild(tt1); 358 | } 359 | document.body.appendChild(ss); 360 | } 361 | 362 | if (name === 'box_3dtransforms') { 363 | var splitCss = css.split("\n"), 364 | perspectiveProperties = ".box_3dtransforms_perspective { \n"; 365 | 366 | $('#sandboxwrap').toggleClass('box_3dtransforms_perspective', !wrap.hasClass('commentedout') ); 367 | 368 | splitCss.forEach(function(line) { 369 | if (line.indexOf('perspective') !== -1) 370 | perspectiveProperties += line; 371 | }); 372 | 373 | var perspectiveStyle = document.createElement('style'); 374 | perspectiveStyle.setAttribute("type", "text/css"); 375 | perspectiveStyle.className = 'box_3dtransforms_perspective'; 376 | 377 | var perspectiveText = document.createTextNode(perspectiveProperties); 378 | perspectiveStyle.appendChild(perspectiveText); 379 | 380 | document.body.appendChild(perspectiveStyle); 381 | } 382 | 383 | name && generator.$sandbox.toggleClass(name, !wrap.hasClass('commentedout') ); 384 | 385 | } 386 | }; 387 | 388 | function copypasta(){ 389 | var isFlashInstalled = document.documentElement.className == 'flash'; 390 | 391 | if (isFlashInstalled) { 392 | $('.rule_wrapper').each(function(){ 393 | var name = this.id, 394 | zc = new ZeroClipboard.Client(), 395 | elem = $(this).find('a.cb'); 396 | 397 | if (!elem.length) return; 398 | 399 | zc.glue( elem[0], elem[0].parentNode ); 400 | zc.addEventListener( 'mouseDown', (function(){ 401 | return function(client) { 402 | var text = elem.closest("pre") 403 | .nextAll('pre.rule').eq(0).find('.declaration-block').text(); 404 | text = text.replace(/ \/\*.*?\*\//g,''); // strip comments 405 | zc.setText( text ); 406 | $(elem).fadeOut(50).fadeIn(300) 407 | } 408 | })()); 409 | }); 410 | } 411 | } 412 | 413 | 414 | 415 | function addFilter (obj, filterName, filterValue){ 416 | 417 | var filter; 418 | 419 | 420 | var comma = ", "; 421 | 422 | if (obj.filters.length == 0) { 423 | comma = ""; 424 | } 425 | 426 | // remove existing filter. 427 | var re = new RegExp("(\\,\\s*)?progid:" + filterName + "\\([^\\)]*\\)") 428 | 429 | obj.style.filter = obj.style.filter.replace(re, '') + comma + "progid:" + filterName + "(" + filterValue + ")"; 430 | 431 | 432 | return; 433 | filter = obj.filters.item(filterName); 434 | 435 | 436 | 437 | return filter; 438 | } 439 | 440 | 441 | function getFilters () { 442 | if (!document.body.filters) { 443 | return; 444 | } 445 | 446 | $('#sandbox')[0].style.filter = ""; 447 | $('#sandbox')[0].style.zoom = "100%"; 448 | 449 | 450 | $('.filter').each(function(){ 451 | 452 | if (!$(this).closest('.rule_wrapper').hasClass('commentedout')) { 453 | 454 | var text = $(this).text().replace(/\)/, '').split('('); 455 | addFilter($('#sandbox')[0], text[0].replace(/progid:/, '').trim(), text[1]); 456 | } 457 | }) 458 | 459 | } 460 | 461 | 462 | $(document).ready(function () { 463 | 464 | generator.$sandbox = $('#sandbox'); 465 | 466 | generator.styleAllRules( $('pre').not('.footer').get() ); 467 | 468 | generator.makeEditable(document.getElementsByTagName('b')); 469 | 470 | //clearFilter(); 471 | 472 | 473 | 474 | 475 | $('pre').each(function () { 476 | 477 | $(this).find('b span').bind('click',function (e) { 478 | 479 | if ($(this).parent().attr('readonly')==='') return; 480 | 481 | // basically calculating where to place the caret. 482 | var wrap = $(document.elementFromPoint(e.pageX-$(document).scrollLeft(),e.pageY-$(document).scrollTop())); 483 | var clickY = e.pageX - wrap.offset().left, 484 | caretY = Math.round(clickY / wrap.width() * wrap.text().length); 485 | 486 | $(this).parent().addClass('edit') 487 | .find('input') 488 | .val( $(this).html() ) 489 | .focus().caret(caretY,caretY); 490 | 491 | }).mousedown(function(){ 492 | // $(document.activeElement).not(document.body).blur(); 493 | }); 494 | 495 | $(this).find('input').bind('keyup',function () { 496 | 497 | generator.grabAndSet(this); 498 | 499 | this.parentNode.getElementsByTagName('span')[0].innerHTML = this.value; 500 | } 501 | ).bind('blur',function () { 502 | $(this).parent().removeClass('edit'); 503 | 504 | generator.grabAndSet(this); 505 | } 506 | ).bind("mousewheel keydown", function(e, delta) { 507 | // only px values get this treatment for now. 508 | if (!(/px|em|[0-9]/.test(this.value) || $(this).closest('#box_rotate').length)) return true; 509 | 510 | var split = this.value.split(/-?[0-9A-F.]+/), 511 | match = this.value.match(/-?[0-9A-F.]+/), 512 | num = match && match[0] || 0, 513 | len, newval; 514 | 515 | if (delta > 0 || e.which == 38) { 516 | newval = parseFloat(num) + 1 * (e.shiftKey ? .1 : 1); 517 | } else if ( delta < 0 || e.which == 40 ) { 518 | newval = parseFloat(num) - 1 * (e.shiftKey ? .1 : 1); 519 | } else { 520 | return true; 521 | } 522 | 523 | newval = Math.round(newval*10)/10; 524 | len = (''+newval).length; 525 | if (split.length===0) split = ['','']; // IE is stupido. 526 | if (split.length===1) split.unshift(''); // IE is stupido. 527 | 528 | $(this).val(split.join(newval)); 529 | 530 | generator.grabAndSet(this); 531 | 532 | $(this).caret( len,len ); 533 | return false; 534 | }); 535 | 536 | $(document).bind('mousewheel',function(e,delta){ 537 | if ($(e.target).is('input')) return; // this is already handled fine. 538 | if (! $(document.activeElement).is('input')) return; // they're just scrolling the page. 539 | e.stopPropagation(); 540 | $(document.activeElement).trigger(e,delta); 541 | e.preventDefault(); 542 | }).bind('keydown', function (e) { 543 | if (e.which == 9){ // tab key 544 | var inputs = $('b input'), 545 | elemIndex = inputs.index($(e.target).closest('input')) || 0, 546 | direction = e.shiftKey ? -1 : 1; 547 | 548 | // basically tab to next input. 549 | $(this).blur(); 550 | 551 | inputs.eq(elemIndex + direction).prev('span').click(); 552 | return false; 553 | 554 | } 555 | }); 556 | 557 | }); // end pre each() 558 | 559 | // first run on page load 560 | getFilters(); 561 | 562 | if (!document.body.filters) { 563 | generator.applyStyles(); 564 | } 565 | 566 | // weird fix for FF4. thx 567 | // https://github.com/paulirish/css3please/issues/22 568 | // https://github.com/paulirish/css3please/issues/38 569 | setTimeout(function(){ 570 | generator.grabAndSet($('pre input').first().get(0)); 571 | }, 100); 572 | 573 | 574 | 575 | // use rgba and not gradients for older operas since they're silly. 576 | if (/Opera/.test(({}).toString.call(window.opera)) && (parseFloat(opera.version(), 10) < 11.1)){ 577 | $('#box_gradient,#box_rgba').find('a.off').click(); 578 | } 579 | 580 | //create colorpicker 581 | colorPicker("b[i='s2Hex'], b[i='lHex']", 'hex'); 582 | 583 | //force colorpicker to close when tabbing out of a color input field 584 | $("b[i='s2Hex'] input, b[i='lHex'] input").bind("keydown", function(e) { if (e.keyCode == 9) $(this).parent("b").ColorPickerHide(); }); 585 | 586 | //track events via google analytics custom events 587 | $(document).on('click', 'b, #matrixbox', function(event) { 588 | trackEvent( $(this).closest('.rule_wrapper').attr('id') ); 589 | }); 590 | 591 | }); 592 | 593 | /* 594 | * Track user actions via google anlaytics custom events. 595 | * Store each event into an array so that only one event is sent per property. 596 | */ 597 | window.trackEvent = (function() { 598 | var events = []; 599 | var track = function(eventName) { 600 | if ($.inArray(eventName, events) === -1) { 601 | events.push(eventName); 602 | //console.log(events); 603 | _gaq.push(['_trackEvent', 'properties', 'change', eventName]); 604 | } 605 | } 606 | return track; 607 | })(); 608 | 609 | 610 | $(window).load(function(){ 611 | setTimeout(copypasta,1000); 612 | }) 613 | 614 | window.colorPicker = (function(){ 615 | var currentTarget = "", 616 | colors = {}, 617 | currentColor, 618 | picker = function(selector, colorType) { 619 | $(selector).ColorPicker({ 620 | onBeforeShow: function () { 621 | var t = $(this); 622 | trackEvent( $(this).closest('.rule_wrapper').attr('id') ); 623 | colors = {}; //reset colors 624 | currentColor = t.text(); 625 | currentTarget = t; //workaround to colorpicker plugin not preseving current element? 626 | t.ColorPickerSetColor(currentColor); //set the colorpicker value 627 | }, 628 | onChange: function (hsb, hex, rgb) { 629 | colors = { 630 | hsl: hsb, 631 | hex: hex, 632 | rgb: rgb 633 | }; 634 | //update the colors 635 | var input = currentTarget.find('input'), 636 | color = (colors[colorType]) ? "#" + colors[colorType] : currentColor; 637 | input.val(color); 638 | generator.grabAndSet(input[0]); 639 | } 640 | }); 641 | } 642 | 643 | return picker; 644 | })(); 645 | 646 | 647 | window.css = { 648 | 'text-shadow': '2px 2px 2px #000;', 649 | 'filter': 'Shadow(Color=#666666, Direction=135, Strength=5);' 650 | }; 651 | 652 | 653 | /* 654 | rule 655 | selector 656 | declaration 657 | property 658 | value 659 | */ 660 | 661 | $.fn.applyStyles = function(){ generator.applyStyles(this[0]); return this; } 662 | 663 | // box_shadow inset 664 | $('.rule_wrapper .comment a.inset').live('click',function(){ 665 | $(this).text( $(this).text().replace(' off',' !on').replace(' on',' off').replace('!','') ); 666 | var ruleWrapper = $(this).closest('.rule_wrapper'); 667 | if (ruleWrapper.find('span.inset').length) { 668 | ruleWrapper.find('span.inset').remove(); 669 | } else { 670 | ruleWrapper.find('b[g="0"]').before('inset '); 671 | } 672 | ruleWrapper.find('input').first().applyStyles(); 673 | getFilters(); 674 | return false; 675 | }); 676 | 677 | // commenting out 678 | $('.rule_wrapper .comment a.off').live('click',function(){ 679 | $(this).text( $(this).text().replace(' off',' !on').replace(' on',' off').replace('!','') ) 680 | $(this).closest('.rule_wrapper').toggleClass('commentedout') 681 | .find('input').first().applyStyles(); 682 | getFilters(); 683 | return false; 684 | }); 685 | 686 | /* 687 | * Adding trim method to String Object. Ideas from 688 | * http://www.faqts.com/knowledge_base/view.phtml/aid/1678/fid/1 and 689 | * http://blog.stevenlevithan.com/archives/faster-trim-javascript 690 | */ 691 | String.prototype.trim = String.prototype.trim || function() { 692 | var str = this; 693 | 694 | // used by the String.prototype.trim() 695 | var initWhitespaceRe = /^\s\s*/; 696 | var endWhitespaceRe = /\s\s*$/; 697 | var whitespaceRe = /\s/; 698 | 699 | // The first method is faster on long strings than the second and 700 | // vice-versa. 701 | if (this.length > 6000) { 702 | str = this.replace(initWhitespaceRe, ''); 703 | var i = str.length; 704 | while (whitespaceRe.test(str.charAt(--i))); 705 | return str.slice(0, i + 1); 706 | } else { 707 | return this.replace(initWhitespaceRe, '') 708 | .replace(endWhitespaceRe, ''); 709 | } 710 | }; 711 | -------------------------------------------------------------------------------- /javascript/jcoglan.com/CHANGELOG.txt: -------------------------------------------------------------------------------- 1 | Sylvester Changelog 2 | ------------------- 3 | 4 | 5 | Version 0.1.0 - 16 April 2007 6 | ----------------------------- 7 | * Initial release 8 | * Includes Vector, Matrix, Line and Plane classes 9 | 10 | 11 | Version 0.1.1 - 13 May 2007 12 | --------------------------- 13 | * Fixed bug in Matrix#augment where some columns got over-written 14 | * Added Vector#each and Plane#isPerpendicularTo 15 | * Modified all methods that accept vectors as arguments so they also accept plain arrays 16 | * Removed sanity checking of vector and matrix elements 17 | * Most methods rewritten for speed 18 | 19 | 20 | Version 0.1.2 - 18 June 2007 21 | ---------------------------- 22 | * Fixed bugs caused by variables being passed by reference, not by value 23 | * Changed Vector#angleFrom implementation to process faster 24 | * Allowed matrix methods to accept plain matrices if they have the correct nested format 25 | 26 | 27 | Version 0.1.3 - 5 July 2007 28 | --------------------------- 29 | * Fixed variable referencing issue in Line#translate and Plane#translate 30 | -------------------------------------------------------------------------------- /javascript/jcoglan.com/sylvester.js: -------------------------------------------------------------------------------- 1 | eval(function(p,a,c,k,e,r){e=function(c){return(c35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('9 17={3i:\'0.1.3\',16:1e-6};l v(){}v.23={e:l(i){8(i<1||i>7.4.q)?w:7.4[i-1]},2R:l(){8 7.4.q},1u:l(){8 F.1x(7.2u(7))},24:l(a){9 n=7.4.q;9 V=a.4||a;o(n!=V.q){8 1L}J{o(F.13(7.4[n-1]-V[n-1])>17.16){8 1L}}H(--n);8 2x},1q:l(){8 v.u(7.4)},1b:l(a){9 b=[];7.28(l(x,i){b.19(a(x,i))});8 v.u(b)},28:l(a){9 n=7.4.q,k=n,i;J{i=k-n;a(7.4[i],i+1)}H(--n)},2q:l(){9 r=7.1u();o(r===0){8 7.1q()}8 7.1b(l(x){8 x/r})},1C:l(a){9 V=a.4||a;9 n=7.4.q,k=n,i;o(n!=V.q){8 w}9 b=0,1D=0,1F=0;7.28(l(x,i){b+=x*V[i-1];1D+=x*x;1F+=V[i-1]*V[i-1]});1D=F.1x(1D);1F=F.1x(1F);o(1D*1F===0){8 w}9 c=b/(1D*1F);o(c<-1){c=-1}o(c>1){c=1}8 F.37(c)},1m:l(a){9 b=7.1C(a);8(b===w)?w:(b<=17.16)},34:l(a){9 b=7.1C(a);8(b===w)?w:(F.13(b-F.1A)<=17.16)},2k:l(a){9 b=7.2u(a);8(b===w)?w:(F.13(b)<=17.16)},2j:l(a){9 V=a.4||a;o(7.4.q!=V.q){8 w}8 7.1b(l(x,i){8 x+V[i-1]})},2C:l(a){9 V=a.4||a;o(7.4.q!=V.q){8 w}8 7.1b(l(x,i){8 x-V[i-1]})},22:l(k){8 7.1b(l(x){8 x*k})},x:l(k){8 7.22(k)},2u:l(a){9 V=a.4||a;9 i,2g=0,n=7.4.q;o(n!=V.q){8 w}J{2g+=7.4[n-1]*V[n-1]}H(--n);8 2g},2f:l(a){9 B=a.4||a;o(7.4.q!=3||B.q!=3){8 w}9 A=7.4;8 v.u([(A[1]*B[2])-(A[2]*B[1]),(A[2]*B[0])-(A[0]*B[2]),(A[0]*B[1])-(A[1]*B[0])])},2A:l(){9 m=0,n=7.4.q,k=n,i;J{i=k-n;o(F.13(7.4[i])>F.13(m)){m=7.4[i]}}H(--n);8 m},2Z:l(x){9 a=w,n=7.4.q,k=n,i;J{i=k-n;o(a===w&&7.4[i]==x){a=i+1}}H(--n);8 a},3g:l(){8 S.2X(7.4)},2d:l(){8 7.1b(l(x){8 F.2d(x)})},2V:l(x){8 7.1b(l(y){8(F.13(y-x)<=17.16)?x:y})},1o:l(a){o(a.K){8 a.1o(7)}9 V=a.4||a;o(V.q!=7.4.q){8 w}9 b=0,2b;7.28(l(x,i){2b=x-V[i-1];b+=2b*2b});8 F.1x(b)},3a:l(a){8 a.1h(7)},2T:l(a){8 a.1h(7)},1V:l(t,a){9 V,R,x,y,z;2S(7.4.q){27 2:V=a.4||a;o(V.q!=2){8 w}R=S.1R(t).4;x=7.4[0]-V[0];y=7.4[1]-V[1];8 v.u([V[0]+R[0][0]*x+R[0][1]*y,V[1]+R[1][0]*x+R[1][1]*y]);1I;27 3:o(!a.U){8 w}9 C=a.1r(7).4;R=S.1R(t,a.U).4;x=7.4[0]-C[0];y=7.4[1]-C[1];z=7.4[2]-C[2];8 v.u([C[0]+R[0][0]*x+R[0][1]*y+R[0][2]*z,C[1]+R[1][0]*x+R[1][1]*y+R[1][2]*z,C[2]+R[2][0]*x+R[2][1]*y+R[2][2]*z]);1I;2P:8 w}},1t:l(a){o(a.K){9 P=7.4.2O();9 C=a.1r(P).4;8 v.u([C[0]+(C[0]-P[0]),C[1]+(C[1]-P[1]),C[2]+(C[2]-(P[2]||0))])}1d{9 Q=a.4||a;o(7.4.q!=Q.q){8 w}8 7.1b(l(x,i){8 Q[i-1]+(Q[i-1]-x)})}},1N:l(){9 V=7.1q();2S(V.4.q){27 3:1I;27 2:V.4.19(0);1I;2P:8 w}8 V},2n:l(){8\'[\'+7.4.2K(\', \')+\']\'},26:l(a){7.4=(a.4||a).2O();8 7}};v.u=l(a){9 V=25 v();8 V.26(a)};v.i=v.u([1,0,0]);v.j=v.u([0,1,0]);v.k=v.u([0,0,1]);v.2J=l(n){9 a=[];J{a.19(F.2F())}H(--n);8 v.u(a)};v.1j=l(n){9 a=[];J{a.19(0)}H(--n);8 v.u(a)};l S(){}S.23={e:l(i,j){o(i<1||i>7.4.q||j<1||j>7.4[0].q){8 w}8 7.4[i-1][j-1]},33:l(i){o(i>7.4.q){8 w}8 v.u(7.4[i-1])},2E:l(j){o(j>7.4[0].q){8 w}9 a=[],n=7.4.q,k=n,i;J{i=k-n;a.19(7.4[i][j-1])}H(--n);8 v.u(a)},2R:l(){8{2D:7.4.q,1p:7.4[0].q}},2D:l(){8 7.4.q},1p:l(){8 7.4[0].q},24:l(a){9 M=a.4||a;o(1g(M[0][0])==\'1f\'){M=S.u(M).4}o(7.4.q!=M.q||7.4[0].q!=M[0].q){8 1L}9 b=7.4.q,15=b,i,G,10=7.4[0].q,j;J{i=15-b;G=10;J{j=10-G;o(F.13(7.4[i][j]-M[i][j])>17.16){8 1L}}H(--G)}H(--b);8 2x},1q:l(){8 S.u(7.4)},1b:l(a){9 b=[],12=7.4.q,15=12,i,G,10=7.4[0].q,j;J{i=15-12;G=10;b[i]=[];J{j=10-G;b[i][j]=a(7.4[i][j],i+1,j+1)}H(--G)}H(--12);8 S.u(b)},2i:l(a){9 M=a.4||a;o(1g(M[0][0])==\'1f\'){M=S.u(M).4}8(7.4.q==M.q&&7.4[0].q==M[0].q)},2j:l(a){9 M=a.4||a;o(1g(M[0][0])==\'1f\'){M=S.u(M).4}o(!7.2i(M)){8 w}8 7.1b(l(x,i,j){8 x+M[i-1][j-1]})},2C:l(a){9 M=a.4||a;o(1g(M[0][0])==\'1f\'){M=S.u(M).4}o(!7.2i(M)){8 w}8 7.1b(l(x,i,j){8 x-M[i-1][j-1]})},2B:l(a){9 M=a.4||a;o(1g(M[0][0])==\'1f\'){M=S.u(M).4}8(7.4[0].q==M.q)},22:l(a){o(!a.4){8 7.1b(l(x){8 x*a})}9 b=a.1u?2x:1L;9 M=a.4||a;o(1g(M[0][0])==\'1f\'){M=S.u(M).4}o(!7.2B(M)){8 w}9 d=7.4.q,15=d,i,G,10=M[0].q,j;9 e=7.4[0].q,4=[],21,20,c;J{i=15-d;4[i]=[];G=10;J{j=10-G;21=0;20=e;J{c=e-20;21+=7.4[i][c]*M[c][j]}H(--20);4[i][j]=21}H(--G)}H(--d);9 M=S.u(4);8 b?M.2E(1):M},x:l(a){8 7.22(a)},32:l(a,b,c,d){9 e=[],12=c,i,G,j;9 f=7.4.q,1p=7.4[0].q;J{i=c-12;e[i]=[];G=d;J{j=d-G;e[i][j]=7.4[(a+i-1)%f][(b+j-1)%1p]}H(--G)}H(--12);8 S.u(e)},31:l(){9 a=7.4.q,1p=7.4[0].q;9 b=[],12=1p,i,G,j;J{i=1p-12;b[i]=[];G=a;J{j=a-G;b[i][j]=7.4[j][i]}H(--G)}H(--12);8 S.u(b)},1y:l(){8(7.4.q==7.4[0].q)},2A:l(){9 m=0,12=7.4.q,15=12,i,G,10=7.4[0].q,j;J{i=15-12;G=10;J{j=10-G;o(F.13(7.4[i][j])>F.13(m)){m=7.4[i][j]}}H(--G)}H(--12);8 m},2Z:l(x){9 a=w,12=7.4.q,15=12,i,G,10=7.4[0].q,j;J{i=15-12;G=10;J{j=10-G;o(7.4[i][j]==x){8{i:i+1,j:j+1}}}H(--G)}H(--12);8 w},30:l(){o(!7.1y){8 w}9 a=[],n=7.4.q,k=n,i;J{i=k-n;a.19(7.4[i][i])}H(--n);8 v.u(a)},1K:l(){9 M=7.1q(),1c;9 n=7.4.q,k=n,i,1s,1n=7.4[0].q,p;J{i=k-n;o(M.4[i][i]==0){2e(j=i+1;j17.16){1Y++;1I}}H(--G)}H(--a);8 1Y},3d:l(){8 7.1Y()},2W:l(a){9 M=a.4||a;o(1g(M[0][0])==\'1f\'){M=S.u(M).4}9 T=7.1q(),1p=T.4[0].q;9 b=T.4.q,15=b,i,G,10=M[0].q,j;o(b!=M.q){8 w}J{i=15-b;G=10;J{j=10-G;T.4[i][1p+j]=M[i][j]}H(--G)}H(--b);8 T},2w:l(){o(!7.1y()||7.2y()){8 w}9 a=7.4.q,15=a,i,j;9 M=7.2W(S.I(a)).1K();9 b,1n=M.4[0].q,p,1c,2v;9 c=[],2c;J{i=a-1;1c=[];b=1n;c[i]=[];2v=M.4[i][i];J{p=1n-b;2c=M.4[i][p]/2v;1c.19(2c);o(p>=15){c[i].19(2c)}}H(--b);M.4[i]=1c;2e(j=0;j3||b.4.q>3){8 w}9 c=b.1u();o(c===0){8 w}7.K=a;7.U=v.u([b.4[0]/c,b.4[1]/c,b.4[2]/c]);8 7}};14.u=l(a,b){9 L=25 14();8 L.1Z(a,b)};14.X=14.u(v.1j(3),v.i);14.Y=14.u(v.1j(3),v.j);14.Z=14.u(v.1j(3),v.k);l 11(){}11.23={24:l(a){8(7.1h(a.K)&&7.1m(a))},1q:l(){8 11.u(7.K,7.W)},2U:l(a){9 V=a.4||a;8 11.u([7.K.4[0]+V[0],7.K.4[1]+V[1],7.K.4[2]+(V[2]||0)],7.W)},1m:l(a){9 b;o(a.W){b=7.W.1C(a.W);8(F.13(b)<=17.16||F.13(F.1A-b)<=17.16)}1d o(a.U){8 7.W.2k(a.U)}8 w},2k:l(a){9 b=7.W.1C(a.W);8(F.13(F.1A/2-b)<=17.16)},1o:l(a){o(7.1v(a)||7.1h(a)){8 0}o(a.K){9 A=7.K.4,B=a.K.4,N=7.W.4;8 F.13((A[0]-B[0])*N[0]+(A[1]-B[1])*N[1]+(A[2]-B[2])*N[2])}1d{9 P=a.4||a;9 A=7.K.4,N=7.W.4;8 F.13((A[0]-P[0])*N[0]+(A[1]-P[1])*N[1]+(A[2]-(P[2]||0))*N[2])}},1h:l(a){o(a.W){8 w}o(a.U){8(7.1h(a.K)&&7.1h(a.K.2j(a.U)))}1d{9 P=a.4||a;9 A=7.K.4,N=7.W.4;9 b=F.13(N[0]*(A[0]-P[0])+N[1]*(A[1]-P[1])+N[2]*(A[2]-(P[2]||0)));8(b<=17.16)}},1v:l(a){o(1g(a.U)==\'1f\'&&1g(a.W)==\'1f\'){8 w}8!7.1m(a)},1U:l(a){o(!7.1v(a)){8 w}o(a.U){9 A=a.K.4,D=a.U.4,P=7.K.4,N=7.W.4;9 b=(N[0]*(P[0]-A[0])+N[1]*(P[1]-A[1])+N[2]*(P[2]-A[2]))/(N[0]*D[0]+N[1]*D[1]+N[2]*D[2]);8 v.u([A[0]+D[0]*b,A[1]+D[1]*b,A[2]+D[2]*b])}1d o(a.W){9 c=7.W.2f(a.W).2q();9 N=7.W.4,A=7.K.4,O=a.W.4,B=a.K.4;9 d=S.1j(2,2),i=0;H(d.2y()){i++;d=S.u([[N[i%3],N[(i+1)%3]],[O[i%3],O[(i+1)%3]]])}9 e=d.2w().4;9 x=N[0]*A[0]+N[1]*A[1]+N[2]*A[2];9 y=O[0]*B[0]+O[1]*B[1]+O[2]*B[2];9 f=[e[0][0]*x+e[0][1]*y,e[1][0]*x+e[1][1]*y];9 g=[];2e(9 j=1;j<=3;j++){g.19((i==j)?0:f[(j+(5-i)%3)%3])}8 14.u(g,c)}},1r:l(a){9 P=a.4||a;9 A=7.K.4,N=7.W.4;9 b=(A[0]-P[0])*N[0]+(A[1]-P[1])*N[1]+(A[2]-(P[2]||0))*N[2];8 v.u([P[0]+N[0]*b,P[1]+N[1]*b,(P[2]||0)+N[2]*b])},1V:l(t,a){9 R=S.1R(t,a.U).4;9 C=a.1r(7.K).4;9 A=7.K.4,N=7.W.4;9 b=C[0],1E=C[1],1J=C[2],1w=A[0],18=A[1],1a=A[2];9 x=1w-b,y=18-1E,z=1a-1J;8 11.u([b+R[0][0]*x+R[0][1]*y+R[0][2]*z,1E+R[1][0]*x+R[1][1]*y+R[1][2]*z,1J+R[2][0]*x+R[2][1]*y+R[2][2]*z],[R[0][0]*N[0]+R[0][1]*N[1]+R[0][2]*N[2],R[1][0]*N[0]+R[1][1]*N[1]+R[1][2]*N[2],R[2][0]*N[0]+R[2][1]*N[1]+R[2][2]*N[2]])},1t:l(a){o(a.W){9 A=7.K.4,N=7.W.4;9 b=A[0],18=A[1],1a=A[2],2M=N[0],2L=N[1],2Q=N[2];9 c=7.K.1t(a).4;9 d=b+2M,2p=18+2L,2m=1a+2Q;9 Q=a.1r([d,2p,2m]).4;9 e=[Q[0]+(Q[0]-d)-c[0],Q[1]+(Q[1]-2p)-c[1],Q[2]+(Q[2]-2m)-c[2]];8 11.u(c,e)}1d o(a.U){8 7.1V(F.1A,a)}1d{9 P=a.4||a;8 11.u(7.K.1t([P[0],P[1],(P[2]||0)]),7.W)}},1Z:l(a,b,c){a=v.u(a);a=a.1N();o(a===w){8 w}b=v.u(b);b=b.1N();o(b===w){8 w}o(1g(c)==\'1f\'){c=w}1d{c=v.u(c);c=c.1N();o(c===w){8 w}}9 d=a.4[0],18=a.4[1],1a=a.4[2];9 e=b.4[0],1W=b.4[1],1X=b.4[2];9 f,1i;o(c!==w){9 g=c.4[0],2l=c.4[1],2t=c.4[2];f=v.u([(1W-18)*(2t-1a)-(1X-1a)*(2l-18),(1X-1a)*(g-d)-(e-d)*(2t-1a),(e-d)*(2l-18)-(1W-18)*(g-d)]);1i=f.1u();o(1i===0){8 w}f=v.u([f.4[0]/1i,f.4[1]/1i,f.4[2]/1i])}1d{1i=F.1x(e*e+1W*1W+1X*1X);o(1i===0){8 w}f=v.u([b.4[0]/1i,b.4[1]/1i,b.4[2]/1i])}7.K=a;7.W=f;8 7}};11.u=l(a,b,c){9 P=25 11();8 P.1Z(a,b,c)};11.2I=11.u(v.1j(3),v.k);11.2H=11.u(v.1j(3),v.i);11.2G=11.u(v.1j(3),v.j);11.36=11.2I;11.35=11.2H;11.3j=11.2G;9 $V=v.u;9 $M=S.u;9 $L=14.u;9 $P=11.u;',62,206,'||||elements|||this|return|var||||||||||||function|||if||length||||create|Vector|null|||||||||Math|nj|while||do|anchor||||||||Matrix||direction||normal||||kj|Plane|ni|abs|Line|ki|precision|Sylvester|A2|push|A3|map|els|else||undefined|typeof|contains|mod|Zero|D3|D2|isParallelTo|kp|distanceFrom|cols|dup|pointClosestTo|np|reflectionIn|modulus|intersects|A1|sqrt|isSquare|X2|PI|X3|angleFrom|mod1|C2|mod2|sin|cos|break|C3|toRightTriangular|false|Y3|to3D|E2|E1|E3|Rotation|Y2|Y1|intersectionWith|rotate|v12|v13|rank|setVectors|nc|sum|multiply|prototype|eql|new|setElements|case|each|PA3|PA2|part|new_element|round|for|cross|product|AD2|isSameSizeAs|add|isPerpendicularTo|v22|AN3|inspect|AD3|AN2|toUnitVector|PsubQ3|PsubQ2|v23|dot|divisor|inverse|true|isSingular|determinant|max|canMultiplyFromLeft|subtract|rows|col|random|ZX|YZ|XY|Random|join|N2|N1|D1|slice|default|N3|dimensions|switch|liesIn|translate|snapTo|augment|Diagonal|trace|indexOf|diagonal|transpose|minor|row|isAntiparallelTo|ZY|YX|acos|RotationZ|RotationY|liesOn|RotationX|inv|rk|tr|det|toDiagonalMatrix|toUpperTriangular|version|XZ'.split('|'),0,{})) -------------------------------------------------------------------------------- /javascript/jcoglan.com/sylvester.js.gz: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulirish/css3please/8e10cd11f068e65021f4cc0c78e15010c219c436/javascript/jcoglan.com/sylvester.js.gz -------------------------------------------------------------------------------- /javascript/jquery.plugins.min.js: -------------------------------------------------------------------------------- 1 | // zero clipboard by : Joseph Huckaby 2 | var ZeroClipboard={version:"1.0.7",clients:{},moviePath:"ZeroClipboard.swf",nextId:1,$:function(a){if(typeof(a)=="string"){a=document.getElementById(a)}if(!a.addClass){a.hide=function(){this.style.display="none"};a.show=function(){this.style.display=""};a.addClass=function(b){this.removeClass(b);this.className+=" "+b};a.removeClass=function(d){var e=this.className.split(/\s+/);var b=-1;for(var c=0;c-1){e.splice(b,1);this.className=e.join(" ")}return this};a.hasClass=function(b){return !!this.className.match(new RegExp("\\s*"+b+"\\s*"))}}return a},setMoviePath:function(a){this.moviePath=a},dispatch:function(d,b,c){var a=this.clients[d];if(a){a.receiveEvent(b,c)}},register:function(b,a){this.clients[b]=a},getDOMObjectPosition:function(c,a){var b={left:0,top:0,width:c.width?c.width:c.offsetWidth,height:c.height?c.height:c.offsetHeight};$.extend(b,$(c).position());return b},Client:function(a){this.handlers={};this.id=ZeroClipboard.nextId++;this.movieId="ZeroClipboardMovie_"+this.id;ZeroClipboard.register(this.id,this);if(a){this.glue(a)}}};ZeroClipboard.Client.prototype={id:0,ready:false,movie:null,clipText:"",handCursorEnabled:true,cssEffects:true,handlers:null,glue:function(d,b,e){this.domElement=ZeroClipboard.$(d);var f=99;if(this.domElement.style.zIndex){f=parseInt(this.domElement.style.zIndex,10)+1}if(typeof(b)=="string"){b=ZeroClipboard.$(b)}else{if(typeof(b)=="undefined"){b=document.getElementsByTagName("body")[0]}}var c=ZeroClipboard.getDOMObjectPosition(this.domElement,b);this.div=document.createElement("div");var a=this.div.style;a.position="absolute";a.left=""+c.left+"px";a.top=""+c.top+"px";a.width=""+c.width+"px";a.height=""+c.height+"px";a.zIndex=f;if(typeof(e)=="object"){for(addedStyle in e){a[addedStyle]=e[addedStyle]}}b.appendChild(this.div);this.div.innerHTML=this.getHTML(c.width,c.height)},getHTML:function(d,a){var c="";var b="id="+this.id+"&width="+d+"&height="+a;if(navigator.userAgent.match(/MSIE/)){var e=location.href.match(/^https/i)?"https://":"http://";c+=''}else{c+=''}return c},hide:function(){if(this.div){this.div.style.left="-2000px"}},show:function(){this.reposition()},destroy:function(){if(this.domElement&&this.div){this.hide();this.div.innerHTML="";var a=document.getElementsByTagName("body")[0];try{a.removeChild(this.div)}catch(b){}this.domElement=null;this.div=null}},reposition:function(c){if(c){this.domElement=ZeroClipboard.$(c);if(!this.domElement){this.hide()}}if(this.domElement&&this.div){var b=ZeroClipboard.getDOMObjectPosition(this.domElement);var a=this.div.style;a.left=""+b.left+"px";a.top=""+b.top+"px"}},setText:function(a){this.clipText=a;if(this.ready){this.movie.setText(a)}},addEventListener:function(a,b){a=a.toString().toLowerCase().replace(/^on/,"");if(!this.handlers[a]){this.handlers[a]=[]}this.handlers[a].push(b)},setHandCursor:function(a){this.handCursorEnabled=a;if(this.ready){this.movie.setHandCursor(a)}},setCSSEffects:function(a){this.cssEffects=!!a},receiveEvent:function(d,e){d=d.toString().toLowerCase().replace(/^on/,"");switch(d){case"load":this.movie=document.getElementById(this.movieId);if(!this.movie){var c=this;setTimeout(function(){c.receiveEvent("load",null)},1);return}if(!this.ready&&navigator.userAgent.match(/Firefox/)&&navigator.userAgent.match(/Windows/)){var c=this;setTimeout(function(){c.receiveEvent("load",null)},100);this.ready=true;return}this.ready=true;this.movie.setText(this.clipText);this.movie.setHandCursor(this.handCursorEnabled);break;case"mouseover":if(this.domElement&&this.cssEffects){this.domElement.addClass("hover");if(this.recoverActive){this.domElement.addClass("active")}}break;case"mouseout":if(this.domElement&&this.cssEffects){this.recoverActive=false;if(this.domElement.hasClass("active")){this.domElement.removeClass("active");this.recoverActive=true}this.domElement.removeClass("hover")}break;case"mousedown":if(this.domElement&&this.cssEffects){this.domElement.addClass("active")}break;case"mouseup":if(this.domElement&&this.cssEffects){this.domElement.removeClass("active");this.recoverActive=false}break}if(this.handlers[d]){for(var b=0,a=this.handlers[d].length;bCloudgen Examplet Store) 7 | * Licensed under the MIT License: 8 | * http://www.opensource.org/licenses/mit-license.php 9 | * 10 | */ 11 | 12 | (function(a){a.fn.caret=function(o,k){var c,g,m=this[0];if(typeof o==="object"&&typeof o.start==="number"&&typeof o.end==="number"){c=o.start;g=o.end}else{if(typeof o==="number"&&typeof k==="number"){c=o;g=k}else{if(typeof o==="string"){if((c=m.value.indexOf(o))>-1){g=c+o.length}else{c=null}}else{if(Object.prototype.toString.call(o)==="[object RegExp]"){var l=o.exec(m.value);if(l!=null){c=l.index;g=c+l[0].length}}}}}if(typeof c!="undefined"){if(a.browser.msie){var i=this[0].createTextRange();i.collapse(true);i.moveStart("character",c);i.moveEnd("character",g-c);i.select()}else{this[0].selectionStart=c;this[0].selectionEnd=g}this[0].focus();return this}else{if(a.browser.msie){if(this[0].tagName.toLowerCase()!="textarea"){var d=this.val();var h=document.selection.createRange().duplicate();h.moveEnd("character",d.length);var n=(h.text==""?d.length:d.lastIndexOf(h.text));h=document.selection.createRange().duplicate();h.moveStart("character",-d.length);var j=h.text.length}else{var h=document.selection.createRange();var b=h.duplicate();b.moveToElementText(this[0]);b.setEndPoint("EndToEnd",h);var n=b.text.length-h.text.length;var j=n+h.text.length}}else{var n=m.selectionStart,j=m.selectionEnd}var f=m.value.substring(n,j);return{start:n,end:j,text:f,replace:function(e){return m.value.substring(0,n)+e+m.value.substring(j,m.value.length)}}}return this}})(jQuery); 13 | 14 | /*! Copyright (c) 2010 Brandon Aaron (http://brandonaaron.net) 15 | * Licensed under the MIT License (LICENSE.txt). 16 | * 17 | * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers. 18 | * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix. 19 | * Thanks to: Seamus Leahy for adding deltaX and deltaY 20 | * 21 | * Version: 3.0.4 22 | * 23 | * Requires: 1.2.2+ 24 | */ 25 | (function(c){var a=["DOMMouseScroll","mousewheel"];c.event.special.mousewheel={setup:function(){if(this.addEventListener){for(var d=a.length;d;){this.addEventListener(a[--d],b,false)}}else{this.onmousewheel=b}},teardown:function(){if(this.removeEventListener){for(var d=a.length;d;){this.removeEventListener(a[--d],b,false)}}else{this.onmousewheel=null}}};c.fn.extend({mousewheel:function(d){return d?this.bind("mousewheel",d):this.trigger("mousewheel")},unmousewheel:function(d){return this.unbind("mousewheel",d)}});function b(i){var g=i||window.event,f=[].slice.call(arguments,1),j=0,h=true,e=0,d=0;i=c.event.fix(g);i.type="mousewheel";if(i.wheelDelta){j=i.wheelDelta/120}if(i.detail){j=-i.detail/3}d=j;if(g.axis!==undefined&&g.axis===g.HORIZONTAL_AXIS){d=0;e=-1*j}if(g.wheelDeltaY!==undefined){d=g.wheelDeltaY/120}if(g.wheelDeltaX!==undefined){e=-1*g.wheelDeltaX/120}f.unshift(i,j,e,d);return c.event.handle.apply(this,f)}})(jQuery); 26 | 27 | 28 | 29 | /* jquery colorpicker plugin 30 | * Author: Stefan Petre www.eyecon.ro 31 | * http://www.eyecon.ro/colorpicker/ 32 | * Dual licensed under the MIT and GPL licenses 33 | */ 34 | (function(a){var b=function(){var b={},c,d=65,e,f='
',g={eventName:"click",onShow:function(){},onBeforeShow:function(){},onHide:function(){},onChange:function(){},onSubmit:function(){},color:"ff0000",livePreview:true,flat:false},h=function(b,c){var d=O(b);a(c).data("colorpicker").fields.eq(1).val(d.r).end().eq(2).val(d.g).end().eq(3).val(d.b).end()},i=function(b,c){a(c).data("colorpicker").fields.eq(4).val(b.h).end().eq(5).val(b.s).end().eq(6).val(b.b).end()},j=function(b,c){a(c).data("colorpicker").fields.eq(0).val(Q(b)).end()},k=function(b,c){a(c).data("colorpicker").selector.css("backgroundColor","#"+Q({h:b.h,s:100,b:100}));a(c).data("colorpicker").selectorIndic.css({left:parseInt(150*b.s/100,10),top:parseInt(150*(100-b.b)/100,10)})},l=function(b,c){a(c).data("colorpicker").hue.css("top",parseInt(150-150*b.h/360,10))},m=function(b,c){a(c).data("colorpicker").currentColor.css("backgroundColor","#"+Q(b))},n=function(b,c){a(c).data("colorpicker").newColor.css("backgroundColor","#"+Q(b))},o=function(b){var c=b.charCode||b.keyCode||-1;if(c>d&&c<=90||c==32){return false}var e=a(this).parent().parent();if(e.data("colorpicker").livePreview===true){p.apply(this)}},p=function(b){var c=a(this).parent().parent(),d;if(this.parentNode.className.indexOf("_hex")>0){c.data("colorpicker").color=d=M(K(this.value))}else if(this.parentNode.className.indexOf("_hsb")>0){c.data("colorpicker").color=d=I({h:parseInt(c.data("colorpicker").fields.eq(4).val(),10),s:parseInt(c.data("colorpicker").fields.eq(5).val(),10),b:parseInt(c.data("colorpicker").fields.eq(6).val(),10)})}else{c.data("colorpicker").color=d=N(J({r:parseInt(c.data("colorpicker").fields.eq(1).val(),10),g:parseInt(c.data("colorpicker").fields.eq(2).val(),10),b:parseInt(c.data("colorpicker").fields.eq(3).val(),10)}))}if(b){h(d,c.get(0));j(d,c.get(0));i(d,c.get(0))}k(d,c.get(0));l(d,c.get(0));n(d,c.get(0));c.data("colorpicker").onChange.apply(c,[d,Q(d),O(d)])},q=function(b){var c=a(this).parent().parent();c.data("colorpicker").fields.parent().removeClass("colorpicker_focus")},r=function(){d=this.parentNode.className.indexOf("_hex")>0?70:65;a(this).parent().parent().data("colorpicker").fields.parent().removeClass("colorpicker_focus");a(this).parent().addClass("colorpicker_focus")},s=function(b){var c=a(this).parent().find("input").focus();var d={el:a(this).parent().addClass("colorpicker_slider"),max:this.parentNode.className.indexOf("_hsb_h")>0?360:this.parentNode.className.indexOf("_hsb")>0?100:255,y:b.pageY,field:c,val:parseInt(c.val(),10),preview:a(this).parent().parent().data("colorpicker").livePreview};a(document).bind("mouseup",d,u);a(document).bind("mousemove",d,t)},t=function(a){a.data.field.val(Math.max(0,Math.min(a.data.max,parseInt(a.data.val+a.pageY-a.data.y,10))));if(a.data.preview){p.apply(a.data.field.get(0),[true])}return false},u=function(b){p.apply(b.data.field.get(0),[true]);b.data.el.removeClass("colorpicker_slider").find("input").focus();a(document).unbind("mouseup",u);a(document).unbind("mousemove",t);return false},v=function(b){var c={cal:a(this).parent(),y:a(this).offset().top};c.preview=c.cal.data("colorpicker").livePreview;a(document).bind("mouseup",c,x);a(document).bind("mousemove",c,w)},w=function(a){p.apply(a.data.cal.data("colorpicker").fields.eq(4).val(parseInt(360*(150-Math.max(0,Math.min(150,a.pageY-a.data.y)))/150,10)).get(0),[a.data.preview]);return false},x=function(b){h(b.data.cal.data("colorpicker").color,b.data.cal.get(0));j(b.data.cal.data("colorpicker").color,b.data.cal.get(0));a(document).unbind("mouseup",x);a(document).unbind("mousemove",w);return false},y=function(b){var c={cal:a(this).parent(),pos:a(this).offset()};c.preview=c.cal.data("colorpicker").livePreview;a(document).bind("mouseup",c,A);a(document).bind("mousemove",c,z)},z=function(a){p.apply(a.data.cal.data("colorpicker").fields.eq(6).val(parseInt(100*(150-Math.max(0,Math.min(150,a.pageY-a.data.pos.top)))/150,10)).end().eq(5).val(parseInt(100*Math.max(0,Math.min(150,a.pageX-a.data.pos.left))/150,10)).get(0),[a.data.preview]);return false},A=function(b){h(b.data.cal.data("colorpicker").color,b.data.cal.get(0));j(b.data.cal.data("colorpicker").color,b.data.cal.get(0));a(document).unbind("mouseup",A);a(document).unbind("mousemove",z);return false},B=function(b){a(this).addClass("colorpicker_focus")},C=function(b){a(this).removeClass("colorpicker_focus")},D=function(b){var c=a(this).parent();var d=c.data("colorpicker").color;c.data("colorpicker").origColor=d;m(d,c.get(0));c.data("colorpicker").onSubmit(d,Q(d),O(d),c.data("colorpicker").el)},E=function(b){var c=a("#"+a(this).data("colorpickerId"));c.data("colorpicker").onBeforeShow.apply(this,[c.get(0)]);var d=a(this).offset();var e=H();var f=d.top+this.offsetHeight;var g=d.left;if(f+176>e.t+e.h){f-=this.offsetHeight+176}if(g+356>e.l+e.w){g-=356}c.css({left:g+"px",top:f+"px"});if(c.data("colorpicker").onShow.apply(this,[c.get(0)])!=false){c.show()}a(document).bind("mousedown",{cal:c},F);return false},F=function(b){if(!G(b.data.cal.get(0),b.target,b.data.cal.get(0))){if(b.data.cal.data("colorpicker").onHide.apply(this,[b.data.cal.get(0)])!=false){b.data.cal.hide()}a(document).unbind("mousedown",F)}},G=function(a,b,c){if(a==b){return true}if(a.contains){return a.contains(b)}if(a.compareDocumentPosition){return!!(a.compareDocumentPosition(b)&16)}var d=b.parentNode;while(d&&d!=c){if(d==a)return true;d=d.parentNode}return false},H=function(){var a=document.compatMode=="CSS1Compat";return{l:window.pageXOffset||(a?document.documentElement.scrollLeft:document.body.scrollLeft),t:window.pageYOffset||(a?document.documentElement.scrollTop:document.body.scrollTop),w:window.innerWidth||(a?document.documentElement.clientWidth:document.body.clientWidth),h:window.innerHeight||(a?document.documentElement.clientHeight:document.body.clientHeight)}},I=function(a){return{h:Math.min(360,Math.max(0,a.h)),s:Math.min(100,Math.max(0,a.s)),b:Math.min(100,Math.max(0,a.b))}},J=function(a){return{r:Math.min(255,Math.max(0,a.r)),g:Math.min(255,Math.max(0,a.g)),b:Math.min(255,Math.max(0,a.b))}},K=function(a){var b=6-a.length;if(b>0){var c=[];for(var d=0;d-1?a.substring(1):a,16);return{r:a>>16,g:(a&65280)>>8,b:a&255}},M=function(a){return N(L(a))},N=function(a){var b={h:0,s:0,b:0};var c=Math.min(a.r,a.g,a.b);var d=Math.max(a.r,a.g,a.b);var e=d-c;b.b=d;if(d!=0){}b.s=d!=0?255*e/d:0;if(b.s!=0){if(a.r==d){b.h=(a.g-a.b)/e}else if(a.g==d){b.h=2+(a.b-a.r)/e}else{b.h=4+(a.r-a.g)/e}}else{b.h=-1}b.h*=60;if(b.h<0){b.h+=360}b.s*=100/255;b.b*=100/255;return b},O=function(a){var b={};var c=Math.round(a.h);var d=Math.round(a.s*255/100);var e=Math.round(a.b*255/100);if(d==0){b.r=b.g=b.b=e}else{var f=e;var g=(255-d)*e/255;var h=(f-g)*(c%60)/60;if(c==360)c=0;if(c<60){b.r=f;b.b=g;b.g=g+h}else if(c<120){b.g=f;b.b=g;b.r=f-h}else if(c<180){b.g=f;b.r=g;b.b=g+h}else if(c<240){b.b=f;b.r=g;b.g=f-h}else if(c<300){b.b=f;b.g=g;b.r=g+h}else if(c<360){b.r=f;b.g=g;b.b=f-h}else{b.r=0;b.g=0;b.b=0}}return{r:Math.round(b.r),g:Math.round(b.g),b:Math.round(b.b)}},P=function(b){var c=[b.r.toString(16),b.g.toString(16),b.b.toString(16)];a.each(c,function(a,b){if(b.length==1){c[a]="0"+b}});return c.join("")},Q=function(a){return P(O(a))},R=function(){var b=a(this).parent();var c=b.data("colorpicker").origColor;b.data("colorpicker").color=c;h(c,b.get(0));j(c,b.get(0));i(c,b.get(0));k(c,b.get(0));l(c,b.get(0));n(c,b.get(0))};return{init:function(b){b=a.extend({},g,b||{});if(typeof b.color=="string"){b.color=M(b.color)}else if(b.color.r!=undefined&&b.color.g!=undefined&&b.color.b!=undefined){b.color=N(b.color)}else if(b.color.h!=undefined&&b.color.s!=undefined&&b.color.b!=undefined){b.color=I(b.color)}else{return this}return this.each(function(){if(!a(this).data("colorpickerId")){var c=a.extend({},b);c.origColor=b.color;var d="collorpicker_"+parseInt(Math.random()*1e3);a(this).data("colorpickerId",d);var e=a(f).attr("id",d);if(c.flat){e.appendTo(this).show()}else{e.appendTo(document.body)}c.fields=e.find("input").bind("keyup",o).bind("change",p).bind("blur",q).bind("focus",r);e.find("span").bind("mousedown",s).end().find(">div.colorpicker_current_color").bind("click",R);c.selector=e.find("div.colorpicker_color").bind("mousedown",y);c.selectorIndic=c.selector.find("div div");c.el=this;c.hue=e.find("div.colorpicker_hue div");e.find("div.colorpicker_hue").bind("mousedown",v);c.newColor=e.find("div.colorpicker_new_color");c.currentColor=e.find("div.colorpicker_current_color");e.data("colorpicker",c);e.find("div.colorpicker_submit").bind("mouseenter",B).bind("mouseleave",C).bind("click",D);h(c.color,e.get(0));i(c.color,e.get(0));j(c.color,e.get(0));l(c.color,e.get(0));k(c.color,e.get(0));m(c.color,e.get(0));n(c.color,e.get(0));if(c.flat){e.css({position:"relative",display:"block"})}else{a(this).bind(c.eventName,E)}}})},showPicker:function(){return this.each(function(){if(a(this).data("colorpickerId")){E.apply(this)}})},hidePicker:function(){return this.each(function(){if(a(this).data("colorpickerId")){a("#"+a(this).data("colorpickerId")).hide()}})},setColor:function(b){if(typeof b=="string"){b=M(b)}else if(b.r!=undefined&&b.g!=undefined&&b.b!=undefined){b=N(b)}else if(b.h!=undefined&&b.s!=undefined&&b.b!=undefined){b=I(b)}else{return this}return this.each(function(){if(a(this).data("colorpickerId")){var c=a("#"+a(this).data("colorpickerId"));c.data("colorpicker").color=b;c.data("colorpicker").origColor=b;h(b,c.get(0));i(b,c.get(0));j(b,c.get(0));l(b,c.get(0));k(b,c.get(0));m(b,c.get(0));n(b,c.get(0))}})}}}();a.fn.extend({ColorPicker:b.init,ColorPickerHide:b.hidePicker,ColorPickerShow:b.showPicker,ColorPickerSetColor:b.setColor})})(jQuery) 35 | 36 | 37 | // matrix math via sylvester library 38 | // http://sylvester.jcoglan.com 39 | eval(function(p,a,c,k,e,r){e=function(c){return(c35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('9 17={3i:\'0.1.3\',16:1e-6};l v(){}v.23={e:l(i){8(i<1||i>7.4.q)?w:7.4[i-1]},2R:l(){8 7.4.q},1u:l(){8 F.1x(7.2u(7))},24:l(a){9 n=7.4.q;9 V=a.4||a;o(n!=V.q){8 1L}J{o(F.13(7.4[n-1]-V[n-1])>17.16){8 1L}}H(--n);8 2x},1q:l(){8 v.u(7.4)},1b:l(a){9 b=[];7.28(l(x,i){b.19(a(x,i))});8 v.u(b)},28:l(a){9 n=7.4.q,k=n,i;J{i=k-n;a(7.4[i],i+1)}H(--n)},2q:l(){9 r=7.1u();o(r===0){8 7.1q()}8 7.1b(l(x){8 x/r})},1C:l(a){9 V=a.4||a;9 n=7.4.q,k=n,i;o(n!=V.q){8 w}9 b=0,1D=0,1F=0;7.28(l(x,i){b+=x*V[i-1];1D+=x*x;1F+=V[i-1]*V[i-1]});1D=F.1x(1D);1F=F.1x(1F);o(1D*1F===0){8 w}9 c=b/(1D*1F);o(c<-1){c=-1}o(c>1){c=1}8 F.37(c)},1m:l(a){9 b=7.1C(a);8(b===w)?w:(b<=17.16)},34:l(a){9 b=7.1C(a);8(b===w)?w:(F.13(b-F.1A)<=17.16)},2k:l(a){9 b=7.2u(a);8(b===w)?w:(F.13(b)<=17.16)},2j:l(a){9 V=a.4||a;o(7.4.q!=V.q){8 w}8 7.1b(l(x,i){8 x+V[i-1]})},2C:l(a){9 V=a.4||a;o(7.4.q!=V.q){8 w}8 7.1b(l(x,i){8 x-V[i-1]})},22:l(k){8 7.1b(l(x){8 x*k})},x:l(k){8 7.22(k)},2u:l(a){9 V=a.4||a;9 i,2g=0,n=7.4.q;o(n!=V.q){8 w}J{2g+=7.4[n-1]*V[n-1]}H(--n);8 2g},2f:l(a){9 B=a.4||a;o(7.4.q!=3||B.q!=3){8 w}9 A=7.4;8 v.u([(A[1]*B[2])-(A[2]*B[1]),(A[2]*B[0])-(A[0]*B[2]),(A[0]*B[1])-(A[1]*B[0])])},2A:l(){9 m=0,n=7.4.q,k=n,i;J{i=k-n;o(F.13(7.4[i])>F.13(m)){m=7.4[i]}}H(--n);8 m},2Z:l(x){9 a=w,n=7.4.q,k=n,i;J{i=k-n;o(a===w&&7.4[i]==x){a=i+1}}H(--n);8 a},3g:l(){8 S.2X(7.4)},2d:l(){8 7.1b(l(x){8 F.2d(x)})},2V:l(x){8 7.1b(l(y){8(F.13(y-x)<=17.16)?x:y})},1o:l(a){o(a.K){8 a.1o(7)}9 V=a.4||a;o(V.q!=7.4.q){8 w}9 b=0,2b;7.28(l(x,i){2b=x-V[i-1];b+=2b*2b});8 F.1x(b)},3a:l(a){8 a.1h(7)},2T:l(a){8 a.1h(7)},1V:l(t,a){9 V,R,x,y,z;2S(7.4.q){27 2:V=a.4||a;o(V.q!=2){8 w}R=S.1R(t).4;x=7.4[0]-V[0];y=7.4[1]-V[1];8 v.u([V[0]+R[0][0]*x+R[0][1]*y,V[1]+R[1][0]*x+R[1][1]*y]);1I;27 3:o(!a.U){8 w}9 C=a.1r(7).4;R=S.1R(t,a.U).4;x=7.4[0]-C[0];y=7.4[1]-C[1];z=7.4[2]-C[2];8 v.u([C[0]+R[0][0]*x+R[0][1]*y+R[0][2]*z,C[1]+R[1][0]*x+R[1][1]*y+R[1][2]*z,C[2]+R[2][0]*x+R[2][1]*y+R[2][2]*z]);1I;2P:8 w}},1t:l(a){o(a.K){9 P=7.4.2O();9 C=a.1r(P).4;8 v.u([C[0]+(C[0]-P[0]),C[1]+(C[1]-P[1]),C[2]+(C[2]-(P[2]||0))])}1d{9 Q=a.4||a;o(7.4.q!=Q.q){8 w}8 7.1b(l(x,i){8 Q[i-1]+(Q[i-1]-x)})}},1N:l(){9 V=7.1q();2S(V.4.q){27 3:1I;27 2:V.4.19(0);1I;2P:8 w}8 V},2n:l(){8\'[\'+7.4.2K(\', \')+\']\'},26:l(a){7.4=(a.4||a).2O();8 7}};v.u=l(a){9 V=25 v();8 V.26(a)};v.i=v.u([1,0,0]);v.j=v.u([0,1,0]);v.k=v.u([0,0,1]);v.2J=l(n){9 a=[];J{a.19(F.2F())}H(--n);8 v.u(a)};v.1j=l(n){9 a=[];J{a.19(0)}H(--n);8 v.u(a)};l S(){}S.23={e:l(i,j){o(i<1||i>7.4.q||j<1||j>7.4[0].q){8 w}8 7.4[i-1][j-1]},33:l(i){o(i>7.4.q){8 w}8 v.u(7.4[i-1])},2E:l(j){o(j>7.4[0].q){8 w}9 a=[],n=7.4.q,k=n,i;J{i=k-n;a.19(7.4[i][j-1])}H(--n);8 v.u(a)},2R:l(){8{2D:7.4.q,1p:7.4[0].q}},2D:l(){8 7.4.q},1p:l(){8 7.4[0].q},24:l(a){9 M=a.4||a;o(1g(M[0][0])==\'1f\'){M=S.u(M).4}o(7.4.q!=M.q||7.4[0].q!=M[0].q){8 1L}9 b=7.4.q,15=b,i,G,10=7.4[0].q,j;J{i=15-b;G=10;J{j=10-G;o(F.13(7.4[i][j]-M[i][j])>17.16){8 1L}}H(--G)}H(--b);8 2x},1q:l(){8 S.u(7.4)},1b:l(a){9 b=[],12=7.4.q,15=12,i,G,10=7.4[0].q,j;J{i=15-12;G=10;b[i]=[];J{j=10-G;b[i][j]=a(7.4[i][j],i+1,j+1)}H(--G)}H(--12);8 S.u(b)},2i:l(a){9 M=a.4||a;o(1g(M[0][0])==\'1f\'){M=S.u(M).4}8(7.4.q==M.q&&7.4[0].q==M[0].q)},2j:l(a){9 M=a.4||a;o(1g(M[0][0])==\'1f\'){M=S.u(M).4}o(!7.2i(M)){8 w}8 7.1b(l(x,i,j){8 x+M[i-1][j-1]})},2C:l(a){9 M=a.4||a;o(1g(M[0][0])==\'1f\'){M=S.u(M).4}o(!7.2i(M)){8 w}8 7.1b(l(x,i,j){8 x-M[i-1][j-1]})},2B:l(a){9 M=a.4||a;o(1g(M[0][0])==\'1f\'){M=S.u(M).4}8(7.4[0].q==M.q)},22:l(a){o(!a.4){8 7.1b(l(x){8 x*a})}9 b=a.1u?2x:1L;9 M=a.4||a;o(1g(M[0][0])==\'1f\'){M=S.u(M).4}o(!7.2B(M)){8 w}9 d=7.4.q,15=d,i,G,10=M[0].q,j;9 e=7.4[0].q,4=[],21,20,c;J{i=15-d;4[i]=[];G=10;J{j=10-G;21=0;20=e;J{c=e-20;21+=7.4[i][c]*M[c][j]}H(--20);4[i][j]=21}H(--G)}H(--d);9 M=S.u(4);8 b?M.2E(1):M},x:l(a){8 7.22(a)},32:l(a,b,c,d){9 e=[],12=c,i,G,j;9 f=7.4.q,1p=7.4[0].q;J{i=c-12;e[i]=[];G=d;J{j=d-G;e[i][j]=7.4[(a+i-1)%f][(b+j-1)%1p]}H(--G)}H(--12);8 S.u(e)},31:l(){9 a=7.4.q,1p=7.4[0].q;9 b=[],12=1p,i,G,j;J{i=1p-12;b[i]=[];G=a;J{j=a-G;b[i][j]=7.4[j][i]}H(--G)}H(--12);8 S.u(b)},1y:l(){8(7.4.q==7.4[0].q)},2A:l(){9 m=0,12=7.4.q,15=12,i,G,10=7.4[0].q,j;J{i=15-12;G=10;J{j=10-G;o(F.13(7.4[i][j])>F.13(m)){m=7.4[i][j]}}H(--G)}H(--12);8 m},2Z:l(x){9 a=w,12=7.4.q,15=12,i,G,10=7.4[0].q,j;J{i=15-12;G=10;J{j=10-G;o(7.4[i][j]==x){8{i:i+1,j:j+1}}}H(--G)}H(--12);8 w},30:l(){o(!7.1y){8 w}9 a=[],n=7.4.q,k=n,i;J{i=k-n;a.19(7.4[i][i])}H(--n);8 v.u(a)},1K:l(){9 M=7.1q(),1c;9 n=7.4.q,k=n,i,1s,1n=7.4[0].q,p;J{i=k-n;o(M.4[i][i]==0){2e(j=i+1;j17.16){1Y++;1I}}H(--G)}H(--a);8 1Y},3d:l(){8 7.1Y()},2W:l(a){9 M=a.4||a;o(1g(M[0][0])==\'1f\'){M=S.u(M).4}9 T=7.1q(),1p=T.4[0].q;9 b=T.4.q,15=b,i,G,10=M[0].q,j;o(b!=M.q){8 w}J{i=15-b;G=10;J{j=10-G;T.4[i][1p+j]=M[i][j]}H(--G)}H(--b);8 T},2w:l(){o(!7.1y()||7.2y()){8 w}9 a=7.4.q,15=a,i,j;9 M=7.2W(S.I(a)).1K();9 b,1n=M.4[0].q,p,1c,2v;9 c=[],2c;J{i=a-1;1c=[];b=1n;c[i]=[];2v=M.4[i][i];J{p=1n-b;2c=M.4[i][p]/2v;1c.19(2c);o(p>=15){c[i].19(2c)}}H(--b);M.4[i]=1c;2e(j=0;j3||b.4.q>3){8 w}9 c=b.1u();o(c===0){8 w}7.K=a;7.U=v.u([b.4[0]/c,b.4[1]/c,b.4[2]/c]);8 7}};14.u=l(a,b){9 L=25 14();8 L.1Z(a,b)};14.X=14.u(v.1j(3),v.i);14.Y=14.u(v.1j(3),v.j);14.Z=14.u(v.1j(3),v.k);l 11(){}11.23={24:l(a){8(7.1h(a.K)&&7.1m(a))},1q:l(){8 11.u(7.K,7.W)},2U:l(a){9 V=a.4||a;8 11.u([7.K.4[0]+V[0],7.K.4[1]+V[1],7.K.4[2]+(V[2]||0)],7.W)},1m:l(a){9 b;o(a.W){b=7.W.1C(a.W);8(F.13(b)<=17.16||F.13(F.1A-b)<=17.16)}1d o(a.U){8 7.W.2k(a.U)}8 w},2k:l(a){9 b=7.W.1C(a.W);8(F.13(F.1A/2-b)<=17.16)},1o:l(a){o(7.1v(a)||7.1h(a)){8 0}o(a.K){9 A=7.K.4,B=a.K.4,N=7.W.4;8 F.13((A[0]-B[0])*N[0]+(A[1]-B[1])*N[1]+(A[2]-B[2])*N[2])}1d{9 P=a.4||a;9 A=7.K.4,N=7.W.4;8 F.13((A[0]-P[0])*N[0]+(A[1]-P[1])*N[1]+(A[2]-(P[2]||0))*N[2])}},1h:l(a){o(a.W){8 w}o(a.U){8(7.1h(a.K)&&7.1h(a.K.2j(a.U)))}1d{9 P=a.4||a;9 A=7.K.4,N=7.W.4;9 b=F.13(N[0]*(A[0]-P[0])+N[1]*(A[1]-P[1])+N[2]*(A[2]-(P[2]||0)));8(b<=17.16)}},1v:l(a){o(1g(a.U)==\'1f\'&&1g(a.W)==\'1f\'){8 w}8!7.1m(a)},1U:l(a){o(!7.1v(a)){8 w}o(a.U){9 A=a.K.4,D=a.U.4,P=7.K.4,N=7.W.4;9 b=(N[0]*(P[0]-A[0])+N[1]*(P[1]-A[1])+N[2]*(P[2]-A[2]))/(N[0]*D[0]+N[1]*D[1]+N[2]*D[2]);8 v.u([A[0]+D[0]*b,A[1]+D[1]*b,A[2]+D[2]*b])}1d o(a.W){9 c=7.W.2f(a.W).2q();9 N=7.W.4,A=7.K.4,O=a.W.4,B=a.K.4;9 d=S.1j(2,2),i=0;H(d.2y()){i++;d=S.u([[N[i%3],N[(i+1)%3]],[O[i%3],O[(i+1)%3]]])}9 e=d.2w().4;9 x=N[0]*A[0]+N[1]*A[1]+N[2]*A[2];9 y=O[0]*B[0]+O[1]*B[1]+O[2]*B[2];9 f=[e[0][0]*x+e[0][1]*y,e[1][0]*x+e[1][1]*y];9 g=[];2e(9 j=1;j<=3;j++){g.19((i==j)?0:f[(j+(5-i)%3)%3])}8 14.u(g,c)}},1r:l(a){9 P=a.4||a;9 A=7.K.4,N=7.W.4;9 b=(A[0]-P[0])*N[0]+(A[1]-P[1])*N[1]+(A[2]-(P[2]||0))*N[2];8 v.u([P[0]+N[0]*b,P[1]+N[1]*b,(P[2]||0)+N[2]*b])},1V:l(t,a){9 R=S.1R(t,a.U).4;9 C=a.1r(7.K).4;9 A=7.K.4,N=7.W.4;9 b=C[0],1E=C[1],1J=C[2],1w=A[0],18=A[1],1a=A[2];9 x=1w-b,y=18-1E,z=1a-1J;8 11.u([b+R[0][0]*x+R[0][1]*y+R[0][2]*z,1E+R[1][0]*x+R[1][1]*y+R[1][2]*z,1J+R[2][0]*x+R[2][1]*y+R[2][2]*z],[R[0][0]*N[0]+R[0][1]*N[1]+R[0][2]*N[2],R[1][0]*N[0]+R[1][1]*N[1]+R[1][2]*N[2],R[2][0]*N[0]+R[2][1]*N[1]+R[2][2]*N[2]])},1t:l(a){o(a.W){9 A=7.K.4,N=7.W.4;9 b=A[0],18=A[1],1a=A[2],2M=N[0],2L=N[1],2Q=N[2];9 c=7.K.1t(a).4;9 d=b+2M,2p=18+2L,2m=1a+2Q;9 Q=a.1r([d,2p,2m]).4;9 e=[Q[0]+(Q[0]-d)-c[0],Q[1]+(Q[1]-2p)-c[1],Q[2]+(Q[2]-2m)-c[2]];8 11.u(c,e)}1d o(a.U){8 7.1V(F.1A,a)}1d{9 P=a.4||a;8 11.u(7.K.1t([P[0],P[1],(P[2]||0)]),7.W)}},1Z:l(a,b,c){a=v.u(a);a=a.1N();o(a===w){8 w}b=v.u(b);b=b.1N();o(b===w){8 w}o(1g(c)==\'1f\'){c=w}1d{c=v.u(c);c=c.1N();o(c===w){8 w}}9 d=a.4[0],18=a.4[1],1a=a.4[2];9 e=b.4[0],1W=b.4[1],1X=b.4[2];9 f,1i;o(c!==w){9 g=c.4[0],2l=c.4[1],2t=c.4[2];f=v.u([(1W-18)*(2t-1a)-(1X-1a)*(2l-18),(1X-1a)*(g-d)-(e-d)*(2t-1a),(e-d)*(2l-18)-(1W-18)*(g-d)]);1i=f.1u();o(1i===0){8 w}f=v.u([f.4[0]/1i,f.4[1]/1i,f.4[2]/1i])}1d{1i=F.1x(e*e+1W*1W+1X*1X);o(1i===0){8 w}f=v.u([b.4[0]/1i,b.4[1]/1i,b.4[2]/1i])}7.K=a;7.W=f;8 7}};11.u=l(a,b,c){9 P=25 11();8 P.1Z(a,b,c)};11.2I=11.u(v.1j(3),v.k);11.2H=11.u(v.1j(3),v.i);11.2G=11.u(v.1j(3),v.j);11.36=11.2I;11.35=11.2H;11.3j=11.2G;9 $V=v.u;9 $M=S.u;9 $L=14.u;9 $P=11.u;',62,206,'||||elements|||this|return|var||||||||||||function|||if||length||||create|Vector|null|||||||||Math|nj|while||do|anchor||||||||Matrix||direction||normal||||kj|Plane|ni|abs|Line|ki|precision|Sylvester|A2|push|A3|map|els|else||undefined|typeof|contains|mod|Zero|D3|D2|isParallelTo|kp|distanceFrom|cols|dup|pointClosestTo|np|reflectionIn|modulus|intersects|A1|sqrt|isSquare|X2|PI|X3|angleFrom|mod1|C2|mod2|sin|cos|break|C3|toRightTriangular|false|Y3|to3D|E2|E1|E3|Rotation|Y2|Y1|intersectionWith|rotate|v12|v13|rank|setVectors|nc|sum|multiply|prototype|eql|new|setElements|case|each|PA3|PA2|part|new_element|round|for|cross|product|AD2|isSameSizeAs|add|isPerpendicularTo|v22|AN3|inspect|AD3|AN2|toUnitVector|PsubQ3|PsubQ2|v23|dot|divisor|inverse|true|isSingular|determinant|max|canMultiplyFromLeft|subtract|rows|col|random|ZX|YZ|XY|Random|join|N2|N1|D1|slice|default|N3|dimensions|switch|liesIn|translate|snapTo|augment|Diagonal|trace|indexOf|diagonal|transpose|minor|row|isAntiparallelTo|ZY|YX|acos|RotationZ|RotationY|liesOn|RotationX|inv|rk|tr|det|toDiagonalMatrix|toUpperTriangular|version|XZ'.split('|'),0,{})) 40 | 41 | 42 | -------------------------------------------------------------------------------- /javascript/zc/ZeroClipboard.as: -------------------------------------------------------------------------------- 1 | package { 2 | // Simple Set Clipboard System 3 | // Author: Joseph Huckaby 4 | 5 | import flash.display.Stage; 6 | import flash.display.Sprite; 7 | import flash.display.LoaderInfo; 8 | import flash.display.StageScaleMode; 9 | import flash.events.*; 10 | import flash.display.StageAlign; 11 | import flash.display.StageScaleMode; 12 | import flash.external.ExternalInterface; 13 | import flash.system.Security; 14 | import flash.utils.*; 15 | import flash.system.System; 16 | 17 | public class ZeroClipboard extends Sprite { 18 | 19 | private var id:String = ''; 20 | private var button:Sprite; 21 | private var clipText:String = ''; 22 | 23 | public function ZeroClipboard() { 24 | // constructor, setup event listeners and external interfaces 25 | stage.scaleMode = StageScaleMode.EXACT_FIT; 26 | flash.system.Security.allowDomain("*"); 27 | 28 | // import flashvars 29 | var flashvars:Object = LoaderInfo( this.root.loaderInfo ).parameters; 30 | id = flashvars.id; 31 | 32 | // invisible button covers entire stage 33 | button = new Sprite(); 34 | button.buttonMode = true; 35 | button.useHandCursor = true; 36 | button.graphics.beginFill(0xCCFF00); 37 | button.graphics.drawRect(0, 0, Math.floor(flashvars.width), Math.floor(flashvars.height)); 38 | button.alpha = 0.0; 39 | addChild(button); 40 | button.addEventListener(MouseEvent.CLICK, clickHandler); 41 | 42 | button.addEventListener(MouseEvent.MOUSE_OVER, function(event:Event) { 43 | ExternalInterface.call( 'ZeroClipboard.dispatch', id, 'mouseOver', null ); 44 | } ); 45 | button.addEventListener(MouseEvent.MOUSE_OUT, function(event:Event) { 46 | ExternalInterface.call( 'ZeroClipboard.dispatch', id, 'mouseOut', null ); 47 | } ); 48 | button.addEventListener(MouseEvent.MOUSE_DOWN, function(event:Event) { 49 | ExternalInterface.call( 'ZeroClipboard.dispatch', id, 'mouseDown', null ); 50 | } ); 51 | button.addEventListener(MouseEvent.MOUSE_UP, function(event:Event) { 52 | ExternalInterface.call( 'ZeroClipboard.dispatch', id, 'mouseUp', null ); 53 | } ); 54 | 55 | // external functions 56 | ExternalInterface.addCallback("setHandCursor", setHandCursor); 57 | ExternalInterface.addCallback("setText", setText); 58 | 59 | // signal to the browser that we are ready 60 | ExternalInterface.call( 'ZeroClipboard.dispatch', id, 'load', null ); 61 | } 62 | 63 | public function setText(newText) { 64 | // set the maximum number of files allowed 65 | clipText = newText; 66 | } 67 | 68 | public function setHandCursor(enabled:Boolean) { 69 | // control whether the hand cursor is shown on rollover (true) 70 | // or the default arrow cursor (false) 71 | button.useHandCursor = enabled; 72 | } 73 | 74 | private function clickHandler(event:Event):void { 75 | // user click copies text to clipboard 76 | // as of flash player 10, this MUST happen from an in-movie flash click event 77 | System.setClipboard( clipText ); 78 | ExternalInterface.call( 'ZeroClipboard.dispatch', id, 'complete', clipText ); 79 | } 80 | } 81 | } 82 | -------------------------------------------------------------------------------- /javascript/zc/ZeroClipboard.fla: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulirish/css3please/8e10cd11f068e65021f4cc0c78e15010c219c436/javascript/zc/ZeroClipboard.fla -------------------------------------------------------------------------------- /javascript/zc/ZeroClipboard.js: -------------------------------------------------------------------------------- 1 | // Simple Set Clipboard System 2 | // Author: Joseph Huckaby 3 | 4 | var ZeroClipboard = { 5 | 6 | version: "1.0.7", 7 | clients: {}, // registered upload clients on page, indexed by id 8 | moviePath: 'ZeroClipboard.swf', // URL to movie 9 | nextId: 1, // ID of next movie 10 | 11 | $: function(thingy) { 12 | // simple DOM lookup utility function 13 | if (typeof(thingy) == 'string') thingy = document.getElementById(thingy); 14 | if (!thingy.addClass) { 15 | // extend element with a few useful methods 16 | thingy.hide = function() { this.style.display = 'none'; }; 17 | thingy.show = function() { this.style.display = ''; }; 18 | thingy.addClass = function(name) { this.removeClass(name); this.className += ' ' + name; }; 19 | thingy.removeClass = function(name) { 20 | var classes = this.className.split(/\s+/); 21 | var idx = -1; 22 | for (var k = 0; k < classes.length; k++) { 23 | if (classes[k] == name) { idx = k; k = classes.length; } 24 | } 25 | if (idx > -1) { 26 | classes.splice( idx, 1 ); 27 | this.className = classes.join(' '); 28 | } 29 | return this; 30 | }; 31 | thingy.hasClass = function(name) { 32 | return !!this.className.match( new RegExp("\\s*" + name + "\\s*") ); 33 | }; 34 | } 35 | return thingy; 36 | }, 37 | 38 | setMoviePath: function(path) { 39 | // set path to ZeroClipboard.swf 40 | this.moviePath = path; 41 | }, 42 | 43 | dispatch: function(id, eventName, args) { 44 | // receive event from flash movie, send to client 45 | var client = this.clients[id]; 46 | if (client) { 47 | client.receiveEvent(eventName, args); 48 | } 49 | }, 50 | 51 | register: function(id, client) { 52 | // register new client to receive events 53 | this.clients[id] = client; 54 | }, 55 | 56 | getDOMObjectPosition: function(obj, stopObj) { 57 | // get absolute coordinates for dom element 58 | var info = { 59 | left: 0, 60 | top: 0, 61 | width: obj.width ? obj.width : obj.offsetWidth, 62 | height: obj.height ? obj.height : obj.offsetHeight 63 | }; 64 | 65 | $.extend(info,$(obj).position()); // edit by paul. 66 | 67 | return info; 68 | }, 69 | 70 | Client: function(elem) { 71 | // constructor for new simple upload client 72 | this.handlers = {}; 73 | 74 | // unique ID 75 | this.id = ZeroClipboard.nextId++; 76 | this.movieId = 'ZeroClipboardMovie_' + this.id; 77 | 78 | // register client with singleton to receive flash events 79 | ZeroClipboard.register(this.id, this); 80 | 81 | // create movie 82 | if (elem) this.glue(elem); 83 | } 84 | }; 85 | 86 | ZeroClipboard.Client.prototype = { 87 | 88 | id: 0, // unique ID for us 89 | ready: false, // whether movie is ready to receive events or not 90 | movie: null, // reference to movie object 91 | clipText: '', // text to copy to clipboard 92 | handCursorEnabled: true, // whether to show hand cursor, or default pointer cursor 93 | cssEffects: true, // enable CSS mouse effects on dom container 94 | handlers: null, // user event handlers 95 | 96 | glue: function(elem, appendElem, stylesToAdd) { 97 | // glue to DOM element 98 | // elem can be ID or actual DOM element object 99 | this.domElement = ZeroClipboard.$(elem); 100 | 101 | // float just above object, or zIndex 99 if dom element isn't set 102 | var zIndex = 99; 103 | if (this.domElement.style.zIndex) { 104 | zIndex = parseInt(this.domElement.style.zIndex, 10) + 1; 105 | } 106 | 107 | if (typeof(appendElem) == 'string') { 108 | appendElem = ZeroClipboard.$(appendElem); 109 | } 110 | else if (typeof(appendElem) == 'undefined') { 111 | appendElem = document.getElementsByTagName('body')[0]; 112 | } 113 | 114 | // find X/Y position of domElement 115 | var box = ZeroClipboard.getDOMObjectPosition(this.domElement, appendElem); 116 | 117 | // create floating DIV above element 118 | this.div = document.createElement('div'); 119 | var style = this.div.style; 120 | style.position = 'absolute'; 121 | style.left = '' + box.left + 'px'; 122 | style.top = '' + box.top + 'px'; 123 | style.width = '' + box.width + 'px'; 124 | style.height = '' + box.height + 'px'; 125 | style.zIndex = zIndex; 126 | 127 | if (typeof(stylesToAdd) == 'object') { 128 | for (addedStyle in stylesToAdd) { 129 | style[addedStyle] = stylesToAdd[addedStyle]; 130 | } 131 | } 132 | 133 | // style.backgroundColor = '#f00'; // debug 134 | 135 | appendElem.appendChild(this.div); 136 | 137 | this.div.innerHTML = this.getHTML( box.width, box.height ); 138 | }, 139 | 140 | getHTML: function(width, height) { 141 | // return HTML for movie 142 | var html = ''; 143 | var flashvars = 'id=' + this.id + 144 | '&width=' + width + 145 | '&height=' + height; 146 | 147 | if (navigator.userAgent.match(/MSIE/)) { 148 | // IE gets an OBJECT tag 149 | var protocol = location.href.match(/^https/i) ? 'https://' : 'http://'; 150 | html += ''; 151 | } 152 | else { 153 | // all other browsers get an EMBED tag 154 | html += ''; 155 | } 156 | return html; 157 | }, 158 | 159 | hide: function() { 160 | // temporarily hide floater offscreen 161 | if (this.div) { 162 | this.div.style.left = '-2000px'; 163 | } 164 | }, 165 | 166 | show: function() { 167 | // show ourselves after a call to hide() 168 | this.reposition(); 169 | }, 170 | 171 | destroy: function() { 172 | // destroy control and floater 173 | if (this.domElement && this.div) { 174 | this.hide(); 175 | this.div.innerHTML = ''; 176 | 177 | var body = document.getElementsByTagName('body')[0]; 178 | try { body.removeChild( this.div ); } catch(e) {;} 179 | 180 | this.domElement = null; 181 | this.div = null; 182 | } 183 | }, 184 | 185 | reposition: function(elem) { 186 | // reposition our floating div, optionally to new container 187 | // warning: container CANNOT change size, only position 188 | if (elem) { 189 | this.domElement = ZeroClipboard.$(elem); 190 | if (!this.domElement) this.hide(); 191 | } 192 | 193 | if (this.domElement && this.div) { 194 | var box = ZeroClipboard.getDOMObjectPosition(this.domElement); 195 | var style = this.div.style; 196 | style.left = '' + box.left + 'px'; 197 | style.top = '' + box.top + 'px'; 198 | } 199 | }, 200 | 201 | setText: function(newText) { 202 | // set text to be copied to clipboard 203 | this.clipText = newText; 204 | if (this.ready) this.movie.setText(newText); 205 | }, 206 | 207 | addEventListener: function(eventName, func) { 208 | // add user event listener for event 209 | // event types: load, queueStart, fileStart, fileComplete, queueComplete, progress, error, cancel 210 | eventName = eventName.toString().toLowerCase().replace(/^on/, ''); 211 | if (!this.handlers[eventName]) this.handlers[eventName] = []; 212 | this.handlers[eventName].push(func); 213 | }, 214 | 215 | setHandCursor: function(enabled) { 216 | // enable hand cursor (true), or default arrow cursor (false) 217 | this.handCursorEnabled = enabled; 218 | if (this.ready) this.movie.setHandCursor(enabled); 219 | }, 220 | 221 | setCSSEffects: function(enabled) { 222 | // enable or disable CSS effects on DOM container 223 | this.cssEffects = !!enabled; 224 | }, 225 | 226 | receiveEvent: function(eventName, args) { 227 | // receive event from flash 228 | eventName = eventName.toString().toLowerCase().replace(/^on/, ''); 229 | 230 | // special behavior for certain events 231 | switch (eventName) { 232 | case 'load': 233 | // movie claims it is ready, but in IE this isn't always the case... 234 | // bug fix: Cannot extend EMBED DOM elements in Firefox, must use traditional function 235 | this.movie = document.getElementById(this.movieId); 236 | if (!this.movie) { 237 | var self = this; 238 | setTimeout( function() { self.receiveEvent('load', null); }, 1 ); 239 | return; 240 | } 241 | 242 | // firefox on pc needs a "kick" in order to set these in certain cases 243 | if (!this.ready && navigator.userAgent.match(/Firefox/) && navigator.userAgent.match(/Windows/)) { 244 | var self = this; 245 | setTimeout( function() { self.receiveEvent('load', null); }, 100 ); 246 | this.ready = true; 247 | return; 248 | } 249 | 250 | this.ready = true; 251 | this.movie.setText( this.clipText ); 252 | this.movie.setHandCursor( this.handCursorEnabled ); 253 | break; 254 | 255 | case 'mouseover': 256 | if (this.domElement && this.cssEffects) { 257 | this.domElement.addClass('hover'); 258 | if (this.recoverActive) this.domElement.addClass('active'); 259 | } 260 | break; 261 | 262 | case 'mouseout': 263 | if (this.domElement && this.cssEffects) { 264 | this.recoverActive = false; 265 | if (this.domElement.hasClass('active')) { 266 | this.domElement.removeClass('active'); 267 | this.recoverActive = true; 268 | } 269 | this.domElement.removeClass('hover'); 270 | } 271 | break; 272 | 273 | case 'mousedown': 274 | if (this.domElement && this.cssEffects) { 275 | this.domElement.addClass('active'); 276 | } 277 | break; 278 | 279 | case 'mouseup': 280 | if (this.domElement && this.cssEffects) { 281 | this.domElement.removeClass('active'); 282 | this.recoverActive = false; 283 | } 284 | break; 285 | } // switch eventName 286 | 287 | if (this.handlers[eventName]) { 288 | for (var idx = 0, len = this.handlers[eventName].length; idx < len; idx++) { 289 | var func = this.handlers[eventName][idx]; 290 | 291 | if (typeof(func) == 'function') { 292 | // actual function reference 293 | func(this, args); 294 | } 295 | else if ((typeof(func) == 'object') && (func.length == 2)) { 296 | // PHP style object + method, i.e. [myObject, 'myMethod'] 297 | func[0][ func[1] ](this, args); 298 | } 299 | else if (typeof(func) == 'string') { 300 | // name of function 301 | window[func](this, args); 302 | } 303 | } // foreach event handler defined 304 | } // user defined handler for event 305 | } 306 | 307 | }; 308 | -------------------------------------------------------------------------------- /test_math.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Cross-Browser CSS3 Rule Generator 9 | 10 | 11 | 208 | 209 | 210 | 211 | 212 | -------------------------------------------------------------------------------- /test_math.js: -------------------------------------------------------------------------------- 1 | cssMath = { 2 | /* ---- General ---- */ 3 | 4 | /* Isset */ 5 | isset: function (s) { 6 | return s != undefined; 7 | }, 8 | 9 | /* Trim */ 10 | trim: function (s) { 11 | return s.replace(/^\s+|\s+$/g, ''); 12 | }, 13 | 14 | /* Number rounded by Length */ 15 | round: function (n, l) { 16 | l = Math.pow(10, l) || 10; 17 | return Math.round(n * l) / l; 18 | }, 19 | 20 | /* ---- Rotation Adjustments ---- */ 21 | 22 | /* X and Y coordinates to rotation and strength */ 23 | xy2rs: function (x, y) { 24 | return { 25 | r: this.round(Math.atan2(x, y * -1) * 180 / Math.PI, 3), 26 | s: this.round(Math.sqrt((x * x) + (y * y)), 3) 27 | }; 28 | }, 29 | 30 | /* Rotation and Strength to x and y coordinates */ 31 | rs2xy: function (r, s) { 32 | return { 33 | x: this.round(Math.sin(r * Math.PI / 180) * s, 3), 34 | y: this.round(Math.cos(r * Math.PI / 180) * s * -1, 3) 35 | }; 36 | }, 37 | 38 | /* Rotation to degree */ 39 | r2d: function (r) { 40 | return this.round(r * 90, 4); 41 | }, 42 | 43 | /* Degree to rotation */ 44 | d2r: function (d) { 45 | return this.round(d / 90, 4); 46 | }, 47 | 48 | /* ---- Color Adjustments ---- */ 49 | 50 | /* Long Hexadecimals compressed to short hexadecimals */ 51 | lh2sh: function (lh) { 52 | return '#' + this.trim(lh).replace(/^#?/, '').replace(/^([A-f0-9])\1([A-f0-9])\2([A-f0-9])\3([A-f0-9])\4$/, '$1$2$3$4').replace(/^([A-f0-9])\1([A-f0-9])\2([A-f0-9])\3$/, '$1$2$3'); 53 | }, 54 | 55 | /* Short Hexadecimals expanded to long hexadecimals */ 56 | sh2lh: function (sh) { 57 | return '#' + this.trim(sh).replace(/^#?/, '').replace(/^([A-f0-9])([A-f0-9])([A-f0-9])([A-f0-9])$/, '$1$1$2$2$3$3$4$4').replace(/^([A-f0-9])([A-f0-9])([A-f0-9])$/, '$1$1$2$2$3$3'); 58 | }, 59 | 60 | /* Channel to hexadecimal */ 61 | c2h: function (c) { 62 | return ('0' + parseInt(c, 10).toString(16)).substr(-2).toUpperCase(); 63 | }, 64 | 65 | /* Hexadecimal to channel */ 66 | h2c: function (h) { 67 | return '' + parseInt(h, 16); 68 | }, 69 | 70 | /* Channels to array */ 71 | c2a: function (c) { 72 | return (c = /(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/.exec(c) || /(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/.exec(c)) && c.shift() ? c : false; 73 | }, 74 | 75 | /* Hexadecimals to array */ 76 | h2a: function (h) { 77 | h = this.sh2lh(h); 78 | return (h = /([A-f0-9]{2})([A-f0-9]{2})([A-f0-9]{2})([A-f0-9]{2})/.exec(h) || /([A-f0-9]{2})([A-f0-9]{2})([A-f0-9]{2})/.exec(h)) && h.shift() ? h : false; 79 | }, 80 | 81 | /* Channels to hexadecimals */ 82 | c2h2: function (c) { 83 | c = this.c2a(c); 84 | return this.hf((c[3] ? this.c2h(c[3]) : '') + this.c2h(c[0]) + this.c2h(c[1]) + this.c2h(c[2])); 85 | }, 86 | 87 | /* Hexadecimals to channels */ 88 | h2c2: function (h) { 89 | h = this.h2a(h); 90 | return this.cf((h[3] ? [this.h2c(h[1]), this.h2c(h[2]), this.h2c(h[3]), this.h2c(h[0])] : [this.h2c(h[0]), this.h2c(h[1]), this.h2c(h[2])]).join(', ')); 91 | }, 92 | 93 | /* Channels proper formatting */ 94 | cf: function (c) { 95 | c = this.c2a(c); 96 | return (c[3] ? 'rgba(' : 'rgb(') + c.join(', ') + ')'; 97 | }, 98 | 99 | /* Hexadecimals proper formatting */ 100 | hf: function (h) { 101 | return '#' + this.h2a(h).join(''); 102 | }, 103 | 104 | /* Channel Move */ 105 | cm: function (c, m) { 106 | return Math.max(Math.min(parseInt(c, 10) + m, 255), 0) + ''; 107 | }, 108 | 109 | /* Hexadecimal Move */ 110 | hm: function (h, m) { 111 | return this.c2h(Math.max(Math.min(parseInt(h, 16) + m, 255), 0)); 112 | }, 113 | 114 | /* Channels Move */ 115 | cm2: function (c, m) { 116 | var e = -1; 117 | c = this.c2a(c); 118 | while (++e < c.length) { 119 | c[e] = this.cm(c[e], m); 120 | } 121 | return this.cf(c.join(',')); 122 | }, 123 | 124 | /* Hexadecimals Move */ 125 | hm2: function (h, m) { 126 | var e = -1; 127 | h = this.h2a(h); 128 | while (++e < h.length) { 129 | h[e] = this.hm(h[e], m); 130 | } 131 | return this.hf(h.join('')); 132 | }, 133 | 134 | /* ---- String Adjustments ---- */ 135 | 136 | /* String to short hexadecimals (move capable) */ 137 | s2sh: function (s, m) { 138 | m = this.isset(m) ? m : 0; 139 | 140 | return this.lh2sh( 141 | this.hm2( 142 | (s.indexOf(',') > -1 ? this.c2h2(s) : s), 143 | m 144 | ) 145 | ); 146 | }, 147 | 148 | /* String to long hexadecimals (move capable) */ 149 | s2lh: function (s, m) { 150 | m = this.isset(m) ? m : 0; 151 | 152 | return this.sh2lh( 153 | this.hm2( 154 | (s.indexOf(',') > -1 ? this.c2h2(s) : s), 155 | m 156 | ) 157 | ); 158 | }, 159 | 160 | /* String to channels (move capable) */ 161 | s2c: function (s, m) { 162 | m = this.isset(m) ? m : 0; 163 | 164 | return s.indexOf(',') > -1 ? this.cf(s) : this.h2c2(s); 165 | }, 166 | 167 | /* String to degree */ 168 | s2d: function (s, m) { 169 | m = this.isset(m) ? m : 0; 170 | return s > 4 ? s : Math.max(this.round(this.r2d(s) + m, 3), 0); 171 | }, 172 | 173 | /* String of channels, hexadecimals, or units to string (move capable) */ 174 | s2x: function (s, m, sh) { 175 | s = this.trim(s); 176 | m = this.isset(m) ? m : 0; 177 | sh = this.isset(sh) ? sh : false; 178 | 179 | /* Hex */ 180 | if (/^[#A-f0-9]+$/.test(s)) { 181 | if (sh || /^[#A-f0-9]{3,5}$/.test(s)) { 182 | return this.lh2sh(this.hm2(s, m)); 183 | } 184 | 185 | return this.hm2(s, m); 186 | } 187 | /* RGB */ 188 | else if (s.indexOf(',') > -1) { 189 | return this.cm2(s, m); 190 | } 191 | /* Unit */ 192 | else if (/([\+\-\d]+)(.*)/.test(s)) { 193 | var unit, 194 | units = [], 195 | re = /([\+\-\d]+)(%|in|cm|mm|em|ex|pt|pc|px)*(\s|$)/g; 196 | 197 | while ((unit = re.exec(s)) != null) { 198 | units.push(Math.max(parseInt(unit[1], 10) + m, 0) + (unit[2] || 'px'), unit[3]); 199 | } 200 | 201 | return units.join(''); 202 | } 203 | else { 204 | return false; 205 | } 206 | }, 207 | 208 | /* String of channels, hexadecimals, or units to short string (move capable) */ 209 | s2sx: function (s, m) { 210 | return this.s2x(s, m, true); 211 | } 212 | }; -------------------------------------------------------------------------------- /test_ui.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | css3please | UI 9 | 10 | 11 | 12 | 13 | 91 | 92 | 93 | 94 | 95 |
    96 |
  • 97 | S 98 |
    • 99 |
  • 100 | HEX 101 | RGB 102 |
    • 103 |
  • 104 | X 105 | Y 106 | R 107 | S 108 |
    • 109 |
110 | 111 | 112 | 113 | -------------------------------------------------------------------------------- /tests.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Cross-Browser CSS3 Rule Generator 9 | 10 | 11 | 302 | 303 | 304 | 305 | 306 | --------------------------------------------------------------------------------