Merge pull request #689 from threema-ch/css-fixes

Apply new scrollbar styling properties

src/sass/components/_scrollbars.scss

@@ -1,10 +1,18 @@
-// TODO: Prefixes
+// Webkit specific global styling
 
 ::-webkit-scrollbar {
-    width: 8px;
-    background-color: #fcfcfc;
+    width: 6px;
+    background-color: $scrollbar-color-bg;
     border: 1px solid #f9f9f9;
 }
+
 ::-webkit-scrollbar-thumb {
-    background-color: #ddd;
+    background-color: $scrollbar-color-thumb;
+}
+
+// Mixin for browsers that support the "CSS Scrollbars Module Level 1" draft
+
+@mixin scrollbar {
+    scrollbar-width: thin;  // Unfortunately Firefox does not support exact pixel values
+    scrollbar-color: $scrollbar-color-thumb $scrollbar-color-bg;
 }

src/sass/helpers/_colors.scss

@@ -9,8 +9,11 @@ $material-grey-dark: rgba(0, 0, 0, 0.87);
 $url-light-blue: #63a6cf;
 $work-blue: #3b84df;
 
-$dark-background-color: #F6F6F6;
-$bright-background-color: white;
+$dark-background-color: #f6f6f6;
+$light-background-color: #ffffff;
+
+$scrollbar-color-bg: $dark-background-color;
+$scrollbar-color-thumb: #ccc;
 
 $material-card-shadow: 0px 2px 5px 0px rgba(0,0,0,0.16),0px 2px 5px 0px rgba(0,0,0,0.23);
 

src/sass/sections/_compose_area.scss

@@ -1,5 +1,9 @@
 compose-area {
 
+    > div {
+        box-shadow: 0 -2px 4px -2px rgba(0, 0, 0, 0.2);
+    }
+
     > div:first-child {
         display: flex;
         flex-direction: row;
@@ -16,7 +20,7 @@ compose-area {
             &:nth-of-type(2) {
                 border: 1px solid $border-grey;
                 border-radius: $material-radius;
-                background-color: $bright-background-color;
+                background-color: $light-background-color;
                 flex-grow: 1;
                 overflow-x: hidden;
                 overflow-y: auto;

src/sass/sections/_conversation.scss

@@ -43,9 +43,12 @@
         justify-content: center;
         display: flex;
     }
+
     #conversation-chat {
         flex-grow: 1;
         overflow: auto;
+        overflow-y: scroll;
+        @include scrollbar;
     }
 
     #conversation-quote {

src/sass/sections/_navigation.scss

@@ -103,6 +103,7 @@
         font-weight: 300;
     }
 
+    @include scrollbar;
 }
 
 #navigation-conversations {