1 @use '_variables' as *;
8 .notification-inbox-popover {
12 .notification-inbox-link a {
16 .notification-inbox-popover,
17 .notification-inbox-link a {
18 @include apply-svg-color(#808080);
20 transition: all .1s ease-in-out;
25 transition: color .1s ease-in-out;
30 @include apply-svg-color(#fff);
32 background-color: rgba(255, 255, 255, 0.15);
36 .notification-inbox-popover.shown,
37 .notification-inbox-link a.active {
38 @include apply-svg-color(#fff);
40 background-color: rgba(255, 255, 255, 0.28);
41 box-shadow: inset 0 3px 5px rgba(0, 0, 0, .325);
44 .notification-inbox-popover.hidden {
49 .popover-notifications.popover {
61 font-family: $main-fonts;
63 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
68 justify-content: center;
75 transition: max-height 0.15s ease-out;
78 flex-direction: column;
84 > my-user-notifications:nth-child(2) {
90 .notifications-header {
92 justify-content: space-between;
94 border-bottom: 1px solid rgba(0, 0, 0, 0.1);
99 color: rgba(0, 0, 0, 0.5);
100 text-transform: uppercase;
104 @include disable-default-a-behaviour;
108 @include peertube-button;
111 background: transparent;
116 color: rgba(20, 20, 20, 0.5);
118 &:hover:not(:disabled) {
119 color: rgba(20, 20, 20, 0.8);
127 justify-content: center;
128 font-weight: $font-semibold;
132 text-decoration: none;
138 .notification-inbox-popover,
139 .notification-inbox-link {
143 .unread-notifications {
144 @include margin-left(20px);
147 .unread-notifications {
152 @media screen and (max-width: $mobile-view) {
159 justify-content: center;
161 background-color: pvar(--mainColor);
164 font-weight: $font-semibold;