@import '_variables';
@import '_mixins';
+@import '_miniature';
+
+$more-button-width: 41px;
+$more-margin-right: 15px;
.video-miniature {
- display: inline-block;
- padding-right: 15px;
- margin-bottom: 30px;
- height: 175px;
+ width: $video-miniature-width;
+ display: inline-flex;
+ flex-direction: column;
+ margin-bottom: $video-miniature-margin-bottom;
+ height: 195px;
vertical-align: top;
- .video-miniature-information {
- width: 200px;
- margin-top: 2px;
- line-height: normal;
+ .video-bottom {
+ display: flex;
+
+ .video-miniature-information {
+ width: $video-miniature-width - $more-button-width - $more-margin-right;
+ line-height: normal;
+
+ .video-miniature-name {
+ @include miniature-name;
+ }
+
+ .video-miniature-created-at-views {
+ display: block;
+ font-size: 13px;
+ }
+
+ .video-miniature-account,
+ .video-miniature-channel {
+ @include disable-default-a-behaviour;
+ @include ellipsis;
+
+ display: block;
+ font-size: 13px;
+ color: $grey-foreground-color;
+
+ &:hover {
+ color: $grey-foreground-hover-color;
+ }
+ }
+
+ .video-info-privacy,
+ .video-info-blacklisted .blacklisted-label,
+ .video-info-nsfw {
+ font-weight: $font-semibold;
+ }
- .video-miniature-name {
- display: block;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- transition: color 0.2s;
- font-size: 16px;
- font-weight: $font-semibold;
- color: #000;
+ .video-info-blacklisted {
+ color: red;
- &:hover {
- text-decoration: none;
+ .blacklisted-reason::before {
+ content: ' - ';
+ }
}
- &.blur-filter {
- filter: blur(3px);
- padding-left: 4px;
+ .video-info-nsfw {
+ color: red;
}
}
- .video-miniature-created-at-views {
- display: block;
- font-size: 13px;
+ .video-actions {
+ margin-top: 3px;
+ width: $more-button-width;
+ height: 30px;
+
+ ::ng-deep .dropdown-root:not(.show) {
+ opacity: 0;
+ }
+
+ ::ng-deep .playlist-dropdown.show + my-action-dropdown .dropdown-root {
+ opacity: 1;
+ }
+
+ ::ng-deep .more-icon {
+ opacity: .6;
+
+ &:hover {
+ opacity: 1;
+ }
+ }
}
- .video-miniature-account {
- display: block;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- font-size: 13px;
- color: #585858;
+ @media screen and (max-width: $small-view) {
+ .video-miniature-information .video-miniature-name {
+ margin-top: 0;
+ }
+
+ .video-actions {
+ margin: 0;
+ top: -3px;
+
+ ::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: flex;
+ flex-grow: 1;
+
+ my-video-thumbnail {
+ margin-right: 10px;
+ }
+
+ .video-bottom {
+ .video-miniature-information {
+ @media screen and (min-width: $small-view) {
+ width: auto;
+ min-width: 500px;
+ }
+
+ .video-miniature-name {
+ @include ellipsis-multiline(1.3em, 2);
+
+ margin-top: 2px;
+ margin-bottom: 5px;
+ }
+
+ .video-miniature-created-at-views,
+ .video-miniature-account,
+ .video-miniature-channel {
+ font-size: 14px;
+ width: fit-content;
+ }
+
+ .video-info-privacy {
+ margin-top: 5px;
+ }
+
+ .video-info-blacklisted {
+ margin-top: 3px;
+ }
+ }
+
+ .video-actions {
+ margin: 0;
+ top: -3px;
+ }
+ }
+
+ @media screen and (max-width: $small-view) {
+ flex-direction: column;
+ height: auto;
+
+ my-video-thumbnail {
+ margin-right: 0;
+ }
+
+ .video-miniature-information {
+ min-width: initial;
+ }
}
}
}