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   background-color: #fff;
 167 }
 168 nav li {
 169   display: inline-block;
 170   list-style: none;
 171 }
 172 nav li:before {
 173   content: '[';
 174 }
 175 nav li:after {
 176   content: ']';
 177 }
 178 nav a {
 179   text-decoration: none;
 180 }
 181 nav a.active {
 182   font-weight: bold;
 183   text-decoration: underline;
 184 }
 185 #inventory-section {
 186   width: 100%;
 187   margin-left: 1rem;
 188 }
 189 #inventory-section nav {
 190   margin: 0.5rem 0;
 191   text-align: right;
 192   border: 0;
 193   padding: 0;
 194 }
 195 #inventory-section nav a {
 196   border: solid 1px #ddd;
 197   background-color: #ddd;
 198   border-bottom-width: 0;
 199   z-index: 1;
 200   padding: 0.6rem;
 201   position: relative;
 202 }
 203 #inventory-section nav a.active {
 204   background-color: #fff;
 205   border-color: #000;
 206   z-index: 4;
 207 }
 208 #inventory-section .inventory-listing {
 209   border: solid 1px #000;
 210   z-index: 2;
 211   position: relative;
 212   margin-top: 10px;
 213 }
 214 .inventory-listing .filter-result {
 215   display: none;
 216 }
 217 .inventory-listing .filter-result.active {
 218   display: block !important;
 219 }
 220
 221 .tab {
 222   display: none;
 223 }
 224 .tab.active {
 225   display: block;
 226 }
 227 #main-nav {
 228   margin-bottom: 1rem;
 229 }
 230 #main-nav section {
 231   min-height: 344px;
 232   border: 0;
 233 }
 234
 235 #stat-breakdown th {
 236   font-weight: bold;
 237   text-align: right;
 238   background-color: #ddd;
 239 }
 240 #stat-breakdown th, #stat-breakdown td {
 241   padding: 0.3rem 0.5rem;
 242 }
 243
 244 #explore {
 245   text-align: center;
 246   background-repeat: no-repeat;
 247   background-position: bottom right;
 248   background-size: cover;
 249 }
 250
 251 #fight-container {
 252   margin: 0 auto;
 253 }
 254 #defender-info {
 255   display: flex;
 256   width: 70%;
 257   margin: 0 auto 1rem;
 258 }
 259 #defender-name {
 260   text-align: left;
 261 }
 262 #fight-results {
 263   margin-top: 1rem;
 264 }
 265
 266
 267 #map {
 268   width: 75%;
 269   margin: 0rem auto 1rem;
 270   padding: 3rem 2rem 2rem;
 271   line-height: 1.3rem;
 272   background: linear-gradient(to bottom, rgba(255,255,255, 0) 0%, rgba(255, 255, 255, 0.5) 30%);
 273 }
 274 .city-details {
 275   display: flex;
 276   justify-content: space-between;
 277   flex-wrap: wrap;
 278 }
 279 h1 {
 280   font-size: 1.5rem;
 281   font-weight: bold;
 282   margin-bottom: 1rem;
 283 }
 284 h2 {
 285   font-weight: bold;
 286   margin: 1rem;
 287   font-size: 1.3rem;
 288 }
 289 h3 {
 290   font-weight: bold;
 291   margin: 1rem;
 292   font-size: 1rem;
 293 }
 294
 295 #travelling-actions {
 296   display: flex;
 297   justify-content: center;
 298   gap: 1rem;
 299   margin-bottom: 1rem;
 300 }
 301
 302
 303 .store-list {
 304   display: flex;
 305   text-align: left;
 306   margin-bottom: 0.3rem;
 307 }
 308 .store-list:nth-child(even) {
 309   background-color: #fff;
 310 }
 311 .store-list:last-child {
 312   margin-bottom: 0;
 313 }
 314 .store-list img {
 315   width: 64px;
 316   height: 64px;
 317 }
 318 .store-list .details {
 319   padding: 0 0.4rem;
 320   line-height: 1rem;
 321   flex-grow: 2;
 322 }
 323 .store-list .name {
 324   font-weight: bold;
 325 }
 326 .requirement-title {
 327   font-weight: bold;
 328   text-transform: capitalize;
 329 }
 330 .store-actions {
 331   width: 75px;
 332   margin: 0.3rem;
 333   align-items: center;
 334   display: flex;
 335   flex-direction: column;
 336 }
 337 .store-actions button {
 338   width: 75px;
 339 }
 340
 341 #inventory-page {
 342   display: flex;
 343   align-items: flex-start;
 344   justify-content: space-between;
 345 }
 346 #character-equipment-placement {
 347   border-spacing: 0;
 348   width: 192px;
 349 }
 350 #character-equipment-placement td {
 351   display: table-cell;
 352   min-width: 64px;
 353   max-width: 64px;
 354   min-height: 64px;
 355   max-height: 64px;
 356   width: 64px;
 357   height: 64px;
 358   border: solid 1px #000;
 359   padding: 0;
 360   text-align: center;
 361   vertical-align: bottom;
 362   font-size: 0.7rem;
 363   background-repeat: no-repeat;
 364   overflow: hidden;
 365 }
 366 #extra-inventory-info {
 367   margin-top: 1rem;
 368 }
 369 .inventory-listing {
 370   max-height: 400px;
 371   width: 100%;
 372   overflow: auto;
 373 }
 374 @media(max-width: 650px) {
 375   #inventory-page {
 376     flex-direction: column;
 377   }
 378   #character-summary {
 379     width: 100%;
 380     display: flex;
 381     justify-content: space-between;
 382     align-items: flex-start;
 383   }
 384   #extra-inventory-info {
 385     margin-top: 0rem;
 386   }
 387   #inventory-section {
 388     margin-left: 0;
 389     margin-top: 2rem;
 390   }
 391 }
 392
 393 #skill-list {
 394   width: 100%;
 395 }
 396 #skill-list tr:nth-child(even) {
 397   background-color: #eee;
 398 }
 399 #skill-list .skill-level {
 400   font-size: 2rem;
 401   vertical-align: middle;
 402   text-align: center;
 403   border: solid 1px #000;
 404 }
 405 #skill-list .skill-description {
 406   padding: 0 0.6rem;
 407   line-height: 1.2rem;
 408 }
 409 #skill-list .skill-exp {
 410   float: right;
 411 }
 412
 413
 414 .chat-message {
 415   line-height: 1.2rem;
 416   margin-bottom: 0.3rem;
 417   padding: 0.3rem;
 418 }
 419 .chat-message:nth-child(even) {
 420   background-color: #eee;
 421 }
 422
 423 .chat-message .from {
 424   font-weight: bold;
 425 }
 426 .chat-message .from::after {
 427   content: ':';
 428 }
 429 #chat-form {
 430   display: flex;
 431 }
 432 #chat-form input {
 433   flex-grow: 8;
 434   padding: 0.3rem;
 435   outline: none;
 436   border-left-width: 0px;
 437   border-bottom-width: 0px;
 438 }
 439 #chat-form input:focus {
 440   outline: none;
 441 }
 442 #chat-form button {
 443   border-right-width: 0px;
 444   border-bottom-width: 0px;
 445   font-weight: bold;
 446 }
 447
 448 #game-footer {
 449   display: flex;
 450   justify-content: space-between;
 451   margin-top: 1rem;
 452   border: 0;
 453 }
 454 #game-footer nav {
 455   margin: 0;
 456   padding: 0;
 457 }
 458 #game-footer img {
 459   width: 1rem;
 460   height: 1rem;
 461 }
 462
 463 footer {
 464   margin-top: 2rem;
 465   text-align: center;
 466 }