diff --git a/assets/components/header/notifications.vue b/assets/components/header/notifications.vue
index 37720346..1680d016 100644
--- a/assets/components/header/notifications.vue
+++ b/assets/components/header/notifications.vue
@@ -55,12 +55,14 @@
+
+
{{ formatDate(notification.scene.date, 'MMM D') }}
+
-
-
+
+
@@ -166,6 +170,10 @@ export default {
padding: .5rem;
fill: var(--shadow);
+ &:last-child {
+ padding: .5rem 1rem .5rem .5rem;
+ }
+
:hover {
fill: var(--primary);
cursor: pointer;
@@ -193,6 +201,7 @@ export default {
.notification {
display: block;
+ border-right: solid .5rem var(--shadow-touch);
margin: 0 0 -1px 0;
color: var(--text);
@@ -201,23 +210,28 @@ export default {
}
.icon {
- padding: 1rem;
+ padding: 1.3rem .5rem;
fill: var(--shadow-weak);
+ &:last-child {
+ padding: 1.3rem 1rem 1.3rem .5rem;
+ }
+
&:hover {
fill: var(--primary);
}
}
&:not(:last-child) {
- .notification-body,
- .icon {
- border-bottom: solid 1px var(--shadow-hint);
- }
+ border-bottom: solid 1px var(--shadow-hint);
}
&:hover {
- color: var(--primary);
+ background: var(--shadow-touch);
+
+ &:not(.unseen) {
+ border-right: solid .5rem var(--shadow-weak);
+ }
}
}
@@ -230,18 +244,17 @@ export default {
.notification-body {
flex-grow: 1;
- padding: .4rem 1rem .25rem .5rem;
+ padding: .4rem 0 0 0;
overflow: hidden;
}
.notification-row {
display: flex;
- align-items: center;
overflow: hidden;
+}
- &:not(:last-child) {
- margin: 0 0 .1rem 0;
- }
+.notification-title {
+ margin: .15rem .5rem .3rem .5rem;
}
.notification-favicon {
@@ -250,14 +263,26 @@ export default {
margin: 0 .5rem 0 0;
}
+.notification-tags {
+ white-space: nowrap;
+}
+
.notification-actors {
- height: 1.1rem;
+ padding: 0 .5rem;
+ height: 1.25rem;
display: inline-block;
overflow: hidden;
}
-.notification-tags {
- white-space: nowrap;
+.notification-date {
+ width: 3rem;
+ flex-shrink: 0;
+ padding: .25rem .25rem .35rem .25rem;
+ border-right: solid 1px var(--shadow-hint);
+ border-top: solid 1px var(--shadow-hint);
+ color: var(--shadow-strong);
+ font-size: .8rem;
+ text-align: center;
}
.notification-actor,
@@ -271,6 +296,7 @@ export default {
}
.notification-actor {
+ padding: .25rem .15rem .35rem 0;
color: var(--shadow-strong);
font-size: .9rem;
}
@@ -280,8 +306,7 @@ export default {
}
.poster {
- width: 5rem;
- height: 3rem;
+ width: 6rem;
object-fit: cover;
object-position: center;
}
diff --git a/assets/components/tooltip/tooltip.vue b/assets/components/tooltip/tooltip.vue
index 28822fa3..2da062cd 100644
--- a/assets/components/tooltip/tooltip.vue
+++ b/assets/components/tooltip/tooltip.vue
@@ -155,7 +155,7 @@ export default {
.tooltip-inner {
position: relative;
- box-shadow: 0 0 3px var(--darken-weak);
+ box-shadow: 0 0 .5rem var(--darken);
}
.tooltip {
diff --git a/assets/img/icons/notification2.svg b/assets/img/icons/notification2.svg
new file mode 100644
index 00000000..24de73a7
--- /dev/null
+++ b/assets/img/icons/notification2.svg
@@ -0,0 +1,5 @@
+
+