rotary button style

src/js/app.js

@@ -236,6 +236,11 @@ module.exports = new Vue({
 
             return msgs;
         },
+
+        is_rotary_active: function() {
+            if(this.config.motors[2]['axis'] == 'Y') return false;
+            return true;
+        },
     },
 
     ready: function() {

src/pug/index.pug

@@ -89,9 +89,8 @@ html(lang="en")
               v-if="80 <= state.rpi_temp",
               title="Raspberry Pi temperature too high.")
           
-          .rotary
-            button(@click="toggle_rotary")
-              img(src="/images/rotary.svg", alt="rotary")
+          button.rotary(:class="is_rotary_active && 'active'", @click="toggle_rotary")
+            img(src="/images/rotary.svg", alt="rotary")
 
           .whitespace
 

src/stylus/style.styl

@@ -1029,6 +1029,22 @@ tt.save
     line-height 1.5
     white-space pre-line
   
+  .rotary
+    border none
+    background transparent
+    cursor pointer
+    width 100px
+    height 100px
+    border-radius 100px
+    margin 20px 20px 0 0
+    display flex
+    justify-content center
+    align-items center
+
+    &.active
+      border 1px solid #54ed54
+      fill #ccffcb
+
 .modal-mask
   position fixed
   z-index 9998