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