adding glorious Christmas CSS to control GUI

css/index.css

+
+
+.md-warn{
+    color: rgb(244,67,54);
+    font-weight: 500;
+}
+
+@font-face {
+    font-family: 'ar_destine';
+    src: url('../font/ar_destine/ardestine-webfont.eot');
+    src: url('../font/ar_destine/ardestine-webfont.eot?#iefix') format('embedded-opentype'),
+        url('../font/ar_destine/ardestine-webfont.woff2') format('woff2'),
+        url('../font/ar_destine/ardestine-webfont.woff') format('woff'),
+        url('../font/ar_destine/ardestine-webfont.ttf') format('truetype'),
+        url('../font/ar_destine/ardestine-webfont.svg#ar_destineregular') format('svg');
+    font-weight: normal;
+    font-style: normal;
+}
+
+body {
+    -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
+    -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
+    -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
+   font-family: 'Mountains of Christmas', cursive, bold;
+
+}
+
+md-toolbar{
+    background-color: ##106CC8 !important;
+}
+
+md-toolbar h2{
+    font-family: "ar_destine";
+    font-size: 40px !important;
+    color: #FFF;
+}
+
+md-toolbar h2 span{
+    margin: 0 3px;
+}
+
+.notification{
+    overflow: initial;
+}
+
+.notification img{
+    height: 34px;
+}
+
+.notification img.pins{
+    height: 20px;
+    float: right;
+    top: -20px;
+    position: relative;
+}
+
+.notification img.pins.blind{
+    -webkit-animation-name: blind;
+    -webkit-animation-duration: 2s;
+    -webkit-animation-iteration-count: infinite;
+
+}
+
+@-webkit-keyframes blind {
+    0%   {opacity: 0;}
+    50%  {opacity: 1;}
+    100% {opacity: 0;}
+}
+
+.center{
+    text-align: center;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translateX(-50%) translateY(-50%);
+}
+
+.center p{
+    width: 100%;
+    text-align: center;
+}
+
+footer{
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: #FF0;
+}
+
+footer span.deviceState{
+    color: red;
+}
+footer span.deviceState.ready{
+    color: green;
+}
+
+footer span.wifi{
+    color: green;
+}
+
+md-content{
+    position: absolute;
+    top: 64px;
+    right: 0px;
+    bottom: 0px;
+    left: 0px;
+}
+
+#rightJoystickOverlay, #leftJoystickOverlay{
+    position: absolute;
+    z-index: 10;
+    width: 50%;
+    top: 0px;
+    left: 0px;
+    bottom: 0px;
+}
+
+#rightJoystickOverlay{
+    left: auto;
+    right: 0px;
+}
+
+
+.joystickContainer{
+    position: absolute;
+    z-index: 9;
+    bottom: 0px;
+    width: 150px;
+    height: 150px;
+    background-color: #FF0;
+    border-radius: 75px;
+    font-family: 'Mountains of Christmas', cursive, bold;
+}
+
+.joystickBall{
+    width: 30px;
+    height: 30px;
+    background-color: #F00;
+    border-radius: 15px;
+}