public/assets/css/game.css

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