styling

2 files changed, 95 insertions, 114 deletions

diff --git a/vfd-backend/public/images/instruments/basic.svg b/vfd-backend/public/images/instruments/basic.svg
index 7712ece..ac04b60 100644
--- a/vfd-backend/public/images/instruments/basic.svg
+++ b/vfd-backend/public/images/instruments/basic.svg
@@ -1,11 +1,12 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <!-- Created with Inkscape (http://www.inkscape.org/) -->
 
-<svg:svg
+<svg
    xmlns:dc="http://purl.org/dc/elements/1.1/"
    xmlns:cc="http://creativecommons.org/ns#"
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
    xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    width="100"
@@ -14,8 +15,8 @@
    version="1.1"
    inkscape:version="0.48.5 r10040"
    viewBox="-50 -50 100 100"
-   sodipodi:docname="thin.svg">
-  <svg:defs
+   sodipodi:docname="basic.svg">
+  <defs
      id="defs4389">
     <inkscape:perspective
        sodipodi:type="inkscape:persp3d"
@@ -24,7 +25,7 @@
        inkscape:vp_z="100 : 50 : 1"
        inkscape:persp3d-origin="50 : 33.333333 : 1"
        id="perspective5114" />
-  </svg:defs>
+  </defs>
   <sodipodi:namedview
      id="base"
      pagecolor="#ffffff"
@@ -33,7 +34,7 @@
      inkscape:pageopacity="0.0"
      inkscape:pageshadow="2"
      inkscape:zoom="5.6568542"
-     inkscape:cx="64.85138"
+     inkscape:cx="65.204933"
      inkscape:cy="31.918663"
      inkscape:document-units="px"
      inkscape:current-layer="svg4387"
@@ -57,7 +58,7 @@
        spacingx="1px"
        spacingy="1px" />
   </sodipodi:namedview>
-  <svg:metadata
+  <metadata
      id="metadata4392">
     <rdf:RDF>
       <cc:Work
@@ -65,65 +66,82 @@
         <dc:format>image/svg+xml</dc:format>
         <dc:type
            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
+        <dc:title />
       </cc:Work>
     </rdf:RDF>
-  </svg:metadata>
-  <svg:g
+  </metadata>
+  <g
      id="lower">
-    <svg:path
+    <path
        inkscape:transform-center-y="44.418149"
        inkscape:transform-center-x="11.044759"
        inkscape:connector-curvature="0"
        id="path5010"
        d="m -0.52403983,48.510133 0.0154511,-3.487667 C -7.2448512,44.942356 -13.911142,43.340039 -19.989534,40.326163 l -1.591395,3.126201 c 6.563792,3.254436 13.7823459,4.974145 21.05688917,5.057769 z"
        style="fill:#00d400;fill-opacity:1;stroke:none" />
-    <svg:path
+    <path
        inkscape:transform-center-y="-24.174304"
        inkscape:transform-center-x="39.074649"
        inkscape:connector-curvature="0"
        id="path5002"
        d="m -45.973942,-15.488849 3.312195,1.092444 c 2.157808,-6.381812 5.741699,-12.226687 10.486391,-17.076243 l -2.481425,-2.479556 c -5.123476,5.236862 -8.989672,11.570695 -11.317161,18.463355 z"
        style="fill:#00d400;fill-opacity:1;stroke:none" />
-    <svg:path
+    <path
        style="fill:#00d400;fill-opacity:1;stroke:none"
        d="m -47.994872,7.0710673 3.447146,-0.5303303 c -0.974661,-6.66586045 -0.434908,-13.5007347 1.590991,-19.975766 l -3.336661,-1.082757 c -2.187565,6.9920876 -2.756871,14.39079041 -1.701476,21.5888533 z"
        id="path5004"
        inkscape:connector-curvature="0"
        inkscape:transform-center-x="45.733006"
        inkscape:transform-center-y="-3.7233588" />
-    <svg:path
+    <path
        inkscape:transform-center-y="17.810418"
        inkscape:transform-center-x="42.280768"
        inkscape:connector-curvature="0"
        id="path5006"
        d="m -39.553546,28.089583 2.830664,-2.037499 c -3.894666,-5.496838 -6.516711,-11.831799 -7.651224,-18.5208328 l -3.464548,0.5500689 c 1.225206,7.2231289 4.076892,14.0738809 8.285108,20.0082629 z"
        style="fill:#00d400;fill-opacity:1;stroke:none" />
-    <svg:path
+    <path
        style="fill:#00d400;fill-opacity:1;stroke:none"
        d="m -22.490063,42.984936 1.597135,-3.10052 c -5.965685,-3.129577 -11.177957,-7.583685 -15.225573,-13.0286 l -2.837209,2.062987 c 4.370899,5.879623 10.021946,10.68905 16.465647,14.066133 z"
        id="path5008"
        inkscape:connector-curvature="0"
        inkscape:transform-center-x="29.924319"
        inkscape:transform-center-y="34.920377" />
-  </svg:g>
-  <svg:g
+  </g>
+  <g
+     id="upper">
+    <path
+       inkscape:transform-center-y="-11.026553"
+       inkscape:transform-center-x="-44.430044"
+       inkscape:connector-curvature="0"
+       id="path4979"
+       d="m 43.460756,-21.556216 -3.114549,1.5696 c 2.986821,6.038424 4.585579,12.7055669 4.65973,19.48972598 l 3.507943,-0.001321 C 48.433702,-7.8240776 46.68882,-15.036587 43.460756,-21.556216 z"
+       style="fill:#ff0000;fill-opacity:1;stroke:none" />
+    <path
+       style="fill:#ff0000;fill-opacity:1;stroke:none"
+       d="m 28.9375,-38.9375 -2.0625,2.8125 c 5.402664,4.024287 9.853987,9.238934 13,15.25 L 43,-22.46875 C 39.602688,-28.959745 34.773576,-34.593978 28.9375,-38.9375 z"
+       id="path5000"
+       inkscape:connector-curvature="0"
+       inkscape:transform-center-x="-34.9375"
+       inkscape:transform-center-y="-29.90625" />
+  </g>
+  <g
      id="dial">
-    <svg:path
+    <path
        transform="translate(-50,-50)"
        id="path4401"
        d="M 50,0 C 22.385763,0 0,22.385763 0,50 c 0,27.614237 22.385763,50 50,50 l 0,-1.5 C 23.21419,98.5 1.5,76.78581 1.5,50 1.5,23.21419 23.21419,1.5 50,1.5 76.78581,1.5 98.5,23.21419 98.5,50 l 1.5,0 C 100,22.385763 77.614237,0 50,0 z"
        style="fill:#1a1a1a;fill-opacity:1;stroke:none"
        inkscape:connector-curvature="0" />
-    <svg:rect
+    <rect
        inkscape:transform-center-y="51.283333"
-       y="40.5"
+       y="41.5"
        x="-1"
        height="8.5"
        width="2"
        id="rect4409"
        style="fill:#1a1a1a;fill-opacity:1;stroke:none" />
-    <svg:rect
+    <rect
        inkscape:transform-center-x="31.996582"
        transform="matrix(-0.70710678,0.70710678,-0.70710678,-0.70710678,0,0)"
        style="fill:#1a1a1a;fill-opacity:1;stroke:none"
@@ -133,16 +151,16 @@
        x="-1"
        y="41.5"
        inkscape:transform-center-y="-31.996582" />
-    <svg:rect
+    <rect
        y="41.5"
        x="-1.0000002"
-       height="7.5"
+       height="8.5"
        width="2"
        id="rect4413"
        style="fill:#1a1a1a;fill-opacity:1;stroke:none"
        transform="matrix(0,-1,1,0,0,0)"
-       inkscape:transform-center-x="-45.25" />
-    <svg:rect
+       inkscape:transform-center-x="-51.283333" />
+    <rect
        inkscape:transform-center-x="21.110558"
        transform="matrix(0.89100652,0.4539905,-0.4539905,0.89100652,0,0)"
        style="fill:#1a1a1a;fill-opacity:1;stroke:none"
@@ -152,7 +170,7 @@
        x="-0.5"
        y="44"
        inkscape:transform-center-y="41.431803" />
-    <svg:rect
+    <rect
        inkscape:transform-center-y="27.332014"
        y="44"
        x="-0.49999985"
@@ -162,7 +180,7 @@
        style="fill:#1a1a1a;fill-opacity:1;stroke:none"
        transform="matrix(0.58778525,0.809017,-0.809017,0.58778525,0,0)"
        inkscape:transform-center-x="37.61929" />
-    <svg:rect
+    <rect
        inkscape:transform-center-x="45.927507"
        transform="matrix(0.15643446,0.98768834,-0.98768834,0.15643446,0,0)"
        style="fill:#1a1a1a;fill-opacity:1;stroke:none"
@@ -172,7 +190,7 @@
        x="-0.49999964"
        y="44"
        inkscape:transform-center-y="7.2742025" />
-    <svg:rect
+    <rect
        inkscape:transform-center-y="-14.36929"
        y="44"
        x="-0.49999928"
@@ -182,7 +200,7 @@
        style="fill:#1a1a1a;fill-opacity:1;stroke:none"
        transform="matrix(-0.309017,0.95105651,-0.95105651,-0.309017,0,0)"
        inkscape:transform-center-x="44.224127" />
-    <svg:rect
+    <rect
        inkscape:transform-center-x="14.36929"
        transform="matrix(-0.95105652,0.30901699,-0.30901699,-0.95105652,0,0)"
        style="fill:#1a1a1a;fill-opacity:1;stroke:none"
@@ -192,7 +210,7 @@
        x="-0.49999872"
        y="44"
        inkscape:transform-center-y="-44.224128" />
-    <svg:rect
+    <rect
        inkscape:transform-center-y="-45.927508"
        y="44"
        x="-0.49999878"
@@ -202,7 +220,7 @@
        style="fill:#1a1a1a;fill-opacity:1;stroke:none"
        transform="matrix(-0.98768834,-0.15643447,0.15643447,-0.98768834,0,0)"
        inkscape:transform-center-x="-7.2742029" />
-    <svg:rect
+    <rect
        inkscape:transform-center-x="-27.332015"
        transform="matrix(-0.80901699,-0.58778526,0.58778526,-0.80901699,0,0)"
        style="fill:#1a1a1a;fill-opacity:1;stroke:none"
@@ -212,7 +230,7 @@
        x="-0.49999899"
        y="44"
        inkscape:transform-center-y="-37.619291" />
-    <svg:rect
+    <rect
        inkscape:transform-center-y="-21.110559"
        y="44"
        x="-0.49999952"
@@ -222,92 +240,75 @@
        style="fill:#1a1a1a;fill-opacity:1;stroke:none"
        transform="matrix(-0.45399049,-0.89100653,0.89100653,-0.45399049,0,0)"
        inkscape:transform-center-x="-41.431805" />
-  </svg:g>
-  <svg:g
-     id="upper">
-    <svg:path
-       inkscape:transform-center-y="-11.026553"
-       inkscape:transform-center-x="-44.430044"
-       inkscape:connector-curvature="0"
-       id="path4979"
-       d="m 43.460756,-21.556216 -3.114549,1.5696 c 2.986821,6.038424 4.585579,12.7055669 4.65973,19.48972598 l 3.507943,-0.001321 C 48.433702,-7.8240776 46.68882,-15.036587 43.460756,-21.556216 z"
-       style="fill:#ff0000;fill-opacity:1;stroke:none" />
-    <svg:path
-       style="fill:#ff0000;fill-opacity:1;stroke:none"
-       d="m 28.9375,-38.9375 -2.0625,2.8125 c 5.402664,4.024287 9.853987,9.238934 13,15.25 L 43,-22.46875 C 39.602688,-28.959745 34.773576,-34.593978 28.9375,-38.9375 z"
-       id="path5000"
-       inkscape:connector-curvature="0"
-       inkscape:transform-center-x="-34.9375"
-       inkscape:transform-center-y="-29.90625" />
-  </svg:g>
-  <svg:g
+  </g>
+  <g
      id="labels">
-    <svg:text
+    <text
        xml:space="preserve"
        style="font-size:10px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:end;line-height:125%;letter-spacing:0px;word-spacing:0px;text-anchor:end;fill:#4d4d4d;fill-opacity:1;stroke:none;font-family:Arial;-inkscape-font-specification:Arial"
        x="40.52644"
        y="3.5468256"
        id="text5100"
-       sodipodi:linespacing="125%"><svg:tspan
+       sodipodi:linespacing="125%"><tspan
          style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:Sans;-inkscape-font-specification:Sans"
          sodipodi:role="line"
          id="max"
          x="40.52644"
-         y="3.5468256">100</svg:tspan></svg:text>
-    <svg:text
+         y="3.5468256">100</tspan></text>
+    <text
        sodipodi:linespacing="125%"
        id="text5102"
        y="39.272289"
        x="0.0016270902"
        style="font-size:10px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:center;line-height:125%;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#4d4d4d;fill-opacity:1;stroke:none;font-family:Sans;-inkscape-font-specification:Sans"
-       xml:space="preserve"><svg:tspan
+       xml:space="preserve"><tspan
          y="39.272289"
          x="0.0016270902"
          id="min"
-         sodipodi:role="line">0</svg:tspan></svg:text>
-    <svg:text
+         sodipodi:role="line">0</tspan></text>
+    <text
        sodipodi:linespacing="125%"
        id="text5104"
        y="27.28607"
        x="25.962608"
        style="font-size:20px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:center;line-height:125%;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#1a1a1a;fill-opacity:1;stroke:none;font-family:Sans;-inkscape-font-specification:Sans"
-       xml:space="preserve"><svg:tspan
+       xml:space="preserve"><tspan
          y="27.28607"
          x="25.962608"
          id="value"
-         sodipodi:role="line">0</svg:tspan></svg:text>
-    <svg:text
+         sodipodi:role="line">0</tspan></text>
+    <text
        sodipodi:linespacing="125%"
        id="text5106"
        y="38.902164"
        x="25.957726"
        style="font-size:10px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:center;line-height:125%;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#4d4d4d;fill-opacity:1;stroke:none;font-family:Sans;-inkscape-font-specification:Sans"
-       xml:space="preserve"><svg:tspan
+       xml:space="preserve"><tspan
          y="38.902164"
          x="25.957726"
          id="unit"
-         sodipodi:role="line">%</svg:tspan></svg:text>
-    <svg:text
+         sodipodi:role="line">%</tspan></text>
+    <text
        sodipodi:linespacing="125%"
        id="text5108"
        y="-20.848358"
        x="-28.750261"
        style="font-size:10px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;text-anchor:start;fill:#4d4d4d;fill-opacity:1;stroke:none;font-family:Arial;-inkscape-font-specification:Arial"
-       xml:space="preserve"><svg:tspan
+       xml:space="preserve"><tspan
          y="-20.848358"
          x="-28.750261"
          id="med"
          sodipodi:role="line"
-         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;text-anchor:start;font-family:Sans;-inkscape-font-specification:Sans">50</svg:tspan></svg:text>
-  </svg:g>
-  <svg:g
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;text-anchor:start;font-family:Sans;-inkscape-font-specification:Sans">50</tspan></text>
+  </g>
+  <g
      id="hand">
-    <svg:path
+    <path
        style="fill:#1a1a1a;fill-opacity:1;stroke:none"
        d="m 48,50 c 0,13.34999 2,42 2,42 0,0 2,-28.65001 2,-42 0,-3 -4,-3 -4,0 z"
        id="path5012"
        inkscape:connector-curvature="0"
        transform="translate(-50,-50)"
-       sodipodi:nodetypes="scss"/>
-  </svg:g>
-</svg:svg>
+       sodipodi:nodetypes="scss" />
+  </g>
+</svg>
diff --git a/vfd-backend/public/stylesheets/main.css b/vfd-backend/public/stylesheets/main.css
index f335da8..295bc03 100644
--- a/vfd-backend/public/stylesheets/main.css
+++ b/vfd-backend/public/stylesheets/main.css
@@ -37,50 +37,30 @@ nav.side {
     padding: 10px;
 }
 
-.status {
-    font-size: 25px;
-    font-family: ds-digi;
-}
-      
-.status.error {
-    color: #ff0000;
-    animation-name: blinker;
-    animation-duration: 1s;
-    animation-timing-function: linear;
-    animation-iteration-count: infinite;
-
-    -webkit-animation-name: blinker;
-    -webkit-animation-duration: 1s;
-    -webkit-animation-timing-function: linear;
-    -webkit-animation-iteration-count: infinite;
-}
-
-.status.critical {
-    animation-name: blinker;
-    animation-duration: 1s;
-    animation-timing-function: linear;
-    animation-iteration-count: infinite;
-
-    -webkit-animation-name: blinker;
-    -webkit-animation-duration: 1s;
-    -webkit-animation-timing-function: linear;
-    -webkit-animation-iteration-count: infinite;
-}
-
-@-moz-keyframes blinker {  /* Decimal not necessary, 0 and 1 is enough */
-    0% { opacity: 1.0; }
-    50% { opacity: 0.0; }
-    100% { opacity: 1.0; }
+.heartbeat{
+    color: rgba(165, 25, 25, 1);
+    animation: heartbeat 1s linear;
+    opacity: 0;
 }
 
-@-webkit-keyframes blinker {  
-    0% { opacity: 1.0; }
-    50% { opacity: 0.0; }
-    100% { opacity: 1.0; }
+@keyframes heartbeat {
+    0% {
+        transform: scale(1);
+        opacity: 1;
+    }
+    25% {
+        transform: scale(1.3);
+    }
+    50% {
+        transform: scale(1);
+    }
+    75% {
+        transform: scale(1.3);
+        opacity: 1;
+    }
+    100% {
+        transform: scale(1);
+        opacity: 0;
+    }
 }
 
-@keyframes blinker {  
-    0% { opacity: 1.0; }
-    50% { opacity: 0.0; }
-    100% { opacity: 1.0; }
-}
\ No newline at end of file