mobile: first mobile ui attempts

src/styles/colors.less

@@ -23,3 +23,5 @@
 
 @bar_shadow: rgba(0,0,0,0.3) 0 2px 0, inset rgba(255, 255, 255, 0.05) 1px 1px;
 @dialog_shadow: rgba(0,0,0,0.3) 0 2px 0;
+
+@mobile_breakpoint: 768px;

src/styles/dialogs.less

@@ -22,6 +22,10 @@
     pointer-events: all;
   }
 
+  @media (max-width: @mobile_breakpoint) {
+    width: 100%;
+  }
+
 }
 
 .dialog-content {

src/styles/main.less

@@ -113,3 +113,7 @@ body {
 .pointer {
   cursor: pointer;
 }
+
+@media (max-width: @mobile_breakpoint) {
+  .desktop-only { display: none; }
+}

src/styles/panel.less

@@ -153,12 +153,23 @@
   background: #222222;
 }
 
+.panel-user {
+  z-index: 1;
+
+  @media (max-width: @mobile_breakpoint) {
+    flex-direction: column-reverse;
+
+    .control-sep {
+      opacity: 0;
+      height: 10px;
+    }
+  }
+}
+
 .control-dialog {
-  background: rgba(30, 30, 30, 0.95);
   position: absolute;
   right: 10px;
   bottom: 68px;
-  border-radius: @panel_radius;
   z-index: 3;
   color: white;
   box-sizing: border-box;
@@ -172,15 +183,38 @@
 
   &.control-dialog-big {
     min-width: 555px;
+
+    @media (max-width: @mobile_breakpoint) {
+      min-width: 100%;
+      max-width: 100%;
+      width: 100% !important;
+      left: 0;
+      padding: 0 10px;
+    }
   }
 
   &.control-dialog-medium {
     min-width: 460px;
+
+    @media (max-width: @mobile_breakpoint) {
+      min-width: 100%;
+      max-width: 100%;
+      width: 100% !important;
+      left: 0;
+      padding: 0 10px;
+    }
   }
+
 }
 
 .control-dialog-provider {
   width: 500px;
+
+  @media (max-width: @mobile_breakpoint) {
+    width: 100%;
+    left: 0;
+    padding: 0 10px;
+  }
 }
 
 .helper {
@@ -189,6 +223,10 @@
   font-weight: 200;
   font-size: 1em;
   display: flex;
+
+  background: #222222;
+  border-radius: @panel_radius;
+  box-shadow: @bar_shadow;
 }
 
 
@@ -387,6 +425,10 @@
   &.top-control {
     width: 150px;
     justify-content: flex-start;
+
+    @media (max-width: @mobile_breakpoint) {
+      width: 100px;
+    }
   }
 
   svg {

src/styles/user-button.less

@@ -18,6 +18,14 @@
 
   user-select: none;
   cursor: pointer;
+
+  @media (max-width: @mobile_breakpoint) {
+    width: 0;
+
+    .user-button-fields {
+      display: none;
+    }
+  }
 }
 
 .user-button-picture {
@@ -74,7 +82,11 @@
   border-radius: @panel_radius;
   padding: 0;
   box-sizing: border-box;
-  z-index: -1
+  z-index: -1;
+
+  @media (max-width: @mobile_breakpoint) {
+    left: 58px;
+  }
 }
 .user-panel-title {
   font-size: 20px;