@import '_mixins';
@import '_miniature';
+$more-button-width: 41px;
+$more-margin-right: 10px;
+
.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;
display: flex;
.video-miniature-information {
- width: 200px;
+ width: $video-miniature-width - $more-button-width - $more-margin-right;
line-height: normal;
.video-miniature-name {
.video-actions {
margin-top: 3px;
- margin-right: 10px;
+ margin-right: $more-margin-right;
+ 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;
+ &:hover .video-actions ::ng-deep .dropdown-root {
+ opacity: 1;
}
@media screen and (max-width: $small-view) {
margin: 0;
top: -3px;
- /deep/ .dropdown-root {
- display: block !important;
+ ::ng-deep .dropdown-root {
+ opacity: 1 !important;
}
}
}
.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);