projects
/
oweals
/
peertube.git
/ blobdiff
commit
grep
author
committer
pickaxe
?
search:
re
summary
|
shortlog
|
log
|
commit
|
commitdiff
|
tree
raw
|
inline
| side by side
Try to fix subscriptions inconsistencies
[oweals/peertube.git]
/
client
/
src
/
app
/
shared
/
video
/
video-miniature.component.scss
diff --git
a/client/src/app/shared/video/video-miniature.component.scss
b/client/src/app/shared/video/video-miniature.component.scss
index 80d6c4fdaa9ba366f584805ff336597b350492d3..b63fd2989efcad94cdf57756c8ae6aaecac64e19 100644
(file)
--- a/
client/src/app/shared/video/video-miniature.component.scss
+++ b/
client/src/app/shared/video/video-miniature.component.scss
@@
-2,11
+2,14
@@
@import '_mixins';
@import '_miniature';
@import '_mixins';
@import '_miniature';
+$more-button-width: 41px;
+$more-margin-right: 15px;
+
.video-miniature {
width: $video-miniature-width;
display: inline-flex;
flex-direction: column;
.video-miniature {
width: $video-miniature-width;
display: inline-flex;
flex-direction: column;
- margin-bottom:
30px
;
+ margin-bottom:
$video-miniature-margin-bottom
;
height: 195px;
vertical-align: top;
height: 195px;
vertical-align: top;
@@
-14,7
+17,7
@@
display: flex;
.video-miniature-information {
display: flex;
.video-miniature-information {
- width:
200px
;
+ width:
$video-miniature-width - $more-button-width - $more-margin-right
;
line-height: normal;
.video-miniature-name {
line-height: normal;
.video-miniature-name {
@@
-61,19
+64,24
@@
.video-actions {
margin-top: 3px;
.video-actions {
margin-top: 3px;
- margin-right: 10px;
+ width: $more-button-width;
+ height: 30px;
-
/deep/
.dropdown-root:not(.show) {
-
display: none
;
+
::ng-deep
.dropdown-root:not(.show) {
+
opacity: 0
;
}
}
-
/deep/
.playlist-dropdown.show + my-action-dropdown .dropdown-root {
-
display: block
;
+
::ng-deep
.playlist-dropdown.show + my-action-dropdown .dropdown-root {
+
opacity: 1
;
}
}
- }
- &:hover .video-actions /deep/ .dropdown-root {
- display: block;
+ ::ng-deep .more-icon {
+ opacity: .6;
+
+ &:hover {
+ opacity: 1;
+ }
+ }
}
@media screen and (max-width: $small-view) {
}
@media screen and (max-width: $small-view) {
@@
-85,18
+93,24
@@
margin: 0;
top: -3px;
margin: 0;
top: -3px;
-
/deep/
.dropdown-root {
-
display: block
!important;
+
::ng-deep
.dropdown-root {
+
opacity: 1
!important;
}
}
}
}
}
}
}
}
+ &:hover ::ng-deep .video-thumbnail .video-thumbnail-actions-overlay,
+ &:hover .video-bottom .video-actions ::ng-deep .dropdown-root {
+ opacity: 1;
+ }
+
&.display-as-row {
flex-direction: row;
margin-bottom: 0;
height: auto;
&.display-as-row {
flex-direction: row;
margin-bottom: 0;
height: auto;
- width: 100%;
+ display: flex;
+ flex-grow: 1;
my-video-thumbnail {
margin-right: 10px;
my-video-thumbnail {
margin-right: 10px;
@@
-104,8
+118,10
@@
.video-bottom {
.video-miniature-information {
.video-bottom {
.video-miniature-information {
- width: auto;
- min-width: 500px;
+ @media screen and (min-width: $small-view) {
+ width: auto;
+ min-width: 500px;
+ }
.video-miniature-name {
@include ellipsis-multiline(1.3em, 2);
.video-miniature-name {
@include ellipsis-multiline(1.3em, 2);