8 .notification-inbox-popover {
12 .notification-inbox-link a {
16 .notification-inbox-popover,
17 .notification-inbox-link a {
18 @include apply-svg-color(#808080);
21 transition: color .1s ease-in-out;
25 transition: all .1s ease-in-out;
30 background-color: rgba(255, 255, 255, 0.15);
31 @include apply-svg-color(#fff);
35 .notification-inbox-popover.shown,
36 .notification-inbox-link a.active {
37 @include apply-svg-color(#fff);
39 background-color: rgba(255, 255, 255, 0.28);
40 box-shadow: inset 0 3px 5px rgba(0, 0, 0, .325);
43 .notification-inbox-popover.hidden {
48 .popover-notifications.popover {
60 font-family: $main-fonts;
62 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.30);
67 justify-content: center;
74 transition: max-height 0.15s ease-out;
77 flex-direction: column;
83 & > my-user-notifications:nth-child(2) {
89 .notifications-header {
91 justify-content: space-between;
93 border-bottom: 1px solid rgba(0, 0, 0, 0.1);
98 color: rgba(0, 0, 0, 0.5);
99 text-transform: uppercase;
103 @include disable-default-a-behaviour;
107 @include peertube-button;
110 background: transparent;
114 color: rgba(20, 20, 20, 0.5);
116 &:hover:not(:disabled) {
117 color: rgba(20, 20, 20, 0.8);
125 justify-content: center;
126 font-weight: $font-semibold;
130 text-decoration: none;
136 .notification-inbox-popover, .notification-inbox-link {
140 .unread-notifications {
144 .unread-notifications {
149 @media screen and (max-width: $mobile-view) {
156 justify-content: center;
158 background-color: pvar(--mainColor);
161 font-weight: $font-semibold;