Multiple UI Improvements (#3038)

webapp/sass/components/_scrollbar.scss

@@ -29,3 +29,11 @@ body {
     @include border-radius(2px);
     @include alpha-property(background-color, $black, .5);
 }
+
+.scrollbar--view {
+    -ms-overflow-style: none;
+
+    .browser--ie & {
+        margin: 0 !important;
+    }
+}

webapp/sass/layout/_markdown.scss

@@ -55,18 +55,14 @@
 
 .post-code__language {
     @include opacity(0);
-    @include translate3d(0, 0, 0);
+    @include transition(opacity, .6s);
     background: #21586d;
-    border-radius: 0 .25em;
+    border-radius: 0 0 0 2px;
     color: $white;
     padding: 4px 10px 5px;
     position: absolute;
     right: 0;
     top: 0;
-    -webkit-transition: opacity 0.6s;
-    -moz-transition: opacity 0.6s;
-    -o-transition: opacity 0.6s;
-    transition: opacity 0.6s;
     z-index: 5;
 }
 

webapp/sass/layout/_post.scss

@@ -600,6 +600,12 @@ body.ios {
                 }
             }
 
+            .post__img {
+                img {
+                    display: none;
+                }
+            }
+
             .post__header {
                 height: 0;
                 margin: 0;
@@ -619,9 +625,11 @@ body.ios {
                 display: none;
             }
 
-            .post__img {
-                img {
-                    display: none;
+            &.same--user {
+                .post__img {
+                    img {
+                        display: none;
+                    }
                 }
             }
         }
@@ -718,11 +726,11 @@ body.ios {
     }
 
     .post__img {
-        width: 46px;
+        width: 42px;
 
         svg {
-            height: 36px;
-            width: 36px;
+            height: 32px;
+            width: 32px;
         }
 
         path {
@@ -731,9 +739,9 @@ body.ios {
 
         img {
             @include border-radius(50px);
-            height: 36px;
+            height: 32px;
             vertical-align: inherit;
-            width: 36px;
+            width: 32px;
         }
     }
 

webapp/sass/layout/_sidebar-left.scss

@@ -40,7 +40,7 @@
     }
 
     .dropdown-menu {
-        max-height: 400px;
+        max-height: 80vh;
         max-width: 200px;
         overflow-x: hidden;
         overflow-y: auto;
@@ -140,6 +140,12 @@
                 text-transform: uppercase;
             }
 
+            .divider {
+                & + .divider {
+                    display: none;
+                }
+            }
+
             > a {
                 border-radius: 0;
                 line-height: 1.5;

webapp/sass/responsive/_mobile.scss

@@ -1,6 +1,12 @@
 @charset 'UTF-8';
 
 @media screen and (max-width: 768px) {
+    .post-code__language {
+        @include opacity(.6);
+        @include transition(none);
+        display: block;
+    }
+
     .backstage-filters {
         display: block;
 
@@ -1024,3 +1030,11 @@
         }
     }
 }
+
+@media screen and (max-width: 320px) {
+    .tip-overlay {
+        &.tip-overlay--sidebar {
+            min-height: 440px;
+        }
+    }
+}

webapp/sass/routes/_settings.scss

@@ -146,10 +146,10 @@
                             @include appearance(none);
                             appearance: none;
                             padding-right: 25px;
+                        }
 
-                            &::ms-expand {
-                                display: none;
-                            }
+                        select::ms-expand {
+                            display: none;
                         }
 
                         &:before {

webapp/sass/routes/_signup.scss

@@ -26,6 +26,10 @@
             @include flex(1.3 0 0);
             padding-right: 80px;
 
+            img {
+                max-width: 450px;
+            }
+
             p {
                 color: lighten($black, 50%);
             }