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 5e09225df8e11df0593eb72342791b51c60f0395..ebb2a54248486b3d0b0fcc0aa074e8bcbcad5167 100644
(file)
--- a/
client/src/app/menu/avatar-notification.component.scss
+++ b/
client/src/app/menu/avatar-notification.component.scss
@@
-4,12
+4,12
@@
::ng-deep {
.popover-notifications.popover {
max-width: none;
::ng-deep {
.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;
}
}
}
}
}
}
@@
-100,8
+119,16
@@
@media screen and (max-width: $mobile-view) {
::ng-deep {
@media screen and (max-width: $mobile-view) {
::ng-deep {
- .popover-notifications.popover .popover-body {
- width: 400px;
+ .popover-notifications.popover {
+ left: unset !important;
+
+ .arrow {
+ left: calc(2em + 7px);
+ }
+
+ .popover-body {
+ width: 100vw;
+ }
}
}
}
}
}
}