├── .gitignore ├── LICENSE ├── README.md ├── cyberpunk.css ├── demo ├── cyber-grid.css ├── helper.js ├── img │ ├── favicon.png │ ├── main-lg.png │ ├── main-sm.png │ ├── screen01.png │ ├── screen02.png │ ├── screen03.png │ ├── screen04.png │ ├── tile1.jpg │ ├── tile2.jpg │ ├── tile3.jpg │ └── tile4.jpg ├── index.html ├── jquery-3.6.1.min.js └── style.css └── fonts ├── BlenderProBook.woff2 ├── Cyberpunk.otf └── Oxanium.woff2 /.gitignore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alddesign/cyberpunk-css/c6a77b49062c9c876a85c0137cb69c2acc9fd1d8/.gitignore -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2025 github/alddesign 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # !Feedback! 2 | If this framework is missing anything you would like to have, please, let me know. Open up an issue or create a pull request. 3 | 4 | # cyberpunk-css 5 | A pure CSS library providing Cyberpunk 2077 themed elements for your webpage. 6 | 7 | Demo & getting started: https://alddesign.github.io/cyberpunk-css/demo/ 8 | 9 | ## Screenshots of the demo page: 10 | 11 | ![screenshot image 01](./demo/img/screen01.png) 12 | ![screenshot image 02](./demo/img/screen02.png) 13 | ![screenshot image 03](./demo/img/screen03.png) 14 | ![screenshot image 04](./demo/img/screen04.png) 15 | -------------------------------------------------------------------------------- /cyberpunk.css: -------------------------------------------------------------------------------- 1 | /* 2 | * cyberpunk-css by alddesign: https://github.com/alddesign/cyberpunk-css 3 | * v1.0.0-alpha.3 4 | * 5 | * Free to use - do whatever the fck you want... 6 | */ 7 | 8 | /*#region fonts*/ 9 | @font-face 10 | { 11 | font-family:BlenderProBook; 12 | font-style:normal; 13 | font-weight:400; 14 | src:url(fonts/BlenderProBook.woff2) format("woff2"); 15 | } 16 | 17 | @font-face 18 | { 19 | font-family: Oxanium; 20 | font-style: normal; 21 | font-weight: 400; 22 | src: url(fonts/Oxanium.woff2) format('woff2'); 23 | } 24 | 25 | @font-face 26 | { 27 | font-family: Cyberpunk; 28 | src: url(fonts/Cyberpunk.otf) format('opentype'); 29 | } 30 | /*#endregion*/ 31 | 32 | /*#region top level elements*/ 33 | :root 34 | { 35 | --root-font-size: 18px; 36 | 37 | --yellow: #f8ef02; 38 | --cyan: #00ffd2; 39 | --red: #ff003c; 40 | --blue: #136377; 41 | --green: #446d44; 42 | --purple: purple; 43 | --black: #000; 44 | --white: #fff; 45 | --dark: #333; 46 | 47 | --fg: var(--black); 48 | --bg: transparent; 49 | --ac: var(--black); 50 | 51 | --yellow-cyberpunk-font: #feef00; 52 | --cyan-cyberpunk-font1:#46dffb; 53 | --cyan-cyberpunk-font2:#45aefb; 54 | 55 | --banner-color1: var(--purple); 56 | --banner-color2: var(--red); 57 | --banner-color3: var(--yellow); 58 | --banner-color4: var(--cyan); 59 | --banner-gradient-stop: 405px; 60 | 61 | --input-padding-top: 0px; 62 | --input-padding-bot: 0.2rem; 63 | --input-padding-left: 1rem; 64 | --input-padding-right: 2rem; 65 | --input-font-size: 1.2rem; 66 | --input-width: 240px; 67 | 68 | --checkbox-size: 28px; 69 | --checkbox-inner-size: 16px; 70 | 71 | --radio-size: 28px; 72 | --radio-inner-size: 16px; 73 | } 74 | 75 | html 76 | { 77 | font-size: var(--root-font-size); 78 | font-family: "BlenderProBook"; 79 | padding: 0; 80 | margin: 0; 81 | } 82 | 83 | body 84 | { 85 | background-color: var(--yellow); 86 | padding: 0; 87 | margin: 0; 88 | } 89 | 90 | /*#endregion*/ 91 | 92 | /*#region cyberpunk font*/ 93 | .oxanium-font 94 | { 95 | font-family: Oxanium !important; 96 | } 97 | 98 | .cyberpunk-font, 99 | .cyberpunk-font *, 100 | .cyberpunk-font-og, 101 | .cyberpunk-font-og * 102 | { 103 | font-family: Cyberpunk !important; 104 | text-transform: uppercase !important; 105 | letter-spacing: -.25em; 106 | } 107 | 108 | .cyberpunk-font-og, 109 | .cyberpunk-font-og * 110 | { 111 | text-shadow: var(--cyan-cyberpunk-font1) 1px 1px, var(--cyan-cyberpunk-font2) 2px 2px; 112 | color: var(--yellow-cyberpunk-font); 113 | } 114 | 115 | .cyberpunk-font .c, 116 | .cyberpunk-font-og .c 117 | { 118 | font-style: normal; 119 | font-size: 2em; 120 | position: relative; 121 | top: -.2em; 122 | } 123 | 124 | .cyberpunk-font .p, 125 | .cyberpunk-font-og .p 126 | { 127 | font-style: normal; 128 | font-size: 2em; 129 | letter-spacing: -.45em; 130 | position: relative; 131 | bottom: -.25em; 132 | left: -.15em; 133 | } 134 | 135 | .cyber-att 136 | { 137 | color: var(--red); 138 | font-size: 1.2rem; 139 | font-weight: bold; 140 | border: 3px solid var(--red); 141 | text-shadow: 0 0 4px var(--red); 142 | padding: 6px; 143 | } 144 | 145 | .cyber-att-2 146 | { 147 | background-color: var(--red); 148 | color: var(--yellow); 149 | text-shadow: 0 0 6px var(--yellow); 150 | font-size: 1.2rem; 151 | font-weight: bold; 152 | border: 3px solid var(--red); 153 | padding: 6px; 154 | } 155 | 156 | /*#endregion*/ 157 | 158 | /*#region colors*/ 159 | .fg-yellow { --fg: var(--yellow); color: var(--yellow) !important; } 160 | .bg-yellow { --bg: var(--yellow); background-color: var(--yellow); } 161 | .ac-yellow { --ac: var(--yellow); } 162 | 163 | .fg-cyan { --fg: var(--cyan); color: var(--cyan) !important; } 164 | .bg-cyan { --bg: var(--cyan); background-color: var(--cyan); } 165 | .ac-cyan { --ac: var(--cyan); } 166 | 167 | .fg-red { --fg: var(--red); color: var(--red) !important; } 168 | .bg-red { --bg: var(--red); background-color: var(--red); } 169 | .ac-red { --ac: var(--red); } 170 | 171 | .fg-blue { --fg: var(--blue); color: var(--blue) !important; } 172 | .bg-blue { --bg: var(--blue); background-color: var(--blue); } 173 | .ac-blue { --ac: var(--blue); } 174 | 175 | .fg-green { --fg: var(--green); color: var(--green) !important; } 176 | .bg-green { --bg: var(--green); background-color: var(--green); } 177 | .ac-green { --ac: var(--green); } 178 | 179 | .fg-purple { --fg: var(--purple); color: var(--purple) !important; } 180 | .bg-purple { --bg: var(--purple); background-color: var(--purple); } 181 | .ac-purple { --ac: var(--purple); } 182 | 183 | .fg-black { --fg: var(--black); color: var(--black) !important; } 184 | .bg-black { --bg: var(--black); background-color: var(--black); } 185 | .ac-black { --ac: var(--black); } 186 | 187 | .fg-white { --fg: var(--white); color: var(--white) !important; } 188 | .bg-white { --bg: var(--white); background-color: var(--white); } 189 | .ac-white { --ac: var(--white); } 190 | 191 | .fg-dark { --fg: var(--dark); color: var(--dark) !important; } 192 | .bg-dark { --bg: var(--dark); background-color: var(--dark); } 193 | .ac-dark { --ac: var(--dark); } 194 | /*#endregion*/ 195 | 196 | /*#region razor*/ 197 | .cyber-razor-top 198 | { 199 | margin-top: 30px; 200 | position: relative; 201 | } 202 | 203 | .cyber-razor-bottom 204 | { 205 | margin-bottom: 30px; 206 | position: relative; 207 | } 208 | 209 | .cyber-razor-top:before 210 | { 211 | content: " "; 212 | background-color: var(--bg); 213 | -webkit-mask-image: url('data:image/svg+xml;utf8,'); 214 | -webkit-mask-repeat: repeat-x; 215 | -webkit-mask-position: top; 216 | mask-image: url('data:image/svg+xml;utf8,'); 217 | mask-repeat: repeat-x; 218 | mask-position: top; 219 | position: absolute; 220 | left: 0; 221 | top: -30px; 222 | width: 100%; 223 | height: 30px; 224 | z-index: 1; 225 | } 226 | 227 | .cyber-razor-bottom:after 228 | { 229 | content: " "; 230 | background-color: var(--bg); 231 | -webkit-mask-image: url('data:image/svg+xml;utf8,'); 232 | -webkit-mask-repeat: repeat-x; 233 | -webkit-mask-position: bottom; 234 | mask-image: url('data:image/svg+xml;utf8,'); 235 | mask-repeat: repeat-x; 236 | mask-position: bottom; 237 | position: absolute; 238 | left: 0; 239 | bottom: -30px; 240 | width: 100%; 241 | height: 30px; 242 | z-index: 1; 243 | } 244 | /*#endregion*/ 245 | 246 | /*#region buttons*/ 247 | .cyber-button, 248 | .cyber-button-small, 249 | .cyber-button-big 250 | { 251 | --button-border: 4px; 252 | --button-font-size: 1.4rem; 253 | --button-padding-v: 0.9rem; 254 | --button-padding-h: 2.5rem; 255 | 256 | --tag-font-size: 0.55rem; 257 | 258 | --button-cutout: 1.1rem; 259 | 260 | --button-shadow-primary: var(--cyan); 261 | --button-shadow-secondary: var(--yellow); 262 | --button-shimmy-distance: 5; 263 | 264 | --button-clip-1: polygon(0 2%, 100% 2%, 100% 95%, 95% 95%, 95% 90%, 85% 90%, 85% 95%, 8% 95%, 0 70%); 265 | --button-clip-2: polygon(0 78%, 100% 78%, 100% 100%, 95% 100%, 95% 90%, 85% 90%, 85% 100%, 8% 100%, 0 78%); 266 | --button-clip-3: polygon(0 44%, 100% 44%, 100% 54%, 95% 54%, 95% 54%, 85% 54%, 85% 54%, 8% 54%, 0 54%); 267 | --button-clip-4: polygon(0 0, 100% 0, 100% 0, 95% 0, 95% 0, 85% 0, 85% 0, 8% 0, 0 0); 268 | --button-clip-5: polygon(0 0, 100% 0, 100% 0, 95% 0, 95% 0, 85% 0, 85% 0, 8% 0, 0 0); 269 | --button-clip-6: polygon(0 40%, 100% 40%, 100% 85%, 95% 85%, 95% 85%, 85% 85%, 85% 85%, 8% 85%, 0 70%); 270 | --button-clip-7: polygon(0 63%, 100% 63%, 100% 80%, 95% 80%, 95% 80%, 85% 80%, 85% 80%, 8% 80%, 0 70%); 271 | 272 | --button-clip: polygon(0 0, 100% 0, 100% 100%, 95% 100%, 95% 90%, 80% 90%, 80% 100%, var(--button-cutout) 100%, 0 calc(100% - var(--button-cutout))); 273 | 274 | cursor: pointer; 275 | background: transparent !important; 276 | text-transform: uppercase; 277 | font-size: var(--button-font-size); 278 | font-weight: 700; 279 | letter-spacing: 2px; 280 | padding: var(--button-padding-v) var(--button-padding-h); 281 | outline: transparent; 282 | position: relative; 283 | border: 0; 284 | transition: background 0.2s; 285 | } 286 | 287 | /*Overriding*/ 288 | .cyber-button-small 289 | { 290 | --button-padding-v: 0.6rem; 291 | --button-padding-h: 1.75rem; 292 | --button-font-size: 1.0rem; 293 | --button-cutout: 0.77rem; 294 | } 295 | 296 | .cyber-button-big 297 | { 298 | --button-padding-v: 1.1rem; 299 | --button-padding-h: 3.0rem; 300 | --button-font-size: 1.75rem; 301 | --button-cutout: 1.44rem; 302 | } 303 | 304 | .cyber-button:hover, 305 | .cyber-button-small:hover, 306 | .cyber-button-big:hover 307 | { 308 | filter: brightness(90%); 309 | } 310 | 311 | .cyber-button:after, 312 | .cyber-button-small:after, 313 | .cyber-button-big:after, 314 | .cyber-button:before, 315 | .cyber-button-small:before, 316 | .cyber-button-big:before 317 | { 318 | content: ''; 319 | position: absolute; 320 | top: 0; 321 | left: 0; 322 | right: 0; 323 | bottom: 0; 324 | clip-path: var(--button-clip); 325 | z-index: -1; 326 | } 327 | 328 | .cyber-button:before, 329 | .cyber-button-small:before, 330 | .cyber-button-big:before 331 | { 332 | background: var(--button-shadow-primary); 333 | transform: translate(var(--button-border), 0); 334 | } 335 | 336 | .cyber-button:after, 337 | .cyber-button-small:after, 338 | .cyber-button-big:after 339 | { 340 | background-color: var(--bg); 341 | } 342 | 343 | .cyber-button .tag, 344 | .cyber-button-small .tag, 345 | .cyber-button-big .tag 346 | { 347 | position: absolute; 348 | letter-spacing: 1px; 349 | bottom: -5%; 350 | right: 6%; 351 | font-weight: normal; 352 | color: #000; 353 | font-size: var(--tag-font-size); 354 | } 355 | 356 | .cyber-button-small .tag 357 | { 358 | --tag-font-size: 0.44rem; 359 | bottom: -8%; 360 | } 361 | 362 | .cyber-button-big .tag 363 | { 364 | --tag-font-size: 0.66rem; 365 | bottom: -5%; 366 | } 367 | 368 | .cyber-button .glitchtext, 369 | .cyber-button-small .glitchtext, 370 | .cyber-button-big .glitchtext 371 | { 372 | position: absolute; 373 | top: 0; 374 | left: 0; 375 | right: 0; 376 | bottom: 0; 377 | background: var(--button-shadow-primary); 378 | text-shadow: 2px 2px var(--button-shadow-primary), -2px -2px var(--button-shadow-secondary); 379 | clip-path: var(--button-clip); 380 | animation: glitch 4s infinite; 381 | padding: var(--button-padding-v) var(--button-padding-h); 382 | display: none; 383 | } 384 | 385 | .cyber-button:hover .glitchtext, 386 | .cyber-button-small:hover .glitchtext, 387 | .cyber-button-big:hover .glitchtext 388 | { 389 | display: block; 390 | } 391 | 392 | .cyber-button .glitchtext:before, 393 | .cyber-button-small .glitchtext:before, 394 | .cyber-button-big .glitchtext:before 395 | { 396 | content: ''; 397 | position: absolute; 398 | top: calc(var(--button-border) * 1); 399 | right: calc(var(--button-border) * 1); 400 | bottom: calc(var(--button-border) * 1); 401 | left: calc(var(--button-border) * 1); 402 | clip-path: var(--button-clip); 403 | background-color: var(--bg); 404 | z-index: -1; 405 | } 406 | 407 | @keyframes glitch 408 | { 409 | 0% { 410 | clip-path: var(--button-clip-1); 411 | } 412 | 2%, 8% { 413 | clip-path: var(--button-clip-2); 414 | transform: translate(calc(var(--button-shimmy-distance) * -1%), 0); 415 | } 416 | 6% { 417 | clip-path: var(--button-clip-2); 418 | transform: translate(calc(var(--button-shimmy-distance) * 1%), 0); 419 | } 420 | 9% { 421 | clip-path: var(--button-clip-2); 422 | transform: translate(0, 0); 423 | } 424 | 10% { 425 | clip-path: var(--button-clip-3); 426 | transform: translate(calc(var(--button-shimmy-distance) * 1%), 0); 427 | } 428 | 13% { 429 | clip-path: var(--button-clip-3); 430 | transform: translate(0, 0); 431 | } 432 | 14%, 21% { 433 | clip-path: var(--button-clip-4); 434 | transform: translate(calc(var(--button-shimmy-distance) * 1%), 0); 435 | } 436 | 25% { 437 | clip-path: var(--button-clip-5); 438 | transform: translate(calc(var(--button-shimmy-distance) * 1%), 0); 439 | } 440 | 30% { 441 | clip-path: var(--button-clip-5); 442 | transform: translate(calc(var(--button-shimmy-distance) * -1%), 0); 443 | } 444 | 35%, 45% { 445 | clip-path: var(--button-clip-6); 446 | transform: translate(calc(var(--button-shimmy-distance) * -1%)); 447 | } 448 | 40% { 449 | clip-path: var(--button-clip-6); 450 | transform: translate(calc(var(--button-shimmy-distance) * 1%)); 451 | } 452 | 50% { 453 | clip-path: var(--button-clip-6); 454 | transform: translate(0, 0); 455 | } 456 | 55% { 457 | clip-path: var(--button-clip-7); 458 | transform: translate(calc(var(--button-shimmy-distance) * 1%), 0); 459 | } 460 | 60% { 461 | clip-path: var(--button-clip-7); 462 | transform: translate(0, 0); 463 | } 464 | 31%, 61%, 100% { 465 | clip-path: var(--button-clip-4); 466 | } 467 | } 468 | /*#endregion*/ 469 | 470 | /*#region glitches*/ 471 | 472 | /*description: good for images. Effect of a dying flickering screen. Sometimes bright, sometimes dark.*/ 473 | .cyber-glitch-0 474 | { 475 | animation: cyber-glitch-0 5s linear infinite; 476 | } 477 | 478 | 479 | @keyframes cyber-glitch-0 480 | { 481 | 0% {filter: blur(0) brightness(100%) contrast(100%);} 482 | 2% {filter: blur(.05rem) brightness(120%) contrast(120%);} 483 | 4% {filter: blur(.10rem) brightness(150%) contrast(150%);} 484 | 6% {filter: blur(.20rem) brightness(170%) contrast(170%);} 485 | 8% {filter: blur(0) brightness(100%) contrast(100%);} 486 | 10% {filter: blur(0) brightness(100%) contrast(100%);} 487 | 60% {filter: blur(0) brightness(100%) contrast(100%);} 488 | 62% {filter: blur(.05rem) brightness(60%) contrast(100%);} 489 | 64% {filter: blur(.10rem) brightness(40%) contrast(100%);} 490 | 66% {filter: blur(0) brightness(100%) contrast(100%);} 491 | 68% {filter: blur(.05rem) brightness(60%) contrast(100%);} 492 | 70% {filter: blur(.10rem) brightness(40%) contrast(100%);} 493 | 72% {filter: blur(0) brightness(100%) contrast(100%);} 494 | 100% {filter: blur(0) brightness(100%) contrast(100%);} 495 | } 496 | 497 | 498 | /*description: good for images. nevous little shake first, then distorting/breaking effect by rotating and inverting colors.*/ 499 | .cyber-glitch-1 500 | { 501 | animation: cyber-glitch-1 5s linear infinite; 502 | } 503 | 504 | @keyframes cyber-glitch-1 505 | { 506 | 0% {transform: translate(0,0) skew(0deg); filter: invert(0);} 507 | 1% {transform: translate(0,0) skew(-3deg); filter: invert(0);} 508 | 2% {transform: translate(0,0) skew(3deg); filter: invert(0);} 509 | 3% {transform: translate(0,0) skew(0deg); filter: invert(0);} 510 | 60% {transform: translate(0,0) skew(0deg); filter: invert(0);} 511 | 61% {transform: translate(0,0) skew(-3deg); filter: invert(0.2);} 512 | 62% {transform: translate(0,0) skew(0deg); filter: invert(0.2);} 513 | 63% {transform: translate(0,0) skew(3deg); filter: invert(0.8);} 514 | 64% {transform: translate(0,0) skew(0deg); filter: invert(0.2);} 515 | 65% {transform: translate(0,0) skew(0deg); filter: invert(0);} 516 | } 517 | 518 | /*description: good for text and containers with text. squeeze effect by removing top an bottom of the element, shake left to right, apply glitchy text-shadow, back to normal*/ 519 | .cyber-glitch-2 520 | { 521 | animation: cyber-glitch-2 4s linear infinite; 522 | } 523 | 524 | @keyframes cyber-glitch-2 525 | { 526 | 0% {clip-path: var(--og-clip-path); transform: translateX(0); text-shadow: none;} 527 | 2% {clip-path: polygon(0 40%, 0 100%, 100% 100%, 100% 40%); transform: translateX(0); text-shadow: var(--cyan) 1px 1px, var(--yellow) -1px -1px;} 528 | 4% {clip-path: polygon(0 40%, 0 100%, 100% 100%, 100% 40%); transform: translateX(-1rem); text-shadow: var(--cyan) 1px 1px, var(--yellow) -1px -1px;} 529 | 6% {clip-path: polygon(0 40%, 0 100%, 100% 100%, 100% 40%); transform: translateX(1rem); text-shadow: var(--cyan) 1px 1px, var(--yellow) -1px -1px;} 530 | 8% {clip-path: polygon(0 40%, 0 100%, 100% 100%, 100% 40%); transform: translateX(0); text-shadow: var(--cyan) 1px 1px, var(--yellow) -1px -1px;} 531 | 12% {clip-path: polygon(0 10%, 0 40%, 100% 40%, 100% 10%); transform: translateX(0); text-shadow: var(--cyan) 1px 1px, var(--yellow) -1px -1px;} 532 | 14% {clip-path: var(--og-clip-path); transform: translateX(0); text-shadow: none;} 533 | 100% {clip-path: var(--og-clip-path); transform: translateX(0); text-shadow: none;} 534 | } 535 | 536 | /*description: good for text, especially underlines. Steady blinking*/ 537 | .cyber-glitch-3 538 | { 539 | animation: cyber-glitch-3 1s linear infinite; 540 | } 541 | 542 | @keyframes cyber-glitch-3 543 | { 544 | 0% {visibility: visible;} 545 | 49% {visibility: visible;} 546 | 50% {visibility: hidden;} 547 | 100% {visibility: hidden;} 548 | } 549 | 550 | /*description: good for text, especially underlines. Blinking with different pauses in between.*/ 551 | .cyber-glitch-4 552 | { 553 | animation: cyber-glitch-4 5s linear infinite; 554 | } 555 | 556 | @keyframes cyber-glitch-4 557 | { 558 | 0% {visibility: visible;} 559 | 1% {visibility: hidden;} 560 | 2% {visibility: hidden;} 561 | 3% {visibility: visible;} 562 | 563 | 20% {visibility: visible;} 564 | 21% {visibility: hidden;} 565 | 24% {visibility: hidden;} 566 | 25% {visibility: visible;} 567 | 568 | 40% {visibility: visible;} 569 | 41% {visibility: hidden;} 570 | 42% {visibility: hidden;} 571 | 43% {visibility: visible;} 572 | 573 | 44% {visibility: visible;} 574 | 45% {visibility: hidden;} 575 | 46% {visibility: hidden;} 576 | 47% {visibility: visible;} 577 | 578 | 60% {visibility: visible;} 579 | 61% {visibility: hidden;} 580 | 64% {visibility: hidden;} 581 | 65% {visibility: visible;} 582 | 583 | 70% {visibility: visible;} 584 | 71% {visibility: hidden;} 585 | 72% {visibility: hidden;} 586 | 73% {visibility: visible;} 587 | 588 | 100% {visibility: visible;} 589 | } 590 | /*#endregion*/ 591 | 592 | /*#region tiles*/ 593 | .cyber-tile, 594 | .cyber-tile-small, 595 | .cyber-tile-big 596 | { 597 | --tile-width: 360px; 598 | --tile-padding: 4px; 599 | --tile-edges: 20px; 600 | --label-margins: calc(var(--tile-edges) - var(--tile-padding)); 601 | --og-clip-path: polygon(0 0, 0 calc(100% - var(--tile-edges)), var(--tile-edges) 100%, 100% 100%, 100% var(--tile-edges), calc(100% - var(--tile-edges)) 0); 602 | width: var(--tile-width); 603 | min-height: 60px; 604 | clip-path: var(--og-clip-path); 605 | padding: var(--tile-padding); 606 | padding-bottom: var(--tile-edges); 607 | } 608 | 609 | .cyber-tile img, 610 | .cyber-tile-small img, 611 | .cyber-tile-big img 612 | { 613 | width: 100%; 614 | height: auto; 615 | clip-path: polygon(0 0, 0 100%, 100% 100%, 100% var(--tile-edges), calc(100% - var(--tile-edges)) 0); 616 | } 617 | 618 | .cyber-tile label, 619 | .cyber-tile-small label, 620 | .cyber-tile-big label 621 | { 622 | display: block; 623 | margin: var(--label-margins) var(--label-margins) 0 var(--label-margins); 624 | } 625 | 626 | .cyber-tile img ~ label , 627 | .cyber-tile-small img ~ label, 628 | .cyber-tile-big img ~ label 629 | { 630 | margin-top: 0; 631 | } 632 | 633 | /*Overriding the values*/ 634 | .cyber-tile-small 635 | { 636 | --tile-width: 240px; 637 | --tile-edges: 14px; 638 | } 639 | 640 | /*Overriding the values*/ 641 | .cyber-tile-big 642 | { 643 | --tile-width: 480px; 644 | --tile-edges: 26px; 645 | } 646 | 647 | /*#endregion*/ 648 | 649 | /*#region code*/ 650 | .code, 651 | code, 652 | .code-block 653 | { 654 | background-color: var(--dark); 655 | color: var(--cyan); 656 | padding: .3rem .4rem .2rem .4rem; 657 | font-family: Oxanium !important; 658 | font-size: .75rem; 659 | } 660 | 661 | .code-block 662 | { 663 | clip-path: polygon(0 0, 0 100%, calc(100% - 20px) 100%, 100% calc(100% - 20px), 100% 0); 664 | display: block; 665 | padding: .5rem .6rem .4rem .6rem; 666 | } 667 | .code-block::before 668 | { 669 | content: attr(data-title); 670 | display: block; 671 | color: var(--yellow); 672 | text-shadow: var(--cyan) 1px 1px; 673 | } 674 | /*#endregion*/ 675 | 676 | /*#region tables*/ 677 | table.cyber-table 678 | { 679 | padding: 0 !important; 680 | border: none !important; 681 | display: inline-block; 682 | border-collapse: collapse; 683 | } 684 | 685 | table.cyber-table th, 686 | table.cyber-table td 687 | { 688 | border: 1px solid; 689 | padding: .2rem .5rem; 690 | } 691 | 692 | table.cyber-table thead th 693 | { 694 | border-bottom-width: 2px ; 695 | } 696 | 697 | table.cyber-table::before, 698 | table.cyber-table::after 699 | { 700 | content: ' '; 701 | width: 100%; 702 | display: block; 703 | background-color: var(--ac); 704 | position: relative; 705 | height: 6px; 706 | } 707 | 708 | table.cyber-table::before, 709 | table.cyber-table.cyber-style-0::before 710 | { 711 | clip-path: polygon(0 100%, 100% 100%, 100% 0, 80% 0, calc(80% - 6px) 100%, 30% 100%, calc(30% - 6px) 0, 6px 0); 712 | } 713 | 714 | table.cyber-table::after, 715 | table.cyber-table.cyber-style-0::after 716 | { 717 | clip-path: polygon(60% 0, calc(60% + 6px) 100%, 100% 100%, 100% 0); 718 | } 719 | 720 | table.cyber-table.cyber-style-1::before 721 | { 722 | clip-path: polygon(0 100%, 6px 0, 10% 0, 10% 100%, 80% 100%, 723 | calc(80% + 6px) 0, 95% 0, 95% 100%, calc(95% + 6px) 100%, calc(95% + 6px) 0, calc(95% + 2 * 6px) 0, calc(95% + 2 * 6px) 100%, 724 | calc(95% + 3 * 6px) 100%, calc(95% + 3 * 6px) 0, 100% 0, 100% 100%); 725 | } 726 | 727 | table.cyber-table.cyber-style-1::after 728 | { 729 | clip-path: polygon(100% 0, 100% 100%, calc(100% - 6px) 100%, calc(100% - 6px) 0, 730 | calc(100% - 2 * 6px) 0, calc(100% - 2 * 6px) 100%, 90% 100%, 90% 0, 75% 0, 75% 100%, 60% 100%, calc(60% - 6px) 0); 731 | } 732 | 733 | table.cyber-table.cyber-style-2::before 734 | { 735 | 736 | clip-path: polygon(0 100%, 6px 0, calc(2 * 6px) 100%, calc(3 * 6px) 0, calc(4 * 6px + 10%) 0,calc(4 * 6px + 10%) 50%, 737 | 35% 50%, 35% 100%, 70% 100%, 70% 50%, 80% 50%, 80% 100%); 738 | } 739 | 740 | table.cyber-table.cyber-style-2::after 741 | { 742 | 743 | clip-path: polygon(0 0, 0 50%, 10% 50%, 10% 0, 30% 0, 30% 100%, 40% 100%, 40% 0, 744 | 70% 0, 70% 50%, 80% 50%, 80% 100%, 90% 100%, calc(100% - 6px) 100%, 100% 0); 745 | } 746 | 747 | /*#endregion*/ 748 | 749 | /*#region headings*/ 750 | .cyber-h 751 | { 752 | display: block; 753 | width: 60%; 754 | } 755 | 756 | .cyber-h::after 757 | { 758 | content: ' '; 759 | width: 100%; 760 | height: 6px; 761 | display: block; 762 | background-color: var(--ac); 763 | clip-path: polygon(0 0, 0 100%, 10% 100%, calc(10% + 4px) 2px, 100% 2px, 100% 0); 764 | } 765 | 766 | h1.cyber-h 767 | { 768 | font-size: 3.0rem; 769 | margin: 2.0rem 0; 770 | width: 100%; 771 | } 772 | 773 | h2.cyber-h 774 | { 775 | font-size: 2.5rem; 776 | margin: 1.6rem 0; 777 | width: 90%; 778 | } 779 | 780 | h3.cyber-h 781 | { 782 | font-size: 2rem; 783 | margin: 1.4rem 0; 784 | width: 80%; 785 | } 786 | 787 | h4.cyber-h 788 | { 789 | font-size: 1.5rem; 790 | margin: 1.2rem 0; 791 | width: 70%; 792 | } 793 | 794 | h5.cyber-h 795 | { 796 | font-size: 1.0rem; 797 | margin: 1.0rem 0; 798 | width: 60%; 799 | } 800 | 801 | h6.cyber-h 802 | { 803 | font-size: 1.0rem; 804 | margin: 1.0rem 0; 805 | font-weight: 400; 806 | width: 60%; 807 | } 808 | /*#endregion*/ 809 | 810 | /*#region banners*/ 811 | .cyber-banner, 812 | .cyber-banner-short 813 | { 814 | width: 100%; 815 | height: 50px; 816 | background-repeat: no-repeat; 817 | font-size: 1.5rem; 818 | font-weight: 700; 819 | text-align: center; 820 | line-height: 50px; 821 | overflow: hidden; 822 | clip-path: polygon(0 0, 0 100%, calc(100% - 20px) 100%, 100% calc(100% - 20px), 100% 0); 823 | 824 | /*default: --purple --red --yellow --cyan*/ 825 | background: linear-gradient(90deg, var(--banner-color1), var(--banner-color2), var(--banner-color3), var(--banner-color4) var(--banner-gradient-stop)); 826 | } 827 | 828 | .cyber-banner-short 829 | { 830 | --banner-gradient-stop: 220px; 831 | } 832 | 833 | .cyber-banner.bg-yellow, 834 | .cyber-banner-short.bg-yellow 835 | { 836 | --banner-color1: var(--cyan); 837 | --banner-color2: var(--purple); 838 | --banner-color3: var(--red); 839 | --banner-color4: var(--yellow); 840 | } 841 | 842 | .cyber-banner.bg-purple, 843 | .cyber-banner-short.bg-purple 844 | { 845 | --banner-color1: var(--red); 846 | --banner-color2: var(--yellow); 847 | --banner-color3: var(--cyan); 848 | --banner-color4: var(--purple); 849 | } 850 | 851 | .cyber-banner.bg-red, 852 | .cyber-banner-short.bg-red 853 | { 854 | --banner-color1: var(--yellow); 855 | --banner-color2: var(--cyan); 856 | --banner-color3: var(--purple); 857 | --banner-color4: var(--red); 858 | } 859 | 860 | 861 | .cyber-banner::before, 862 | .cyber-banner-short::before 863 | { 864 | content: " "; 865 | height: inherit; 866 | display: block; 867 | float: left; 868 | background-position: top left; 869 | background-repeat: no-repeat; 870 | background-size: cover; 871 | } 872 | 873 | /* 874 | Note: Inline svg shit doesnt work sometimes. Make sure to optimize it with https://jakearchibald.github.io/svgomg/ (import and download) 875 | */ 876 | .cyber-banner::before 877 | { 878 | width: 405px; 879 | background-image: url('data:image/svg+xml;utf8,'); 880 | } 881 | 882 | .cyber-banner-short::before 883 | { 884 | width: 220px; 885 | background-image: url('data:image/svg+xml;utf8,') 886 | } 887 | /*#endregion*/ 888 | 889 | /*#region inputs*/ 890 | .cyber-input, 891 | .cyber-input-long, 892 | .cyber-input-full, 893 | .cyber-select, 894 | .cyber-select-long, 895 | .cyber-select-full 896 | { 897 | font-size: var(--input-font-size); 898 | } 899 | 900 | .cyber-select, 901 | .cyber-select-long, 902 | .cyber-select-full 903 | { 904 | background-color: transparent !important; 905 | } 906 | 907 | .cyber-input input, 908 | .cyber-input-long input, 909 | .cyber-input-full input, 910 | .cyber-select select, 911 | .cyber-select-long select, 912 | .cyber-select-full select 913 | { 914 | width: var(--input-width); 915 | color: inherit; 916 | font-family: inherit; 917 | font-size: inherit; 918 | background-color: transparent; 919 | padding: var(--input-padding-top) var(--input-padding-right) var(--input-padding-bot) var(--input-padding-left); 920 | border: none; 921 | text-decoration: none; 922 | outline: none; 923 | } 924 | 925 | .cyber-input-long input, 926 | .cyber-select-long select 927 | { 928 | --input-width: 320px; 929 | } 930 | 931 | .cyber-input-full input, 932 | .cyber-select-full select 933 | { 934 | --input-width: 100%; 935 | } 936 | 937 | 938 | .cyber-select select, 939 | .cyber-select-long select, 940 | .cyber-select-full select 941 | { 942 | width: calc(var(--input-width) + var(--input-padding-left) + var(--input-padding-right)); 943 | font-family: BlenderProBook; 944 | appearance: none; 945 | background-color: transparent; 946 | cursor: pointer; 947 | } 948 | 949 | .cyber-select select option, 950 | .cyber-select-long select option, 951 | .cyber-select-full select option 952 | { 953 | font-family: "Courier New"; 954 | font-size: .85rem; 955 | } 956 | 957 | .cyber-input::before, 958 | .cyber-input-long::before, 959 | .cyber-input-full::before, 960 | .cyber-select::before, 961 | .cyber-select-long::before, 962 | .cyber-select-full::before 963 | { 964 | content: 'X'; 965 | color: transparent; 966 | position: absolute; 967 | display: block; 968 | width: var(--input-width); 969 | padding: var(--input-padding-top) var(--input-padding-right) var(--input-padding-bot) var(--input-padding-left); 970 | clip-path: polygon(0 calc(100% - 10px), 10px 100%, 100% 100%, 100% calc(100% - 8px), calc(100% - 20px) calc(100% - 8px), calc(100% - 20px - 8px) calc(100% - 2px), 11px calc(100% - 2px), 0 calc(100% - 13px)); 971 | background-color: var(--ac); 972 | } 973 | 974 | .cyber-select::before, 975 | .cyber-select-long::before, 976 | .cyber-select-full::before 977 | { 978 | clip-path: polygon(0 calc(100% - 12px), 0 100%, calc(100% - 30px) 100%, calc(100% - 30px) 110%, calc(100% - 20px) 110%, calc(100% - 20px) calc(100% - 8px), calc(100% - 30px) calc(100% - 18px), calc(100% - 10px) calc(100% - 18px), calc(100% - 20px) calc(100% - 8px), calc(100% - 20px) 110%, calc(100% - 30px) 110%, calc(100% - 30px) calc(100% - 2px), 10px calc(100% - 2px)); 979 | z-index: -1; 980 | } 981 | 982 | .cyber-check, 983 | .cyber-radio 984 | { 985 | width: var(--checkbox-size); 986 | height: var(--checkbox-size); 987 | border: 2px solid var(--black); 988 | border-radius: 3px; 989 | -webkit-appearance: none; 990 | appearance: none; 991 | outline: none; 992 | vertical-align: middle; 993 | margin: 0; 994 | cursor: pointer; 995 | } 996 | 997 | .cyber-check::before, 998 | .cyber-radio::before 999 | { 1000 | content: ""; 1001 | width: var(--checkbox-inner-size); 1002 | height: var(--checkbox-inner-size); 1003 | background-color: var(--ac); 1004 | position: relative; 1005 | top: calc((var(--checkbox-size) - var(--checkbox-inner-size)) / 2 - 2px); 1006 | left: calc((var(--checkbox-size) - var(--checkbox-inner-size)) / 2 - 2px); 1007 | display: block; 1008 | -webkit-transform: scale(0); 1009 | transform: scale(0); 1010 | -webkit-transition: 120ms transform ease-in-out; 1011 | transition: 120ms transform ease-in-out; 1012 | 1013 | } 1014 | 1015 | .cyber-check:checked:before, 1016 | .cyber-radio:checked:before 1017 | { 1018 | -webkit-transform: scale(1); 1019 | transform: scale(1); 1020 | } 1021 | 1022 | .cyber-radio 1023 | { 1024 | border-radius: 50%; 1025 | } 1026 | 1027 | .cyber-radio::before 1028 | { 1029 | border-radius: 50%; 1030 | } 1031 | 1032 | label 1033 | { 1034 | vertical-align: middle; 1035 | } 1036 | 1037 | /*#endregion*/ 1038 | 1039 | /*#region lists*/ 1040 | .cyber-ul, 1041 | .cyber-ul-1, 1042 | .cyber-ul-2 1043 | { 1044 | list-style: none; 1045 | margin: 0; 1046 | padding: 0; 1047 | } 1048 | 1049 | .cyber-ul li, 1050 | .cyber-ul-1 li, 1051 | .cyber-ul-2 li 1052 | { 1053 | margin-bottom: .25rem; 1054 | } 1055 | 1056 | .cyber-ul-1, 1057 | .cyber-ul-2 1058 | { 1059 | padding-left: 1.5rem; 1060 | } 1061 | 1062 | 1063 | .cyber-ul li::before, 1064 | .cyber-ul-1 li::before, 1065 | .cyber-ul-2 li::before 1066 | { 1067 | content: " "; 1068 | width: 1rem; 1069 | height: 1rem; 1070 | -webkit-mask-image: url('data:image/svg+xml;utf8,'); 1071 | -webkit-mask-position: top left; 1072 | -webkit-mask-repeat: no-repeat; 1073 | -webkit-mask-size: 1rem 1rem; 1074 | mask-image: url('data:image/svg+xml;utf8,'); 1075 | mask-position: top left; 1076 | mask-repeat: no-repeat; 1077 | mask-size: 1rem 1rem; 1078 | background-color: var(--ac); 1079 | display: inline-block; 1080 | margin-right: .5rem; 1081 | vertical-align: middle; 1082 | } 1083 | 1084 | .cyber-ul-1 li::before 1085 | { 1086 | -webkit-mask-image: url('data:image/svg+xml;utf8,'); 1087 | mask-image: url('data:image/svg+xml;utf8,'); 1088 | } 1089 | 1090 | .cyber-ul-2 li::before 1091 | { 1092 | -webkit-mask-image: url('data:image/svg+xml;utf8,'); 1093 | mask-image: url('data:image/svg+xml;utf8,'); 1094 | } 1095 | /*#endregion*/ 1096 | 1097 | /*#region a*/ 1098 | .cyber-a 1099 | { 1100 | color: var(--blue); 1101 | } 1102 | .cyber-a:hover 1103 | { 1104 | text-shadow: var(--cyan) 0px 0px 1px; 1105 | } 1106 | /*#endregion*/ 1107 | 1108 | @media screen and (max-width: 768px) 1109 | { 1110 | :root 1111 | { 1112 | --root-font-size: 14px; 1113 | } 1114 | 1115 | .cyber-tile 1116 | { 1117 | max-width: 100%; 1118 | } 1119 | 1120 | .cyber-tile-big 1121 | { 1122 | max-width: 100%; 1123 | } 1124 | } -------------------------------------------------------------------------------- /demo/cyber-grid.css: -------------------------------------------------------------------------------- 1 | /* 2 | Not required by cyberpunk-css! 3 | Just for the purpose of this demo page. 4 | 5 | Just a simple flex grid solution, as well as some helper classes for basic layout. 6 | 7 | Similar to bootstrap or metro ui css. 8 | See index.html for usage. 9 | */ 10 | :root 11 | { 12 | --step: 8px; 13 | --col-padding: 8px; 14 | } 15 | 16 | .fixed-bottom, 17 | .fixed-top 18 | { 19 | position: fixed !important; 20 | left: 0 !important; 21 | width: 100% !important; 22 | z-index: 999 !important; 23 | } 24 | 25 | .fixed-top{top: 0 !important;} 26 | .fixed-bottom{bottom: 0 !important;} 27 | 28 | .block{display: block !important;} 29 | .inline{ display: inline !important;} 30 | .inline-block{ display: inline-block !important;} 31 | 32 | .vt-bot{vertical-align: bottom;} 33 | .vt-top{vertical-align: top;} 34 | 35 | .container 36 | { 37 | margin: 0 auto; 38 | width: 100%; 39 | } 40 | 41 | .row 42 | { 43 | display: flex; 44 | flex-wrap: wrap; 45 | } 46 | 47 | .col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 48 | { 49 | flex-grow: 1; 50 | flex-shrink: 1; 51 | flex-basis: 1; 52 | padding: var(--col-padding); 53 | } 54 | 55 | .col-1{max-width: calc(100% / 12 * 1 - (var(--col-padding) * 2));} 56 | .col-2{max-width: calc(100% / 12 * 2 - (var(--col-padding) * 2));} 57 | .col-3{max-width: calc(100% / 12 * 3 - (var(--col-padding) * 2));} 58 | .col-4{max-width: calc(100% / 12 * 4 - (var(--col-padding) * 2));} 59 | .col-5{max-width: calc(100% / 12 * 5 - (var(--col-padding) * 2));} 60 | .col-6{max-width: calc(100% / 12 * 6 - (var(--col-padding) * 2));} 61 | .col-7{max-width: calc(100% / 12 * 7 - (var(--col-padding) * 2));} 62 | .col-8{max-width: calc(100% / 12 * 8 - (var(--col-padding) * 2));} 63 | .col-9{max-width: calc(100% / 12 * 9 - (var(--col-padding) * 2));} 64 | .col-10{max-width: calc(100% / 12 * 10 - (var(--col-padding) * 2));} 65 | .col-11{max-width: calc(100% / 12 * 11 - (var(--col-padding) * 2));} 66 | .col-12{max-width: calc(100% - (var(--col-padding) * 2));} 67 | 68 | @media screen and (max-width: 768px) 69 | { 70 | .container 71 | { 72 | overflow: auto; 73 | } 74 | 75 | .col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 76 | { 77 | min-width: calc(100% - (var(--col-padding) * 2)); 78 | width: calc(100% - (var(--col-padding) * 2)); 79 | } 80 | } 81 | 82 | /*#region margin padding*/ 83 | .m-0{margin: calc(var(--s) * 0) !important;} 84 | .mt-0{margin-top: calc(var(--step) * 0) !important;} 85 | .mr-0{margin-right: calc(var(--step) * 0) !important;} 86 | .mb-0{margin-bottom: calc(var(--step) * 0) !important;} 87 | .ml-0{margin-left: calc(var(--step) * 0) !important;} 88 | .p-0{padding: calc(var(--step) * 0) !important;} 89 | .pt-0{padding-top: calc(var(--step) * 0) !important;} 90 | .pr-0{padding-right: calc(var(--step) * 0) !important;} 91 | .pb-0{padding-bottom: calc(var(--step) * 0) !important;} 92 | .pl-0{padding-left: calc(var(--step) * 0) !important;} 93 | 94 | .m-1{margin: calc(var(--step) * 1) !important;} 95 | .mt-1{margin-top: calc(var(--step) * 1) !important;} 96 | .mr-1{margin-right: calc(var(--step) * 1) !important;} 97 | .mb-1{margin-bottom: calc(var(--step) * 1) !important;} 98 | .ml-1{margin-left: calc(var(--step) * 1) !important;} 99 | .p-1{padding: calc(var(--step) * 1) !important;} 100 | .pt-1{padding-top: calc(var(--step) * 1) !important;} 101 | .pr-1{padding-right: calc(var(--step) * 1) !important;} 102 | .pb-1{padding-bottom: calc(var(--step) * 1) !important;} 103 | .pl-1{padding-left: calc(var(--step) * 1) !important;} 104 | 105 | .m-2{margin: calc(var(--step) * 2) !important;} 106 | .mt-2{margin-top: calc(var(--step) * 2) !important;} 107 | .mr-2{margin-right: calc(var(--step) * 2) !important;} 108 | .mb-2{margin-bottom: calc(var(--step) * 2) !important;} 109 | .ml-2{margin-left: calc(var(--step) * 2) !important;} 110 | .p-2{padding: calc(var(--step) * 2) !important;} 111 | .pt-2{padding-top: calc(var(--step) * 2) !important;} 112 | .pr-2{padding-right: calc(var(--step) * 2) !important;} 113 | .pb-2{padding-bottom: calc(var(--step) * 2) !important;} 114 | .pl-2{padding-left: calc(var(--step) * 2) !important;} 115 | 116 | .m-3{margin: calc(var(--step) * 3) !important;} 117 | .mt-3{margin-top: calc(var(--step) * 3) !important;} 118 | .mr-3{margin-right: calc(var(--step) * 3) !important;} 119 | .mb-3{margin-bottom: calc(var(--step) * 3) !important;} 120 | .ml-3{margin-left: calc(var(--step) * 3) !important;} 121 | .p-3{padding: calc(var(--step) * 3) !important;} 122 | .pt-3{padding-top: calc(var(--step) * 3) !important;} 123 | .pr-3{padding-right: calc(var(--step) * 3) !important;} 124 | .pb-3{padding-bottom: calc(var(--step) * 3) !important;} 125 | .pl-3{padding-left: calc(var(--step) * 3) !important;} 126 | 127 | .m-4{margin: calc(var(--step) * 4) !important;} 128 | .mt-4{margin-top: calc(var(--step) * 4) !important;} 129 | .mr-4{margin-right: calc(var(--step) * 4) !important;} 130 | .mb-4{margin-bottom: calc(var(--step) * 4) !important;} 131 | .ml-4{margin-left: calc(var(--step) * 4) !important;} 132 | .p-4{padding: calc(var(--step) * 4) !important;} 133 | .pt-4{padding-top: calc(var(--step) * 4) !important;} 134 | .pr-4{padding-right: calc(var(--step) * 4) !important;} 135 | .pb-4{padding-bottom: calc(var(--step) * 4) !important;} 136 | .pl-4{padding-left: calc(var(--step) * 4) !important;} 137 | 138 | .m-5{margin: calc(var(--step) * 5) !important;} 139 | .mt-5{margin-top: calc(var(--step) * 5) !important;} 140 | .mr-5{margin-right: calc(var(--step) * 5) !important;} 141 | .mb-5{margin-bottom: calc(var(--step) * 5) !important;} 142 | .ml-5{margin-left: calc(var(--step) * 5) !important;} 143 | .p-5{padding: calc(var(--step) * 5) !important;} 144 | .pt-5{padding-top: calc(var(--step) * 5) !important;} 145 | .pr-5{padding-right: calc(var(--step) * 5) !important;} 146 | .pb-5{padding-bottom: calc(var(--step) * 5) !important;} 147 | .pl-5{padding-left: calc(var(--step) * 5) !important;} 148 | 149 | .m-6{margin: calc(var(--step) * 6) !important;} 150 | .mt-6{margin-top: calc(var(--step) * 6) !important;} 151 | .mr-6{margin-right: calc(var(--step) * 6) !important;} 152 | .mb-6{margin-bottom: calc(var(--step) * 6) !important;} 153 | .ml-6{margin-left: calc(var(--step) * 6) !important;} 154 | .p-6{padding: calc(var(--step) * 6) !important;} 155 | .pt-6{padding-top: calc(var(--step) * 6) !important;} 156 | .pr-6{padding-right: calc(var(--step) * 6) !important;} 157 | .pb-6{padding-bottom: calc(var(--step) * 6) !important;} 158 | .pl-6{padding-left: calc(var(--step) * 6) !important;} 159 | 160 | .m-7{margin: calc(var(--step) * 7) !important;} 161 | .mt-7{margin-top: calc(var(--step) * 7) !important;} 162 | .mr-7{margin-right: calc(var(--step) * 7) !important;} 163 | .mb-7{margin-bottom: calc(var(--step) * 7) !important;} 164 | .ml-7{margin-left: calc(var(--step) * 7) !important;} 165 | .p-7{padding: calc(var(--step) * 7) !important;} 166 | .pt-7{padding-top: calc(var(--step) * 7) !important;} 167 | .pr-7{padding-right: calc(var(--step) * 7) !important;} 168 | .pb-7{padding-bottom: calc(var(--step) * 7) !important;} 169 | .pl-7{padding-left: calc(var(--step) * 7) !important;} 170 | 171 | .m-8{margin: calc(var(--step) * 8) !important;} 172 | .mt-8{margin-top: calc(var(--step) * 8) !important;} 173 | .mr-8{margin-right: calc(var(--step) * 8) !important;} 174 | .mb-8{margin-bottom: calc(var(--step) * 8) !important;} 175 | .ml-8{margin-left: calc(var(--step) * 8) !important;} 176 | .p-8{padding: calc(var(--step) * 8) !important;} 177 | .pt-8{padding-top: calc(var(--step) * 8) !important;} 178 | .pr-8{padding-right: calc(var(--step) * 8) !important;} 179 | .pb-8{padding-bottom: calc(var(--step) * 8) !important;} 180 | .pl-8{padding-left: calc(var(--step) * 8) !important;} 181 | 182 | .m-9{margin: calc(var(--step) * 9) !important;} 183 | .mt-9{margin-top: calc(var(--step) * 9) !important;} 184 | .mr-9{margin-right: calc(var(--step) * 9) !important;} 185 | .mb-9{margin-bottom: calc(var(--step) * 9) !important;} 186 | .ml-9{margin-left: calc(var(--step) * 9) !important;} 187 | .p-9{padding: calc(var(--step) * 9) !important;} 188 | .pt-9{padding-top: calc(var(--step) * 9) !important;} 189 | .pr-9{padding-right: calc(var(--step) * 9) !important;} 190 | .pb-9{padding-bottom: calc(var(--step) * 9) !important;} 191 | .pl-9{padding-left: calc(var(--step) * 9) !important;} 192 | 193 | .m-10{margin: calc(var(--step) * 10) !important;} 194 | .mt-10{margin-top: calc(var(--step) * 10) !important;} 195 | .mr-10{margin-right: calc(var(--step) * 10) !important;} 196 | .mb-10{margin-bottom: calc(var(--step) * 10) !important;} 197 | .ml-10{margin-left: calc(var(--step) * 10) !important;} 198 | .p-10{padding: calc(var(--step) * 10) !important;} 199 | .pt-10{padding-top: calc(var(--step) * 10) !important;} 200 | .pr-10{padding-right: calc(var(--step) * 10) !important;} 201 | .pb-10{padding-bottom: calc(var(--step) * 10) !important;} 202 | .pl-10{padding-left: calc(var(--step) * 10) !important;} 203 | 204 | .m-11{margin: calc(var(--step) * 11) !important;} 205 | .mt-11{margin-top: calc(var(--step) * 11) !important;} 206 | .mr-11{margin-right: calc(var(--step) * 11) !important;} 207 | .mb-11{margin-bottom: calc(var(--step) * 11) !important;} 208 | .ml-11{margin-left: calc(var(--step) * 11) !important;} 209 | .p-11{padding: calc(var(--step) * 11) !important;} 210 | .pt-11{padding-top: calc(var(--step) * 11) !important;} 211 | .pr-11{padding-right: calc(var(--step) * 11) !important;} 212 | .pb-11{padding-bottom: calc(var(--step) * 11) !important;} 213 | .pl-11{padding-left: calc(var(--step) * 11) !important;} 214 | 215 | .m-12{margin: calc(var(--step) * 12) !important;} 216 | .mt-12{margin-top: calc(var(--step) * 12) !important;} 217 | .mr-12{margin-right: calc(var(--step) * 12) !important;} 218 | .mb-12{margin-bottom: calc(var(--step) * 12) !important;} 219 | .ml-12{margin-left: calc(var(--step) * 12) !important;} 220 | .p-12{padding: calc(var(--step) * 12) !important;} 221 | .pt-12{padding-top: calc(var(--step) * 12) !important;} 222 | .pr-12{padding-right: calc(var(--step) * 12) !important;} 223 | .pb-12{padding-bottom: calc(var(--step) * 12) !important;} 224 | .pl-12{padding-left: calc(var(--step) * 12) !important;} 225 | 226 | .m-13{margin: calc(var(--step) * 13) !important;} 227 | .mt-13{margin-top: calc(var(--step) * 13) !important;} 228 | .mr-13{margin-right: calc(var(--step) * 13) !important;} 229 | .mb-13{margin-bottom: calc(var(--step) * 13) !important;} 230 | .ml-13{margin-left: calc(var(--step) * 13) !important;} 231 | .p-13{padding: calc(var(--step) * 13) !important;} 232 | .pt-13{padding-top: calc(var(--step) * 13) !important;} 233 | .pr-13{padding-right: calc(var(--step) * 13) !important;} 234 | .pb-13{padding-bottom: calc(var(--step) * 13) !important;} 235 | .pl-13{padding-left: calc(var(--step) * 13) !important;} 236 | 237 | .m-14{margin: calc(var(--step) * 14) !important;} 238 | .mt-14{margin-top: calc(var(--step) * 14) !important;} 239 | .mr-14{margin-right: calc(var(--step) * 14) !important;} 240 | .mb-14{margin-bottom: calc(var(--step) * 14) !important;} 241 | .ml-14{margin-left: calc(var(--step) * 14) !important;} 242 | .p-14{padding: calc(var(--step) * 14) !important;} 243 | .pt-14{padding-top: calc(var(--step) * 14) !important;} 244 | .pr-14{padding-right: calc(var(--step) * 14) !important;} 245 | .pb-14{padding-bottom: calc(var(--step) * 14) !important;} 246 | .pl-14{padding-left: calc(var(--step) * 14) !important;} 247 | 248 | .m-15{margin: calc(var(--step) * 15) !important;} 249 | .mt-15{margin-top: calc(var(--step) * 15) !important;} 250 | .mr-15{margin-right: calc(var(--step) * 15) !important;} 251 | .mb-15{margin-bottom: calc(var(--step) * 15) !important;} 252 | .ml-15{margin-left: calc(var(--step) * 15) !important;} 253 | .p-15{padding: calc(var(--step) * 15) !important;} 254 | .pt-15{padding-top: calc(var(--step) * 15) !important;} 255 | .pr-15{padding-right: calc(var(--step) * 15) !important;} 256 | .pb-15{padding-bottom: calc(var(--step) * 15) !important;} 257 | .pl-15{padding-left: calc(var(--step) * 15) !important;} 258 | 259 | .m-16{margin: calc(var(--step) * 16) !important;} 260 | .mt-16{margin-top: calc(var(--step) * 16) !important;} 261 | .mr-16{margin-right: calc(var(--step) * 16) !important;} 262 | .mb-16{margin-bottom: calc(var(--step) * 16) !important;} 263 | .ml-16{margin-left: calc(var(--step) * 16) !important;} 264 | .p-16{padding: calc(var(--step) * 16) !important;} 265 | .pt-16{padding-top: calc(var(--step) * 16) !important;} 266 | .pr-16{padding-right: calc(var(--step) * 16) !important;} 267 | .pb-16{padding-bottom: calc(var(--step) * 16) !important;} 268 | .pl-16{padding-left: calc(var(--step) * 16) !important;} 269 | 270 | .m-17{margin: calc(var(--step) * 17) !important;} 271 | .mt-17{margin-top: calc(var(--step) * 17) !important;} 272 | .mr-17{margin-right: calc(var(--step) * 17) !important;} 273 | .mb-17{margin-bottom: calc(var(--step) * 17) !important;} 274 | .ml-17{margin-left: calc(var(--step) * 17) !important;} 275 | .p-17{padding: calc(var(--step) * 17) !important;} 276 | .pt-17{padding-top: calc(var(--step) * 17) !important;} 277 | .pr-17{padding-right: calc(var(--step) * 17) !important;} 278 | .pb-17{padding-bottom: calc(var(--step) * 17) !important;} 279 | .pl-17{padding-left: calc(var(--step) * 17) !important;} 280 | 281 | .m-18{margin: calc(var(--step) * 18) !important;} 282 | .mt-18{margin-top: calc(var(--step) * 18) !important;} 283 | .mr-18{margin-right: calc(var(--step) * 18) !important;} 284 | .mb-18{margin-bottom: calc(var(--step) * 18) !important;} 285 | .ml-18{margin-left: calc(var(--step) * 18) !important;} 286 | .p-18{padding: calc(var(--step) * 18) !important;} 287 | .pt-18{padding-top: calc(var(--step) * 18) !important;} 288 | .pr-18{padding-right: calc(var(--step) * 18) !important;} 289 | .pb-18{padding-bottom: calc(var(--step) * 18) !important;} 290 | .pl-18{padding-left: calc(var(--step) * 18) !important;} 291 | 292 | .m-19{margin: calc(var(--step) * 19) !important;} 293 | .mt-19{margin-top: calc(var(--step) * 19) !important;} 294 | .mr-19{margin-right: calc(var(--step) * 19) !important;} 295 | .mb-19{margin-bottom: calc(var(--step) * 19) !important;} 296 | .ml-19{margin-left: calc(var(--step) * 19) !important;} 297 | .p-19{padding: calc(var(--step) * 19) !important;} 298 | .pt-19{padding-top: calc(var(--step) * 19) !important;} 299 | .pr-19{padding-right: calc(var(--step) * 19) !important;} 300 | .pb-19{padding-bottom: calc(var(--step) * 19) !important;} 301 | .pl-19{padding-left: calc(var(--step) * 19) !important;} 302 | 303 | .m-20{margin: calc(var(--step) * 20) !important;} 304 | .mt-20{margin-top: calc(var(--step) * 20) !important;} 305 | .mr-20{margin-right: calc(var(--step) * 20) !important;} 306 | .mb-20{margin-bottom: calc(var(--step) * 20) !important;} 307 | .ml-20{margin-left: calc(var(--step) * 20) !important;} 308 | .p-20{padding: calc(var(--step) * 20) !important;} 309 | .pt-20{padding-top: calc(var(--step) * 20) !important;} 310 | .pr-20{padding-right: calc(var(--step) * 20) !important;} 311 | .pb-20{padding-bottom: calc(var(--step) * 20) !important;} 312 | .pl-20{padding-left: calc(var(--step) * 20) !important;} 313 | 314 | .m-30{margin: calc(var(--step) * 30) !important;} 315 | .mt-30{margin-top: calc(var(--step) * 30) !important;} 316 | .mr-30{margin-right: calc(var(--step) * 30) !important;} 317 | .mb-30{margin-bottom: calc(var(--step) * 30) !important;} 318 | .ml-30{margin-left: calc(var(--step) * 30) !important;} 319 | .p-30{padding: calc(var(--step) * 30) !important;} 320 | .pt-30{padding-top: calc(var(--step) * 30) !important;} 321 | .pr-30{padding-right: calc(var(--step) * 30) !important;} 322 | .pb-30{padding-bottom: calc(var(--step) * 30) !important;} 323 | .pl-30{padding-left: calc(var(--step) * 30) !important;} 324 | 325 | .m-40{margin: calc(var(--step) * 40) !important;} 326 | .mt-40{margin-top: calc(var(--step) * 40) !important;} 327 | .mr-40{margin-right: calc(var(--step) * 40) !important;} 328 | .mb-40{margin-bottom: calc(var(--step) * 40) !important;} 329 | .ml-40{margin-left: calc(var(--step) * 40) !important;} 330 | .p-40{padding: calc(var(--step) * 40) !important;} 331 | .pt-40{padding-top: calc(var(--step) * 40) !important;} 332 | .pr-40{padding-right: calc(var(--step) * 40) !important;} 333 | .pb-40{padding-bottom: calc(var(--step) * 40) !important;} 334 | .pl-40{padding-left: calc(var(--step) * 40) !important;} 335 | 336 | .m-50{margin: calc(var(--step) * 50) !important;} 337 | .mt-50{margin-top: calc(var(--step) * 50) !important;} 338 | .mr-50{margin-right: calc(var(--step) * 50) !important;} 339 | .mb-50{margin-bottom: calc(var(--step) * 50) !important;} 340 | .ml-50{margin-left: calc(var(--step) * 50) !important;} 341 | .p-50{padding: calc(var(--step) * 50) !important;} 342 | .pt-50{padding-top: calc(var(--step) * 50) !important;} 343 | .pr-50{padding-right: calc(var(--step) * 50) !important;} 344 | .pb-50{padding-bottom: calc(var(--step) * 50) !important;} 345 | .pl-50{padding-left: calc(var(--step) * 50) !important;} 346 | 347 | .m-60{margin: calc(var(--step) * 60) !important;} 348 | .mt-60{margin-top: calc(var(--step) * 60) !important;} 349 | .mr-60{margin-right: calc(var(--step) * 60) !important;} 350 | .mb-60{margin-bottom: calc(var(--step) * 60) !important;} 351 | .ml-60{margin-left: calc(var(--step) * 60) !important;} 352 | .p-60{padding: calc(var(--step) * 60) !important;} 353 | .pt-60{padding-top: calc(var(--step) * 60) !important;} 354 | .pr-60{padding-right: calc(var(--step) * 60) !important;} 355 | .pb-60{padding-bottom: calc(var(--step) * 60) !important;} 356 | .pl-60{padding-left: calc(var(--step) * 60) !important;} 357 | 358 | .m-70{margin: calc(var(--step) * 70) !important;} 359 | .mt-70{margin-top: calc(var(--step) * 70) !important;} 360 | .mr-70{margin-right: calc(var(--step) * 70) !important;} 361 | .mb-70{margin-bottom: calc(var(--step) * 70) !important;} 362 | .ml-70{margin-left: calc(var(--step) * 70) !important;} 363 | .p-70{padding: calc(var(--step) * 70) !important;} 364 | .pt-70{padding-top: calc(var(--step) * 70) !important;} 365 | .pr-70{padding-right: calc(var(--step) * 70) !important;} 366 | .pb-70{padding-bottom: calc(var(--step) * 70) !important;} 367 | .pl-70{padding-left: calc(var(--step) * 70) !important;} 368 | 369 | .m-80{margin: calc(var(--step) * 80) !important;} 370 | .mt-80{margin-top: calc(var(--step) * 80) !important;} 371 | .mr-80{margin-right: calc(var(--step) * 80) !important;} 372 | .mb-80{margin-bottom: calc(var(--step) * 80) !important;} 373 | .ml-80{margin-left: calc(var(--step) * 80) !important;} 374 | .p-80{padding: calc(var(--step) * 80) !important;} 375 | .pt-80{padding-top: calc(var(--step) * 80) !important;} 376 | .pr-80{padding-right: calc(var(--step) * 80) !important;} 377 | .pb-80{padding-bottom: calc(var(--step) * 80) !important;} 378 | .pl-80{padding-left: calc(var(--step) * 80) !important;} 379 | 380 | .m-90{margin: calc(var(--step) * 90) !important;} 381 | .mt-90{margin-top: calc(var(--step) * 90) !important;} 382 | .mr-90{margin-right: calc(var(--step) * 90) !important;} 383 | .mb-90{margin-bottom: calc(var(--step) * 90) !important;} 384 | .ml-90{margin-left: calc(var(--step) * 90) !important;} 385 | .p-90{padding: calc(var(--step) * 90) !important;} 386 | .pt-90{padding-top: calc(var(--step) * 90) !important;} 387 | .pr-90{padding-right: calc(var(--step) * 90) !important;} 388 | .pb-90{padding-bottom: calc(var(--step) * 90) !important;} 389 | .pl-90{padding-left: calc(var(--step) * 90) !important;} 390 | 391 | .m-100{margin: calc(var(--step) * 100) !important;} 392 | .mt-100{margin-top: calc(var(--step) * 100) !important;} 393 | .mr-100{margin-right: calc(var(--step) * 100) !important;} 394 | .mb-100{margin-bottom: calc(var(--step) * 100) !important;} 395 | .ml-100{margin-left: calc(var(--step) * 100) !important;} 396 | .p-100{padding: calc(var(--step) * 100) !important;} 397 | .pt-100{padding-top: calc(var(--step) * 100) !important;} 398 | .pr-100{padding-right: calc(var(--step) * 100) !important;} 399 | .pb-100{padding-bottom: calc(var(--step) * 100) !important;} 400 | .pl-100{padding-left: calc(var(--step) * 100) !important;} 401 | /*#endregion*/ 402 | 403 | .f-x0{font-size: 0.0em !important;} 404 | .f-x0-0{font-size: 0.0em !important;} 405 | .f-x0-1{font-size: 0.1em !important;} 406 | .f-x0-2{font-size: 0.2em !important;} 407 | .f-x0-3{font-size: 0.3em !important;} 408 | .f-x0-4{font-size: 0.4em !important;} 409 | .f-x0-5{font-size: 0.5em !important;} 410 | .f-x0-6{font-size: 0.6em !important;} 411 | .f-x0-7{font-size: 0.7em !important;} 412 | .f-x0-8{font-size: 0.8em !important;} 413 | .f-x0-9{font-size: 0.9em !important;} 414 | 415 | .f-x1{font-size: 1.0em !important;} 416 | .f-x1-0{font-size: 1.0em !important;} 417 | .f-x1-1{font-size: 1.1em !important;} 418 | .f-x1-2{font-size: 1.2em !important;} 419 | .f-x1-3{font-size: 1.3em !important;} 420 | .f-x1-4{font-size: 1.4em !important;} 421 | .f-x1-5{font-size: 1.5em !important;} 422 | .f-x1-6{font-size: 1.6em !important;} 423 | .f-x1-7{font-size: 1.7em !important;} 424 | .f-x1-8{font-size: 1.8em !important;} 425 | .f-x1-9{font-size: 1.9em !important;} 426 | 427 | .f-x2{font-size: 2.0em !important;} 428 | .f-x2-0{font-size: 2.0em !important;} 429 | .f-x2-1{font-size: 2.1em !important;} 430 | .f-x2-2{font-size: 2.2em !important;} 431 | .f-x2-3{font-size: 2.3em !important;} 432 | .f-x2-4{font-size: 2.4em !important;} 433 | .f-x2-5{font-size: 2.5em !important;} 434 | .f-x2-6{font-size: 2.6em !important;} 435 | .f-x2-7{font-size: 2.7em !important;} 436 | .f-x2-8{font-size: 2.8em !important;} 437 | .f-x2-9{font-size: 2.9em !important;} 438 | 439 | .f-x3{font-size: 3.0em !important;} 440 | .f-x3-0{font-size: 3.0em !important;} 441 | .f-x3-1{font-size: 3.1em !important;} 442 | .f-x3-2{font-size: 3.2em !important;} 443 | .f-x3-3{font-size: 3.3em !important;} 444 | .f-x3-4{font-size: 3.4em !important;} 445 | .f-x3-5{font-size: 3.5em !important;} 446 | .f-x3-6{font-size: 3.6em !important;} 447 | .f-x3-7{font-size: 3.7em !important;} 448 | .f-x3-8{font-size: 3.8em !important;} 449 | .f-x3-9{font-size: 3.9em !important;} 450 | 451 | -------------------------------------------------------------------------------- /demo/helper.js: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * Not required by cyberpunk css. 4 | * 5 | * Just for the purpose of this demo page. 6 | */ 7 | 8 | function encode(text) 9 | { 10 | return $("",v.noCloneChecked=!!ce.cloneNode(!0).lastChild.defaultValue,ce.innerHTML="",v.option=!!ce.lastChild;var ge={thead:[1,"","
"],col:[2,"","
"],tr:[2,"","
"],td:[3,"","
"],_default:[0,"",""]};function ye(e,t){var n;return n="undefined"!=typeof e.getElementsByTagName?e.getElementsByTagName(t||"*"):"undefined"!=typeof e.querySelectorAll?e.querySelectorAll(t||"*"):[],void 0===t||t&&A(e,t)?S.merge([e],n):n}function ve(e,t){for(var n=0,r=e.length;n",""]);var me=/<|&#?\w+;/;function xe(e,t,n,r,i){for(var o,a,s,u,l,c,f=t.createDocumentFragment(),p=[],d=0,h=e.length;d\s*$/g;function je(e,t){return A(e,"table")&&A(11!==t.nodeType?t:t.firstChild,"tr")&&S(e).children("tbody")[0]||e}function De(e){return e.type=(null!==e.getAttribute("type"))+"/"+e.type,e}function qe(e){return"true/"===(e.type||"").slice(0,5)?e.type=e.type.slice(5):e.removeAttribute("type"),e}function Le(e,t){var n,r,i,o,a,s;if(1===t.nodeType){if(Y.hasData(e)&&(s=Y.get(e).events))for(i in Y.remove(t,"handle events"),s)for(n=0,r=s[i].length;n").attr(n.scriptAttrs||{}).prop({charset:n.scriptCharset,src:n.url}).on("load error",i=function(e){r.remove(),i=null,e&&t("error"===e.type?404:200,e.type)}),E.head.appendChild(r[0])},abort:function(){i&&i()}}});var Ut,Xt=[],Vt=/(=)\?(?=&|$)|\?\?/;S.ajaxSetup({jsonp:"callback",jsonpCallback:function(){var e=Xt.pop()||S.expando+"_"+Ct.guid++;return this[e]=!0,e}}),S.ajaxPrefilter("json jsonp",function(e,t,n){var r,i,o,a=!1!==e.jsonp&&(Vt.test(e.url)?"url":"string"==typeof e.data&&0===(e.contentType||"").indexOf("application/x-www-form-urlencoded")&&Vt.test(e.data)&&"data");if(a||"jsonp"===e.dataTypes[0])return r=e.jsonpCallback=m(e.jsonpCallback)?e.jsonpCallback():e.jsonpCallback,a?e[a]=e[a].replace(Vt,"$1"+r):!1!==e.jsonp&&(e.url+=(Et.test(e.url)?"&":"?")+e.jsonp+"="+r),e.converters["script json"]=function(){return o||S.error(r+" was not called"),o[0]},e.dataTypes[0]="json",i=C[r],C[r]=function(){o=arguments},n.always(function(){void 0===i?S(C).removeProp(r):C[r]=i,e[r]&&(e.jsonpCallback=t.jsonpCallback,Xt.push(r)),o&&m(i)&&i(o[0]),o=i=void 0}),"script"}),v.createHTMLDocument=((Ut=E.implementation.createHTMLDocument("").body).innerHTML="
",2===Ut.childNodes.length),S.parseHTML=function(e,t,n){return"string"!=typeof e?[]:("boolean"==typeof t&&(n=t,t=!1),t||(v.createHTMLDocument?((r=(t=E.implementation.createHTMLDocument("")).createElement("base")).href=E.location.href,t.head.appendChild(r)):t=E),o=!n&&[],(i=N.exec(e))?[t.createElement(i[1])]:(i=xe([e],t,o),o&&o.length&&S(o).remove(),S.merge([],i.childNodes)));var r,i,o},S.fn.load=function(e,t,n){var r,i,o,a=this,s=e.indexOf(" ");return-1").append(S.parseHTML(e)).find(r):e)}).always(n&&function(e,t){a.each(function(){n.apply(this,o||[e.responseText,t,e])})}),this},S.expr.pseudos.animated=function(t){return S.grep(S.timers,function(e){return t===e.elem}).length},S.offset={setOffset:function(e,t,n){var r,i,o,a,s,u,l=S.css(e,"position"),c=S(e),f={};"static"===l&&(e.style.position="relative"),s=c.offset(),o=S.css(e,"top"),u=S.css(e,"left"),("absolute"===l||"fixed"===l)&&-1<(o+u).indexOf("auto")?(a=(r=c.position()).top,i=r.left):(a=parseFloat(o)||0,i=parseFloat(u)||0),m(t)&&(t=t.call(e,n,S.extend({},s))),null!=t.top&&(f.top=t.top-s.top+a),null!=t.left&&(f.left=t.left-s.left+i),"using"in t?t.using.call(e,f):c.css(f)}},S.fn.extend({offset:function(t){if(arguments.length)return void 0===t?this:this.each(function(e){S.offset.setOffset(this,t,e)});var e,n,r=this[0];return r?r.getClientRects().length?(e=r.getBoundingClientRect(),n=r.ownerDocument.defaultView,{top:e.top+n.pageYOffset,left:e.left+n.pageXOffset}):{top:0,left:0}:void 0},position:function(){if(this[0]){var e,t,n,r=this[0],i={top:0,left:0};if("fixed"===S.css(r,"position"))t=r.getBoundingClientRect();else{t=this.offset(),n=r.ownerDocument,e=r.offsetParent||n.documentElement;while(e&&(e===n.body||e===n.documentElement)&&"static"===S.css(e,"position"))e=e.parentNode;e&&e!==r&&1===e.nodeType&&((i=S(e).offset()).top+=S.css(e,"borderTopWidth",!0),i.left+=S.css(e,"borderLeftWidth",!0))}return{top:t.top-i.top-S.css(r,"marginTop",!0),left:t.left-i.left-S.css(r,"marginLeft",!0)}}},offsetParent:function(){return this.map(function(){var e=this.offsetParent;while(e&&"static"===S.css(e,"position"))e=e.offsetParent;return e||re})}}),S.each({scrollLeft:"pageXOffset",scrollTop:"pageYOffset"},function(t,i){var o="pageYOffset"===i;S.fn[t]=function(e){return B(this,function(e,t,n){var r;if(x(e)?r=e:9===e.nodeType&&(r=e.defaultView),void 0===n)return r?r[i]:e[t];r?r.scrollTo(o?r.pageXOffset:n,o?n:r.pageYOffset):e[t]=n},t,e,arguments.length)}}),S.each(["top","left"],function(e,n){S.cssHooks[n]=_e(v.pixelPosition,function(e,t){if(t)return t=Be(e,n),Pe.test(t)?S(e).position()[n]+"px":t})}),S.each({Height:"height",Width:"width"},function(a,s){S.each({padding:"inner"+a,content:s,"":"outer"+a},function(r,o){S.fn[o]=function(e,t){var n=arguments.length&&(r||"boolean"!=typeof e),i=r||(!0===e||!0===t?"margin":"border");return B(this,function(e,t,n){var r;return x(e)?0===o.indexOf("outer")?e["inner"+a]:e.document.documentElement["client"+a]:9===e.nodeType?(r=e.documentElement,Math.max(e.body["scroll"+a],r["scroll"+a],e.body["offset"+a],r["offset"+a],r["client"+a])):void 0===n?S.css(e,t,i):S.style(e,t,n,i)},s,n?e:void 0,n)}})}),S.each(["ajaxStart","ajaxStop","ajaxComplete","ajaxError","ajaxSuccess","ajaxSend"],function(e,t){S.fn[t]=function(e){return this.on(t,e)}}),S.fn.extend({bind:function(e,t,n){return this.on(e,null,t,n)},unbind:function(e,t){return this.off(e,null,t)},delegate:function(e,t,n,r){return this.on(t,e,n,r)},undelegate:function(e,t,n){return 1===arguments.length?this.off(e,"**"):this.off(t,e||"**",n)},hover:function(e,t){return this.mouseenter(e).mouseleave(t||e)}}),S.each("blur focus focusin focusout resize scroll click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup contextmenu".split(" "),function(e,n){S.fn[n]=function(e,t){return 0