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

171 lines
3.1 KiB
SCSS
Raw Normal View History

2021-05-27 17:45:36 +02:00
@use '_variables';
@use '_mixins';
2019-01-08 11:26:41 +01:00
2021-04-08 09:00:35 +02:00
.content {
2021-04-08 09:13:42 +02:00
scrollbar-color: auto;
2021-04-08 09:00:35 +02:00
}
.notification-inbox-popover {
padding: 10px;
}
.notification-inbox-link a {
padding: 13px 10px;
}
.notification-inbox-popover,
.notification-inbox-link a {
@include apply-svg-color(#808080);
transition: all .1s ease-in-out;
border-radius: 25px;
cursor: pointer;
2021-04-28 16:41:07 +02:00
::ng-deep svg {
transition: color .1s ease-in-out;
}
&:hover,
&:active {
@include apply-svg-color(#fff);
2021-04-28 16:41:07 +02:00
background-color: rgba(255, 255, 255, 0.15);
}
}
.notification-inbox-popover.shown,
.notification-inbox-link a.active {
@include apply-svg-color(#fff);
background-color: rgba(255, 255, 255, 0.28);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .325);
}
.notification-inbox-popover.hidden {
display: none;
}
2019-07-24 16:12:35 +02:00
::ng-deep {
2019-01-08 11:26:41 +01:00
.popover-notifications.popover {
2019-01-21 14:03:04 +01:00
max-width: none;
top: -6px !important;
left: 7px !important;
2019-01-08 11:26:41 +01:00
.arrow {
display: none;
}
2019-01-08 11:26:41 +01:00
.popover-body {
padding: 0;
font-size: 14px;
font-family: $main-fonts;
2019-01-21 14:03:04 +01:00
width: 400px;
2021-04-28 16:41:07 +02:00
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
2019-01-08 11:26:41 +01:00
2019-02-20 10:16:04 +01:00
.loader {
display: flex;
align-items: center;
justify-content: center;
padding: 5px 0;
}
.content {
max-height: 150px;
transition: max-height 0.15s ease-out;
display: flex;
height: 500px;
flex-direction: column;
2019-02-20 10:16:04 +01:00
&.loaded {
max-height: 500px;
}
2021-04-28 16:41:07 +02:00
> my-user-notifications:nth-child(2) {
overflow-y: auto;
flex-grow: 1;
}
2019-02-20 10:16:04 +01:00
}
2019-01-08 11:26:41 +01:00
.notifications-header {
display: flex;
justify-content: space-between;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
2019-01-08 11:26:41 +01:00
align-items: center;
padding: 0 12px;
font-size: 14px;
font-weight: bold;
color: rgba(0, 0, 0, 0.5);
text-transform: uppercase;
min-height: 40px;
2019-01-08 11:26:41 +01:00
a {
@include disable-default-a-behaviour;
}
button {
@include peertube-button;
padding: 0;
background: transparent;
}
2019-01-08 11:26:41 +01:00
2021-04-28 16:41:07 +02:00
a,
button {
2019-01-08 11:26:41 +01:00
color: rgba(20, 20, 20, 0.5);
&:hover:not(:disabled) {
2019-01-08 11:26:41 +01:00
color: rgba(20, 20, 20, 0.8);
}
}
}
.all-notifications {
display: flex;
align-items: center;
justify-content: center;
font-weight: $font-semibold;
2019-10-22 11:14:58 +02:00
color: $fg-color;
padding: 7px 0;
margin-top: auto;
text-decoration: none;
2019-01-08 11:26:41 +01:00
}
}
}
}
2021-04-28 16:41:07 +02:00
.notification-inbox-popover,
.notification-inbox-link {
2019-01-08 11:26:41 +01:00
cursor: pointer;
position: relative;
.unread-notifications {
2021-06-07 17:38:31 +02:00
@include margin-left(20px);
2019-01-08 11:26:41 +01:00
}
.unread-notifications {
position: absolute;
top: 6px;
left: 0;
@media screen and (max-width: $mobile-view) {
top: -4px;
left: -2px;
}
2019-01-08 11:26:41 +01:00
display: flex;
align-items: center;
justify-content: center;
background-color: pvar(--mainColor);
color: #fff;
2019-01-08 11:26:41 +01:00
font-size: 10px;
font-weight: $font-semibold;
border-radius: 15px;
width: 15px;
height: 15px;
}
}