public/assets/css/game.css

   1 @font-face {
   2     font-family: 'Breathe Fire';
   3     src: url('/assets/font/BreatheFire.woff2') format('woff2'),
   4         url('/assets/font/BreatheFire.woff') format('woff');
   5     font-weight: normal;
   6     font-style: normal;
   7     font-display: swap;
   8 }
   9
  10 body {
  11   margin: 1rem auto 2rem;
  12   background-color: #eee;
  13   width: 100%;
  14   max-width: 724px;
  15   height: 100vh;
  16 }
  17 .title-font {
  18   font-family: 'Breathe Fire', monospace;
  19 }
  20 #title-bar {
  21   background-color: transparent;
  22   margin-top: 0.5rem;
  23   margin-bottom: 1.5rem;
  24   border: 0;
  25   display: flex;
  26   justify-content: space-between;
  27   align-items: center;
  28 }
  29 #title-bar a {
  30   font-size: 3rem;
  31   color: #8e4607;
  32   text-decoration: none;
  33   letter-spacing: 0.3rem;
  34   mix-blend-mode: color-burn;
  35   border-bottom: solid 4px;
  36   line-height: 25px;
  37 }
  38 #time-of-day {
  39   text-align: right;
  40 }
  41 #time-of-day img {
  42   width: 32px;
  43   vertical-align: middle;
  44   mix-blend-mode: color-burn;
  45 }
  46 #view {
  47   font-size: 14px;
  48   padding: 1rem;
  49   border: 1px solid #000;
  50   box-shadow: 2px 3px 20px black, 0 0 60px #8a4d0f inset;
  51   background: #fffef0;
  52   background-image: url(data:image/png;base64,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);
  53 }
  54 b {
  55   font-weight: bold;
  56 }
  57 a {
  58   color: #a20b00;
  59 }
  60 select {
  61   padding: 0.3rem;
  62 }
  63 input {
  64   border: 1px solid #000;
  65 }
  66 button {
  67   cursor: pointer;
  68   color: #fff;
  69   background: url(data:image/png;base64,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), linear-gradient(to bottom, #D4AF37 0%, #C5A028 100%);
  70   box-shadow: inset 0px 0px 1px 2px rgba(255, 255, 255, 0.3);
  71   padding: 0.5rem 1rem;
  72   font-weight: bold;
  73   text-shadow: -1px -1px 0px rgba(0, 0, 0, 0.3);
  74   border: solid 1px #6d251c;
  75 }
  76 button.red {
  77   background: #a20b00;
  78 }
  79 button.red:hover {
  80   background: #b20b00;
  81 }
  82 button.green {
  83   background: url(data:image/png;base64,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), linear-gradient(to bottom, #41d437 0%, #0a9404 100%);
  84 }
  85 button.green:hover {
  86   background: url(data:image/png;base64,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), linear-gradient(to bottom, #32e027 0%, #10a209 100%);
  87 }
  88 button:active {
  89   position: relative;
  90   top: 1px;
  91 }
  92 button:disabled, button:disabled:hover {
  93   background: #aaa;
  94   cursor: not-allowed;
  95 }
  96 button:focus {
  97   outline: none;
  98 }
  99 .hidden {
 100   display: none !important;
 101 }
 102 p {
 103   margin-bottom: 1rem;
 104 }
 105 p:last-child {
 106   margin-bottom: 0;
 107 }
 108
 109 #announcements, #signup-prompt {
 110   padding: 1rem;
 111   line-height: 1.2rem;
 112   border: solid 1px #000;
 113   background-color: #fff;
 114   margin-bottom: 1rem;
 115 }
 116 #announcements {
 117   margin: 1rem 0;
 118 }
 119
 120 #signup {
 121   display: flex;
 122 }
 123
 124 #modal-wrapper {
 125   width: 100%;
 126   height: 100%;
 127   backdrop-filter: blur(10px);
 128 }
 129 dialog::backdrop {
 130   backdrop-filter: blur(3px);
 131
 132 }
 133 dialog {
 134   background-color: #fff;
 135   border: solid 1px #000;
 136   padding: 0.5rem;
 137   width: 300px;
 138   top: 20%;
 139   font-size: 0.9rem;
 140 }
 141 dialog .modal-header {
 142   font-weight: bold;
 143   text-align: right;
 144 }
 145 dialog .actions {
 146   text-align: right;
 147 }
 148 dialog .close-modal {
 149   cursor: pointer;
 150 }
 151
 152 @media(max-width: 650px) {
 153   #signup {
 154     flex-direction: column;
 155   }
 156   #signup .form-group, #signup button {
 157     margin-bottom: 1rem;
 158   }
 159 }
 160
 161 #alerts {
 162   position: absolute;
 163   right: 0;
 164   bottom: 0;
 165 }
 166 .alert {
 167   padding: 0.3rem;
 168   max-width: 17rem;
 169   line-height: 1.2rem;
 170   box-shadow: -3px -3px 4px 0px rgba(0, 0, 0, 0.5);
 171 }
 172 .alert.success, button.success {
 173   border: solid 1px #0a0;
 174   background-color: #def7e5;
 175 }
 176 .alert.error, button.error {
 177   border: solid 1px #a00;
 178   background-color: #f7dede;
 179 }
 180 .success {
 181   color: #0a0;
 182 }
 183 .error {
 184   color: #a00;
 185 }
 186
 187 .avatar-container {
 188   max-width: 96px;
 189   min-width: 32px;
 190 }
 191 #avatar {
 192   width: 100%;
 193   border: solid 1px #6d251c;
 194 }
 195 header {
 196   display: flex;
 197   align-items: flex-start;
 198   border: 0;
 199   margin-bottom: 1rem;
 200 }
 201 #player-info {
 202   width: 100%;
 203 }
 204 #player-section {
 205   display: flex;
 206 }
 207 #player-section div {
 208   flex-grow: 1;
 209 }
 210 #player-section .gold {
 211   text-align: right;
 212 }
 213 #stat-bars, #defender-stat-bars {
 214   width: 100%;
 215   margin: 0 5px;
 216 }
 217 #stat-bars .progress-bar, #defender-stat-bars .progress-bar {
 218   margin-bottom: 2px;
 219 }
 220 #stat-bars .gold {
 221   font-size: 0.7rem;
 222 }
 223 #stat-bars .gold:after {
 224   content: 'G';
 225 }
 226 #ap-bar {
 227   display: flex;
 228 }
 229 #ap-bar > div {
 230   display: flex;
 231   flex-grow: 1;
 232   align-items: center;
 233 }
 234 #ap-bar .icon {
 235   flex-basis: 16px;
 236   width: 16px;
 237   margin: 0 3px;
 238 }
 239
 240 .progress-bar {
 241   border: solid 1px #6d251c;
 242   width: 100%;
 243   font-size: 0.7rem;
 244   text-align: center;
 245   box-sizing: border-box;
 246   line-height: 110%;
 247 }
 248
 249
 250 nav {
 251   text-align: center;
 252   padding: 1rem 0;
 253 }
 254 nav li {
 255   display: inline-block;
 256   list-style: none;
 257 }
 258 nav li:before {
 259   content: '[';
 260 }
 261 nav li:after {
 262   content: ']';
 263 }
 264 nav a {
 265   text-decoration: none;
 266 }
 267 nav a.active {
 268   font-weight: bold;
 269   text-decoration: underline;
 270 }
 271 nav.filter {
 272   margin: 0;
 273   text-align: right;
 274   border: 0;
 275   padding: 0;
 276   position: relative;
 277   bottom: 5px;
 278 }
 279 nav.filter a {
 280   border-bottom-width: 0;
 281   z-index: 1;
 282   padding: 0.6rem;
 283   position: relative;
 284 }
 285 nav.filter a.active {
 286   background-color: #fff;
 287   border: solid #6d251c;
 288   border-width: 1px 1px 0;
 289   z-index: 4;
 290 }
 291 .filter-container .listing {
 292   border: solid 1px #6d251c;
 293   z-index: 2;
 294   position: relative;
 295   background-color: #fff;
 296 }
 297 nav.filter-result {
 298   display: none;
 299 }
 300 nav.filter-result.active {
 301   display: block !important;
 302 }
 303 #inventory-section {
 304   width: 100%;
 305 }
 306 #inventory-section .listing {
 307   top: 2px;
 308 }
 309 .inventory-listing {
 310   min-height: 2rem;
 311 }
 312
 313 .inventory-ITEMS {
 314   display: flex;
 315 }
 316 .player-item {
 317   position: relative;
 318   cursor: pointer;
 319   margin: 2px;
 320   border: solid 1px #000;
 321   width: 64px;
 322   height: 64px;
 323   overflow: hidden;
 324 }
 325 .player-item img {
 326   filter: grayscale(40%);
 327 }
 328 .player-item img:hover {
 329   filter: none;
 330 }
 331 .player-item .amount {
 332   font-weight: bold;
 333   position: absolute;
 334   bottom: 0;
 335   right: 0;
 336   background-color: rgba(255, 255, 255, 0.7);
 337   font-size: 0.8rem;
 338   padding: 4px;
 339   border-radius: 3px 0 0 0;
 340 }
 341 .item-modal-overview {
 342   display: flex;
 343 }
 344 .item-modal-overview .icon {
 345   width: 64px;
 346   height: 64px;
 347   margin: 0 1rem 1rem 0;
 348 }
 349 .item-modal-overview .icon img {
 350   width: 64px;
 351   height: 64px;
 352 }
 353 .item-modal-overview .name {
 354   margin-top: 0;
 355   font-weight: bold;
 356   margin: 0 1rem 0.8rem 0;
 357 }
 358 .item-modal-overview p {
 359   margin: 1rem;
 360 }
 361
 362 .tab {
 363   display: none;
 364 }
 365 .tab.active {
 366   display: block;
 367 }
 368 #main-nav {
 369   margin-bottom: 1rem;
 370   position: relative;
 371 }
 372 #main-nav section {
 373   min-height: 344px;
 374 }
 375
 376 .stat-breakdown th {
 377   font-weight: bold;
 378   text-align: right;
 379   background-color: #6d251c;
 380   color: #fff;
 381   background-image: url(data:image/png;base64,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);
 382 }
 383 .stat-breakdown th, .stat-breakdown td {
 384   padding: 0.5rem;
 385   min-width: 100px;
 386   line-height: 1rem;
 387 }
 388 .stat-breakdown tr:nth-child(even) {
 389   background-color: #c7b7a1;
 390 }
 391 .increase-stat {
 392   padding: 1px 6px;
 393 }
 394
 395 #explore {
 396   text-align: center;
 397   background-repeat: no-repeat;
 398   background-size: cover;
 399   padding: 2rem 0rem 2rem !important;
 400   line-height: 1.3rem;
 401   border: solid 1px #6d251c;
 402 }
 403
 404 .city-title-wrapper {
 405   filter: drop-shadow(0 0 10px black);
 406   position: relative;
 407   z-index: 1;
 408 }
 409 .city-title:before {
 410   position: absolute;
 411   content: ' ';
 412   z-index: 1;
 413   top: 2px;
 414   left: 2px;
 415   right: 2px;
 416   bottom: 2px;
 417   background: transparent;
 418   border: solid 2px #ffa500;
 419   clip-path: polygon(100% 0, 95% 50%, 100% 98%, 0% 100%, 5% 50%, 0 0);
 420 }
 421 .city-title {
 422   font-family: 'Breathe Fire', monospace;
 423   font-size: 1.5rem;
 424   letter-spacing: 1rem;
 425   display: inline-block;
 426   padding: 0.5rem 0.5rem 0.5rem 1.5rem;
 427   color: #fff;
 428   border: inset 3px rgba(88, 15, 15, 0.4);
 429   text-shadow: 1px -1px 0px #522626;
 430   background: #bc3915 url(data:image/png;base64,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);
 431   position: relative;
 432   clip-path: polygon(100% 0, 95% 50%, 100% 98%, 0% 100%, 5% 50%, 0 0);
 433   box-shadow: 0 0 4px 4px black;
 434 }
 435
 436 #fight-container {
 437   margin: 0 auto;
 438 }
 439 #defender-info {
 440   display: flex;
 441   width: 70%;
 442   margin: 0 auto 1rem;
 443 }
 444 .monster-identifier {
 445   text-align: left;
 446 }
 447 #defender-name {
 448   font-weight: bold;
 449 }
 450 .Elder #defender-name {
 451   color: #2b2b2b;
 452 }
 453 .Skittish #defender-name {
 454   color: #8700ff;
 455 }
 456 .Brute #defender-name {
 457   color: #a91313;
 458 }
 459 #fight-results {
 460   margin-top: 1rem;
 461 }
 462
 463
 464 #map {
 465   width: 75%;
 466   margin: 0rem auto 1rem;
 467   padding: 3rem 2rem 2rem;
 468   line-height: 1.3rem;
 469   background: linear-gradient(to bottom, rgba(255,255,255, 0) 0%, rgba(255, 255, 255, 0.5) 30%);
 470 }
 471 .city-details {
 472   position: relative;
 473   padding: 1rem 1px 2rem;
 474   margin: 0 auto;
 475   width: 90%;
 476   background-image: url(data:image/png;base64,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);
 477   background-color: #f7f4dd;
 478   box-shadow: 0 0 10px black;
 479   position: relative;
 480   top: -13px;
 481   border: solid 1px #6d251c;
 482 }
 483 .flex {
 484   display: flex;
 485   justify-content: space-around;
 486   flex-wrap: wrap;
 487 }
 488 .city-details.flex > div {
 489   margin: 1rem;
 490 }
 491 .service-in-town {
 492   padding: 0 1rem;
 493 }
 494 h1 {
 495   font-size: 1.5rem;
 496   font-weight: bold;
 497   margin-bottom: 1rem;
 498 }
 499 h2 {
 500   font-weight: bold;
 501   margin: 1rem;
 502   font-size: 1.3rem;
 503 }
 504 h3 {
 505   font-weight: bold;
 506   margin: 1rem;
 507   font-size: 1rem;
 508 }
 509
 510 #travelling {
 511   padding: 2rem;
 512 }
 513 #travelling-actions {
 514   display: flex;
 515   justify-content: center;
 516   gap: 1rem;
 517   margin-bottom: 1rem;
 518 }
 519 .travel-distance {
 520   margin-bottom: 1rem;
 521 }
 522
 523
 524 #explore .shop-inventory-listing  {
 525   margin: 2rem auto 1rem;
 526   width: 90%;
 527 }
 528 .location-name {
 529   display: flex;
 530   align-items: center;
 531   justify-content: center;
 532 }
 533 .location-name span {
 534   color: #846945;
 535   text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.7);
 536   margin: 0 1rem;
 537 }
 538 .location-name:before, .location-name:after {
 539   background-color: #846945;
 540   height: 2px;
 541   flex: 1;
 542   content: ' ';
 543   width: 4rem;
 544   drop-shadow: 1px 1px 0px rgba(255, 255, 255, 0.7);
 545 }
 546 .shop-inventory-listing .listing {
 547   background-color: #fff;
 548 }
 549 .store-list {
 550   display: flex;
 551   text-align: left;
 552   padding: 0.5rem;
 553 }
 554 .store-list:nth-child(even) {
 555   background-color: #f2f0ec;
 556 }
 557 .store-list .details {
 558   padding: 0 0.4rem;
 559   line-height: 1rem;
 560   flex-grow: 2;
 561 }
 562 .store-list .name {
 563   font-weight: bold;
 564 }
 565 .requirements {
 566   margin-top: 0.5rem;
 567   line-height: 1.3rem;
 568 }
 569 .requirement-title {
 570   font-weight: bold;
 571   text-transform: capitalize;
 572 }
 573 .store-cost {
 574   margin-top: 0.5rem;
 575 }
 576 .store-icon {
 577   width: 64px;
 578   height: calc(64px + 27px);
 579   padding: 0;
 580   background-repeat: no-repeat;
 581   background-size: contain;
 582   position: relative;
 583   margin-right: 0.5rem;
 584 }
 585 .inventory-icon {
 586   width: 64px;
 587   height: 64px;;
 588   padding: 0;
 589   background-repeat: no-repeat;
 590   background-size: contain;
 591   position: relative;
 592   margin-right: 0.5rem;
 593 }
 594 .store-actions {
 595   width: 100%;
 596   position: absolute;
 597   bottom: 0;
 598 }
 599 .store-actions button {
 600   width: 100%;
 601   padding: 0.3rem 0.5rem;
 602 }
 603 .inventory-actions {
 604   width: 74px;
 605 }
 606 .inventory-actions button {
 607   width: 100%;
 608   padding: 0.3rem 0.5rem;
 609 }
 610
 611 #inventory-page {
 612   display: flex;
 613   align-items: flex-start;
 614   justify-content: space-between;
 615   gap: 1rem;
 616 }
 617 #character-equipment-placement {
 618   border-spacing: 0;
 619   width: 192px;
 620 }
 621 #character-equipment-placement td {
 622   display: table-cell;
 623   min-width: 64px;
 624   max-width: 64px;
 625   min-height: 64px;
 626   max-height: 64px;
 627   width: 64px;
 628   height: 64px;
 629   border: solid 1px #6d251c;
 630   padding: 0;
 631   text-align: center;
 632   vertical-align: bottom;
 633   font-size: 0.7rem;
 634   background-repeat: no-repeat;
 635   overflow: hidden;
 636   background-size: contain;
 637 }
 638 #extra-inventory-info {
 639   margin-top: 1rem;
 640 }
 641 .filter-container .listing {
 642   max-height: 400px;
 643   width: 100%;
 644   overflow: auto;
 645 }
 646 @media(max-width: 650px) {
 647   #time-of-day {
 648     padding: 0 1rem;
 649   }
 650   #inventory-page {
 651     flex-direction: column;
 652   }
 653   #character-summary {
 654     width: 100%;
 655     display: flex;
 656     justify-content: space-between;
 657     align-items: flex-start;
 658   }
 659   #extra-inventory-info {
 660     margin-top: 0rem;
 661   }
 662   #inventory-section {
 663     margin-left: 0;
 664     margin-top: 2rem;
 665   }
 666 }
 667
 668 #skill-list {
 669   width: 100%;
 670 }
 671 #skill-list .skill-level {
 672   font-size: 2rem;
 673   vertical-align: middle;
 674   text-align: center;
 675   border: solid 1px #000;
 676 }
 677 #skill-list .skill-details table {
 678   width: 100%;
 679 }
 680 #skill-list .skill-title {
 681   text-align: left;
 682   padding: 0.6rem 0.6rem 0 0.6rem;
 683   line-height: 1.2rem;
 684   font-weight: bold;
 685 }
 686 #skill-list .skill-description {
 687   padding:  0 0.6rem 0.6rem;
 688   line-height: 1.2rem;
 689 }
 690 #skill-list .skill-exp {
 691   text-align: right;
 692   padding-right: 0.6rem;
 693 }
 694 #skill-list tr:nth-child(even) .skill-details {
 695   background-color: #c7b7a1;
 696 }
 697
 698
 699 #chat {
 700   border: solid 1px #6d251c;
 701 }
 702 #chat-messages {
 703   max-height: 250px;
 704   overflow: auto;
 705 }
 706 .chat-message {
 707   line-height: 1.2rem;
 708   padding: 0.2rem 0.3rem 0.3rem;
 709 }
 710 .chat-message:nth-child(even) {
 711   background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0, rgba(196, 177, 149, 0.8) 100%);
 712 }
 713
 714 .chat-message .from {
 715   font-weight: bold;
 716 }
 717 .chat-message .from::after {
 718   content: ':';
 719 }
 720 #chat-form {
 721   display: flex;
 722 }
 723 #chat-form input {
 724   flex-grow: 8;
 725   padding: 0.3rem;
 726   outline: none;
 727   border-width: 1px 0 0;
 728   background: transparent;
 729 }
 730 #chat-form input:focus {
 731   outline: none;
 732 }
 733 #chat-form button {
 734   border-right-width: 0px;
 735   border-bottom-width: 0px;
 736   font-weight: bold;
 737 }
 738 #chat-form button:active {
 739   top: 0;
 740 }
 741
 742 #game-footer {
 743   display: flex;
 744   justify-content: space-between;
 745   margin-top: 1rem;
 746   border: 0;
 747 }
 748 #game-footer nav {
 749   margin: 0;
 750   padding: 0;
 751 }
 752 #game-footer img {
 753   width: 1rem;
 754   height: 1rem;
 755 }
 756
 757 footer {
 758   margin-top: 2rem;
 759   text-align: center;
 760 }
 761
 762 /* tooltip styling */
 763 @media(pointer: coarse), (hover: none) {
 764   .tooltip[title] {
 765     position: realtive;
 766     display: flex;
 767     justify-content: center;
 768   }
 769   .tooltip[title]:focus::after {
 770     content: attr(title);
 771     background-color: #fff;
 772     color: #222;
 773     font-size: 14px;
 774     padding: 8px 12px;
 775     max-height: 100px;
 776     height: fit-content;
 777     width: fit-content;
 778     position: absolute;
 779     text-align: center;
 780     left: 50%;
 781     transform: translate(-100%, 0%) scale(1);
 782     transform-origin: top;
 783     display: block;
 784     box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.05);
 785     overflow: auto;
 786   }
 787 }
 788
 789 .dungeon-room-description {
 790   padding: 1rem;
 791 }