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

   1 @import '_variables';
   2 @import '_mixins';
   3
   4 .content {
   5   scrollbar-color: auto;
   6 }
   7
   8 .notification-inbox-popover {
   9   padding: 10px;
  10 }
  11
  12 .notification-inbox-link a {
  13   padding: 13px 10px;
  14 }
  15
  16 .notification-inbox-popover,
  17 .notification-inbox-link a {
  18   @include apply-svg-color(#808080);
  19
  20   transition: all .1s ease-in-out;
  21   border-radius: 25px;
  22   cursor: pointer;
  23
  24   ::ng-deep svg {
  25     transition: color .1s ease-in-out;
  26   }
  27
  28   &:hover,
  29   &:active {
  30     @include apply-svg-color(#fff);
  31
  32     background-color: rgba(255, 255, 255, 0.15);
  33   }
  34 }
  35
  36 .notification-inbox-popover.shown,
  37 .notification-inbox-link a.active {
  38   @include apply-svg-color(#fff);
  39
  40   background-color: rgba(255, 255, 255, 0.28);
  41   box-shadow: inset 0 3px 5px rgba(0, 0, 0, .325);
  42 }
  43
  44 .notification-inbox-popover.hidden {
  45   display: none;
  46 }
  47
  48 ::ng-deep {
  49   .popover-notifications.popover {
  50     max-width: none;
  51     top: -6px !important;
  52     left: 7px !important;
  53
  54     .arrow {
  55       display: none;
  56     }
  57
  58     .popover-body {
  59       padding: 0;
  60       font-size: 14px;
  61       font-family: $main-fonts;
  62       width: 400px;
  63       box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  64
  65       .loader {
  66         display: flex;
  67         align-items: center;
  68         justify-content: center;
  69
  70         padding: 5px 0;
  71       }
  72
  73       .content {
  74         max-height: 150px;
  75         transition: max-height 0.15s ease-out;
  76         display: flex;
  77         height: 500px;
  78         flex-direction: column;
  79
  80         &.loaded {
  81           max-height: 500px;
  82         }
  83
  84         > my-user-notifications:nth-child(2) {
  85           overflow-y: auto;
  86           flex-grow: 1;
  87         }
  88       }
  89
  90       .notifications-header {
  91         display: flex;
  92         justify-content: space-between;
  93
  94         border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  95         align-items: center;
  96         padding: 0 12px;
  97         font-size: 14px;
  98         font-weight: bold;
  99         color: rgba(0, 0, 0, 0.5);
 100         text-transform: uppercase;
 101         min-height: 40px;
 102
 103         a {
 104           @include disable-default-a-behaviour;
 105         }
 106
 107         button {
 108           @include peertube-button;
 109
 110           padding: 0;
 111           background: transparent;
 112         }
 113
 114         a,
 115         button {
 116           color: rgba(20, 20, 20, 0.5);
 117
 118           &:hover:not(:disabled) {
 119             color: rgba(20, 20, 20, 0.8);
 120           }
 121         }
 122       }
 123
 124       .all-notifications {
 125         display: flex;
 126         align-items: center;
 127         justify-content: center;
 128         font-weight: $font-semibold;
 129         color: $fg-color;
 130         padding: 7px 0;
 131         margin-top: auto;
 132         text-decoration: none;
 133       }
 134     }
 135   }
 136 }
 137
 138 .notification-inbox-popover,
 139 .notification-inbox-link {
 140   cursor: pointer;
 141   position: relative;
 142
 143   .unread-notifications {
 144     @include margin-left(20px);
 145   }
 146
 147   .unread-notifications {
 148     position: absolute;
 149     top: 6px;
 150     left: 0;
 151
 152     @media screen and (max-width: $mobile-view) {
 153       top: -4px;
 154       left: -2px;
 155     }
 156
 157     display: flex;
 158     align-items: center;
 159     justify-content: center;
 160
 161     background-color: pvar(--mainColor);
 162     color: #fff;
 163     font-size: 10px;
 164     font-weight: $font-semibold;
 165
 166     border-radius: 15px;
 167     width: 15px;
 168     height: 15px;
 169   }
 170 }