2 files changed, 42 insertions, 19 deletions
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index b0136426..08420c86 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -4,21 +4,40 @@
   // a bit of a hack to allow scrolling below notifications
   padding-bottom: 15em;
 
+  .panel {
+    background: $fallback--bg;
+    background: var(--bg, $fallback--bg)
+  }
+
+  .panel-body {
+    border-color: $fallback--border;
+    border-color: var(--border, $fallback--border)
+  }
+
   .panel-heading {
     // force the text to stay centered, while keeping
     // the button in the right side of the panel heading
     position: relative;
+    background: $fallback--btn;
+    background: var(--btn, $fallback--btn);
+    color: $fallback--faint;
+    color: var(--faint, $fallback--faint);
     .read-button {
       position: absolute;
       right: 0.7em;
       height: 1.8em;
       line-height: 100%;
+      background-color: $fallback--btn;
+      background-color: var(--btn, $fallback--btn);
+      color: $fallback--faint;
+      color: var(--faint, $fallback--faint);
     }
   }
 
   .unseen-count {
     display: inline-block;
-    background-color: rgba(255, 16, 8, 0.8);
+    background-color: $fallback--cRed;
+    background-color: var(--cRed, $fallback--cRed);
     text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);
     min-width: 1.3em;
     border-radius: 1.3em;
@@ -27,6 +46,7 @@
     font-size: 0.9em;
     text-align: center;
     line-height: 1.3em;
+    padding: 1px;
   }
 
   .notification {
@@ -61,6 +81,10 @@
       flex: 1;
     }
 
+    time {
+      white-space: nowrap;
+    }
+
     .notification-right {
       flex: 1;
       padding-left: 0.8em;
@@ -86,19 +110,24 @@
       }
 
       .icon-retweet.lit {
-        color: $green;
+        color: $fallback--cGreen;
+        color: var(--cGreen, $fallback--cGreen);
       }
 
       .icon-user-plus.lit {
-        color: $blue;
+        color: $fallback--cBlue;
+        color: var(--cBlue, $fallback--cBlue);
       }
 
       .icon-reply.lit {
-        color: $blue;
+        color: $fallback--cBlue;
+        color: var(--cBlue, $fallback--cBlue);
       }
 
       .icon-star.lit {
         color: orange;
+        color: $fallback--cOrange;
+        color: var(--cOrange, $fallback--cOrange);
       }
 
       .status-content {
@@ -126,7 +155,6 @@
 
     &:last-child {
       border-bottom: none;
-      border-radius: 0 0 10px 10px;
     }
   }
 
@@ -140,16 +168,10 @@
     }
   }
 
-  .notification-gradient {
-    position: absolute;
-    width: 100%;
-    height: 4em;
-    margin-top:8em;
-  }
-
   .unseen {
-    border-left: 4px solid rgba(255, 16, 8, 0.75);
-    padding-left: 0px;
+    border-left: 4px solid $fallback--cRed;
+    border-left: 4px solid var(--cRed, $fallback--cRed);
+    padding-left: 6px;
   }
 }
 
@@ -158,7 +180,8 @@
     margin-top: 0.3em;
     width: 32px;
     height: 32px;
-    border-radius: 50%;
+    border-radius: $fallback--avatarAltRadius;
+    border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
     overflow: hidden;
     line-height: 0;
 
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 71fd2604..f01234d3 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="notifications">
-    <div class="panel panel-default base00-background">
-      <div class="panel-heading base02-background base04">
+    <div class="panel panel-default">
+      <div class="panel-heading">
         <span class="unseen-count" v-if="unseenCount">{{unseenCount}}</span>
         {{$t('notifications.notifications')}}
-        <button v-if="unseenCount" @click.prevent="markAsSeen" class="base04 base02-background read-button">{{$t('notifications.read')}}</button>
+        <button v-if="unseenCount" @click.prevent="markAsSeen" class="read-button">{{$t('notifications.read')}}</button>
       </div>
-      <div class="panel-body base03-border">
+      <div class="panel-body">
         <div v-for="notification in visibleNotifications" :key="notification" class="notification" :class='{"unseen": !notification.seen}'>
           <notification :notification="notification"></notification>
         </div>