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 .name {
 295   margin-top: 0;
 296   font-weight: bold;
 297   margin: 0 1rem 0.8rem 0;
 298 }
 299 .item-modal-overview p {
 300   margin: 1rem;
 301 }
 302
 303 .tab {
 304   display: none;
 305 }
 306 .tab.active {
 307   display: block;
 308 }
 309 #main-nav {
 310   margin-bottom: 1rem;
 311 }
 312 #main-nav section {
 313   min-height: 344px;
 314   border: 0;
 315 }
 316
 317 #stat-breakdown th {
 318   font-weight: bold;
 319   text-align: right;
 320   background-color: #ddd;
 321 }
 322 #stat-breakdown th, #stat-breakdown td {
 323   padding: 0.3rem 0.5rem;
 324 }
 325
 326 #explore {
 327   text-align: center;
 328   background-repeat: no-repeat;
 329   background-position: bottom right;
 330   background-size: cover;
 331   padding: 3rem 3rem 2rem;
 332   line-height: 1.3rem;
 333 }
 334
 335 #fight-container {
 336   margin: 0 auto;
 337 }
 338 #defender-info {
 339   display: flex;
 340   width: 70%;
 341   margin: 0 auto 1rem;
 342 }
 343 #defender-name {
 344   text-align: left;
 345 }
 346 #fight-results {
 347   margin-top: 1rem;
 348 }
 349
 350
 351 #map {
 352   width: 75%;
 353   margin: 0rem auto 1rem;
 354   padding: 3rem 2rem 2rem;
 355   line-height: 1.3rem;
 356   background: linear-gradient(to bottom, rgba(255,255,255, 0) 0%, rgba(255, 255, 255, 0.5) 30%);
 357 }
 358 .city-details {
 359   display: flex;
 360   justify-content: space-between;
 361   flex-wrap: wrap;
 362 }
 363 h1 {
 364   font-size: 1.5rem;
 365   font-weight: bold;
 366   margin-bottom: 1rem;
 367 }
 368 h2 {
 369   font-weight: bold;
 370   margin: 1rem;
 371   font-size: 1.3rem;
 372 }
 373 h3 {
 374   font-weight: bold;
 375   margin: 1rem;
 376   font-size: 1rem;
 377 }
 378
 379 #travelling-actions {
 380   display: flex;
 381   justify-content: center;
 382   gap: 1rem;
 383   margin-bottom: 1rem;
 384 }
 385
 386
 387 .shop-inventory-listing .listing {
 388   background-color: #fff;
 389 }
 390 .store-list {
 391   display: flex;
 392   text-align: left;
 393   margin-bottom: 0.3rem;
 394 }
 395 .store-list:last-child {
 396   margin-bottom: 0;
 397 }
 398 .store-list img {
 399   width: 64px;
 400   height: 64px;
 401 }
 402 .store-list .details {
 403   padding: 0 0.4rem;
 404   line-height: 1rem;
 405   flex-grow: 2;
 406 }
 407 .store-list .name {
 408   font-weight: bold;
 409 }
 410 .requirement-title {
 411   font-weight: bold;
 412   text-transform: capitalize;
 413 }
 414 .store-actions {
 415   width: 75px;
 416   margin: 0.3rem;
 417   align-items: center;
 418   display: flex;
 419   flex-direction: column;
 420 }
 421 .store-actions button {
 422   width: 75px;
 423 }
 424
 425 #inventory-page {
 426   display: flex;
 427   align-items: flex-start;
 428   justify-content: space-between;
 429   gap: 1rem;
 430 }
 431 #character-equipment-placement {
 432   border-spacing: 0;
 433   width: 192px;
 434 }
 435 #character-equipment-placement td {
 436   display: table-cell;
 437   min-width: 64px;
 438   max-width: 64px;
 439   min-height: 64px;
 440   max-height: 64px;
 441   width: 64px;
 442   height: 64px;
 443   border: solid 1px #000;
 444   padding: 0;
 445   text-align: center;
 446   vertical-align: bottom;
 447   font-size: 0.7rem;
 448   background-repeat: no-repeat;
 449   overflow: hidden;
 450 }
 451 #extra-inventory-info {
 452   margin-top: 1rem;
 453 }
 454 .filter-container .listing {
 455   max-height: 400px;
 456   width: 100%;
 457   overflow: auto;
 458 }
 459 @media(max-width: 650px) {
 460   #time-of-day {
 461     padding: 0 1rem;
 462   }
 463   #inventory-page {
 464     flex-direction: column;
 465   }
 466   #character-summary {
 467     width: 100%;
 468     display: flex;
 469     justify-content: space-between;
 470     align-items: flex-start;
 471   }
 472   #extra-inventory-info {
 473     margin-top: 0rem;
 474   }
 475   #inventory-section {
 476     margin-left: 0;
 477     margin-top: 2rem;
 478   }
 479 }
 480
 481 #skill-list {
 482   width: 100%;
 483 }
 484 #skill-list tr:nth-child(even) {
 485   background-color: #eee;
 486 }
 487 #skill-list .skill-level {
 488   font-size: 2rem;
 489   vertical-align: middle;
 490   text-align: center;
 491   border: solid 1px #000;
 492 }
 493 #skill-list .skill-description {
 494   padding: 0 0.6rem;
 495   line-height: 1.2rem;
 496 }
 497 #skill-list .skill-exp {
 498   float: right;
 499 }
 500
 501
 502 .chat-message {
 503   line-height: 1.2rem;
 504   margin-bottom: 0.3rem;
 505   padding: 0.3rem;
 506 }
 507 .chat-message:nth-child(even) {
 508   background-color: #eee;
 509 }
 510
 511 .chat-message .from {
 512   font-weight: bold;
 513 }
 514 .chat-message .from::after {
 515   content: ':';
 516 }
 517 #chat-form {
 518   display: flex;
 519 }
 520 #chat-form input {
 521   flex-grow: 8;
 522   padding: 0.3rem;
 523   outline: none;
 524   border-left-width: 0px;
 525   border-bottom-width: 0px;
 526 }
 527 #chat-form input:focus {
 528   outline: none;
 529 }
 530 #chat-form button {
 531   border-right-width: 0px;
 532   border-bottom-width: 0px;
 533   font-weight: bold;
 534 }
 535
 536 #game-footer {
 537   display: flex;
 538   justify-content: space-between;
 539   margin-top: 1rem;
 540   border: 0;
 541 }
 542 #game-footer nav {
 543   margin: 0;
 544   padding: 0;
 545 }
 546 #game-footer img {
 547   width: 1rem;
 548   height: 1rem;
 549 }
 550
 551 footer {
 552   margin-top: 2rem;
 553   text-align: center;
 554 }