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