public/assets/css/game.css

   1 body {
   2   margin: 1rem auto 2rem;
   3   background-color: #eee;
   4   width: 100%;
   5   max-width: 724px;
   6   height: 100vh;
   7 }
   8 #time-of-day {
   9   background-color: transparent;
  10   color: invert;
  11   border: 0;
  12   margin-bottom: 1rem;
  13   text-align: right;
  14 }
  15 #time-of-day img {
  16   width: 32px;
  17   vertical-align: middle;
  18 }
  19 .night #time-of-day, .evening #time-of-day {
  20   color: #fff;
  21 }
  22 #view {
  23   font-size: 14px;
  24   background-color: #fff;
  25   padding: 1rem;
  26   border: 1px solid #000;
  27 }
  28 :disabled {
  29   background-color: #aaa;
  30   cursor: not-allowed;
  31 }
  32 b {
  33   font-weight: bold;
  34 }
  35 a {
  36   color: blue;
  37 }
  38 select {
  39   padding: 0.3rem;
  40 }
  41 input {
  42   border: 1px solid #000;
  43 }
  44 button {
  45   background-color: #fff;
  46   border: 1px solid #000;
  47   padding: 0.3rem;
  48   cursor: pointer;
  49   color: #000;
  50 }
  51 .hidden {
  52   display: none !important;
  53 }
  54 p {
  55   margin-bottom: 1rem;
  56 }
  57 p:last-child {
  58   margin-bottom: 0;
  59 }
  60
  61 section {
  62   border: 1px solid #000;
  63   background-color: #fff;
  64 }
  65
  66 #announcements, #signup-prompt {
  67   padding: 1rem;
  68   line-height: 1.2rem;
  69   border: solid 1px #000;
  70   background-color: #fff;
  71   margin-bottom: 1rem;
  72 }
  73
  74 #signup {
  75   display: flex;
  76 }
  77
  78 #modal-wrapper {
  79   width: 100%;
  80   height: 100%;
  81   backdrop-filter: blur(10px);
  82 }
  83 dialog::backdrop {
  84   backdrop-filter: blur(3px);
  85
  86 }
  87 dialog {
  88   background-color: #fff;
  89   border: solid 1px #000;
  90   padding: 0.5rem;
  91   width: 300px;
  92   top: 20%;
  93   font-size: 0.9rem;
  94 }
  95 dialog .modal-header {
  96   font-weight: bold;
  97   text-align: right;
  98 }
  99 dialog .actions {
 100   text-align: right;
 101 }
 102 dialog .close-modal {
 103   cursor: pointer;
 104 }
 105
 106 @media(max-width: 650px) {
 107   #signup {
 108     flex-direction: column;
 109   }
 110   #signup .form-group, #signup button {
 111     margin-bottom: 1rem;
 112   }
 113 }
 114
 115 .alert {
 116   padding: 0.3rem;
 117   margin-bottom: 0.3rem;
 118 }
 119 .alert.success, button.success {
 120   border: solid 1px #0a0;
 121   background-color: #def7e5;
 122 }
 123 .alert.error, button.error {
 124   border: solid 1px #a00;
 125   background-color: #f7dede;
 126 }
 127 .success {
 128   color: #0a0;
 129 }
 130 .error {
 131   color: #a00;
 132 }
 133
 134 .avatar-container {
 135   max-width: 128px;
 136 }
 137 #avatar {
 138   width: 100%;
 139 }
 140 header {
 141   display: flex;
 142   align-items: flex-start;
 143   border: 0;
 144   margin-bottom: 1rem;
 145 }
 146 #player-info {
 147   width: 100%;
 148 }
 149 #player-section {
 150   display: flex;
 151 }
 152 #player-section div {
 153   flex-grow: 1;
 154 }
 155 #player-section .gold {
 156   text-align: right;
 157 }
 158 #stat-bars, #defender-stat-bars {
 159   width: 100%;
 160   margin: 5px 5px 0 5px;
 161 }
 162 #stat-bars .progress-bar, #defender-stat-bars .progress-bar {
 163   margin-bottom: 2px;
 164 }
 165 #stat-bars .gold {
 166   font-size: 0.7rem;
 167 }
 168 #stat-bars .gold:after {
 169   content: 'G';
 170 }
 171 #ap-bar {
 172   display: flex;
 173 }
 174 #ap-bar > div {
 175   display: flex;
 176   flex-grow: 1;
 177   align-items: center;
 178 }
 179 #ap-bar .icon {
 180   flex-basis: 16px;
 181   width: 16px;
 182   margin: 0 3px;
 183 }
 184
 185 .progress-bar {
 186   border: solid 1px #000;
 187   width: 100%;
 188   font-size: 0.7rem;
 189   text-align: center;
 190   box-sizing: border-box;
 191   line-height: 110%;
 192 }
 193
 194
 195 nav {
 196   text-align: center;
 197   padding: 1rem 0;
 198 }
 199 nav li {
 200   display: inline-block;
 201   list-style: none;
 202 }
 203 nav li:before {
 204   content: '[';
 205 }
 206 nav li:after {
 207   content: ']';
 208 }
 209 nav a {
 210   text-decoration: none;
 211 }
 212 nav a.active {
 213   font-weight: bold;
 214   text-decoration: underline;
 215 }
 216 nav.filter {
 217   margin: 0.5rem 0;
 218   text-align: right;
 219   border: 0;
 220   padding: 0;
 221   position: relative;
 222   top: 1px;
 223 }
 224 nav.filter a {
 225   border: solid 1px #ddd;
 226   background-color: #ddd;
 227   border-bottom-width: 0;
 228   z-index: 1;
 229   padding: 0.6rem;
 230   position: relative;
 231 }
 232 nav.filter a.active {
 233   background-color: #fff;
 234   border-color: #000;
 235   z-index: 4;
 236 }
 237 .filter-container .listing {
 238   border: solid 1px #000;
 239   z-index: 2;
 240   position: relative;
 241 }
 242 nav.filter-result {
 243   display: none;
 244 }
 245 nav.filter-result.active {
 246   display: block !important;
 247 }
 248 #inventory-section {
 249   width: 100%;
 250 }
 251 #inventory-section .listing {
 252   top: 2px;
 253 }
 254 .inventory-listing {
 255   min-height: 2rem;
 256 }
 257
 258 .inventory-ITEMS {
 259   display: flex;
 260 }
 261 .player-item {
 262   position: relative;
 263   cursor: pointer;
 264   margin: 2px;
 265   border: solid 1px #000;
 266   width: 64px;
 267   height: 64px;
 268   overflow: hidden;
 269 }
 270 .player-item img {
 271   filter: grayscale(40%);
 272 }
 273 .player-item img:hover {
 274   filter: none;
 275 }
 276 .player-item .amount {
 277   font-weight: bold;
 278   position: absolute;
 279   bottom: 0;
 280   right: 0;
 281   background-color: rgba(255, 255, 255, 0.7);
 282   font-size: 0.8rem;
 283   padding: 4px;
 284   border-radius: 3px 0 0 0;
 285 }
 286 .item-modal-overview {
 287   display: flex;
 288 }
 289 .item-modal-overview .icon {
 290   width: 64px;
 291   height: 64px;
 292   margin: 0 1rem 1rem 0;
 293 }
 294 .item-modal-overview .icon img {
 295   width: 64px;
 296   height: 64px;
 297 }
 298 .item-modal-overview .name {
 299   margin-top: 0;
 300   font-weight: bold;
 301   margin: 0 1rem 0.8rem 0;
 302 }
 303 .item-modal-overview p {
 304   margin: 1rem;
 305 }
 306
 307 .tab {
 308   display: none;
 309 }
 310 .tab.active {
 311   display: block;
 312 }
 313 #main-nav {
 314   margin-bottom: 1rem;
 315 }
 316 #main-nav section {
 317   min-height: 344px;
 318   border: 0;
 319 }
 320
 321 #stat-breakdown th {
 322   font-weight: bold;
 323   text-align: right;
 324   background-color: #ddd;
 325 }
 326 #stat-breakdown th, #stat-breakdown td {
 327   padding: 0.3rem 0.5rem;
 328 }
 329
 330 #explore {
 331   text-align: center;
 332   background-repeat: no-repeat;
 333   background-position: bottom right;
 334   background-size: cover;
 335   padding: 3rem 3rem 2rem;
 336   line-height: 1.3rem;
 337 }
 338
 339 #fight-container {
 340   margin: 0 auto;
 341 }
 342 #defender-info {
 343   display: flex;
 344   width: 70%;
 345   margin: 0 auto 1rem;
 346 }
 347 #defender-name {
 348   text-align: left;
 349 }
 350 #fight-results {
 351   margin-top: 1rem;
 352 }
 353
 354
 355 #map {
 356   width: 75%;
 357   margin: 0rem auto 1rem;
 358   padding: 3rem 2rem 2rem;
 359   line-height: 1.3rem;
 360   background: linear-gradient(to bottom, rgba(255,255,255, 0) 0%, rgba(255, 255, 255, 0.5) 30%);
 361 }
 362 .city-details {
 363   display: flex;
 364   justify-content: space-between;
 365   flex-wrap: wrap;
 366 }
 367 h1 {
 368   font-size: 1.5rem;
 369   font-weight: bold;
 370   margin-bottom: 1rem;
 371 }
 372 h2 {
 373   font-weight: bold;
 374   margin: 1rem;
 375   font-size: 1.3rem;
 376 }
 377 h3 {
 378   font-weight: bold;
 379   margin: 1rem;
 380   font-size: 1rem;
 381 }
 382
 383 #travelling-actions {
 384   display: flex;
 385   justify-content: center;
 386   gap: 1rem;
 387   margin-bottom: 1rem;
 388 }
 389
 390
 391 .shop-inventory-listing .listing {
 392   background-color: #fff;
 393 }
 394 .store-list {
 395   display: flex;
 396   text-align: left;
 397   margin: 0 0 0.3rem 0.3rem;
 398 }
 399 .store-list:last-child {
 400   margin-bottom: 0;
 401 }
 402 .store-list img {
 403   width: 64px;
 404   height: 64px;
 405 }
 406 .store-list .details {
 407   padding: 0 0.4rem;
 408   line-height: 1rem;
 409   flex-grow: 2;
 410 }
 411 .store-list .name {
 412   font-weight: bold;
 413 }
 414 .requirement-title {
 415   font-weight: bold;
 416   text-transform: capitalize;
 417 }
 418 .store-actions {
 419   width: 75px;
 420   margin: 0.3rem;
 421   align-items: center;
 422   display: flex;
 423   flex-direction: column;
 424 }
 425 .store-actions button {
 426   width: 75px;
 427 }
 428
 429 #inventory-page {
 430   display: flex;
 431   align-items: flex-start;
 432   justify-content: space-between;
 433   gap: 1rem;
 434 }
 435 #character-equipment-placement {
 436   border-spacing: 0;
 437   width: 192px;
 438 }
 439 #character-equipment-placement td {
 440   display: table-cell;
 441   min-width: 64px;
 442   max-width: 64px;
 443   min-height: 64px;
 444   max-height: 64px;
 445   width: 64px;
 446   height: 64px;
 447   border: solid 1px #000;
 448   padding: 0;
 449   text-align: center;
 450   vertical-align: bottom;
 451   font-size: 0.7rem;
 452   background-repeat: no-repeat;
 453   overflow: hidden;
 454   background-size: contain;
 455 }
 456 #extra-inventory-info {
 457   margin-top: 1rem;
 458 }
 459 .filter-container .listing {
 460   max-height: 400px;
 461   width: 100%;
 462   overflow: auto;
 463 }
 464 @media(max-width: 650px) {
 465   #time-of-day {
 466     padding: 0 1rem;
 467   }
 468   #inventory-page {
 469     flex-direction: column;
 470   }
 471   #character-summary {
 472     width: 100%;
 473     display: flex;
 474     justify-content: space-between;
 475     align-items: flex-start;
 476   }
 477   #extra-inventory-info {
 478     margin-top: 0rem;
 479   }
 480   #inventory-section {
 481     margin-left: 0;
 482     margin-top: 2rem;
 483   }
 484 }
 485
 486 #skill-list {
 487   width: 100%;
 488 }
 489 #skill-list tr:nth-child(even) {
 490   background-color: #eee;
 491 }
 492 #skill-list .skill-level {
 493   font-size: 2rem;
 494   vertical-align: middle;
 495   text-align: center;
 496   border: solid 1px #000;
 497 }
 498 #skill-list .skill-description {
 499   padding: 0 0.6rem;
 500   line-height: 1.2rem;
 501 }
 502 #skill-list .skill-exp {
 503   float: right;
 504 }
 505
 506
 507 .chat-message {
 508   line-height: 1.2rem;
 509   margin-bottom: 0.3rem;
 510   padding: 0.3rem;
 511 }
 512 .chat-message:nth-child(even) {
 513   background-color: #eee;
 514 }
 515
 516 .chat-message .from {
 517   font-weight: bold;
 518 }
 519 .chat-message .from::after {
 520   content: ':';
 521 }
 522 #chat-form {
 523   display: flex;
 524 }
 525 #chat-form input {
 526   flex-grow: 8;
 527   padding: 0.3rem;
 528   outline: none;
 529   border-left-width: 0px;
 530   border-bottom-width: 0px;
 531 }
 532 #chat-form input:focus {
 533   outline: none;
 534 }
 535 #chat-form button {
 536   border-right-width: 0px;
 537   border-bottom-width: 0px;
 538   font-weight: bold;
 539 }
 540
 541 #game-footer {
 542   display: flex;
 543   justify-content: space-between;
 544   margin-top: 1rem;
 545   border: 0;
 546 }
 547 #game-footer nav {
 548   margin: 0;
 549   padding: 0;
 550 }
 551 #game-footer img {
 552   width: 1rem;
 553   height: 1rem;
 554 }
 555
 556 footer {
 557   margin-top: 2rem;
 558   text-align: center;
 559 }