app.css
1 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap'); 2 3 body { 4 background: #161616 top left repeat!important; 5 font-family: 'Roboto', sans-serif 6 } 7 8 body::-webkit-scrollbar { 9 width: 5px; /* width of the entire scrollbar */ 10 } 11 12 body::-webkit-scrollbar-track { 13 background: #000; /* color of the tracking area */ 14 } 15 16 body::-webkit-scrollbar-thumb { 17 background-color: #fff; /* color of the scroll thumb */ 18 border-radius: 20px; /* roundness of the scroll thumb */ 19 /* border: 3px solid orange; creates padding around scroll thumb */ 20 } 21 22 /*** How to Play ***/ 23 /* @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"); 24 html { 25 box-sizing: border-box; 26 } 27 28 *, 29 *:before, 30 *:after { 31 box-sizing: border-box; 32 } 33 34 body { 35 -webkit-font-smoothing: antialiased; 36 -moz-osx-font-smoothing: grayscale; 37 background-color: #f9fafb; 38 font-size: 70%; 39 line-height: 1.4; 40 font-family: "Inter", sans-serif; 41 color: #6b7280; 42 font-weight: 400; 43 } 44 @media only screen and (min-width: 600px) { 45 body { 46 justify-content: center; 47 align-items: center; 48 display: flex; 49 height: 100vh; 50 font-size: 100%; 51 } 52 } */ 53 54 .button { 55 -webkit-appearance: none; 56 -moz-appearance: none; 57 appearance: none; 58 background: none; 59 border-radius: 0.25em; 60 color: #0d6efd; 61 cursor: pointer; 62 display: inline-block; 63 font-weight: 500; 64 height: 3em; 65 line-height: 3em; 66 padding: 0 1em; 67 text-decoration: underline; 68 } 69 .button:hover { 70 /* background-color: #17ac4e; */ 71 color: #0a58ca; 72 } 73 74 .details-modal { 75 background: #ffffff; 76 border-radius: 0.5em; 77 box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); 78 left: 50%; 79 max-width: 90%; 80 pointer-events: none; 81 position: absolute; 82 top: 50%; 83 transform: translate(-50%, -50%); 84 width: 30em; 85 text-align: left; 86 max-height: 90vh; 87 display: flex; 88 flex-direction: column; 89 z-index: 9999; 90 } 91 .details-modal .details-modal-close { 92 align-items: center; 93 color: #111827; 94 display: flex; 95 height: 2em; 96 justify-content: center; 97 pointer-events: none; 98 position: absolute; 99 right: 0; 100 top: 0; 101 width: 2em; 102 } 103 .details-modal .details-modal-close svg { 104 display: block; 105 } 106 .details-modal .details-modal-title { 107 color: #111827; 108 padding: 0.25em 0.5em; 109 /* padding-top: 1em; */ 110 pointer-events: all; 111 position: relative; 112 width: calc(100% - 4.5em); 113 } 114 .details-modal .details-modal-title h1 { 115 font-size: 1.8rem; 116 font-weight: 600; 117 line-height: normal; 118 color: #111827; 119 text-align: left; 120 /* margin-top: 0.25em; */ 121 } 122 .details-modal .details-modal-content { 123 border-top: 1px solid #e0e0e0; 124 padding: 1em; 125 pointer-events: all; 126 overflow: auto; 127 } 128 129 .details-modal-overlay { 130 transition: opacity 0.2s ease-out; 131 pointer-events: none; 132 background: rgba(15, 23, 42, 0.8); 133 position: fixed; 134 opacity: 0; 135 bottom: 0; 136 right: 0; 137 left: 0; 138 top: 0; 139 } 140 details[open] .details-modal-overlay { 141 pointer-events: all; 142 opacity: 0.5; 143 } 144 145 details summary { 146 list-style: none; 147 } 148 details summary:focus { 149 outline: none; 150 } 151 details summary::-webkit-details-marker { 152 display: none; 153 } 154 155 code { 156 font-family: Monaco, monospace; 157 line-height: 100%; 158 background-color: #2d2d2c; 159 padding: 0.1em 0.4em; 160 letter-spacing: -0.05em; 161 word-break: normal; 162 border-radius: 7px; 163 color: white; 164 font-weight: normal; 165 font-size: 1.75rem; 166 position: relative; 167 top: -2px; 168 } 169 170 details p { 171 font-style: italic; 172 } 173 174 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap'); 175 176 *, *:after, *:before { 177 box-sizing: border-box; 178 } 179 180 :root { 181 font-size: 16px; 182 } 183 184 body { 185 font-family: "Inter", sans-serif!important; 186 line-height: 1.5!important; 187 min-height: 100vh; 188 font-size: 1.25rem; 189 } 190 191 *:focus { 192 outline: none; 193 } 194 195 body > div { 196 width: 90%; 197 max-width: 600px; 198 margin-left: auto; 199 margin-right: auto; 200 margin-top: 5rem; 201 margin-bottom: 5rem; 202 } 203 204 details.how-to-play > div { 205 border-left: 2px solid #000; 206 border-right: 2px solid #000; 207 border-bottom: 2px solid #000; 208 padding: 1.5em; 209 color: #000; 210 font-family: "Inter", sans-serif; 211 font-weight: lighter; 212 line-height: 1.5; 213 font-size: 1.25rem; 214 } 215 216 /* details.how-to-play div { 217 padding: 1.5em; 218 color: #000; 219 font-family: "Inter", sans-serif; 220 font-weight: lighter; 221 line-height: 1.5; 222 font-size: 1.25rem; 223 } */ 224 225 details.how-to-play div > * + * { 226 margin-top: 1.5em; 227 } 228 229 details + details { 230 margin-top: .5rem; 231 } 232 233 details.how-to-play .list-group-item { 234 color: #000!important; 235 box-shadow: none!important; 236 } 237 238 summary.accordion { 239 list-style: none; 240 } 241 242 summary::-webkit-details-marker { 243 display: none; 244 } 245 246 summary.accordion { 247 border: 2px solid #000; 248 color: #000; 249 font-size: 1.5rem; 250 font-weight: lighter; 251 padding: 0.5em 0.5em; 252 cursor: pointer; 253 position: relative; 254 padding-left: calc(1.75rem + .75rem + .75rem); 255 } 256 257 summary.accordion:before { 258 position: absolute; 259 top: 50%; 260 transform: translateY(-50%); 261 left: .75rem; 262 content: "↓"; 263 width: 1.75rem; 264 height: 1.75rem; 265 background-color: #000; 266 color: #FFF; 267 display: inline-flex; 268 justify-content: center; 269 align-items: center; 270 flex-shrink: 0; 271 padding-bottom: 5px; 272 } 273 274 /* details[open] summary { 275 background-color: #eee; 276 } */ 277 278 details.how-to-play[open] summary:before { 279 content: "↑"; 280 } 281 282 summary.accordion:hover { 283 background-color: #eee; 284 } 285 286 a { 287 color: inherit; 288 font-weight: 600; 289 text-decoration: none; 290 box-shadow: 0 1px 0 0; 291 } 292 293 a:hover { 294 box-shadow: 0 3px 0 0; 295 /* color: transparent!important; */ 296 } 297 298 code { 299 font-family: monospace; 300 font-weight: 600; 301 } 302 303 .card { 304 width: 300px; 305 border: none; 306 border-radius: 15px; 307 background: none!important; 308 top: 0; 309 } 310 311 .card-body { 312 padding: 0!important; 313 overflow-y: scroll; 314 max-height: 200px; 315 } 316 317 .card-body::-webkit-scrollbar { 318 width: 5px; /* width of the entire scrollbar */ 319 } 320 321 .card-body::-webkit-scrollbar-track { 322 background: #000; /* color of the tracking area */ 323 } 324 325 .card-body::-webkit-scrollbar-thumb { 326 background-color: #fff; /* color of the scroll thumb */ 327 border-radius: 20px; /* roundness of the scroll thumb */ 328 /* border: 3px solid orange; creates padding around scroll thumb */ 329 } 330 331 .show { 332 display: block!important; 333 } 334 335 .adiv { 336 background: #04CB28; 337 border-bottom-right-radius: 0; 338 border-bottom-left-radius: 0; 339 font-size: 12px; 340 height: 46px 341 } 342 343 .chat { 344 border: none; 345 background: #E2FFE8; 346 font-size: 10px; 347 border-radius: 20px 348 } 349 350 .bg-white { 351 border: 1px solid #E7E7E9; 352 font-size: 10px; 353 border-radius: 20px 354 } 355 356 .myvideo img { 357 border-radius: 20px 358 } 359 360 .dot { 361 font-weight: bold 362 } 363 364 .form-control { 365 border-radius: 12px; 366 border: none!important; 367 font-size: 8px; 368 background: none!important; 369 color: #fff!important; 370 box-shadow:0px 0px 5px 1px rgba(0,198,255,0.5) 371 } 372 373 .form-control:focus { 374 box-shadow: none 375 } 376 377 .form-control::placeholder { 378 font-size: 8px; 379 color: #C4C4C4 380 } 381 382 .form-select { 383 background: none!important; 384 color: #fff!important; 385 box-shadow:0px 0px 5px 1px rgba(0,198,255,0.5); 386 border: none!important; 387 } 388 389 select option { 390 background: #000!important; 391 color: #fff!important; 392 } 393 394 #secondary .btn { 395 max-width: 125px; 396 } 397 398 /* GRAPH */ 399 400 * {margin: 0; padding: 0; outline: none;} 401 402 img {border: none;} 403 404 a { 405 text-decoration:none; 406 /* color:#00c6ff; */ 407 /* color: transparent!important; */ 408 } 409 410 h1 { 411 font: 4em normal Arial, Helvetica, sans-serif; 412 font-weight: bold!important; 413 padding: 20px; margin: 0; 414 text-align:center; 415 color:#000; 416 text-decoration: overline; 417 } 418 419 h1.logo { 420 color: cyan; 421 width: fit-content; 422 margin: 0 auto; 423 } 424 425 h1 small{ 426 font: 0.2em normal Arial, Helvetica, sans-serif; 427 text-transform:uppercase; letter-spacing: 0.2em; line-height: 5em; 428 display: block; 429 } 430 431 h2 { 432 font: 2em normal Arial, Helvetica, sans-serif; 433 padding-bottom:30px; 434 color:#fff; 435 display:block; 436 } 437 438 h6 { 439 color: #fff; 440 padding-bottom: 10px; 441 font-weight: bold!important; 442 } 443 444 .container { 445 width: 960px; 446 margin: 0 auto; 447 /* overflow: hidden; */ 448 } 449 450 .content { 451 width:800px; 452 max-height:auto; 453 /* margin:0 50px; */ 454 margin-top: 25px; 455 position:relative; 456 float: right; 457 /* overflow-y: scroll; */ 458 /* box-shadow:0px 0px 5px 1px rgba(0,198,255,0.5); */ 459 /* animation: axis-x 1s linear forwards; */ 460 } 461 462 .content.running { 463 height:300px; 464 border-left: 1px solid rgba(0,198,255,0.5); 465 border-bottom: 1px solid rgba(0,198,255,0.5); 466 padding-top:395px; 467 /* overflow: hidden; */ 468 } 469 470 .list-group { 471 box-shadow: 0px 0px 5px 1px rgb(0 198 255 / 50%)!important; 472 } 473 474 .list-group-item { 475 color: #0dcaf0!important; 476 background-color: transparent!important; 477 box-shadow: 0px 0px 5px 1px rgb(0 198 255 / 50%)!important; 478 } 479 480 .list-group-item.active { 481 background-color: #0d6efd!important; 482 } 483 484 /* .content:before { 485 animation: axis-x 1s ease-out; 486 } 487 488 .content:after { 489 animation: axis-y 1s ease-out; 490 } */ 491 492 .line, .line1, .line2, .line3, .axis-x, .axis-y { 493 background:#2187e7; 494 width:0px; 495 height:1px; 496 } 497 498 /* .running .line { 499 -moz-transform:rotate(-10deg); 500 -moz-transform-origin: -36em -5em; 501 -moz-animation:move 1s linear forwards; 502 503 -webkit-transform:rotate(-10deg); 504 -webkit-transform-origin: -36em -5em; 505 -webkit-animation:move 1s linear forwards; 506 } */ 507 508 /* .running .line1 { 509 -moz-transform:rotate(30deg); 510 -moz-transform-origin: 22.5em 19em; 511 -moz-animation:move1 1s 1s linear forwards; 512 513 -webkit-transform:rotate(30deg); 514 -webkit-transform-origin: 22.5em 19em; 515 -webkit-animation:move1 1s 1s linear forwards; 516 } */ 517 518 /* .running .line2 { 519 -moz-transform:rotate(-65deg); 520 -moz-transform-origin: 10em -19.75em; 521 -moz-animation:move2 1s 2s linear forwards; 522 523 -webkit-transform:rotate(-65deg); 524 -webkit-transform-origin: 10em -19.75em; 525 -webkit-animation:move2 1s 2s linear forwards; 526 } */ 527 528 /* .running .line3 { 529 -moz-transform:rotate(48deg); 530 -moz-transform-origin: 45.25em 26em; 531 -moz-animation:move3 1s 3s linear forwards; 532 533 -webkit-transform:rotate(48deg); 534 -webkit-transform-origin: 45.25em 26em; 535 -webkit-animation:move3 1s 3s linear forwards; 536 } */ 537 538 .running .ball,.running .ball1,.running .ball2,.running .ball3,.running .ball4 { 539 background-color:#2187e7; 540 background-image: -moz-linear-gradient(90deg, #2187e7 25%, #a0eaff); 541 background-image: -webkit-linear-gradient(90deg, #2187e7 25%, #a0eaff); 542 543 width:10px; 544 height:10px; 545 border-radius:50px; 546 547 position:absolute; 548 z-index:99; 549 550 -moz-transform:scale(0); 551 -moz-animation:point 0.1s linear forwards; 552 553 -webkit-transform:scale(0); 554 -webkit-animation:point 0.1s linear forwards; 555 } 556 557 .running .time, .running .range { 558 background-color:#2187e7; 559 background-image: -moz-linear-gradient(90deg, #2187e7 25%, #a0eaff); 560 background-image: -webkit-linear-gradient(90deg, #2187e7 25%, #a0eaff); 561 562 width:0; 563 height:0; 564 565 position:absolute; 566 z-index:99; 567 568 -moz-transform:scale(0); 569 -moz-animation:point 0.1s linear forwards; 570 571 -webkit-transform:scale(0); 572 -webkit-animation:point 0.1s linear forwards; 573 } 574 575 .running .pulse,.running .pulse1,.running .pulse2,.running .pulse3,.running .pulse4 { 576 width:12px; 577 height:12px; 578 border-radius:30px; 579 border: 1px solid #00c6ff; 580 box-shadow: 0 0 5px #00c6ff; 581 position:absolute; 582 583 -moz-transform:scale(0); 584 -moz-animation:pulse 1s ease-out; 585 586 -webkit-transform:scale(0); 587 -webkit-animation:pulse 1s ease-out; 588 } 589 590 /* TOOLTIP */ 591 592 .time a, .range a, .ball a, .ball1 a, .ball2 a, .ball3 a, .ball4 a { 593 float:left; 594 height:10px; 595 width:10px; 596 text-decoration:none; 597 position:relative; 598 color: transparent; 599 } 600 601 .time a { 602 border-left: 1px solid cyan; 603 height: 5px; 604 } 605 606 .range a { 607 border-bottom: 1px solid cyan; 608 width: 5px; 609 } 610 611 .time a small, .range a small, .ball a small, .ball1 a small, .ball2 a small, .ball3 a small, .ball4 a small { 612 background:#000; 613 text-align:center; 614 /* width:100px; */ 615 padding:5px; 616 border-left:1px solid #111; border-top:1px solid #111; border-right:1px solid #333; border-bottom:1px solid #333; 617 border-radius:3px; 618 display:none; 619 color:#fff; 620 font-size:0.8em; 621 text-indent:0; 622 } 623 624 .time a:hover small, .ball a:hover small, .ball1 a:hover small, .ball2 a:hover small, .ball3 a:hover small, .ball4 a:hover small { 625 display:block; 626 position:absolute; 627 top:0px; 628 left:50%; 629 margin:-40px; 630 z-index:9999; 631 632 -moz-animation:tooltip .25s linear; 633 634 -webkit-animation:tooltip .25s linear; 635 } 636 637 .range a:hover small { 638 display:block; 639 position:absolute; 640 top:0px; 641 left:50px; 642 margin:-40px; 643 z-index:9999; 644 645 -moz-animation:tooltip .25s linear; 646 647 -webkit-animation:tooltip .25s linear; 648 } 649 650 /* COORDINATE POINTS */ 651 652 /* .ball { top:344px; left:0; } */ 653 /* .ball1 { top:310px; left:196px; } */ 654 /* .ball2 { top:410px; left:372px; } */ 655 /* .ball3 { top:50px; left:544px; } */ 656 /* .ball4 { top:270px; left:744px; } */ 657 658 /* .pulse { top:342px; left:-2px; } 659 .pulse1 { top:308px; left:194px; } 660 .pulse2 { top:408px; left:370px; } 661 .pulse3 { top:0; left:542px; } 662 .pulse4 { top:268px; left:742px; } */ 663 664 /* CONTROL LAYER DELAY */ 665 666 #layerBall, #layerPulse { -moz-animation-delay:0s; -webkit-animation-delay:0s; } 667 #layerBall1, #layerPulse1 { -moz-animation-delay:0.9s; -webkit-animation-delay:0.9s; } 668 #layerBall2, #layerPulse2 { -moz-animation-delay:1.9s; -webkit-animation-delay:1.9s; } 669 #layerBall3, #layerPulse3 { -moz-animation-delay:2.9s; -webkit-animation-delay:2.9s; } 670 #layerBall4, #layerPulse4 { -moz-animation-delay:4s; -webkit-animation-delay:4s; } 671 672 /* ANIMATION */ 673 674 @-moz-keyframes move { 675 0% { width:0px;} 676 100% { width:150px; box-shadow:0px 0px 5px 1px rgba(0,198,255,0.5); } 677 } 678 @-moz-keyframes move1 { 679 0% { width:0px;} 680 100% { width:195px; box-shadow:0px 0px 5px 1px rgba(0,198,255,0.5);} 681 } 682 @-moz-keyframes move2 { 683 0% { width:0px;} 684 100% { width:400px; box-shadow:0px 0px 5px 1px rgba(0,198,255,0.5);} 685 } 686 @-moz-keyframes move3 { 687 0% { width:0px;} 688 100% { width:300px; box-shadow:0px 0px 5px 1px rgba(0,198,255,0.5);} 689 } 690 691 @-moz-keyframes point { 692 0% {-moz-transform:scale(0,0);} 693 100%{-moz-transform:scale(1,1);} 694 } 695 696 @-moz-keyframes pulse { 697 0% {-moz-transform: scale(0);opacity: 0;} 698 10% {-moz-transform: scale(1);opacity: 0.5;} 699 50% {-moz-transform: scale(1.75);opacity: 0;} 700 100% {-moz-transform: scale(0);opacity: 0;} 701 } 702 703 @-moz-keyframes tooltip { 704 0% { -moz-transform:scale(0,0); opacity:0;} 705 50% { -moz-transform:scale(1.2,1.2); opacity:0.3; } 706 75% { -moz-transform:scale(0.9,0.9); opacity:0.7;} 707 100%{ -moz-transform:scale(1,1); opacity:1;} 708 } 709 710 @-webkit-keyframes ball { 711 0% { width:0px;} 712 /* 100% { width:150px; box-shadow:0px 0px 5px 1px rgba(0,198,255,0.5); } */ 713 } 714 @-webkit-keyframes move1 { 715 0% { width:0px;} 716 100% { width:190px; box-shadow:0px 0px 5px 1px rgba(0,198,255,0.5); } 717 } 718 @-webkit-keyframes move2 { 719 0% { width:0px;} 720 100% { width:370px; box-shadow:0px 0px 5px 1px rgba(0,198,255,0.5); } 721 } 722 @-webkit-keyframes move3 { 723 0% { width:0px;} 724 100% { width:300px; box-shadow:0px 0px 5px 1px rgba(0,198,255,0.5); } 725 } 726 727 @-webkit-keyframes axis-x { 728 0% { 729 width: 0; 730 } 731 100% { 732 width: 100%; 733 box-shadow:0px 0px 5px 1px rgba(0,198,255,0.5); 734 } 735 } 736 737 @-webkit-keyframes axis-y { 738 0% { 739 height: 0; 740 bottom:0; 741 } 742 100%{ 743 height: 200px; 744 bottom: 200px; 745 box-shadow:0px 0px 5px 1px rgba(0,198,255,0.5); 746 } 747 } 748 749 @-webkit-keyframes point { 750 0% {-webkit-transform:scale(0,0);} 751 100%{-webkit-transform:scale(1,1);} 752 } 753 754 @-webkit-keyframes pulse { 755 0% {-webkit-transform: scale(0);opacity: 0;} 756 10% {-webkit-transform: scale(1);opacity: 0.5;} 757 50% {-webkit-transform: scale(1.75);opacity: 0;} 758 100% {-webkit-transform: scale(0);opacity: 0;} 759 } 760 761 @-webkit-keyframes tooltip { 762 0% { -webkit-transform:scale(0,0); opacity:0;} 763 50% { -webkit-transform:scale(1.2,1.2); opacity:0.3; } 764 75% { -webkit-transform:scale(0.9,0.9); opacity:0.7;} 765 100%{ -webkit-transform:scale(1,1); opacity:1;} 766 } 767 768 /* Trigger button for javascript */ 769 770 .category, .period, .stats { 771 background: #000000; 772 background: -moz-linear-gradient(top, #161616 0%, #000000 100%); 773 background: -webkit-linear-gradient(top, #161616 0%,#000000 100%); 774 border-left:1px solid #111; border-top:1px solid #111; border-right:1px solid #333; border-bottom:1px solid #333; 775 font-family: Verdana, Geneva, sans-serif; 776 text-decoration: none; 777 text-align: center; 778 color: #fff; 779 padding: 10px; 780 border-radius: 3px; 781 display: block; 782 margin: 0 auto; 783 width: 140px; 784 float: right; 785 } 786 787 .btn-outline-info.active, .btn-outline-info:hover { 788 color: #fff!important; 789 box-shadow: 0 0 0.25rem 0.25rem rgb(13 202 240 / 50%); 790 } 791 792 /* .trigger:hover, .active { 793 background: -moz-linear-gradient(top, #202020 0%, #161616 100%); 794 background: -webkit-linear-gradient(top, #202020 0%, #161616 100%); 795 color: #fff; 796 } */ 797 798 /*** Notifications ***/ 799 /* body 800 { 801 background: #000e29; 802 } */ 803 804 .alert>.start-icon { 805 margin-right: 0; 806 min-width: 20px; 807 text-align: center; 808 } 809 810 .alert>.start-icon { 811 margin-right: 5px; 812 } 813 814 .greencross 815 { 816 font-size:18px; 817 color: #25ff0b; 818 text-shadow: none; 819 } 820 821 .alert-simple.alert-success 822 { 823 border: 1px solid rgba(36, 241, 6, 0.46); 824 background-color: rgba(7, 149, 66, 0.12156862745098039); 825 box-shadow: 0px 0px 2px #259c08; 826 color: #0ad406; 827 text-shadow: 2px 1px #00040a; 828 transition:0.5s; 829 cursor:pointer; 830 } 831 .alert-success:hover{ 832 background-color: rgba(7, 149, 66, 0.35); 833 transition:0.5s; 834 } 835 .alert-simple.alert-info 836 { 837 border: 1px solid rgba(6, 44, 241, 0.46); 838 background-color: rgba(7, 73, 149, 0.12156862745098039); 839 box-shadow: 0px 0px 2px #0396ff; 840 color: #0396ff; 841 text-shadow: 2px 1px #00040a; 842 transition:0.5s; 843 cursor:pointer; 844 } 845 846 .alert-info:hover 847 { 848 background-color: rgba(7, 73, 149, 0.35); 849 transition:0.5s; 850 } 851 852 .blue-cross 853 { 854 font-size: 18px; 855 color: #0bd2ff; 856 text-shadow: none; 857 } 858 859 .alert-simple.alert-warning 860 { 861 border: 1px solid rgba(241, 142, 6, 0.81); 862 background-color: rgba(220, 128, 1, 0.16); 863 box-shadow: 0px 0px 2px #ffb103; 864 color: #ffb103; 865 text-shadow: 2px 1px #00040a; 866 transition:0.5s; 867 cursor:pointer; 868 } 869 870 .alert-warning:hover{ 871 background-color: rgba(220, 128, 1, 0.33); 872 transition:0.5s; 873 } 874 875 .warning 876 { 877 font-size: 18px; 878 color: #ffb40b; 879 text-shadow: none; 880 } 881 882 .alert-simple.alert-danger 883 { 884 border: 1px solid rgba(241, 6, 6, 0.81); 885 background-color: rgba(220, 17, 1, 0.16); 886 box-shadow: 0px 0px 2px #ff0303; 887 color: #ff0303; 888 text-shadow: 2px 1px #00040a; 889 transition:0.5s; 890 cursor:pointer; 891 } 892 893 .alert-danger:hover 894 { 895 background-color: rgba(220, 17, 1, 0.33); 896 transition:0.5s; 897 } 898 899 .danger 900 { 901 font-size: 18px; 902 color: #ff0303; 903 text-shadow: none; 904 } 905 906 .alert-simple.alert-primary 907 { 908 border: 1px solid rgba(6, 241, 226, 0.81); 909 background-color: rgba(1, 204, 220, 0.16); 910 box-shadow: 0px 0px 2px #03fff5; 911 color: #03d0ff; 912 text-shadow: 2px 1px #00040a; 913 transition:0.5s; 914 cursor:pointer; 915 } 916 917 .alert-primary:hover{ 918 background-color: rgba(1, 204, 220, 0.33); 919 transition:0.5s; 920 } 921 922 .alertprimary 923 { 924 font-size: 18px; 925 color: #03d0ff; 926 text-shadow: none; 927 } 928 929 .square_box { 930 position: absolute; 931 -webkit-transform: rotate(45deg); 932 -ms-transform: rotate(45deg); 933 transform: rotate(45deg); 934 border-top-left-radius: 45px; 935 opacity: 0.302; 936 z-index: -9999; 937 } 938 939 .square_box.box_three { 940 background-image: -moz-linear-gradient(-90deg, #290a59 0%, #3d57f4 100%); 941 background-image: -webkit-linear-gradient(-90deg, #290a59 0%, #3d57f4 100%); 942 background-image: -ms-linear-gradient(-90deg, #290a59 0%, #3d57f4 100%); 943 opacity: 0.059; 944 left: -80px; 945 top: -60px; 946 width: 500px; 947 height: 500px; 948 border-radius: 45px; 949 } 950 951 .square_box.box_four { 952 background-image: -moz-linear-gradient(-90deg, #290a59 0%, #3d57f4 100%); 953 background-image: -webkit-linear-gradient(-90deg, #290a59 0%, #3d57f4 100%); 954 background-image: -ms-linear-gradient(-90deg, #290a59 0%, #3d57f4 100%); 955 opacity: 0.059; 956 left: 150px; 957 top: -25px; 958 width: 550px; 959 height: 550px; 960 border-radius: 45px; 961 } 962 963 .alert:before { 964 content: ''; 965 position: absolute; 966 width: 0; 967 height: calc(100% - 44px); 968 border-left: 1px solid; 969 border-right: 2px solid; 970 border-bottom-right-radius: 3px; 971 border-top-right-radius: 3px; 972 left: 0; 973 top: 50%; 974 transform: translate(0,-50%); 975 height: 20px; 976 } 977 978 .fa-times 979 { 980 -webkit-animation: blink-1 2s infinite both; 981 animation: blink-1 2s infinite both; 982 } 983 984 985 /** 986 * ---------------------------------------- 987 * animation blink-1 988 * ---------------------------------------- 989 */ 990 @-webkit-keyframes blink-1 { 991 0%, 992 50%, 993 100% { 994 opacity: 1; 995 } 996 25%, 997 75% { 998 opacity: 0; 999 } 1000 } 1001 @keyframes blink-1 { 1002 0%, 1003 50%, 1004 100% { 1005 opacity: 1; 1006 } 1007 25%, 1008 75% { 1009 opacity: 0; 1010 } 1011 }