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

   1 @use '_variables' as *;
   2 @use '_mixins' as *;
   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         my-global-icon[iconName=cog] {
 124           width: 20px;
 125         }
 126
 127         my-global-icon[iconName=tick] {
 128           width: 26px;
 129         }
 130       }
 131
 132       .all-notifications {
 133         display: flex;
 134         align-items: center;
 135         justify-content: center;
 136         font-weight: $font-semibold;
 137         color: pvar(--mainForegroundColor);
 138         padding: 7px 0;
 139         margin-top: auto;
 140         text-decoration: none;
 141       }
 142     }
 143   }
 144 }
 145
 146 .notification-inbox-popover,
 147 .notification-inbox-link {
 148   cursor: pointer;
 149   position: relative;
 150
 151   .unread-notifications {
 152     @include margin-left(20px);
 153   }
 154
 155   .unread-notifications {
 156     position: absolute;
 157     top: 6px;
 158     left: 0;
 159
 160     @media screen and (max-width: $mobile-view) {
 161       top: -4px;
 162       left: -2px;
 163     }
 164
 165     display: flex;
 166     align-items: center;
 167     justify-content: center;
 168
 169     background-color: pvar(--mainColor);
 170     color: #fff;
 171     font-size: 10px;
 172     font-weight: $font-semibold;
 173
 174     border-radius: 15px;
 175     width: 15px;
 176     height: 15px;
 177   }
 178 }