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         }
  38       }
  39
  40       .notifications-header {
  41         display: flex;
  42         justify-content: space-between;
  43
  44         background-color: rgba(0, 0, 0, 0.10);
  45         align-items: center;
  46         padding: 0 10px;
  47         font-size: 16px;
  48         min-height: 50px;
  49
  50         a {
  51           @include disable-default-a-behaviour;
  52         }
  53
  54         button {
  55           @include peertube-button;
  56
  57           padding: 0;
  58           background: transparent;
  59         }
  60
  61         a, button {
  62           color: rgba(20, 20, 20, 0.5);
  63
  64           &:hover:not(:disabled) {
  65             color: rgba(20, 20, 20, 0.8);
  66           }
  67         }
  68       }
  69
  70       .all-notifications {
  71         display: flex;
  72         align-items: center;
  73         justify-content: center;
  74         font-weight: $font-semibold;
  75         color: $fg-color;
  76         padding: 7px 0;
  77         margin-top: auto;
  78         text-decoration: none;
  79       }
  80     }
  81   }
  82 }
  83
  84 .notification-avatar {
  85   cursor: pointer;
  86   position: relative;
  87
  88   img,
  89   .unread-notifications {
  90     margin-left: 20px;
  91   }
  92
  93   img {
  94     @include avatar(34px);
  95
  96     margin-right: 10px;
  97   }
  98
  99   .unread-notifications {
 100     position: absolute;
 101     top: -5px;
 102     left: -5px;
 103
 104     display: flex;
 105     align-items: center;
 106     justify-content: center;
 107
 108     background-color: var(--mainColor);
 109     color: var(#fff);
 110     font-size: 10px;
 111     font-weight: $font-semibold;
 112
 113     border-radius: 15px;
 114     width: 15px;
 115     height: 15px;
 116   }
 117 }
 118
 119 @media screen and (max-width: $mobile-view) {
 120   ::ng-deep {
 121     .popover-notifications.popover {
 122       left: unset !important;
 123
 124       .arrow {
 125         left: calc(2em + 7px);
 126       }
 127
 128       .popover-body {
 129         width: 100vw;
 130       }
 131     }
 132   }
 133 }