public/scifi.css

   1 :root {
   2     --border: #1c7282;
   3     --blended-border: #073b44;
   4     --page-bg: #061619;
   5     --green-bg: #193818;
   6     --green-border: #32821c;
   7     --red-border: #bf1212;
   8     --red-bg: #381818;
   9     --hl-text: #6ac9db;
  10 }
  11
  12 input {
  13     outline: none;
  14 }
  15
  16 body {
  17     background-color: var(--page-bg);
  18     color: #fff;
  19     margin: 0 auto 20px;
  20     max-width: 1024px;
  21     font-family: 'Roboto Condensed', sans-serif;
  22     font-weight: normal;
  23     font-size: 16px;
  24     background-image: url('/assets/bg/green_nebula_4.png');
  25     background-blend-mode: soft-light;
  26 }
  27 hr {
  28     border-color: var(--border);
  29     margin-bottom: 1.2rem;
  30 }
  31
  32 h1, h2, h3 {
  33     text-transform: uppercase;
  34     font-weight: 300;
  35     line-height: 2.2rem;
  36     border: solid 0 var(--border);
  37     border-left-width: 6px;
  38     border-bottom-width: 2px;
  39     padding-left: 10px;
  40     margin-top: 0;
  41     color: var(--hl-text);
  42     text-shadow: 0 0 2px #6ac9db;
  43 }
  44 h1 {
  45     font-size: 2.2rem;
  46 }
  47 h2 {
  48     font-size: 1.7rem;
  49 }
  50 h3 {
  51     font-size: 1.3rem;
  52 }
  53 table {
  54     width: 100%;
  55     margin-bottom: 2rem;
  56     border-spacing: 0;
  57     border: solid 1px var(--border);
  58 }
  59 tr:nth-child(odd) td, tr:nth-child(odd) th {
  60     background-color: #0d2329;
  61 }
  62 th, td {
  63     padding: 0.5rem;
  64 }
  65 l
  66 p, form, ul, ol {
  67     line-height: 1.3rem;
  68     margin: 0 2rem 2rem 2rem;
  69     flex: inherit;
  70 }
  71
  72 label {
  73     font-weight: bold;
  74     margin-right: 5px;
  75 }
  76
  77 a {
  78     font-weight: bold;
  79     color: #fff;
  80     text-decoration: none;
  81 }
  82 a::before {
  83     content: '\27EA';
  84 }
  85 a::after {
  86     content: '\27EB';
  87 }
  88 button, .btn {
  89     border: solid 1px var(--border);
  90     background-color: #183238;
  91     color: #fff;
  92     font-size: 0.8rem;
  93     cursor: pointer;
  94     padding: 5px 5px 5px 25px;
  95     text-transform: uppercase;
  96     text-align: center;
  97     font-weight: bold;
  98     min-width: 150px;
  99     display: inline-block;
 100 }
 101 a.btn::before {
 102   content: '';
 103   clear: both;
 104 }
 105 button::after, .btn::after {
 106     content: '\27EB';
 107     float: right;
 108     color: var(--border);
 109 }
 110 .danger {
 111     background-color: var(--red-bg);
 112     border-color: var(--red-border);
 113 }
 114 .danger::after {
 115     color: #821c1c
 116 }
 117 .danger-text {
 118   color: var(--red-border);
 119 }
 120 .success-text {
 121   color: var(--green-border);
 122 }
 123 .success {
 124     background-color: var(--green-bg);
 125     border-color: var(--green-border);
 126 }
 127 .success::after{
 128     color: #32821c;
 129 }
 130 button:active, .btn:active, button:hover, .btn:hover {
 131     background-color: #1a444c;
 132 }
 133 button.success:active, .btn.success:active, button.success:hover, .btn.success:hover {
 134     background-color: #1e4c1a;
 135 }
 136 button.danger:active, .btn.danger:active, button.danger:hover, .btn.danger:hover {
 137     background-color: #601f1f;
 138 }
 139 a.close::before, a.close::after{
 140   content: '';
 141 }
 142
 143 input[type="text"], input[type="password"], input[type="number"] {
 144     border: solid 1px var(--border);
 145     background-color: #183238;
 146     color: #fff;
 147     font-size: 0.8rem;
 148     cursor: pointer;
 149     min-width: 120px;
 150     padding: 5px;
 151 }
 152
 153 footer {
 154     text-align: center;
 155     border-top: solid 1px var(--border);
 156     padding-top: 1rem;
 157     margin-top: 2rem;
 158 }
 159 .autofade {
 160   opacity: 1;
 161   animation-name: autofade;
 162   animation-duration: 5000ms;
 163   animation-fill-mode: forwards;
 164   animation-iteration-count: 1
 165 }
 166 @keyframes autofade {
 167   0% {
 168     opacity: 1;
 169   }
 170   99% {
 171     opacity: 1;
 172   }
 173   100% {
 174     opacity: 0;
 175   }
 176 }
 177
 178 #nav, #nav ul {
 179     padding: 0;
 180     margin: 0;
 181 }
 182 #nav ul {
 183     display: flex;
 184     justify-content: space-evenly;
 185     align-items: center;
 186 }
 187 #nav li {
 188     margin: 0;
 189     list-style: none;
 190     display: inline-flex;
 191 }
 192 #nav li a {
 193     padding: 10px 25px;
 194     position: relative;
 195 }
 196 #nav li a:hover {
 197     background-color: var(--border);
 198 }
 199 #nav li a::before {
 200     content: '';
 201 }
 202 #nav li a::after {
 203     content: '';
 204 }
 205 .alert {
 206     padding: 10px;
 207     font-size: 1rem;
 208     margin-bottom: 1.2rem;
 209     border-style: solid;
 210     border-width: 1px;
 211 }
 212
 213 /** Grid Stuff **/
 214 .row {
 215     display: flex;
 216 }
 217 .col {
 218     flex-grow: 1;
 219     flex-basis: 50%;
 220     margin-right: 5rem;
 221 }
 222 .col:last-child {
 223     margin-right: 0;
 224 }
 225 .col p {
 226     margin-right: 0;
 227 }
 228
 229 /** Utility **/
 230 .right {
 231     float: right;
 232 }
 233 .left {
 234     float: left;
 235 }
 236 .clear {
 237     clear: both;
 238 }
 239 .hidden {
 240     display: none;
 241 }
 242 .text-right {
 243     text-align: right;
 244 }
 245 .text-left {
 246     text-align: left;
 247 }
 248 .text-center {
 249     text-align: center;
 250 }
 251 .progress-bar {
 252     border: solid 1px #fff;
 253     text-align: center;
 254     color: #fff;
 255     width: 100%;
 256     min-width: 100px;
 257 }
 258
 259 /** CUSTOMIZATIONS **/
 260 form > div {
 261     margin-bottom: 1rem;
 262 }
 263 .sidebar {
 264     flex-basis: 100px;
 265 }
 266 .pane {
 267     background-color: var(--page-bg);
 268     padding: 1rem;
 269     --aug-border-all: 1px;
 270     --aug-border-bg: var(--border);
 271 }
 272 #main {
 273     background-color: var(--page-bg);
 274     padding: 1rem;
 275     --aug-border-all: 1px;
 276     --aug-border-bg: var(--border);
 277 }
 278 #corp-ads {
 279     margin-top: 1rem;
 280 }
 281 #topbar {
 282     margin-bottom: 50px;
 283     padding: 0;
 284     --aug-border-all: 1px;
 285     --aug-border-bg: var(--border);
 286     background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(28,114,130,0.5) 100%);
 287 }
 288 #topbar > .row {
 289     border-bottom: solid 1px var(--blended-border);
 290 }
 291 #info-bar {
 292     display: flex;
 293     flex-basis: 40%;
 294     border: solid 0 var(--border);
 295     border-left-width: 1px;
 296     padding: 10px 25px;
 297     background-color: var(--page-bg);
 298     justify-content: space-evenly;
 299 }
 300
 301 #info-bar > span {
 302   display: inline-block;
 303   line-height: 1.5rem;
 304 }
 305 #info-bar b {
 306   --aug-border-all: 1px;
 307   --aug-border-bg: var(--border);
 308   display: inline-block;
 309   line-height: 2rem;
 310   width: 30px;
 311   text-align: center;
 312   background-color: #0d2329;
 313   cursor: default;
 314 }
 315
 316 #overworld-map {
 317   width: auto;
 318   margin: 0 auto;
 319 }
 320 #overworld-map td {
 321     overflow: hidden;
 322     padding: 0;
 323     background: transparent;
 324     border: solid 1px #000;
 325 }
 326 #overworld-map td div {
 327     width: 32px;
 328     height: 32px;
 329     overflow: hidden;
 330 }
 331
 332 #overworld-map td div.city {
 333     cursor: pointer;
 334 }
 335 #overworld-map td div.city.yours {
 336   border: solid 1px var(--green-border);
 337 }
 338 #overworld-map td div.city.yours img {
 339   width: 100%;
 340 }
 341 #overworld-map td div.city.others {
 342   border: solid 1px var(--red-border);
 343 }
 344 #overworld-map td div.city.others img {
 345   width: 100%;
 346 }
 347
 348 #overworld-map .grid-numbers {
 349   color: #7b7b7b;
 350   text-align: center;
 351 }
 352
 353 #sector-selector {
 354   margin: 20px 50px;
 355 }
 356 #sector-selector select {
 357   margin-left: 20px;
 358 }
 359
 360 .cost-display {
 361   display: flex;
 362   flex-wrap: wrap;
 363   justify-content: flex-start;
 364 }
 365 .cost-display > div {
 366   margin: 0 0.5rem;
 367 }
 368 .rate-of-change.success-text::before {
 369   content: '\25B2 ';
 370 }
 371 .rate-of-change.danger::before {
 372   content: '\25BC ';
 373 }
 374
 375 #chat {
 376   margin-top: 2rem;
 377   background-color: var(--page-bg);
 378   padding: 1rem;
 379   --aug-border-all: 1px;
 380   --aug-border-bg: var(--border);
 381 }
 382
 383 #chat-messages {
 384   height: 200px;
 385   overflow: auto;
 386   padding: 0 1rem;
 387 }
 388 .chat-message {
 389   padding: 4px;
 390 }
 391 .chat-message:nth-child(even) {
 392   background-color: #0d2329;
 393 }
 394 .chat-message .from {
 395   color: var(--hl-text);
 396 }
 397 .chat-message .sent_at {
 398   color: #444;
 399   font-size: 0.6rem;
 400 }
 401 #chat-form {
 402   margin: 0;
 403 }
 404 #chat-form .col {
 405   margin: 0;
 406 }
 407 #chat-form input {
 408     flex-grow: 3;
 409     flex-basis: 100%;
 410 }
 411 #chat-form button {
 412   max-width: 150px;
 413 }
 414
 415 #notifications {
 416   min-height: 42px;
 417   margin-bottom: 5px;
 418 }
 419
 420 .badge {
 421   border-radius: 5px;
 422   padding: 0 6px;
 423   font-size: 0.7rem;
 424   position: absolute;
 425   top: 0;
 426   right: 0;
 427 }
 428 .badge.danger {
 429   background-color: var(--red-border);
 430 }
 431
 432 #stats {
 433   margin-top: 1rem;
 434 }