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