aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/menu/avatar-notification.component.scss
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/app/menu/avatar-notification.component.scss')
-rw-r--r--client/src/app/menu/avatar-notification.component.scss134
1 files changed, 0 insertions, 134 deletions
diff --git a/client/src/app/menu/avatar-notification.component.scss b/client/src/app/menu/avatar-notification.component.scss
deleted file mode 100644
index 88f2b6296..000000000
--- a/client/src/app/menu/avatar-notification.component.scss
+++ /dev/null
@@ -1,134 +0,0 @@
1@import '_variables';
2@import '_mixins';
3
4::ng-deep {
5 .popover-notifications.popover {
6 max-width: none;
7 left: 7px !important;
8
9 .popover-body {
10 padding: 0;
11 font-size: 14px;
12 font-family: $main-fonts;
13 width: 400px;
14 box-shadow: 0 6px 14px rgba(0, 0, 0, 0.30);
15
16 .loader {
17 display: flex;
18 align-items: center;
19 justify-content: center;
20
21 padding: 5px 0;
22 }
23
24 .content {
25 max-height: 150px;
26 transition: max-height 0.15s ease-out;
27 display: flex;
28 height: 500px;
29 flex-direction: column;
30
31 &.loaded {
32 max-height: 500px;
33 }
34
35 & > my-user-notifications:nth-child(2) {
36 overflow-y: auto;
37 flex-grow: 1;
38 }
39 }
40
41 .notifications-header {
42 display: flex;
43 justify-content: space-between;
44
45 background-color: rgba(0, 0, 0, 0.10);
46 align-items: center;
47 padding: 0 10px;
48 font-size: 16px;
49 min-height: 50px;
50
51 a {
52 @include disable-default-a-behaviour;
53 }
54
55 button {
56 @include peertube-button;
57
58 padding: 0;
59 background: transparent;
60 }
61
62 a, button {
63 color: rgba(20, 20, 20, 0.5);
64
65 &:hover:not(:disabled) {
66 color: rgba(20, 20, 20, 0.8);
67 }
68 }
69 }
70
71 .all-notifications {
72 display: flex;
73 align-items: center;
74 justify-content: center;
75 font-weight: $font-semibold;
76 color: $fg-color;
77 padding: 7px 0;
78 margin-top: auto;
79 text-decoration: none;
80 }
81 }
82 }
83}
84
85.notification-avatar {
86 cursor: pointer;
87 position: relative;
88
89 img,
90 .unread-notifications {
91 margin-left: 20px;
92 }
93
94 img {
95 @include avatar(34px);
96
97 margin-right: 10px;
98 }
99
100 .unread-notifications {
101 position: absolute;
102 top: -5px;
103 left: -5px;
104
105 display: flex;
106 align-items: center;
107 justify-content: center;
108
109 background-color: pvar(--mainColor);
110 color: #fff;
111 font-size: 10px;
112 font-weight: $font-semibold;
113
114 border-radius: 15px;
115 width: 15px;
116 height: 15px;
117 }
118}
119
120@media screen and (max-width: $mobile-view) {
121 ::ng-deep {
122 .popover-notifications.popover {
123 left: unset !important;
124
125 .arrow {
126 left: calc(2em + 7px);
127 }
128
129 .popover-body {
130 width: 100vw;
131 }
132 }
133 }
134}