client/src/app/menu/avatar-notification.component.scss

   1 @import '_variables';
   2 @import '_mixins';
   3
   4 ::ng-deep {
   5   .popover-notifications.popover {
   6     max-width: none;
   7     left: 7px !important;
   8
   9     .popover-body {
  10       padding: 0;
  11       font-size: 14px;
  12       font-family: $main-fonts;
  13       width: 400px;
  14       box-shadow: 0 6px 14px rgba(0, 0, 0, 0.30);
  15
  16       .loader {
  17         display: flex;
  18         align-items: center;
  19         justify-content: center;
  20
  21         padding: 5px 0;
  22       }
  23
  24       .content {
  25         max-height: 150px;
  26         transition: max-height 0.15s ease-out;
  27         display: flex;
  28         height: 500px;
  29         flex-direction: column;
  30
  31         &.loaded {
  32           max-height: 500px;
  33         }
  34
  35         & > my-user-notifications:nth-child(2) {
  36           overflow-y: auto;
  37           flex-grow: 1;
  38         }
  39       }
  40
  41       .notifications-header {
  42         display: flex;
  43         justify-content: space-between;
  44
  45         background-color: rgba(0, 0, 0, 0.10);
  46         align-items: center;
  47         padding: 0 10px;
  48         font-size: 16px;
  49         min-height: 50px;
  50
  51         a {
  52           @include disable-default-a-behaviour;
  53         }
  54
  55         button {
  56           @include peertube-button;
  57
  58           padding: 0;
  59           background: transparent;
  60         }
  61
  62         a, button {
  63           color: rgba(20, 20, 20, 0.5);
  64
  65           &:hover:not(:disabled) {
  66             color: rgba(20, 20, 20, 0.8);
  67           }
  68         }
  69       }
  70
  71       .all-notifications {
  72         display: flex;
  73         align-items: center;
  74         justify-content: center;
  75         font-weight: $font-semibold;
  76         color: $fg-color;
  77         padding: 7px 0;
  78         margin-top: auto;
  79         text-decoration: none;
  80       }
  81     }
  82   }
  83 }
  84
  85 .notification-avatar {
  86   cursor: pointer;
  87   position: relative;
  88
  89   img,
  90   .unread-notifications {
  91     margin-left: 20px;
  92   }
  93
  94   img {
  95     @include avatar(34px);
  96
  97     margin-right: 10px;
  98   }
  99
 100   .unread-notifications {
 101     position: absolute;
 102     top: -5px;
 103     left: -5px;
 104
 105     display: flex;
 106     align-items: center;
 107     justify-content: center;
 108
 109     background-color: pvar(--mainColor);
 110     color: #fff;
 111     font-size: 10px;
 112     font-weight: $font-semibold;
 113
 114     border-radius: 15px;
 115     width: 15px;
 116     height: 15px;
 117   }
 118 }
 119
 120 @media screen and (max-width: $mobile-view) {
 121   ::ng-deep {
 122     .popover-notifications.popover {
 123       left: unset !important;
 124
 125       .arrow {
 126         left: calc(2em + 7px);
 127       }
 128
 129       .popover-body {
 130         width: 100vw;
 131       }
 132     }
 133   }
 134 }