projects
/
oweals
/
peertube.git
/ blobdiff
commit
grep
author
committer
pickaxe
?
search:
re
summary
|
shortlog
|
log
|
commit
|
commitdiff
|
tree
raw
|
inline
| side by side
Merge branch 'release/2.1.0' into develop
[oweals/peertube.git]
/
client
/
src
/
app
/
menu
/
avatar-notification.component.scss
diff --git
a/client/src/app/menu/avatar-notification.component.scss
b/client/src/app/menu/avatar-notification.component.scss
index 201668b6e54ea28cd3416991a9e3da039dbe8414..ebb2a54248486b3d0b0fcc0aa074e8bcbcad5167 100644
(file)
--- a/
client/src/app/menu/avatar-notification.component.scss
+++ b/
client/src/app/menu/avatar-notification.component.scss
@@
-1,15
+1,15
@@
@import '_variables';
@import '_mixins';
@import '_variables';
@import '_mixins';
-
/deep/
{
+
::ng-deep
{
.popover-notifications.popover {
max-width: none;
.popover-notifications.popover {
max-width: none;
+ left: 7px !important;
.popover-body {
padding: 0;
font-size: 14px;
font-family: $main-fonts;
.popover-body {
padding: 0;
font-size: 14px;
font-family: $main-fonts;
- overflow-y: scroll;
width: 400px;
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.30);
width: 400px;
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.30);
@@
-24,10
+24,18
@@
.content {
max-height: 150px;
transition: max-height 0.15s ease-out;
.content {
max-height: 150px;
transition: max-height 0.15s ease-out;
+ display: flex;
+ height: 500px;
+ flex-direction: column;
&.loaded {
max-height: 500px;
}
&.loaded {
max-height: 500px;
}
+
+ & > my-user-notifications:nth-child(2) {
+ overflow-y: auto;
+ flex-grow: 1;
+ }
}
.notifications-header {
}
.notifications-header {
@@
-38,14
+46,23
@@
align-items: center;
padding: 0 10px;
font-size: 16px;
align-items: center;
padding: 0 10px;
font-size: 16px;
- height: 50px;
+
min-
height: 50px;
a {
@include disable-default-a-behaviour;
a {
@include disable-default-a-behaviour;
+ }
+
+ button {
+ @include peertube-button;
+
+ padding: 0;
+ background: transparent;
+ }
+ a, button {
color: rgba(20, 20, 20, 0.5);
color: rgba(20, 20, 20, 0.5);
- &:hover {
+ &:hover
:not(:disabled)
{
color: rgba(20, 20, 20, 0.8);
}
}
color: rgba(20, 20, 20, 0.8);
}
}
@@
-56,8
+73,10
@@
align-items: center;
justify-content: center;
font-weight: $font-semibold;
align-items: center;
justify-content: center;
font-weight: $font-semibold;
- color:
var(--mainForegroundColor)
;
+ color:
$fg-color
;
padding: 7px 0;
padding: 7px 0;
+ margin-top: auto;
+ text-decoration: none;
}
}
}
}
}
}
@@
-99,9
+118,17
@@
}
@media screen and (max-width: $mobile-view) {
}
@media screen and (max-width: $mobile-view) {
- /deep/ {
- .popover-notifications.popover .popover-body {
- width: 400px;
+ ::ng-deep {
+ .popover-notifications.popover {
+ left: unset !important;
+
+ .arrow {
+ left: calc(2em + 7px);
+ }
+
+ .popover-body {
+ width: 100vw;
+ }
}
}
}
}
}
}