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   padding: 1rem;
 375 }
 376
 377 .stat-breakdown th {
 378   font-weight: bold;
 379   text-align: right;
 380   background-color: #6d251c;
 381   color: #fff;
 382   background-image: url(data:image/png;base64,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);
 383 }
 384 .stat-breakdown th, .stat-breakdown td {
 385   padding: 0.5rem;
 386   min-width: 100px;
 387   line-height: 1rem;
 388 }
 389 .stat-breakdown tr:nth-child(even) {
 390   background-color: #c7b7a1;
 391 }
 392 .increase-stat {
 393   padding: 1px 6px;
 394 }
 395
 396 #explore {
 397   text-align: center;
 398   background-repeat: no-repeat;
 399   background-size: cover;
 400   padding: 2rem 0rem 2rem !important;
 401   line-height: 1.3rem;
 402   border: solid 1px #6d251c;
 403 }
 404
 405 .city-title-wrapper {
 406   filter: drop-shadow(0 0 10px black);
 407   position: relative;
 408   z-index: 1;
 409 }
 410 .city-title:before {
 411   position: absolute;
 412   content: ' ';
 413   z-index: 1;
 414   top: 2px;
 415   left: 2px;
 416   right: 2px;
 417   bottom: 2px;
 418   background: transparent;
 419   border: solid 2px #ffa500;
 420   clip-path: polygon(100% 0, 95% 50%, 100% 98%, 0% 100%, 5% 50%, 0 0);
 421 }
 422 .city-title {
 423   font-family: 'Breathe Fire', monospace;
 424   font-size: 1.5rem;
 425   letter-spacing: 1rem;
 426   display: inline-block;
 427   padding: 0.5rem 0.5rem 0.5rem 1.5rem;
 428   color: #fff;
 429   border: inset 3px rgba(88, 15, 15, 0.4);
 430   text-shadow: 1px -1px 0px #522626;
 431   background: #bc3915 url(data:image/png;base64,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);
 432   position: relative;
 433   clip-path: polygon(100% 0, 95% 50%, 100% 98%, 0% 100%, 5% 50%, 0 0);
 434   box-shadow: 0 0 4px 4px black;
 435 }
 436
 437 #fight-container {
 438   margin: 0 auto;
 439 }
 440 #defender-info {
 441   display: flex;
 442   width: 70%;
 443   margin: 0 auto 1rem;
 444 }
 445 #defender-name {
 446   text-align: left;
 447 }
 448 #fight-results {
 449   margin-top: 1rem;
 450 }
 451
 452
 453 #map {
 454   width: 75%;
 455   margin: 0rem auto 1rem;
 456   padding: 3rem 2rem 2rem;
 457   line-height: 1.3rem;
 458   background: linear-gradient(to bottom, rgba(255,255,255, 0) 0%, rgba(255, 255, 255, 0.5) 30%);
 459 }
 460 .city-details {
 461   position: relative;
 462   padding: 1rem 1px 2rem;
 463   margin: 0 auto;
 464   width: 80%;
 465   background-image: url(data:image/png;base64,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);
 466   background-color: #f7f4dd;
 467   box-shadow: 0 0 10px black;
 468   position: relative;
 469   top: -13px;
 470   border: solid 1px #6d251c;
 471 }
 472 .flex {
 473   display: flex;
 474   justify-content: space-around;
 475   flex-wrap: wrap;
 476 }
 477 .city-details.flex > div {
 478   margin: 1rem;
 479 }
 480 .service-in-town {
 481   padding: 0 1rem;
 482 }
 483 h1 {
 484   font-size: 1.5rem;
 485   font-weight: bold;
 486   margin-bottom: 1rem;
 487 }
 488 h2 {
 489   font-weight: bold;
 490   margin: 1rem;
 491   font-size: 1.3rem;
 492 }
 493 h3 {
 494   font-weight: bold;
 495   margin: 1rem;
 496   font-size: 1rem;
 497 }
 498
 499 #travelling {
 500   padding: 2rem;
 501 }
 502 #travelling-actions {
 503   display: flex;
 504   justify-content: center;
 505   gap: 1rem;
 506   margin-bottom: 1rem;
 507 }
 508 .travel-distance {
 509   margin-bottom: 1rem;
 510 }
 511
 512
 513 #explore .shop-inventory-listing  {
 514   margin: 2rem auto 1rem;
 515   width: 90%;
 516 }
 517 .location-name {
 518   display: flex;
 519   align-items: center;
 520   justify-content: center;
 521 }
 522 .location-name span {
 523   color: #846945;
 524   text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.7);
 525   margin: 0 1rem;
 526 }
 527 .location-name:before, .location-name:after {
 528   background-color: #846945;
 529   height: 2px;
 530   flex: 1;
 531   content: ' ';
 532   width: 4rem;
 533   drop-shadow: 1px 1px 0px rgba(255, 255, 255, 0.7);
 534 }
 535 .shop-inventory-listing .listing {
 536   background-color: #fff;
 537 }
 538 .store-list {
 539   display: flex;
 540   text-align: left;
 541   padding: 0.5rem;
 542 }
 543 .store-list:nth-child(even) {
 544   background-color: #f2f0ec;
 545 }
 546 .store-list .details {
 547   padding: 0 0.4rem;
 548   line-height: 1rem;
 549   flex-grow: 2;
 550 }
 551 .store-list .name {
 552   font-weight: bold;
 553 }
 554 .requirements {
 555   margin-top: 0.5rem;
 556   line-height: 1.3rem;
 557 }
 558 .requirement-title {
 559   font-weight: bold;
 560   text-transform: capitalize;
 561 }
 562 .store-cost {
 563   margin-top: 0.5rem;
 564 }
 565 .store-icon {
 566   width: 64px;
 567   height: calc(64px + 27px);
 568   padding: 0;
 569   background-repeat: no-repeat;
 570   background-size: contain;
 571   position: relative;
 572   margin-right: 0.5rem;
 573 }
 574 .inventory-icon {
 575   width: 64px;
 576   height: 64px;;
 577   padding: 0;
 578   background-repeat: no-repeat;
 579   background-size: contain;
 580   position: relative;
 581   margin-right: 0.5rem;
 582 }
 583 .store-actions {
 584   width: 100%;
 585   position: absolute;
 586   bottom: 0;
 587 }
 588 .store-actions button {
 589   width: 100%;
 590   padding: 0.3rem 0.5rem;
 591 }
 592 .inventory-actions {
 593   width: 74px;
 594 }
 595 .inventory-actions button {
 596   width: 100%;
 597   padding: 0.3rem 0.5rem;
 598 }
 599
 600 #inventory-page {
 601   display: flex;
 602   align-items: flex-start;
 603   justify-content: space-between;
 604   gap: 1rem;
 605 }
 606 #character-equipment-placement {
 607   border-spacing: 0;
 608   width: 192px;
 609 }
 610 #character-equipment-placement td {
 611   display: table-cell;
 612   min-width: 64px;
 613   max-width: 64px;
 614   min-height: 64px;
 615   max-height: 64px;
 616   width: 64px;
 617   height: 64px;
 618   border: solid 1px #6d251c;
 619   padding: 0;
 620   text-align: center;
 621   vertical-align: bottom;
 622   font-size: 0.7rem;
 623   background-repeat: no-repeat;
 624   overflow: hidden;
 625   background-size: contain;
 626 }
 627 #extra-inventory-info {
 628   margin-top: 1rem;
 629 }
 630 .filter-container .listing {
 631   max-height: 400px;
 632   width: 100%;
 633   overflow: auto;
 634 }
 635 @media(max-width: 650px) {
 636   #time-of-day {
 637     padding: 0 1rem;
 638   }
 639   #inventory-page {
 640     flex-direction: column;
 641   }
 642   #character-summary {
 643     width: 100%;
 644     display: flex;
 645     justify-content: space-between;
 646     align-items: flex-start;
 647   }
 648   #extra-inventory-info {
 649     margin-top: 0rem;
 650   }
 651   #inventory-section {
 652     margin-left: 0;
 653     margin-top: 2rem;
 654   }
 655 }
 656
 657 #skill-list {
 658   width: 100%;
 659 }
 660 #skill-list .skill-level {
 661   font-size: 2rem;
 662   vertical-align: middle;
 663   text-align: center;
 664   border: solid 1px #000;
 665 }
 666 #skill-list .skill-details table {
 667   width: 100%;
 668 }
 669 #skill-list .skill-title {
 670   text-align: left;
 671   padding: 0.6rem 0.6rem 0 0.6rem;
 672   line-height: 1.2rem;
 673   font-weight: bold;
 674 }
 675 #skill-list .skill-description {
 676   padding:  0 0.6rem 0.6rem;
 677   line-height: 1.2rem;
 678 }
 679 #skill-list .skill-exp {
 680   text-align: right;
 681   padding-right: 0.6rem;
 682 }
 683 #skill-list tr:nth-child(even) .skill-details {
 684   background-color: #c7b7a1;
 685 }
 686
 687
 688 #chat {
 689   border: solid 1px #6d251c;
 690 }
 691 .chat-message {
 692   line-height: 1.2rem;
 693   margin-bottom: 0.3rem;
 694   padding: 0.3rem;
 695 }
 696 .chat-message:nth-child(even) {
 697   background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0, rgba(196, 177, 149, 0.8) 100%);
 698 }
 699
 700 .chat-message .from {
 701   font-weight: bold;
 702 }
 703 .chat-message .from::after {
 704   content: ':';
 705 }
 706 #chat-form {
 707   display: flex;
 708 }
 709 #chat-form input {
 710   flex-grow: 8;
 711   padding: 0.3rem;
 712   outline: none;
 713   border-width: 1px 0 0;
 714   background: transparent;
 715 }
 716 #chat-form input:focus {
 717   outline: none;
 718 }
 719 #chat-form button {
 720   border-right-width: 0px;
 721   border-bottom-width: 0px;
 722   font-weight: bold;
 723 }
 724 #chat-form button:active {
 725   top: 0;
 726 }
 727
 728 #game-footer {
 729   display: flex;
 730   justify-content: space-between;
 731   margin-top: 1rem;
 732   border: 0;
 733 }
 734 #game-footer nav {
 735   margin: 0;
 736   padding: 0;
 737 }
 738 #game-footer img {
 739   width: 1rem;
 740   height: 1rem;
 741 }
 742
 743 footer {
 744   margin-top: 2rem;
 745   text-align: center;
 746 }
 747
 748 /* tooltip styling */
 749 @media(pointer: coarse), (hover: none) {
 750   .tooltip[title] {
 751     position: realtive;
 752     display: flex;
 753     justify-content: center;
 754   }
 755   .tooltip[title]:focus::after {
 756     content: attr(title);
 757     background-color: #fff;
 758     color: #222;
 759     font-size: 14px;
 760     padding: 8px 12px;
 761     max-height: 100px;
 762     height: fit-content;
 763     width: fit-content;
 764     position: absolute;
 765     text-align: center;
 766     left: 50%;
 767     transform: translate(-100%, 0%) scale(1);
 768     transform-origin: top;
 769     display: block;
 770     box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.05);
 771     overflow: auto;
 772   }
 773 }