Minor cosmetic improvements to ship instrumentation

Improved apperance to more resemble UI elements seen in-game and added some transition animations.
iaincollins · Apr 28, 2022 · 9b875af · 9b875af
1 parent 9d04030
commit 9b875af
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 72 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "icarus",
-  "version": "0.12.1",
+  "version": "0.12.2",
   "description": "ICARUS Terminal for Elite Dangerous",
   "scripts": {
     "build": "npm run build:web && npm run build:app && npm run build:service && npm run build:package",

diff --git a/src/web/components/panels/ship/ship-modules-panel.js b/src/web/components/panels/ship/ship-modules-panel.js
@@ -129,7 +129,7 @@ export default function ShipModulesPanel ({ ship, selectedModule, setSelectedMod
                       onChange={() => toggleSwitch('lights')}
                       disabled
                     />
-                    <span class='checkbox__control' />
+                    <span className='checkbox__control' />
                   </label>
                 </td>
                 <td>
@@ -141,7 +141,7 @@ export default function ShipModulesPanel ({ ship, selectedModule, setSelectedMod
                       onChange={() => toggleSwitch('nightVision')}
                       disabled
                     />
-                    <span class='checkbox__control' />
+                    <span className='checkbox__control' />
                   </label>
                 </td>
                 <td>
@@ -153,7 +153,7 @@ export default function ShipModulesPanel ({ ship, selectedModule, setSelectedMod
                       onChange={() => toggleSwitch('cargoHatch')}
                       disabled
                     />
-                    <span class='checkbox__control' />
+                    <span className='checkbox__control' />
                   </label>
                 </td>
                 <td>
@@ -165,7 +165,7 @@ export default function ShipModulesPanel ({ ship, selectedModule, setSelectedMod
                       onChange={() => toggleSwitch('landingGear')}
                       disabled
                     />
-                    <span class='checkbox__control' />
+                    <span className='checkbox__control' />
                   </label>
                 </td>
                 <td>
@@ -177,7 +177,7 @@ export default function ShipModulesPanel ({ ship, selectedModule, setSelectedMod
                       onChange={() => toggleSwitch('hardpoints')}
                       disabled
                     />
-                    <span class='checkbox__control' />
+                    <span className='checkbox__control' />
                   </label>
                 </td>
               </tr>
@@ -337,10 +337,12 @@ function NavigationInstrumentation ({ ship, cmdrStatus }) {
         maxHeight: '12rem',
         margin: 'auto',
         aspectRatio: '1',
-        background: 'var(--color-background-panel-translucent)',
         border: '.5rem double var(--color-info)',
         transform: `rotate(${ship.onBoard ? cmdrStatus?.heading ?? 0 : 0}deg)`,
-        borderRadius: '100rem'
+        opacity: ship.onBoard ? 1 : '.5',
+        borderRadius: '100rem',
+        boxShadow: 'inset 0 0 .25rem var(--color-info), 0 0 .25rem var(--color-info)',
+        transition: 'opacity .25s ease-in-out'
       }}
       >
         <div style={{
@@ -353,6 +355,7 @@ function NavigationInstrumentation ({ ship, cmdrStatus }) {
           height: '1.25rem',
           width: '1.25rem',
           borderRadius: '100rem',
+          boxShadow: '0 0 .5rem var(--color-info)',
           display: ship.onBoard && typeof cmdrStatus?.heading === 'number' ? ' block' : 'none'
         }}
         />
@@ -408,6 +411,7 @@ function NavigationInstrumentation ({ ship, cmdrStatus }) {
 }
 
 function PowerDistribution ({ ship }) {
+
   return (
     <div
       className='ship-panel__ship-pips'

diff --git a/src/web/css/form/checkbox.css b/src/web/css/form/checkbox.css
@@ -25,6 +25,7 @@
   right: 0;
   bottom: 0;
   font-size: 1.25rem;
+  color: var(--color-info);
 }
 
 @media only screen and (max-width: 799px) {
@@ -45,34 +46,32 @@
   clear: both;
   margin: auto;
   height: 2rem;
-  max-width: 6rem;
-  background-color: var(--color-background-panel-translucent);
-  border: .2rem solid var(--color-primary);
+  max-width: 5rem;
+  border: .2rem solid var(--color-info);
   opacity: .5;
-  border-radius: .1rem;
+  border-radius: 5rem;
+  transition: all .25s ease-in-out;
 }
 
 .checkbox .checkbox__control:after {
   content: "";
   position: absolute;
   top: .2rem;
-  left: .2rem;
-  height: 1.6rem;
-  width: 50%;
+  left: calc(0% + .2rem);
+  height: 1.2rem;
+  width: 1.2rem;
   max-width: 3rem;
-  background-color: var(--color-primary);
-  opacity: .5;
-  border-radius: .1rem;
+  box-shadow: 0 0 .5rem var(--color-info);
+  background-color: var(--color-info);
+  border: .2rem solid var(--color-info);
+  border-radius: 5rem;
+  transition: all .2s ease-in-out;
 }
 
 .checkbox input:checked ~ .checkbox__control {
   opacity: 1;
 }
 
 .checkbox input:checked ~ .checkbox__control:after {
-  right: .2rem;
-  left: initial;
-  background-color: var(--color-primary);
-  opacity: 1;
-  box-shadow: 0 0 .5rem var(--color-primary);
+  left: calc(100% - 1.8rem);
 }
diff --git a/src/web/css/main.css b/src/web/css/main.css
@@ -260,7 +260,6 @@ progress {
   width: 100%;
   border-radius: 0;
   height: 2rem;
-  background: var(--color-primary-dark); /* For Firefox */
   transition: opacity .25s ease-out;
   border: 0;
 }
@@ -285,6 +284,14 @@ progress[value]::-webkit-progress-value {
   border-radius: .1rem;
 }
 
+progress.progress--gradient[value]::-webkit-progress-bar {
+  background: transparent;
+}
+
+progress[value].progress--gradient::-moz-progress-bar {
+  background: linear-gradient(to right, var(--color-primary-dark), var(--color-primary));
+}
+
 progress[value].progress--gradient::-webkit-progress-value {
   background: linear-gradient(to right, var(--color-primary-dark), var(--color-primary));
   box-shadow: none;

diff --git a/src/web/css/overrides/firefox.css b/src/web/css/overrides/firefox.css
@@ -7,4 +7,12 @@
   .system-map__planetary-system-map {
    filter: contrast(1.5) !important;
   }
+
+  progress {
+    background: var(--color-primary-dark);
+  }
+
+  progress.progress--gradient {
+    background: transparent;
+  }
 }
diff --git a/src/web/css/panels/ship-panel.css b/src/web/css/panels/ship-panel.css
@@ -261,17 +261,19 @@ table.ship-panel__lights td {
   justify-content: center;
   text-align: center;
   opacity: 0.5;
+  border: .2rem solid transparent;
   border-radius: .15rem;
+  transition: all .25s ease-in-out;
 }
 
 .ship-panel__light--on {
   opacity: 1;
   color: var(--color-info);
-  filter: saturate(1.25) contrast(1.5);
-  color: black;
-  text-shadow: 0 0 .5rem white, 0 0 1rem black, 0 0 2rem black;
-  box-shadow: inset 0 0 2rem var(--color-info), 0 0 .2rem var(--color-info);
-  border-radius: .15rem;
+  color: var(--color-info);
+  border-color: var(--color-info);
+  border-radius: .25rem;
+  background-color: transparent;
+  box-shadow: inset 0 0 .25rem var(--color-info), 0 0 .25rem var(--color-info);
 }
 
 .ship-panel__light--on::before {
@@ -282,44 +284,25 @@ table.ship-panel__lights td {
   height: 100%;
   display: block;
   position: absolute;
-  opacity: .5;
+  filter: brightness(.4) saturate(1);
+  opacity: .25;
   z-index: -1;
   border-radius: .15rem;
   background-color: var(--color-info);
 }
 
-.ship-panel__light--on::after {
-  content: '';
-  background: linear-gradient(transparent, white);
-  filter: brightness(1.1) saturate(2);
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: block;
-  position: absolute;
-  opacity: .3;
-  z-index: 2;
-  border-radius: .15rem;
-  box-shadow: inset 0 0 1rem rgb(0,0,0,.75);
-}
-
 .ship-panel__light--danger {
   opacity: 1;
   color: var(--color-danger);
   background-color: transparent;
-  box-shadow: inset 0 0 2rem var(--color-danger);
-  text-shadow: 0 0 .5rem black, 0 0 5rem black;
   filter: saturate(1.8) contrast(1.5);
-  color: white;
-  text-shadow: 0 0 .5rem var(--color-danger), 0 0 2rem var(--color-danger);
-  text-shadow: 0 0 .5rem var(--color-danger), 0 0 1rem black, 0 0 2rem black;
-  box-shadow: inset 0 0 2rem var(--color-danger), 0 0 .5rem var(--color-danger);
+  box-shadow: inset 0 0 .25rem var(--color-danger), 0 0 .25rem var(--color-danger);
+  border-color: var(--color-danger);
+
 }
 
 .ship-panel__light--danger::before {
   content: '';
-  background: linear-gradient(transparent, var(--color-danger));
   background: var(--color-danger);
   filter: brightness(.4) saturate(1);
   top: 0;
@@ -328,29 +311,13 @@ table.ship-panel__lights td {
   height: 100%;
   display: block;
   position: absolute;
-  opacity: .75;
-  z-index: -1;
-  border-radius: .15rem;
-}
-
-.ship-panel__light--danger::after {
-  content: '';
-  background: var(--color-danger);
-  filter: brightness(.5) saturate(1);
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: block;
-  position: absolute;
   opacity: .25;
-  z-index: 2;
+  z-index: -1;
   border-radius: .15rem;
-  animation: text-blink-animation .75s ease-in-out infinite;
+  animation: text-blink-animation 1s ease-in-out infinite;
 }
 
 .ship-panel--status {
   max-width: 100rem;
   margin: auto;
-}
-
+}