add read bubble

src/ui/css/style.scss

@@ -67,17 +67,33 @@ body {
         }
     }
 
-    .unread {
+    @mixin read-bubble {
         position: absolute;
         margin-top: 1.85em;
         margin-left: 0.5em;
         width: 0.9em;
         height: 0.9em;
         border-radius: 50%;
+    }
+    @mixin read-bubble-grey {
+            background: $lightgrey-color;
+            box-shadow: inset 1px 1px 1px $lightgrey-box-shadow-color;
+    }
+    @mixin read-bubble-blue {
         background: $blue-color;
         box-shadow: inset 0.5px 1px 1px $blue-box-shadow-color;
     }
 
+    .unread {
+        @include read-bubble;
+        @include read-bubble-blue;
+    }
+
+    .read {
+        @include read-bubble;
+        @include read-bubble-grey;
+    }
+
     li {
         background-color: white;
         margin: 8px 0;
@@ -118,8 +134,7 @@ body {
         @include marked;
 
         .unread {
-            background: $lightgrey-color;
+            @include read-bubble-grey;
-            box-shadow: inset 1px 1px 1px $lightgrey-box-shadow-color;
         }
     }
 }

src/ui/index.html

@@ -34,21 +34,25 @@
           <p class="text-preview">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.</p>
         </li>
         <li>
+          <div class="read"></div>
           <p class="from">Max Mustermann</p>
           <p class="subject">Welcome Nico</p>
           <p class="text-preview">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.</p>
         </li>
         <li>
+          <div class="read"></div>
           <p class="from">Max Mustermann</p>
           <p class="subject">Welcome Nico</p>
           <p class="text-preview">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.</p>
         </li>
         <li>
+          <div class="read"></div>
           <p class="from">Max Mustermann</p>
           <p class="subject">Welcome Nico</p>
           <p class="text-preview">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.</p>
         </li>
         <li>
+          <div class="read"></div>
           <p class="from">Max Mustermann</p>
           <p class="subject">Welcome Nico</p>
           <p class="text-preview">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.</p>