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