Multiple UI changes

5 files changed, 28 insertions, 13 deletions

diff --git a/web/sass-files/sass/partials/_base.scss b/web/sass-files/sass/partials/_base.scss
index c286927a2..2830026c9 100644
--- a/web/sass-files/sass/partials/_base.scss
+++ b/web/sass-files/sass/partials/_base.scss
@@ -133,9 +133,6 @@ a:focus, a:hover {
   &.no-resize {
     resize: none;
   }
-  &.min-height {
-    min-height: 100px;
-  }
 }
 
 .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss
index a49a98952..8f25f58cd 100644
--- a/web/sass-files/sass/partials/_responsive.scss
+++ b/web/sass-files/sass/partials/_responsive.scss
@@ -275,6 +275,14 @@
     }
 }
 @media screen and (max-width: 768px) {
+    .form-control {
+        &.min-height {
+            min-height: 100px;
+        }
+    }
+    .gif-div {
+        max-width: 100%;
+    }
     .tip-div {
         left: 15px;
         right: auto;
@@ -460,7 +468,7 @@
             }
         }
         .settings-table {
-            .nav {
+            .nav, .nav.absolute {
                 position: relative;
                 top: auto;
                 width: 100%;
diff --git a/web/sass-files/sass/partials/_settings.scss b/web/sass-files/sass/partials/_settings.scss
index fbbd07485..96a6cf2ab 100644
--- a/web/sass-files/sass/partials/_settings.scss
+++ b/web/sass-files/sass/partials/_settings.scss
@@ -72,6 +72,10 @@
             position: fixed;
             top: 57px;
             width: 179px;
+            &.absolute {
+                position: absolute;
+                top: 0;
+            }
         }
         .security-links {
             margin-right: 20px;
diff --git a/web/sass-files/sass/partials/_sidebar--right.scss b/web/sass-files/sass/partials/_sidebar--right.scss
index c954b03d8..a4267294c 100644
--- a/web/sass-files/sass/partials/_sidebar--right.scss
+++ b/web/sass-files/sass/partials/_sidebar--right.scss
@@ -80,13 +80,18 @@
     }
     .sidebar--right__subheader {
         font-size: 1em;
-        text-transform: uppercase;
-        color: #999;
-        font-weight: 400;
-        color: #888;
-        height: 44px;
-        line-height: 44px;
-        padding: 0 1em;
+        padding: 1em 1em 0;
+        h4 {
+            font-size: 1em;
+        }
+        ul {
+            @include opacity(0.7);
+            padding: 10px 0 0 30px;
+        }
+        li {
+            font-size: 0.95em;
+            padding-bottom: 10px;
+        }
     }
 }
 
diff --git a/web/sass-files/sass/partials/_tutorial.scss b/web/sass-files/sass/partials/_tutorial.scss
index 42183d599..70216aa97 100644
--- a/web/sass-files/sass/partials/_tutorial.scss
+++ b/web/sass-files/sass/partials/_tutorial.scss
@@ -146,11 +146,12 @@
     text-align: center;
     width: 100%;
     display: table;
+    height: 100%;
     .tutorial__content {
         display: table-cell;
         vertical-align: middle;
         padding-bottom: 100px;
-        padding: 0 40px;
+        padding: 20px 40px 40px;
         .tutorial__steps {
             max-width: 310px;
             min-height: 420px;
@@ -176,7 +177,7 @@
         width: 9px;
         height: 9px;
         @include border-radius(9px);
-        @include opacity(0.1);
+        @include opacity(0.2);
         background: #000;
         display: inline-block;
         margin: 0 5px;