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 }
  10
  11 input {
  12     outline: none;
  13 }
  14
  15 body {
  16     background-color: var(--page-bg);
  17     color: #fff;
  18     margin: 0 auto 20px;
  19     max-width: 1024px;
  20     font-family: 'Roboto Condensed', sans-serif;
  21     font-weight: normal;
  22     font-size: 16px;
  23     background-image: url('/assets/bg/green_nebula_4.png');
  24     background-blend-mode: soft-light;
  25 }
  26 hr {
  27     border-color: var(--border);
  28     margin-bottom: 1.2rem;
  29 }
  30
  31 h1, h2, h3 {
  32     text-transform: uppercase;
  33     font-weight: 300;
  34     line-height: 2.2rem;
  35     border: solid 0 var(--border);
  36     border-left-width: 6px;
  37     border-bottom-width: 2px;
  38     padding-left: 10px;
  39     margin-top: 0;
  40     color :#6ac9db;
  41     text-shadow: 0 0 2px #6ac9db;
  42 }
  43 h1 {
  44     font-size: 2.2rem;
  45 }
  46 h2 {
  47     font-size: 1.7rem;
  48 }
  49 h3 {
  50     font-size: 1.3rem;
  51 }
  52 table {
  53     width: 100%;
  54     margin-bottom: 2rem;
  55     border-spacing: 0;
  56     border: solid 1px var(--border);
  57 }
  58 tr:nth-child(odd) td, tr:nth-child(odd) th {
  59     background-color: #0d2329;
  60 }
  61 th, td {
  62     padding: 0.5rem;
  63 }
  64 p, form, ul, ol {
  65     line-height: 1.3rem;
  66     margin: 0 2rem 2rem 2rem;
  67     flex: inherit;
  68 }
  69
  70 label {
  71     font-weight: bold;
  72     margin-right: 5px;
  73 }
  74
  75 button, .btn {
  76     border: solid 1px var(--border);
  77     background-color: #183238;
  78     color: #fff;
  79     font-size: 0.8rem;
  80     cursor: pointer;
  81     padding: 5px 5px 5px 25px;
  82     text-transform: uppercase;
  83     text-align: center;
  84     font-weight: bold;
  85     min-width: 150px;
  86 }
  87 button::after, .btn::after {
  88     content: '\27EB';
  89     float: right;
  90     color: var(--border);
  91 }
  92 .danger {
  93     background-color: var(--red-bg);
  94     border-color: var(--red-border);
  95 }
  96 .danger::after {
  97     color: #821c1c
  98 }
  99 .danger-text {
 100   color: var(--red-border);
 101 }
 102 .success-text {
 103   color: var(--green-border);
 104 }
 105 .success {
 106     background-color: var(--green-bg);
 107     border-color: var(--green-border);
 108 }
 109 .success::after{
 110     color: #32821c;
 111 }
 112 button:active, .btn:active, button:hover, .btn:hover {
 113     background-color: #1a444c;
 114 }
 115 button.success:active, .btn.success:active, button.success:hover, .btn.success:hover {
 116     background-color: #1e4c1a;
 117 }
 118
 119 input[type="text"], input[type="password"], input[type="number"] {
 120     border: solid 1px var(--border);
 121     background-color: #183238;
 122     color: #fff;
 123     font-size: 0.8rem;
 124     cursor: pointer;
 125     min-width: 120px;
 126     padding: 5px;
 127 }
 128
 129 a {
 130     font-weight: bold;
 131     color: #fff;
 132     text-decoration: none;
 133 }
 134 a::before {
 135     content: '\27EA';
 136 }
 137 a::after {
 138     content: '\27EB';
 139 }
 140 footer {
 141     text-align: center;
 142     border-top: solid 1px var(--border);
 143     padding-top: 1rem;
 144     margin-top: 2rem;
 145 }
 146
 147 #nav, #nav ul {
 148     padding: 0;
 149     margin: 0;
 150 }
 151 #nav ul {
 152     display: flex;
 153     justify-content: space-evenly;
 154     align-items: center;
 155 }
 156 #nav li {
 157     margin: 0;
 158     list-style: none;
 159     display: inline-flex;
 160 }
 161 #nav li a {
 162     padding: 10px 25px;
 163 }
 164 #nav li a:hover {
 165     background-color: var(--border);
 166 }
 167 #nav li a::before {
 168     content: '';
 169 }
 170 #nav li a::after {
 171     content: '';
 172 }
 173 .alert {
 174     padding: 10px;
 175     font-size: 1rem;
 176     margin-bottom: 1.2rem;
 177     border-style: solid;
 178     border-width: 1px;
 179 }
 180
 181 /** Grid Stuff **/
 182 .row {
 183     display: flex;
 184 }
 185 .col {
 186     flex-grow: 1;
 187     flex-basis: 50%;
 188     margin-right: 5rem;
 189 }
 190 .col:last-child {
 191     margin-right: 0;
 192 }
 193 .col p {
 194     margin-right: 0;
 195 }
 196
 197 /** Utility **/
 198 .right {
 199     float: right;
 200 }
 201 .left {
 202     float: left;
 203 }
 204 .clear {
 205     clear: both;
 206 }
 207 .hidden {
 208     display: none;
 209 }
 210 .text-right {
 211     text-align: right;
 212 }
 213 .text-left {
 214     text-align: left;
 215 }
 216 .text-center {
 217     text-align: center;
 218 }
 219
 220 /** CUSTOMIZATIONS **/
 221 form > div {
 222     margin-bottom: 1rem;
 223 }
 224 .sidebar {
 225     flex-basis: 100px;
 226 }
 227 .pane {
 228     background-color: var(--page-bg);
 229     padding: 1rem;
 230     --aug-border-all: 1px;
 231     --aug-border-bg: var(--border);
 232 }
 233 #main {
 234     background-color: var(--page-bg);
 235     padding: 1rem;
 236     --aug-border-all: 1px;
 237     --aug-border-bg: var(--border);
 238 }
 239 #corp-ads {
 240     margin-top: 1rem;
 241 }
 242 #topbar {
 243     margin-bottom: 50px;
 244     padding: 0;
 245     --aug-border-all: 1px;
 246     --aug-border-bg: var(--border);
 247     background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(28,114,130,0.5) 100%);
 248 }
 249 #topbar > .row {
 250     border-bottom: solid 1px var(--blended-border);
 251 }
 252 #info-bar {
 253     display: flex;
 254     flex-basis: 40%;
 255     border: solid 0 var(--border);
 256     border-left-width: 1px;
 257     padding: 10px 25px;
 258     background-color: var(--page-bg);
 259     justify-content: space-evenly;
 260 }
 261
 262 #info-bar > span {
 263   display: inline-block;
 264   line-height: 1.5rem;
 265 }
 266 #info-bar b {
 267   --aug-border-all: 1px;
 268   --aug-border-bg: var(--border);
 269   display: inline-block;
 270   line-height: 2rem;
 271   width: 30px;
 272   text-align: center;
 273   background-color: #0d2329;
 274   cursor: default;
 275 }
 276
 277 #overworld-map {
 278   width: auto;
 279   margin: 0 auto;
 280 }
 281 #overworld-map td {
 282     overflow: hidden;
 283     padding: 0;
 284     background: transparent;
 285     border: solid 1px #000;
 286 }
 287 #overworld-map td div {
 288     width: 32px;
 289     height: 32px;
 290     overflow: hidden;
 291 }
 292
 293 #overworld-map td div.city {
 294     cursor: pointer;
 295 }
 296 #overworld-map td div.city.yours {
 297   border: solid 1px var(--green-border);
 298 }
 299 #overworld-map td div.city.yours img {
 300   width: 100%;
 301 }
 302 #overworld-map td div.city.others {
 303   border: solid 1px var(--red-border);
 304 }
 305 #overworld-map td div.city.others img {
 306   width: 100%;
 307 }
 308
 309 #overworld-map .grid-numbers {
 310   color: #7b7b7b;
 311   text-align: center;
 312 }
 313
 314 #sector-selector {
 315   margin: 20px 50px;
 316 }
 317 #sector-selector select {
 318   margin-left: 20px;
 319 }
 320
 321 .cost-display {
 322   display: flex;
 323   flex-wrap: wrap;
 324   justify-content: flex-start;
 325 }
 326 .cost-display > div {
 327   margin: 0 0.5rem;
 328 }
 329 .rate-of-change.success-text::before {
 330   content: '\25B2 ';
 331 }
 332 .rate-of-change.danger::before {
 333   content: '\25BC ';
 334 }