icon stuff

client/assets/styles/instance.less

@@ -287,66 +287,80 @@
     flex: 1 0 100%;
 }
 
+// .equipping {
+//     position: relative;
+// }
+
+// .equipping::before {
+//     content: '';
+//     position: absolute;
+//     top: 2px;
+//     left: 50%;
+//     width: 100%;
+//     height: 2px;
+//     transform-origin: center;
+//     background-color: whitesmoke;
+//     animation: equipping-skill 2s infinite ease-out alternate;
+//     opacity: 0;
+// }
+
+// .equipping::after {
+//     content: '';
+//     position: absolute;
+//     bottom: 2px;
+//     left: 50%;
+//     width: 100%;
+//     height: 2px;
+//     transform-origin: center;
+//     background-color: whitesmoke;
+//     animation: equipping-skill 2s infinite ease-out alternate;
+//     opacity: 0;
+//     animation-delay: 0.75s
+// }
+
+// @keyframes equipping-skill {
+//     from {
+//         transform: translate(-50%, 0) scaleX(0);
+//     }
+
+//     to {
+//         transform: translate(-50%, 0) scaleX(0.75);
+//         opacity: 1;
+//     }
+// }
+
+// .equip-spec {
+//     position: relative;
+//     stroke: #333;
+// }
+
+// .equip-spec::after {
+//     content: '';
+//     position: absolute;
+//     bottom: 2px;
+//     left: 50%;
+//     width: 100%;
+//     height: 2px;
+//     transform-origin: center;
+//     background-color: whitesmoke;
+//     animation: equipping-skill 2s infinite ease-out alternate;
+//     opacity: 0;
+// }
+
 .equipping {
-  position: relative;
+    animation: equipping 2s infinite ease-in-out alternate;
 }
 
-.equipping::before {
-    content: '';
-    position: absolute;
-    top: 2px;
-    left: 50%;
-    width: 100%;
-    height: 2px;
-    transform-origin: center;
-    background-color: whitesmoke;
-    animation: equipping-skill 2s infinite ease-out alternate;
-    opacity: 0;
-}
-
-.equipping::after {
-    content: '';
-    position: absolute;
-    bottom: 2px;
-    left: 50%;
-    width: 100%;
-    height: 2px;
-    transform-origin: center;
-    background-color: whitesmoke;
-    animation: equipping-skill 2s infinite ease-out alternate;
-    opacity: 0;
-    animation-delay: 0.75s
-}
-
-@keyframes equipping-skill {
+@keyframes equipping {
     from {
-        transform: translate(-50%, 0) scaleX(0);
+        border-color: #444;
     }
 
     to {
-        transform: translate(-50%, 0) scaleX(0.75);
-        opacity: 1;
+        border-color: whitesmoke;
     }
 }
 
-.equip-spec {
-    position: relative;
-    stroke: #333;
-}
-
-.equip-spec::after {
-    content: '';
-    position: absolute;
-    bottom: 2px;
-    left: 50%;
-    width: 100%;
-    height: 2px;
-    transform-origin: center;
-    background-color: whitesmoke;
-    animation: equipping-skill 2s infinite ease-out alternate;
-    opacity: 0;
-}
-
 .thresholds {
     display: flex;
     flex-flow: column;

client/assets/styles/vbox.less

@@ -78,9 +78,18 @@
             background: @white;
             border: 1px solid @white;
 
+            // overwrite the classes on white svg elements
             ellipse.white {
                 stroke: black;
             }
+
+            rect.white {
+                stroke: black;
+            }
+
+            polygon.white {
+                stroke: black;
+            }
         }
     }