5 .notification-inbox-popover {
9 .notification-inbox-link a {
13 .notification-inbox-popover,
14 .notification-inbox-link a {
15 @include apply-svg-color(#808080);
18 transition: color .1s ease-in-out;
22 transition: all .1s ease-in-out;
27 background-color: rgba(255, 255, 255, 0.15);
28 @include apply-svg-color(#fff);
32 .notification-inbox-popover.shown,
33 .notification-inbox-link a.active {
34 @include apply-svg-color(#fff);
36 background-color: rgba(255, 255, 255, 0.28);
37 box-shadow: inset 0 3px 5px rgba(0, 0, 0, .325);
40 .notification-inbox-popover.hidden {
45 .popover-notifications.popover {
57 font-family: $main-fonts;
59 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.30);
64 justify-content: center;
71 transition: max-height 0.15s ease-out;
74 flex-direction: column;
80 & > my-user-notifications:nth-child(2) {
86 .notifications-header {
88 justify-content: space-between;
90 border-bottom: 1px solid rgba(0, 0, 0, 0.1);
95 color: rgba(0, 0, 0, 0.5);
96 text-transform: uppercase;
100 @include disable-default-a-behaviour;
104 @include peertube-button;
107 background: transparent;
111 color: rgba(20, 20, 20, 0.5);
113 &:hover:not(:disabled) {
114 color: rgba(20, 20, 20, 0.8);
122 justify-content: center;
123 font-weight: $font-semibold;
127 text-decoration: none;
133 .notification-inbox-popover, .notification-inbox-link {
137 .unread-notifications {
141 .unread-notifications {
146 @media screen and (max-width: $mobile-view) {
153 justify-content: center;
155 background-color: pvar(--mainColor);
158 font-weight: $font-semibold;