styles

html-client/cryps.css

@@ -19,15 +19,29 @@ button, input {
     border-color: whitesmoke;
     border-radius: 0;
     letter-spacing: 0.25em;
+    box-sizing: border-box;
+
+    /*the transitions */
+    transition-property: box-shadow;
+    transition-duration: 0.5s;
+    transition-delay: 0;
+    transition-timing-function: ease;
 }
 
-/*colour necesary to bash skellington*/
 button:hover {
+    /*colour necesary to bash skellington*/
     color: whitesmoke;
-    animation: whiteglow 2000ms infinite;
     border-color: whitesmoke;
 }
 
+button.right:hover {
+    box-shadow: inset -0.5em 0 0 0 whitesmoke;
+}
+
+button.left:hover {
+    box-shadow: inset 0.5em 0 0 0 whitesmoke;
+}
+
 /*
     MENU
 */
@@ -51,7 +65,7 @@ button:hover {
     height: 100%;
     margin: 0.5em;
     box-sizing: border-box;
-    border-width: 2px solid whitesmoke;
+    border: 1px solid black;
 }
 
 .background {
@@ -91,62 +105,29 @@ button:hover {
     fill: none;
     stroke-width: 4px;
     stroke-dasharray: 121, 242;
-    animation: pulse 2s infinite linear;
+    animation: saw 2s infinite linear;
 }
 
-@keyframes pulse {
+@keyframes saw {
-  0% {
-    stroke-dashoffset: 363;
-  }
-  100% {
-    stroke-dashoffset: 0;
-  }
-}
-
-
-@keyframes whiteglow {
     0% {
-        box-shadow: 0 0 0px whitesmoke;
+        stroke-dashoffset: 363;
-    }
-    20% {
-        box-shadow: 0 0 20px whitesmoke;
-    }
-    60% {
-        box-shadow: 0 0 20px whitesmoke;
     }
     100% {
-        box-shadow: 0 0 0px whitesmoke;
+        stroke-dashoffset: 0;
-    }
-}
-
-@keyframes greenglow {
-    0% {
-        box-shadow: 0 0 -20px forestgreen;
-    }
-    100% {
-        box-shadow: 0 0 30px forestgreen;
-        color: forestgreen;
-        border-color: forestgreen;
-    }
-}
-
-@keyframes whiteblackglow {
-    0% {
-        box-shadow: 0 0 0px black;
-    }
-    100% {
-        background: whitesmoke;
-        color: black;
-        box-shadow: 0 0 -30px black;
     }
 }
 
 /*
     INSTANCE
 */
+
 .green-btn:hover {
-    animation: greenglow 2s ease 0s 1 normal forwards;
+    transition-property: all;
-    animation-iteration-count: 1;
+    transition-duration: 2s;
+    transition-timing-function: ease;
+    color: forestgreen;
+    border-color: forestgreen;
+    /*box-shadow: inset -0.5em 0 0 0 forestgreen;*/
 }
 
 .instance-btn {
@@ -185,7 +166,6 @@ button:hover {
 
 .vbox-btn:hover {
     color: black;
-    animation: whiteblackglow 2s ease 0s 1 normal forwards;
 }
 
 .vbox-table {
@@ -304,13 +284,7 @@ button:hover {
     flex: 1 1 60%;
 }
 
-.cryp-skill-btn.active {
-    animation: whiteblackglow 1s ease 0s 1 normal forwards;
-    animation-iteration-count: 1;
-}
-
 .cryp-skill-btn[disabled] {
-    animation: none;
     color: #333333;
 }
 

html-client/src/components/game.component.jsx

@@ -177,7 +177,7 @@ function GamePanel(props) {
             <div className="row">
                 <div className="three columns">
                     <button
-                        className="instance-btn instance-ui-btn glow-btn"
+                        className="instance-btn instance-ui-btn left"
                         onClick={quit}>
                         Back
                     </button>

html-client/src/components/instance.component.jsx

@@ -82,7 +82,7 @@ function InstanceComponent(args) {
             <div className="row">
                 <div className="three columns">
                     <button
-                        className="instance-btn instance-ui-btn glow-btn"
+                        className="instance-btn instance-ui-btn left"
                         onClick={quit}>
                         Menu
                     </button>

html-client/src/components/instance.list.component.jsx

@@ -8,20 +8,20 @@ function instanceList({ instances, setActiveInstance, sendInstanceJoin }) {
 
     const instanceJoin = (
         <button
-            className="instance-btn glow-btn"
+            className="instance-btn right"
             onClick={() => sendInstanceJoin()}>
             Join New Instance
         </button>
     );
 
-    const instancePanels = instances.map((instance) => {
+    const instancePanels = instances.map(instance => {
         const name = instance.instance === NULL_UUID
             ? 'Normal Mode'
             : `${instance.instance.substring(0, 5)}`;
 
         return (
             <button
-                className="instance-btn glow-btn"
+                className="instance-btn right"
                 key={instance.id}
                 onClick={() => setActiveInstance(instance)}>
                 {name}