aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/menu/avatar-notification.component.scss
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2019-01-08 11:26:41 +0100
committerChocobozzz <chocobozzz@cpy.re>2019-01-09 11:15:15 +0100
commit2f1548fda32c3ba9e53913270394eedfacd55986 (patch)
treeafee28df36a9e00f921603d9091e5d08d5818159 /client/src/app/menu/avatar-notification.component.scss
parentf7cc67b455a12ccae9b0ea16876d166720364357 (diff)
downloadPeerTube-2f1548fda32c3ba9e53913270394eedfacd55986.tar.gz
PeerTube-2f1548fda32c3ba9e53913270394eedfacd55986.tar.zst
PeerTube-2f1548fda32c3ba9e53913270394eedfacd55986.zip
Add notifications in the client
Diffstat (limited to 'client/src/app/menu/avatar-notification.component.scss')
-rw-r--r--client/src/app/menu/avatar-notification.component.scss82
1 files changed, 82 insertions, 0 deletions
diff --git a/client/src/app/menu/avatar-notification.component.scss b/client/src/app/menu/avatar-notification.component.scss
new file mode 100644
index 000000000..c86667469
--- /dev/null
+++ b/client/src/app/menu/avatar-notification.component.scss
@@ -0,0 +1,82 @@
1@import '_variables';
2@import '_mixins';
3
4/deep/ {
5 .popover-notifications.popover {
6 max-width: 400px;
7
8 .popover-body {
9 padding: 0;
10 font-size: 14px;
11 font-family: $main-fonts;
12 overflow-y: auto;
13 max-height: 500px;
14 box-shadow: 0 6px 14px rgba(0, 0, 0, 0.30);
15
16 .notifications-header {
17 display: flex;
18 justify-content: space-between;
19
20 background-color: rgba(0, 0, 0, 0.10);
21 align-items: center;
22 padding: 0 10px;
23 font-size: 16px;
24 height: 50px;
25
26 a {
27 @include disable-default-a-behaviour;
28
29 color: rgba(20, 20, 20, 0.5);
30
31 &:hover {
32 color: rgba(20, 20, 20, 0.8);
33 }
34 }
35 }
36
37 .all-notifications {
38 display: flex;
39 align-items: center;
40 justify-content: center;
41 font-weight: $font-semibold;
42 color: var(--mainForegroundColor);
43 height: 30px;
44 }
45 }
46 }
47}
48
49.notification-avatar {
50 cursor: pointer;
51 position: relative;
52
53 img,
54 .unread-notifications {
55 margin-left: 20px;
56 }
57
58 img {
59 @include avatar(34px);
60
61 margin-right: 10px;
62 }
63
64 .unread-notifications {
65 position: absolute;
66 top: -5px;
67 left: -5px;
68
69 display: flex;
70 align-items: center;
71 justify-content: center;
72
73 background-color: var(--mainColor);
74 color: var(--mainBackgroundColor);
75 font-size: 10px;
76 font-weight: $font-semibold;
77
78 border-radius: 15px;
79 width: 15px;
80 height: 15px;
81 }
82}