Dark theme tweaks

* Fixes hourglasses
* Fix delivered status icon
* Other changes aiming for more consistency of visual structure
  between light and dark themes.
* Restores left pane header focus/transition effect.

images/x_white.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="white"><path d="M38 12.83L35.17 10 24 21.17 12.83 10 10 12.83 21.17 24 10 35.17 12.83 38 24 26.83 35.17 38 38 35.17 26.83 24z"/></svg>

stylesheets/android-dark.scss

@@ -10,18 +10,21 @@ $text-dark: #CCCCCC;
     border-color: $grey-dark;
   }
   #header {
-    background-color: $grey-dark;
-    color: $text-dark;
+    background-color: $blue;
+    color: white;
     transition: background-color 0.5s;
     &.inactive {
       background-color: $grey-dark;
       color: $text-dark;
     }
   }
-  .message-detail, .message-container, .conversation, .modal .content,
-  .discussion-container, .attachment-previews {
+  .message-detail, .message-container, .conversation,
+  .discussion-container {
     background-color: $grey-dark_l3;
   }
+  .modal .content {
+    background-color: $grey-dark;
+  }
   .lightbox .content {
     background-color: rgba(0, 0, 0, 0);
   }
@@ -37,9 +40,9 @@ $text-dark: #CCCCCC;
     }
   }
   .flex {
-    background-color: $grey-dark_l2;
+    background-color: $grey-dark_l3;
     .send-message {
-      background-color: $grey-dark_l2;
+      background-color: $grey-dark_l3;
       color: $text-dark;
     }
   }
@@ -73,6 +76,10 @@ $text-dark: #CCCCCC;
     display: inline-block;
     @include color-svg('/images/check.svg', white);
   }
+  .delivered .status {
+    display: inline-block;
+    @include color-svg('/images/double-check.svg', white);
+  }
   .paperclip:before {
     content: '';
     display: inline-block;
@@ -82,7 +89,7 @@ $text-dark: #CCCCCC;
     transform: rotateZ(-45deg);
   }
   .scrollable {
-    background-color: $grey-dark_l3;
+    background-color: $grey-dark_l2;
     .conversation-list-item {
       background-color: $grey-dark_l3;
       color: $text-dark;
@@ -91,11 +98,18 @@ $text-dark: #CCCCCC;
   .bottom-bar {
     min-height: 10px;
     background-color: $grey-dark_l2;
+    form.send {
+      background: $grey-dark_l3;
+    }
   }
   .search {
-    background-color: $grey-dark_l2;
+    background-color: $grey-dark_l3;
     border-color: $grey-dark_l2;
     @include invert-text-color;
+    &::-webkit-search-cancel-button {
+      background: url('/images/x_white.svg') no-repeat center;
+      background-size: cover;
+    }
   }
   .bubble {
     padding: 9px 12px;
@@ -106,9 +120,13 @@ $text-dark: #CCCCCC;
   .outgoing .bubble {
     background-color: $grey-dark;
     @include invert-text-color;
+    color: $text-dark;
   }
-  .outgoing .hourglass, .incoming .hourglass {
-    @include hourglass(#000);
+  .outgoing .hourglass {
+    @include hourglass(#999);
+  }
+  .incoming .hourglass {
+    @include hourglass(#fff);
   }
 
   .incoming .bubble {
@@ -130,17 +148,12 @@ $text-dark: #CCCCCC;
   button.back {
     @include header-icon-white('/images/back.svg');
   }
-  button.grey {
-    background-color: $grey-dark;
-    color: $text-dark;
-    border-color: $grey-dark_l2;
-  }
 
   ::-webkit-scrollbar-thumb {
-    background: rgba(120,120,120,0.15);
+    background: rgba(255,255,255,0.15);
 
     &:hover {
-      background: rgba(120,120,120,0.25);
+      background: rgba(255,255,255,0.25);
     }
   }
   ::-webkit-scrollbar-track {

stylesheets/manifest.css

@@ -1702,15 +1702,17 @@ li.entry .error-icon-container {
   .android-dark hr {
     border-color: #333333; }
   .android-dark #header {
-    background-color: #333333;
-    color: #CCCCCC;
+    background-color: #2090ea;
+    color: white;
     transition: background-color 0.5s; }
     .android-dark #header.inactive {
       background-color: #333333;
       color: #CCCCCC; }
-  .android-dark .message-detail, .android-dark .message-container, .android-dark .conversation, .android-dark .modal .content,
-  .android-dark .discussion-container, .android-dark .attachment-previews {
+  .android-dark .message-detail, .android-dark .message-container, .android-dark .conversation,
+  .android-dark .discussion-container {
     background-color: #171717; }
+  .android-dark .modal .content {
+    background-color: #333333; }
   .android-dark .lightbox .content {
     background-color: transparent; }
   .android-dark .key-verification .key {
@@ -1722,9 +1724,9 @@ li.entry .error-icon-container {
     .android-dark .menu-list li:hover {
       background-color: #333333; }
   .android-dark .flex {
-    background-color: #292929; }
+    background-color: #171717; }
     .android-dark .flex .send-message {
-      background-color: #292929;
+      background-color: #171717;
       color: #CCCCCC; }
   .android-dark .conversation-stack .inactive .conversation-header {
     background-color: #333333;
@@ -1780,6 +1782,11 @@ li.entry .error-icon-container {
     -webkit-mask: url("/images/check.svg") no-repeat center;
     -webkit-mask-size: 100%;
     background-color: white; }
+  .android-dark .delivered .status {
+    display: inline-block;
+    -webkit-mask: url("/images/double-check.svg") no-repeat center;
+    -webkit-mask-size: 100%;
+    background-color: white; }
   .android-dark .paperclip:before {
     content: '';
     display: inline-block;
@@ -1790,52 +1797,80 @@ li.entry .error-icon-container {
     background-color: white;
     transform: rotateZ(-45deg); }
   .android-dark .scrollable {
-    background-color: #171717; }
+    background-color: #292929; }
     .android-dark .scrollable .conversation-list-item {
       background-color: #171717;
       color: #CCCCCC; }
   .android-dark .bottom-bar {
     min-height: 10px;
     background-color: #292929; }
+    .android-dark .bottom-bar form.send {
+      background: #171717; }
   .android-dark .search {
-    background-color: #292929;
+    background-color: #171717;
     border-color: #292929;
     color: white; }
     .android-dark .search::selection {
       background: white;
       color: #454545; }
+    .android-dark .search::-webkit-search-cancel-button {
+      background: url("/images/x_white.svg") no-repeat center;
+      background-size: cover; }
   .android-dark .bubble {
     padding: 9px 12px;
     border-radius: 5px;
     box-shadow: 0 3px 3px -4px black; }
   .android-dark .outgoing .bubble {
     background-color: #333333;
-    color: white; }
+    color: white;
+    color: #CCCCCC; }
     .android-dark .outgoing .bubble::selection {
       background: white;
       color: #454545; }
-  .android-dark .outgoing .hourglass, .android-dark .incoming .hourglass {
+  .android-dark .outgoing .hourglass {
     display: inline-block;
     position: relative;
     -webkit-mask: url("/images/hourglass_full.svg") no-repeat center;
     -webkit-mask-size: 100%;
     background-color: transparent;
     background-size: 100%; }
-    .android-dark .outgoing .hourglass, .android-dark .outgoing .hourglass .sand, .android-dark .outgoing .hourglass:before, .android-dark .outgoing .hourglass:after, .android-dark .incoming .hourglass, .android-dark .incoming .hourglass .sand, .android-dark .incoming .hourglass:before, .android-dark .incoming .hourglass:after {
+    .android-dark .outgoing .hourglass, .android-dark .outgoing .hourglass .sand, .android-dark .outgoing .hourglass:before, .android-dark .outgoing .hourglass:after {
       width: 13px;
       height: 11px; }
-    .android-dark .outgoing .hourglass .sand, .android-dark .outgoing .hourglass:before, .android-dark .outgoing .hourglass:after, .android-dark .incoming .hourglass .sand, .android-dark .incoming .hourglass:before, .android-dark .incoming .hourglass:after {
+    .android-dark .outgoing .hourglass .sand, .android-dark .outgoing .hourglass:before, .android-dark .outgoing .hourglass:after {
       content: '';
       display: inline-block;
       position: absolute;
       top: 0;
       left: 0; }
-    .android-dark .outgoing .hourglass .sand, .android-dark .incoming .hourglass .sand {
-      background: #000; }
-    .android-dark .outgoing .hourglass:after, .android-dark .incoming .hourglass:after {
+    .android-dark .outgoing .hourglass .sand {
+      background: #999; }
+    .android-dark .outgoing .hourglass:after {
+      -webkit-mask: url("/images/hourglass_empty.svg") no-repeat center;
+      -webkit-mask-size: 100%;
+      background-color: #999; }
+  .android-dark .incoming .hourglass {
+    display: inline-block;
+    position: relative;
+    -webkit-mask: url("/images/hourglass_full.svg") no-repeat center;
+    -webkit-mask-size: 100%;
+    background-color: transparent;
+    background-size: 100%; }
+    .android-dark .incoming .hourglass, .android-dark .incoming .hourglass .sand, .android-dark .incoming .hourglass:before, .android-dark .incoming .hourglass:after {
+      width: 13px;
+      height: 11px; }
+    .android-dark .incoming .hourglass .sand, .android-dark .incoming .hourglass:before, .android-dark .incoming .hourglass:after {
+      content: '';
+      display: inline-block;
+      position: absolute;
+      top: 0;
+      left: 0; }
+    .android-dark .incoming .hourglass .sand {
+      background: #fff; }
+    .android-dark .incoming .hourglass:after {
       -webkit-mask: url("/images/hourglass_empty.svg") no-repeat center;
       -webkit-mask-size: 100%;
-      background-color: #000; }
+      background-color: #fff; }
   .android-dark .incoming .bubble .sender, .android-dark .incoming .bubble .content, .android-dark .incoming .bubble .body, .android-dark .incoming .bubble .meta, .android-dark .incoming .bubble a {
     color: white; }
     .android-dark .incoming .bubble .sender::selection, .android-dark .incoming .bubble .content::selection, .android-dark .incoming .bubble .body::selection, .android-dark .incoming .bubble .meta::selection, .android-dark .incoming .bubble a::selection {
@@ -1867,14 +1902,10 @@ li.entry .error-icon-container {
       -webkit-mask: url("/images/back.svg") no-repeat center;
       -webkit-mask-size: 100%;
       background-color: white; }
-  .android-dark button.grey {
-    background-color: #333333;
-    color: #CCCCCC;
-    border-color: #292929; }
   .android-dark ::-webkit-scrollbar-thumb {
-    background: rgba(120, 120, 120, 0.15); }
+    background: rgba(255, 255, 255, 0.15); }
     .android-dark ::-webkit-scrollbar-thumb:hover {
-      background: rgba(120, 120, 120, 0.25); }
+      background: rgba(255, 255, 255, 0.25); }
   .android-dark ::-webkit-scrollbar-track {
     background-color: #292929; }