splash.css (11565B)
1 @font-face{ 2 font-family: "Latin-Mono-Regular"; 3 src: url('fonts/lmmono10-regular.otf'), 4 url('fonts/lmmono10-regular.otf'); /* IE */ 5 } 6 7 @font-face{ 8 font-family: "Latin-Mono-Italic"; 9 src: url('fonts/lmmono10-italic.otf'), 10 url('fonts/lmmono10-italic.otf'); /* IE */ 11 } 12 13 @font-face{ 14 font-family: "Roberta"; 15 src: url('fonts/roberta.ttf'), 16 url('fonts/roberta.ttf'); /* IE */ 17 } 18 19 @font-face{ 20 font-family: "Digital"; 21 src: url('fonts/digital_counter_7.ttf'), 22 url('fonts/digital_counter_7.ttf'); /* IE */ 23 } 24 @font-face{ 25 font-family: "Retro"; 26 src: url('fonts/retro.ttf'), 27 url('fonts/retro.ttf'); /* IE */ 28 } 29 @font-face{ 30 font-family: "Cyber"; 31 src: url('fonts/cyber.ttf'), 32 url('fonts/cyber.ttf'); /* IE */ 33 } 34 35 body 36 { 37 margin:0 auto; 38 border:0px; 39 text-align: left; 40 background-color:#242021; 41 font-family: 'Latin-Mono-Regular', sans-serif; 42 font-weight: normal; 43 color: #f4f4f4; 44 font-size: 12pt; 45 } 46 47 a 48 { 49 color:#FFBA00; 50 text-decoration: none; 51 } 52 53 a:hover 54 { 55 color: #fcdd09; 56 padding: 2px; 57 } 58 59 h1 60 { 61 padding: 0px; 62 margin: 0px; 63 font-size: 100px; 64 color:#f8f9fa; 65 font-family: 'Roberta', sans-serif; 66 line-height: 75px; 67 font-weight: normal; 68 } 69 70 h2 71 { 72 padding: 0px; 73 margin: 0px; 74 font-size: 40pt; 75 line-height: 40px; 76 font-family: 'Latin-Mono-Italic', sans-serif; 77 font-weight: normal; 78 } 79 80 81 h3 82 { 83 padding: 0px; 84 margin: 0px; 85 font-size: 50pt; 86 line-height: 50px; 87 color:#f8f9fa; 88 text-transform:uppercase; 89 font-family: 'Roberta', sans-serif; 90 font-weight: normal; 91 } 92 93 h4 94 { 95 padding: 0px; 96 margin: 0px; 97 font-size: 35pt; 98 line-height: 40px; 99 font-family: 'Cyber', sans-serif; 100 font-weight: normal; 101 } 102 103 h5 104 { 105 padding: 0px; 106 margin-top: 10px; 107 margin-left: 0px; 108 margin-right: 0px; 109 margin-bottom: 10px; 110 color:#f8f9fa; 111 font-size: 35pt; 112 line-height: 40px; 113 font-family: 'Retro', sans-serif; 114 font-weight: normal; 115 } 116 117 h6 118 { 119 padding: 0px; 120 margin: 0px; 121 font-size: 30pt; 122 font-family: 'Digital', sans-serif; 123 font-weight: normal; 124 } 125 126 127 table 128 { 129 padding: 0px; 130 margin: 0px auto; 131 width: 80%; 132 font-style: normal; 133 font-weight: normal; 134 135 } 136 137 td { 138 display: block; 139 clear:both; 140 } 141 142 th { 143 display: block; 144 clear:both; 145 } 146 147 video 148 { 149 width: 100%; 150 } 151 152 input 153 { 154 width: 70%; 155 height: 30px; 156 border: 0px solid; 157 color: #fff; 158 padding-left: 5px; 159 padding-right: 5px; 160 background-color:#555; 161 border-radius: 3px; 162 } 163 164 button 165 { 166 color: #fff; 167 border-radius: 3px; 168 font-size: 14pt; 169 font-family: 'Roberta', sans-serif; 170 background-color: #444; 171 border: 0px; 172 padding: 5px; 173 height: 30px; 174 width: 20%; 175 } 176 177 button:hover 178 { 179 180 background-color: #ff0000; 181 } 182 183 blockquote { 184 font-size: 1.5em; 185 margin: 20px 0; 186 padding: 10px; 187 border-left: 5px solid #ccc; 188 font-style: italic; 189 } 190 191 blockquote::before { 192 content: "“"; 193 font-size: 2em; 194 color: #ccc; 195 } 196 197 blockquote::after { 198 content: "”"; 199 font-size: 2em; 200 color: #ccc; 201 } 202 203 #rendered { 204 width: 455px; /* Always 455px */ 205 } 206 207 code { 208 background: #282c34; 209 color: #abb2bf; 210 font-size: 8pt; 211 padding: 2px; 212 border-radius: 2px; 213 min-width: 455px; 214 width: 455px; /* Always 455px */ 215 min-width: 455px; /* Prevents shrinking */ 216 max-width: 455px; /* Prevents growing */ 217 box-sizing: border-box; /* Includes padding & border in the width */ 218 overflow-x: auto; 219 font-family: monospace; 220 text-align: left; 221 margin: 0.5rem 0; 222 /* Key properties for respecting line breaks */ 223 white-space: pre-wrap; /* preserves whitespace + wraps long lines */ 224 word-break: break-all; /* optional: breaks very long words */ 225 tab-size: 4; /* nice tab spacing */ 226 } 227 228 pre code { 229 font-family: inherit; 230 } 231 .insert-link { 232 color: #0066cc; 233 text-decoration: underline; 234 margin-right: 20px; 235 cursor: pointer; 236 font-size: 16px; 237 } 238 .insert-link:hover { 239 color: #004499; 240 } 241 242 243 video 244 { 245 border-radius: 10px; 246 width: 100%; 247 } 248 249 img 250 { 251 border-radius: 10px; 252 width: 100%; 253 } 254 255 #visitors img 256 { 257 border-radius: 0px; 258 width: auto; 259 max-width: auto; 260 } 261 262 #container 263 { 264 margin: 0px auto; 265 height: auto; 266 } 267 268 #propaganda-container 269 { 270 margin: 0px auto; 271 height: auto; 272 width: 90%; 273 } 274 275 .introtext 276 { 277 margin: 0px auto; 278 width: 100%; 279 height: auto; 280 max-width: 455px; 281 } 282 283 .promotext 284 { 285 margin: 0px auto; 286 width: 50%; 287 height: auto; 288 max-width: 400px; 289 } 290 291 .heartpost 292 { 293 294 background-color: #222223; 295 border-radius: 5px; 296 padding-top:5px; 297 padding-left:10px; 298 padding-right:10px; 299 padding-bottom:1px; 300 } 301 302 .usrimg 303 { 304 max-width: 25px; 305 max-height: 25px; 306 } 307 308 .postmenu 309 { 310 text-align:right; 311 } 312 313 #search 314 { 315 placeholder: "search..."; 316 padding: 0px; 317 width: 55%; 318 } 319 320 .bild 321 { 322 323 background-color: #29252b; 324 border-radius: 5px; 325 } 326 .bild p 327 { 328 font-size: 14px; 329 margin:0px; 330 } 331 .bild h4 332 { 333 padding:5px; 334 } 335 336 #album 337 { 338 margin: 0px auto; 339 height: auto; 340 width: 90%; 341 max-width: 900px; 342 } 343 344 #default 345 { 346 margin: 0 auto; 347 padding-top: 5px; 348 width: 100%; 349 max-width: 400px; 350 height: auto; 351 } 352 353 #logo 354 { 355 padding-top: 5px; 356 width: 95%; 357 padding-bottom: 6px; 358 } 359 360 #tools 361 { 362 font-family: 'Roberta', sans-serif; 363 font-size:25pt; 364 padding-bottom: 10px; 365 } 366 367 #shoutbox 368 { 369 padding-left: 5%; 370 padding-top: 10px; 371 padding-bottom: 20px; 372 } 373 374 #shoutbox p 375 { 376 margin: 2px; 377 } 378 379 #matrix-shoutbox 380 { 381 margin-top: 10px; 382 } 383 384 #matrix-shoutbox img 385 { 386 width: 90%; 387 } 388 389 #time 390 { 391 font-size: 8pt; 392 color: #98ffff; 393 } 394 395 #msg 396 { 397 font-size: 11pt; 398 color: #98ffff; 399 } 400 401 #top 402 { 403 margin: 0 auto; 404 height: 60vh; 405 width: 50%; 406 } 407 408 #robin 409 { 410 background-color:#3B6861; 411 padding-bottom: 100px; 412 margin: 0px auto; 413 font-weight: normal; 414 font-size: 16px; 415 } 416 417 #footer 418 { 419 position: fixed; 420 margin: 0 auto; 421 background-color:#231f20; 422 font-weight: normal; 423 font-size: 17px; 424 bottom:0px; 425 padding-top:10px; 426 height:30px; 427 width: 100%; 428 } 429 430 #onair 431 { 432 font-size: 30px; 433 color: #DB232C; 434 opacity: 0.2; 435 } 436 437 #tipjar img 438 { 439 max-width: 350px; 440 padding:2px; 441 background-color:#fff; 442 width: 35%; 443 border-radius: 2px; 444 } 445 #onair.neon {opacity: 1} 446 #onair.neonoff {opacity: 0.2} 447 448 #onairvideo 449 { 450 font-family: "Digital"; 451 font-size: 14px; 452 color: #032604; 453 opacity: 0.5; 454 padding-top: 5px; 455 padding-bottom: 5px; 456 } 457 458 #onairvideo.neongreen {opacity: 1} 459 #onairvideo.neongreenoff {opacity: 0.2} 460 461 #song { 462 font-family: "Digital"; 463 font-size: 15px; 464 color: #fcdd09; 465 opacity: 0.5; 466 text-align: center; 467 padding-top: 10px; 468 } 469 470 #lyssnare { 471 font-family: "Digital"; 472 font-size: 15px; 473 color: #7CFC00; 474 opacity: 0.5; 475 text-align: center; 476 padding-top: 10px; 477 } 478 479 #bag 480 { 481 margin: 0px auto; 482 position:fixed; 483 color:#fff; 484 top:0; 485 width:100%; 486 background:#0A5200; 487 } 488 489 #insidebag 490 { 491 margin: 10px auto; 492 font-size: 14px; 493 width:100%; 494 } 495 496 table, tbody, tr, td 497 { 498 width: 100%; 499 } 500 501 input, select 502 { 503 padding: 4px; 504 color: #fff; 505 background-color: #555; 506 font-size: 16px; 507 border: 0px; 508 } 509 510 textarea 511 { 512 padding: 4px; 513 color: #fff; 514 background-color: #555; 515 font-size: 16px; 516 border: 0px; 517 width: 100%; 518 height: 20px; 519 } 520 521 button 522 { 523 margin:10px; 524 padding: 4px; 525 font-size: 18px; 526 color: #fff; 527 background-color: #333; 528 width: 90%; 529 } 530 531 pre 532 { 533 white-space: pre-wrap; /* Since CSS 2.1 */ 534 white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ 535 white-space: -pre-wrap; /* Opera 4-6 */ 536 white-space: -o-pre-wrap; /* Opera 7 */ 537 word-wrap: break-word; /* Internet Explorer 5.5+ */ 538 } 539 540 .logo 541 { 542 width: 80%; 543 height:auto; 544 } 545 546 .logo2 547 { 548 width: 70%; 549 height:auto; 550 } 551 552 .intro 553 { 554 margin: 10px auto; 555 scroll-margin-top: 10rem; 556 padding: 10px; 557 border-radius:5px; 558 padding-bottom: 20px; 559 } 560 561 .product 562 { 563 margin: 10px auto; 564 scroll-margin-top: 10rem; 565 width: 80%; 566 padding: 10px; 567 border-radius:5px; 568 background-color:#333; 569 padding-bottom: 20px; 570 } 571 572 .editproduct 573 { 574 margin: 1px; 575 display:inline-block; 576 border-radius:5px; 577 background-color:#333; 578 } 579 580 .orders 581 { 582 margin:0 auto; 583 background-color:#333; 584 font-weight: normal; 585 font-style: normal; 586 font-size: 15px; 587 padding-top: 5px; 588 padding-left: 20px; 589 padding-right: 20px; 590 text-align: left; 591 height: auto; 592 width: 90%; 593 padding-bottom: 20px; 594 border-radius:5px; 595 } 596 597 .imgprod 598 { 599 border-radius:5px; 600 } 601 602 #payid 603 { 604 margin: 0px auto; 605 color: #888; 606 text-decoration: normal; 607 background-color: #111; 608 border: 0px; 609 width: 100%; 610 font-size: 10px; 611 text-align: center; 612 white-space: pre-wrap; /* CSS3 */ 613 white-space: -moz-pre-wrap; /* Firefox */ 614 white-space: -pre-wrap; /* Opera <7 */ 615 white-space: -o-pre-wrap; /* Opera 7 */ 616 word-wrap: break-word; /* IE */ 617 } 618 619 #payreq 620 { 621 margin: 0px auto; 622 color: #888; 623 background-color: #111; 624 border: 0px; 625 width: 100%; 626 height: 55px; 627 font-size: 10px; 628 text-align: center; 629 white-space: pre-wrap; /* CSS3 */ 630 white-space: -moz-pre-wrap; /* Firefox */ 631 white-space: -pre-wrap; /* Opera <7 */ 632 white-space: -o-pre-wrap; /* Opera 7 */ 633 word-wrap: break-word; /* IE */ 634 } 635 636 #copybutton 637 { 638 color: #333; 639 text-decoration: bold; 640 background-color: #111; 641 border: 0px; 642 padding: 5px; 643 width: auto; 644 } 645 646 #backbutton 647 { 648 color: #333; 649 text-decoration: bold; 650 background-color: #111; 651 border: 0px; 652 padding: 5px; 653 width: auto; 654 } 655 656 #description 657 { 658 height:300px; 659 } 660 661 #description2 662 { 663 height:300px; 664 } 665 666 .megalike { 667 display: inline-block; 668 border-radius: 50%; /* Makes it round */ 669 font-size: 15px; /* Size of the emoji */ 670 cursor: pointer; 671 transition: transform 0.2s; 672 user-select: none; 673 674 } 675 676 .megalike:hover { 677 transform: scale(1.1); 678 } 679 680 .megalike:active { 681 transform: scale(0.98); 682 } 683 684 .neonoff { 685 font-family: "Latin-Mono-Regular"; 686 color: #DB232C; 687 text-transform: uppercase; 688 text-align: center; 689 opacity: 0.2; 690 } 691 692 .neon { 693 font-family: "Roberta"; 694 color: #DB232C; 695 text-align: center; 696 opacity: 1; 697 } 698 699 .neon { 700 animation: neon 20.9s infinite alternate; 701 -moz-animation: neon 20.9s infinite alternate; 702 -webkit-animation: neon 20.9s infinite alternate; 703 } 704 705 .neongreenoff { 706 font-family: "Digital"; 707 color: #23db29; 708 text-transform: uppercase; 709 text-align: center; 710 opacity: 0.2; 711 } 712 713 .neongreen { 714 font-family: "Digital"; 715 color: #D2974E; 716 text-transform: uppercase; 717 text-align: center; 718 opacity: 1; 719 } 720 721 .neongreen { 722 animation: neongreen 20.9s infinite alternate; 723 -moz-animation: neongreen 20.9s infinite alternate; 724 -webkit-animation: neongreen 20.9s infinite alternate; 725 } 726 727 @keyframes neon { 728 0%, 19%, 21%, 23%, 25%, 14%, 6%, 10% { 729 text-shadow: 0 0 1vw #FA1C16, 0 0 3vw #FA1C16, 0 0 10vw #FA1C16, 0 0 10vw #FA1C16; 730 color: #DB232C; 731 } 732 50% { 733 text-shadow: 0 0 .5vw #800E0B, 0 0 1.5vw #800E0B, 0 0 5vw #800E0B, 0 0 5vw #800E0B; 734 } 735 20%, 24%, 55% { 736 text-shadow: none; 737 box-shadow: none; 738 } 739 } 740 741 @keyframes neongreen { 742 0%, 19%, 21%, 23%, 25%, 14%, 26%, 10% { 743 text-shadow: 0 0 1vw #16fa1e, 0 0 3vw #16fa1e, 0 0 10vw #16fa1e, 0 0 10vw #16fa1e; 744 color: #26db23; 745 } 746 50% { 747 text-shadow: 0 0 .5vw #0d7f0b, 0 0 1.5vw #0d7f0b, 0 0 5vw #0d7f0b, 0 0 5vw #0d7f0b; 748 } 749 2%, 14%, 5% { 750 text-shadow: none; 751 box-shadow: none; 752 } 753 } 754