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: #821c1c;
   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
 148 #nav, #nav ul {
 149     padding: 0;
 150     margin: 0;
 151 }
 152 #nav ul {
 153     display: flex;
 154     justify-content: space-evenly;
 155     align-items: center;
 156 }
 157 #nav li {
 158     margin: 0;
 159     list-style: none;
 160     display: inline-flex;
 161 }
 162 #nav li a {
 163     padding: 10px 25px;
 164 }
 165 #nav li a:hover {
 166     background-color: var(--border);
 167 }
 168 #nav li a::before {
 169     content: '';
 170 }
 171 #nav li a::after {
 172     content: '';
 173 }
 174 .alert {
 175     padding: 10px;
 176     font-size: 1rem;
 177     margin-bottom: 1.2rem;
 178     border-style: solid;
 179     border-width: 1px;
 180 }
 181
 182 /** Grid Stuff **/
 183 .row {
 184     display: flex;
 185 }
 186 .col {
 187     flex-grow: 1;
 188     flex-basis: 50%;
 189     margin-right: 5rem;
 190 }
 191 .col:last-child {
 192     margin-right: 0;
 193 }
 194 .col p {
 195     margin-right: 0;
 196 }
 197
 198 /** Utility **/
 199 .right {
 200     float: right;
 201 }
 202 .left {
 203     float: left;
 204 }
 205 .clear {
 206     clear: both;
 207 }
 208 .hidden {
 209     display: none;
 210 }
 211 .text-right {
 212     text-align: right;
 213 }
 214 .text-left {
 215     text-align: left;
 216 }
 217 .text-center {
 218     text-align: center;
 219 }
 220
 221 /** CUSTOMIZATIONS **/
 222 form > div {
 223     margin-bottom: 1rem;
 224 }
 225 .sidebar {
 226     flex-basis: 100px;
 227 }
 228 .pane {
 229     background-color: var(--page-bg);
 230     padding: 1rem;
 231     --aug-border-all: 1px;
 232     --aug-border-bg: var(--border);
 233 }
 234 #main {
 235     background-color: var(--page-bg);
 236     padding: 1rem;
 237     --aug-border-all: 1px;
 238     --aug-border-bg: var(--border);
 239 }
 240 #corp-ads {
 241     margin-top: 1rem;
 242 }
 243 #topbar {
 244     margin-bottom: 50px;
 245     padding: 0;
 246     --aug-border-all: 1px;
 247     --aug-border-bg: var(--border);
 248     background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(28,114,130,0.5) 100%);
 249 }
 250 #topbar > .row {
 251     border-bottom: solid 1px var(--blended-border);
 252 }
 253 #info-bar {
 254     display: flex;
 255     flex-basis: 40%;
 256     border: solid 0 var(--border);
 257     border-left-width: 1px;
 258     padding: 10px 25px;
 259     background-color: var(--page-bg);
 260     justify-content: space-evenly;
 261 }
 262
 263 #info-bar > span {
 264   display: inline-block;
 265   line-height: 1.5rem;
 266 }
 267 #info-bar b {
 268   --aug-border-all: 1px;
 269   --aug-border-bg: var(--border);
 270   display: inline-block;
 271   line-height: 2rem;
 272   width: 30px;
 273   text-align: center;
 274   background-color: #0d2329;
 275   cursor: default;
 276 }
 277
 278 #overworld-map {
 279   width: auto;
 280   margin: 0 auto;
 281 }
 282 #overworld-map td {
 283     overflow: hidden;
 284     padding: 0;
 285     background: transparent;
 286     border: solid 1px #000;
 287 }
 288 #overworld-map td div {
 289     width: 32px;
 290     height: 32px;
 291     overflow: hidden;
 292 }
 293
 294 #overworld-map td div.city {
 295     cursor: pointer;
 296 }
 297 #overworld-map td div.city.yours {
 298   border: solid 1px var(--green-border);
 299 }
 300 #overworld-map td div.city.yours img {
 301   width: 100%;
 302 }
 303 #overworld-map td div.city.others {
 304   border: solid 1px var(--red-border);
 305 }
 306 #overworld-map td div.city.others img {
 307   width: 100%;
 308 }
 309
 310 #overworld-map .grid-numbers {
 311   color: #7b7b7b;
 312   text-align: center;
 313 }
 314
 315 #sector-selector {
 316   margin: 20px 50px;
 317 }
 318 #sector-selector select {
 319   margin-left: 20px;
 320 }
 321
 322 .cost-display {
 323   display: flex;
 324   flex-wrap: wrap;
 325   justify-content: flex-start;
 326 }
 327 .cost-display > div {
 328   margin: 0 0.5rem;
 329 }
 330 .rate-of-change.success-text::before {
 331   content: '\25B2 ';
 332 }
 333 .rate-of-change.danger::before {
 334   content: '\25BC ';
 335 }
 336
 337 #chat {
 338   margin-top: 2rem;
 339   background-color: var(--page-bg);
 340   padding: 1rem;
 341   --aug-border-all: 1px;
 342   --aug-border-bg: var(--border);
 343 }
 344
 345 #chat-messages {
 346   height: 200px;
 347   overflow: auto;
 348   padding: 0 1rem;
 349 }
 350 .chat-message {
 351   padding: 4px;
 352 }
 353 .chat-message:nth-child(even) {
 354   background-color: #0d2329;
 355 }
 356 .chat-message .from {
 357   color: var(--hl-text);
 358 }
 359 .chat-message .sent_at {
 360   color: #444;
 361   font-size: 0.6rem;
 362 }
 363 #chat-form {
 364   margin: 0;
 365 }
 366 #chat-form .col {
 367   margin: 0;
 368 }
 369 #chat-form input {
 370     flex-grow: 3;
 371     flex-basis: 100%;
 372 }
 373 #chat-form button {
 374   max-width: 150px;
 375 }