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 }
 195 #nav li a:hover {
 196     background-color: var(--border);
 197 }
 198 #nav li a::before {
 199     content: '';
 200 }
 201 #nav li a::after {
 202     content: '';
 203 }
 204 .alert {
 205     padding: 10px;
 206     font-size: 1rem;
 207     margin-bottom: 1.2rem;
 208     border-style: solid;
 209     border-width: 1px;
 210 }
 211
 212 /** Grid Stuff **/
 213 .row {
 214     display: flex;
 215 }
 216 .col {
 217     flex-grow: 1;
 218     flex-basis: 50%;
 219     margin-right: 5rem;
 220 }
 221 .col:last-child {
 222     margin-right: 0;
 223 }
 224 .col p {
 225     margin-right: 0;
 226 }
 227
 228 /** Utility **/
 229 .right {
 230     float: right;
 231 }
 232 .left {
 233     float: left;
 234 }
 235 .clear {
 236     clear: both;
 237 }
 238 .hidden {
 239     display: none;
 240 }
 241 .text-right {
 242     text-align: right;
 243 }
 244 .text-left {
 245     text-align: left;
 246 }
 247 .text-center {
 248     text-align: center;
 249 }
 250 .progress-bar {
 251     border: solid 1px #fff;
 252     text-align: center;
 253     color: #fff;
 254     width: 100%;
 255     min-width: 100px;
 256 }
 257
 258 /** CUSTOMIZATIONS **/
 259 form > div {
 260     margin-bottom: 1rem;
 261 }
 262 .sidebar {
 263     flex-basis: 100px;
 264 }
 265 .pane {
 266     background-color: var(--page-bg);
 267     padding: 1rem;
 268     --aug-border-all: 1px;
 269     --aug-border-bg: var(--border);
 270 }
 271 #main {
 272     background-color: var(--page-bg);
 273     padding: 1rem;
 274     --aug-border-all: 1px;
 275     --aug-border-bg: var(--border);
 276 }
 277 #corp-ads {
 278     margin-top: 1rem;
 279 }
 280 #topbar {
 281     margin-bottom: 50px;
 282     padding: 0;
 283     --aug-border-all: 1px;
 284     --aug-border-bg: var(--border);
 285     background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(28,114,130,0.5) 100%);
 286 }
 287 #topbar > .row {
 288     border-bottom: solid 1px var(--blended-border);
 289 }
 290 #info-bar {
 291     display: flex;
 292     flex-basis: 40%;
 293     border: solid 0 var(--border);
 294     border-left-width: 1px;
 295     padding: 10px 25px;
 296     background-color: var(--page-bg);
 297     justify-content: space-evenly;
 298 }
 299
 300 #info-bar > span {
 301   display: inline-block;
 302   line-height: 1.5rem;
 303 }
 304 #info-bar b {
 305   --aug-border-all: 1px;
 306   --aug-border-bg: var(--border);
 307   display: inline-block;
 308   line-height: 2rem;
 309   width: 30px;
 310   text-align: center;
 311   background-color: #0d2329;
 312   cursor: default;
 313 }
 314
 315 #overworld-map {
 316   width: auto;
 317   margin: 0 auto;
 318 }
 319 #overworld-map td {
 320     overflow: hidden;
 321     padding: 0;
 322     background: transparent;
 323     border: solid 1px #000;
 324 }
 325 #overworld-map td div {
 326     width: 32px;
 327     height: 32px;
 328     overflow: hidden;
 329 }
 330
 331 #overworld-map td div.city {
 332     cursor: pointer;
 333 }
 334 #overworld-map td div.city.yours {
 335   border: solid 1px var(--green-border);
 336 }
 337 #overworld-map td div.city.yours img {
 338   width: 100%;
 339 }
 340 #overworld-map td div.city.others {
 341   border: solid 1px var(--red-border);
 342 }
 343 #overworld-map td div.city.others img {
 344   width: 100%;
 345 }
 346
 347 #overworld-map .grid-numbers {
 348   color: #7b7b7b;
 349   text-align: center;
 350 }
 351
 352 #sector-selector {
 353   margin: 20px 50px;
 354 }
 355 #sector-selector select {
 356   margin-left: 20px;
 357 }
 358
 359 .cost-display {
 360   display: flex;
 361   flex-wrap: wrap;
 362   justify-content: flex-start;
 363 }
 364 .cost-display > div {
 365   margin: 0 0.5rem;
 366 }
 367 .rate-of-change.success-text::before {
 368   content: '\25B2 ';
 369 }
 370 .rate-of-change.danger::before {
 371   content: '\25BC ';
 372 }
 373
 374 #chat {
 375   margin-top: 2rem;
 376   background-color: var(--page-bg);
 377   padding: 1rem;
 378   --aug-border-all: 1px;
 379   --aug-border-bg: var(--border);
 380 }
 381
 382 #chat-messages {
 383   height: 200px;
 384   overflow: auto;
 385   padding: 0 1rem;
 386 }
 387 .chat-message {
 388   padding: 4px;
 389 }
 390 .chat-message:nth-child(even) {
 391   background-color: #0d2329;
 392 }
 393 .chat-message .from {
 394   color: var(--hl-text);
 395 }
 396 .chat-message .sent_at {
 397   color: #444;
 398   font-size: 0.6rem;
 399 }
 400 #chat-form {
 401   margin: 0;
 402 }
 403 #chat-form .col {
 404   margin: 0;
 405 }
 406 #chat-form input {
 407     flex-grow: 3;
 408     flex-basis: 100%;
 409 }
 410 #chat-form button {
 411   max-width: 150px;
 412 }
 413
 414 #notifications {
 415   min-height: 42px;
 416   margin-bottom: 5px;
 417 }
 418
 419 #stats {
 420   margin-top: 1rem;
 421 }