5 .popover-notifications.popover {
12 font-family: $main-fonts;
14 box-shadow: 0 6px 14px rgba(0, 0, 0, 0.30);
19 justify-content: center;
26 transition: max-height 0.15s ease-out;
29 flex-direction: column;
35 & > my-user-notifications:nth-child(2) {
40 .notifications-header {
42 justify-content: space-between;
44 background-color: rgba(0, 0, 0, 0.10);
51 @include disable-default-a-behaviour;
55 @include peertube-button;
58 background: transparent;
62 color: rgba(20, 20, 20, 0.5);
64 &:hover:not(:disabled) {
65 color: rgba(20, 20, 20, 0.8);
73 justify-content: center;
74 font-weight: $font-semibold;
78 text-decoration: none;
84 .notification-avatar {
89 .unread-notifications {
94 @include avatar(34px);
99 .unread-notifications {
106 justify-content: center;
108 background-color: var(--mainColor);
111 font-weight: $font-semibold;
119 @media screen and (max-width: $mobile-view) {
121 .popover-notifications.popover {
122 left: unset !important;
125 left: calc(2em + 7px);