daydream

commit ded0cad3a527b5a5d292a3633118546fc3ac9a32
parent 9ca77d23a715e1c0e38e5095930f5395c876da9f
Author: Marcel <mtrnord1@gmail.com>
Date:   Sat, 11 Jul 2020 18:13:22 +0200

Improve shadows

Took 12 minutes

Diffstat:
M
static/custom-css.scss
 | 
29
++++++++++-------------------

1 file changed, 10 insertions(+), 19 deletions(-)
diff --git a/static/custom-css.scss b/static/custom-css.scss
@@ -350,16 +350,16 @@ body {
 .room-title {
   width: 100%;
   overflow: hidden;
-  padding-bottom: 1.625rem;
+  padding-bottom: 2.5rem;
   flex: 0 1 5.875rem;
 
   div {
     width: 100%;
     height: 100%;
 
-    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2), 0 4px 5px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.14);
-    -moz-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2), 0 4px 5px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.14);
-    -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2), 0 4px 5px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.14);
+    box-shadow: 0 0 0.0625rem rgba(0, 0, 0, 0.04), 0 0.125rem 0.375rem rgba(0, 0, 0, 0.04), 0 1rem 1.5rem rgba(0, 0, 0, 0.06);
+    -moz-box-shadow: 0 0 0.0625rem rgba(0, 0, 0, 0.04), 0 0.125rem 0.375rem rgba(0, 0, 0, 0.04), 0 1rem 1.5rem rgba(0, 0, 0, 0.06);
+    -webkit-box-shadow: 0 0 0.0625rem rgba(0, 0, 0, 0.04), 0 0.125rem 0.375rem rgba(0, 0, 0, 0.04), 0 1rem 1.5rem rgba(0, 0, 0, 0.06);
 
     padding-left: 9.375rem;
     padding-top: 1.1875rem;
@@ -378,6 +378,7 @@ body {
   flex: 0 1 4.375rem;
   display: block !important;
   padding-right: 40px;
+  border-top: 2px solid #4D4D4D;
 }
 
 .message-scrollarea {
@@ -450,9 +451,9 @@ body {
         z-index: 1;
 
         width: 100%;
-        box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2), 0 4px 5px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.14);
-        -moz-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2), 0 4px 5px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.14);
-        -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2), 0 4px 5px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.14);
+        box-shadow: 0 0 0.0625rem rgba(0, 0, 0, 0.04), 0 0.125rem 0.375rem rgba(0, 0, 0, 0.04), 0 1rem 1.5rem rgba(0, 0, 0, 0.06);
+        -moz-box-shadow: 0 0 0.0625rem rgba(0, 0, 0, 0.04), 0 0.125rem 0.375rem rgba(0, 0, 0, 0.04), 0 1rem 1.5rem rgba(0, 0, 0, 0.06);
+        -webkit-box-shadow: 0 0 0.0625rem rgba(0, 0, 0, 0.04), 0 0.125rem 0.375rem rgba(0, 0, 0, 0.04), 0 1rem 1.5rem rgba(0, 0, 0, 0.06);
 
         .material-icons {
           margin-top: 0.625rem;
@@ -538,17 +539,7 @@ body {
     height: 4.375rem;
     width: 100%;
     position: relative;
-
-    &::after {
-      content: '';
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      top: 0;
-      left: 0;
-      z-index: -1;
-      box-shadow: -10px -1px 10px rgba(0, 0, 0, 0.2), -10px -4px 5px rgba(0, 0, 0, 0.12), -10px -2px 4px rgba(0, 0, 0, 0.14);
-    }
+    border-top: 2px solid #4D4D4D;
 
     .toggleWrapper {
       height: 100%;
@@ -587,7 +578,7 @@ body {
 
       img.avatar {
         border-radius: 50%;
-        box-shadow: 0 1px 8px rgba(0, 0, 0, 0.2), 0 3px 4px rgba(0, 0, 0, 0.12), 0 3px 3px rgba(0, 0, 0, 0.14);
+        box-shadow: 0 0 1px rgba(0, 0, 0, 0.04), 0 2px 6px rgba(0, 0, 0, 0.04), 0 10px 20px rgba(0, 0, 0, 0.04);
       }
 
       .avatar {