Develop

public/css/flag-icons.css

@@ -8,4 +8,8 @@
 
 .fi-esa {
     background-image: url(../flags/esa.png);
+}
+
+.fi-iss {
+    background-image: url(../flags/iss.png);
 }

public/css/limitedUI.css

@@ -26,6 +26,7 @@
   border: 1px solid rgba(255, 255, 255, 0.2);
   pointer-events: none;
 }
+
 #orbit-btn {
   display: block;
   background: red;
@@ -39,6 +40,7 @@
   border-radius: 5px;
   border: 1px solid rgba(255, 255, 255, 0.2);
 }
+
 #countries-btn {
   display: block;
   background: green;
@@ -118,12 +120,12 @@
 
 .right-btn-menu {
   display: none;
-  background: var(--colorTertiaryDarken2);
+  background: var(--color-dark-background);
   color: white;
   position: absolute;
   width: 165px;
   border-radius: 0px;
-  border: 5px solid var(--colorTertiaryDarken3);
+  border: 5px solid var(--color-dark-border);
   z-index: 10;
   /*Prevent fighting with the slide down button on mobile */
 }
@@ -164,7 +166,7 @@ ul li {
 }
 
 .right-btn-menu ul li:hover {
-  background-color: var(--colorSecondaryDarken1);
+  background-color: var(--color-primary-dark);
 }
 
 .right-btn-menu ul li:hover a {
@@ -186,6 +188,7 @@ ul li {
     min-width: 100%;
     top: 50px;
   }
+
   .toast {
     width: 100%;
     border-radius: 0;
@@ -208,4 +211,4 @@ ul li {
     right: 7%;
     max-width: 86%;
   }
-}
+}

public/css/loading-screen.css

@@ -1,24 +1,28 @@
 :root {
-  --colorTertiary: rgb(40, 63, 88);
-  --colorTertiaryLighten1: rgb(82, 102, 122);
-  --colorTertiaryLighten2: rgb(126, 140, 155);
-  --colorTertiaryLighten3: rgb(169, 178, 188);
-  --colorTertiaryLighten4: rgb(212, 217, 222);
-  --colorTertiaryDarken1: rgb(31, 51, 71);
-  --colorTertiaryDarken2: rgb(24, 38, 53);
-  --colorTertiaryDarken3: rgb(16, 25, 35);
-  --colorTertiaryDarken4: rgb(8, 13, 18);
+  --colorTertiary: #4a4a4a !important;
+  --color-dark-background: #1f1f1f !important;
+  --color-dark-border: #3a3a3a !important;
+  --color-dark-text-accent: #dd382f !important;
+  --color-dark-text-muted: #6b6b6b !important;
+  --color-primary: #ba160c !important;
+  /* International Orange Engineering */
+  --color-dark-text-accent: #ff2827;
+  /* Brighter version of International Orange Engineering for icons */
+  --color-primary-light: #e01a0e !important;
+  /* Lighter shade of International Orange Engineering */
+  --color-primary-dark: #860f08 !important;
+  /* Darker shade of International Orange Engineering */
 }
 
 #keeptrack-root {
   overflow: hidden;
   font-family: 'Open Sans', sans-serif;
   color: white;
-  background: var(--colorTertiaryDarken2);
-  background: -moz-linear-gradient(45deg, var(--colorTertiaryDarken2), var(--colorTertiaryDarken2));
-  background: -webkit-linear-gradient(45deg, var(--colorTertiaryDarken2), var(--colorTertiaryDarken2));
-  background: linear-gradient(45deg, var(--colorTertiaryDarken2), var(--colorTertiaryDarken2));
-  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='var(--colorTertiaryDarken2)', endColorstr='#4096ee', GradientType=1);
+  background: var(--color-dark-background);
+  background: -moz-linear-gradient(45deg, var(--color-dark-background), var(--color-dark-background));
+  background: -webkit-linear-gradient(45deg, var(--color-dark-background), var(--color-dark-background));
+  background: linear-gradient(45deg, var(--color-dark-background), var(--color-dark-background));
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='var(--color-dark-background)', endColorstr='#4096ee', GradientType=1);
 }
 
 .ui-icon-minus {
@@ -34,7 +38,8 @@
 }
 
 #canvas-holder {
-  display: none; /* Display none till loading is complete main.js -227 */
+  display: none;
+  /* Display none till loading is complete main.js -227 */
 }
 
 #loading-screen {
@@ -71,14 +76,17 @@
   padding-top: 25px;
   padding-bottom: 5px;
   overflow: hidden;
-  background: var(--colorTertiaryDarken2);
+  background: var(--color-dark-background);
   background: -moz-linear-gradient(45deg, var(--colorTertiaryDarken4), var(--colorTertiary));
   background: -webkit-linear-gradient(45deg, var(--colorTertiaryDarken4), var(--colorTertiary));
   background: linear-gradient(45deg, var(--colorTertiaryDarken4), var(--colorTertiary));
-  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='var(--colorTertiaryDarken2)', endColorstr='#4096ee', GradientType=1);
-  -moz-background-clip: padding; /* Firefox 3.6 */
-  -webkit-background-clip: padding; /* Safari 4? Chrome 6? */
-  background-clip: padding-box; /* Firefox 4, Safari 5, Opera 10, IE 9 */
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='var(--color-dark-background)', endColorstr='#4096ee', GradientType=1);
+  -moz-background-clip: padding;
+  /* Firefox 3.6 */
+  -webkit-background-clip: padding;
+  /* Safari 4? Chrome 6? */
+  background-clip: padding-box;
+  /* Firefox 4, Safari 5, Opera 10, IE 9 */
 }
 
 #logo-inner-container {
@@ -149,6 +157,7 @@
   #logo-text {
     font-size: 3em;
   }
+
   #logo-text-version {
     font-size: 3em;
   }
@@ -185,4 +194,4 @@
 
 .start-hidden {
   display: none;
-}
+}

public/css/materialize-local.css

@@ -1,16 +1,12 @@
 .page-footer {
-    background-color: var(--colorTertiaryDarken2) !important;
+    background-color: var(--color-dark-background) !important;
 }
 
 .spinner-layer {
     border-color: #ffffff !important;
 }
 
-label {
-    color: #ffffff !important;
-}
-
-.switch label input[type='checkbox']:checked + .lever:after {
+.switch label input[type='checkbox']:checked+.lever:after {
     background-color: rgb(255, 255, 255) !important;
 }
 
@@ -36,25 +32,29 @@ textarea.materialize-textarea {
 .btn,
 .btn-large,
 .btn-small {
-    background-color: var(--colorPrimary);
+    background-color: var(--color-primary);
 }
 
 .btn:hover,
 .btn-large:hover,
 .btn-small:hover {
-    background-color: rgb(0, 165, 244);
+    background-color: var(--color-primary-light);
 }
 
 .btn:focus,
 .btn-large:focus,
 .btn-small:focus,
 .btn-floating:focus {
-    background-color: rgb(0, 115, 214);
+    background-color: var(--color-primary-dark);
 }
 
-.dropdown-content li > a,
-.dropdown-content li > span {
-    color: var(--colorPrimary) !important;
+.switch label input[type='checkbox']:checked+.lever {
+    background-color: var(--color-primary) !important;
+}
+
+.dropdown-content li>a,
+.dropdown-content li>span {
+    color: var(--color-primary) !important;
     font-size: 14px !important;
 }
 
@@ -63,12 +63,105 @@ textarea.materialize-textarea {
     min-height: 4.25rem !important;
 }
 
+.select-wrapper input.select-dropdown {
+    height: 2rem !important;
+    line-height: 2rem !important;
+}
+
+.input-field {
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+}
+
+.input-field.col label {
+    padding-top: 0px;
+}
+
+input:not([type]):focus:not([readonly])+label,
+input[type='text']:not(.browser-default):focus:not([readonly])+label,
+input[type='password']:not(.browser-default):focus:not([readonly])+label,
+input[type='email']:not(.browser-default):focus:not([readonly])+label,
+input[type='url']:not(.browser-default):focus:not([readonly])+label,
+input[type='time']:not(.browser-default):focus:not([readonly])+label,
+input[type='date']:not(.browser-default):focus:not([readonly])+label,
+input[type='datetime']:not(.browser-default):focus:not([readonly])+label,
+input[type='datetime-local']:not(.browser-default):focus:not([readonly])+label,
+input[type='tel']:not(.browser-default):focus:not([readonly])+label,
+input[type='number']:not(.browser-default):focus:not([readonly])+label,
+input[type='search']:not(.browser-default):focus:not([readonly])+label,
+textarea.materialize-textarea:focus:not([readonly])+label {
+    color: var(--color-dark-text-accent);
+}
+
+input:not([type]):disabled+label,
+input:not([type])[readonly='readonly']+label,
+input[type='text']:not(.browser-default):disabled+label,
+input[type='text']:not(.browser-default)[readonly='readonly']+label,
+input[type='password']:not(.browser-default):disabled+label,
+input[type='password']:not(.browser-default)[readonly='readonly']+label,
+input[type='email']:not(.browser-default):disabled+label,
+input[type='email']:not(.browser-default)[readonly='readonly']+label,
+input[type='url']:not(.browser-default):disabled+label,
+input[type='url']:not(.browser-default)[readonly='readonly']+label,
+input[type='time']:not(.browser-default):disabled+label,
+input[type='time']:not(.browser-default)[readonly='readonly']+label,
+input[type='date']:not(.browser-default):disabled+label,
+input[type='date']:not(.browser-default)[readonly='readonly']+label,
+input[type='datetime']:not(.browser-default):disabled+label,
+input[type='datetime']:not(.browser-default)[readonly='readonly']+label,
+input[type='datetime-local']:not(.browser-default):disabled+label,
+input[type='datetime-local']:not(.browser-default)[readonly='readonly']+label,
+input[type='tel']:not(.browser-default):disabled+label,
+input[type='tel']:not(.browser-default)[readonly='readonly']+label,
+input[type='number']:not(.browser-default):disabled+label,
+input[type='number']:not(.browser-default)[readonly='readonly']+label,
+input[type='search']:not(.browser-default):disabled+label,
+input[type='search']:not(.browser-default)[readonly='readonly']+label,
+textarea.materialize-textarea:disabled+label,
+textarea.materialize-textarea[readonly='readonly']+label {
+    color: var(--color-dark-text-muted)
+}
+
+input:not([type]):disabled,
+input:not([type])[readonly='readonly'],
+input[type='text']:not(.browser-default):disabled,
+input[type='text']:not(.browser-default)[readonly='readonly'],
+input[type='password']:not(.browser-default):disabled,
+input[type='password']:not(.browser-default)[readonly='readonly'],
+input[type='email']:not(.browser-default):disabled,
+input[type='email']:not(.browser-default)[readonly='readonly'],
+input[type='url']:not(.browser-default):disabled,
+input[type='url']:not(.browser-default)[readonly='readonly'],
+input[type='time']:not(.browser-default):disabled,
+input[type='time']:not(.browser-default)[readonly='readonly'],
+input[type='date']:not(.browser-default):disabled,
+input[type='date']:not(.browser-default)[readonly='readonly'],
+input[type='datetime']:not(.browser-default):disabled,
+input[type='datetime']:not(.browser-default)[readonly='readonly'],
+input[type='datetime-local']:not(.browser-default):disabled,
+input[type='datetime-local']:not(.browser-default)[readonly='readonly'],
+input[type='tel']:not(.browser-default):disabled,
+input[type='tel']:not(.browser-default)[readonly='readonly'],
+input[type='number']:not(.browser-default):disabled,
+input[type='number']:not(.browser-default)[readonly='readonly'],
+input[type='search']:not(.browser-default):disabled,
+input[type='search']:not(.browser-default)[readonly='readonly'],
+textarea.materialize-textarea:disabled,
+textarea.materialize-textarea[readonly='readonly'] {
+    color: var(--color-dark-text-muted)
+}
+
+.input-field>label {
+    color: var(--color-dark-text-muted);
+}
+
 @media only screen and (min-width: 601px) {
+
     nav,
     nav .nav-wrapper i,
     nav a.sidenav-trigger,
     nav a.sidenav-trigger i {
         height: 64px;
         line-height: 64px;
     }
-}
+}