diff options
Diffstat (limited to 'client/src/app/shared/video')
| -rw-r--r-- | client/src/app/shared/video/video-miniature.component.scss | 155 |
1 files changed, 81 insertions, 74 deletions
diff --git a/client/src/app/shared/video/video-miniature.component.scss b/client/src/app/shared/video/video-miniature.component.scss index fa2739f00..80d6c4fda 100644 --- a/client/src/app/shared/video/video-miniature.component.scss +++ b/client/src/app/shared/video/video-miniature.component.scss | |||
| @@ -10,79 +10,84 @@ | |||
| 10 | height: 195px; | 10 | height: 195px; |
| 11 | vertical-align: top; | 11 | vertical-align: top; |
| 12 | 12 | ||
| 13 | .video-miniature-information { | 13 | .video-bottom { |
| 14 | width: 200px; | 14 | display: flex; |
| 15 | line-height: normal; | ||
| 16 | 15 | ||
| 17 | .video-miniature-name { | 16 | .video-miniature-information { |
| 18 | @include miniature-name; | 17 | width: 200px; |
| 19 | } | 18 | line-height: normal; |
| 20 | 19 | ||
| 21 | .video-miniature-created-at-views { | 20 | .video-miniature-name { |
| 22 | display: block; | 21 | @include miniature-name; |
| 23 | font-size: 13px; | 22 | } |
| 24 | } | ||
| 25 | 23 | ||
| 26 | .video-miniature-account, | 24 | .video-miniature-created-at-views { |
| 27 | .video-miniature-channel { | 25 | display: block; |
| 28 | @include disable-default-a-behaviour; | 26 | font-size: 13px; |
| 29 | @include ellipsis; | 27 | } |
| 30 | 28 | ||
| 31 | display: block; | 29 | .video-miniature-account, |
| 32 | font-size: 13px; | 30 | .video-miniature-channel { |
| 33 | color: $grey-foreground-color; | 31 | @include disable-default-a-behaviour; |
| 32 | @include ellipsis; | ||
| 34 | 33 | ||
| 35 | &:hover { | 34 | display: block; |
| 36 | color: $grey-foreground-hover-color; | 35 | font-size: 13px; |
| 36 | color: $grey-foreground-color; | ||
| 37 | |||
| 38 | &:hover { | ||
| 39 | color: $grey-foreground-hover-color; | ||
| 40 | } | ||
| 37 | } | 41 | } |
| 38 | } | ||
| 39 | 42 | ||
| 40 | .video-info-privacy, | 43 | .video-info-privacy, |
| 41 | .video-info-blacklisted .blacklisted-label, | 44 | .video-info-blacklisted .blacklisted-label, |
| 42 | .video-info-nsfw { | 45 | .video-info-nsfw { |
| 43 | font-weight: $font-semibold; | 46 | font-weight: $font-semibold; |
| 44 | } | 47 | } |
| 45 | 48 | ||
| 46 | .video-info-blacklisted { | 49 | .video-info-blacklisted { |
| 47 | color: red; | 50 | color: red; |
| 48 | 51 | ||
| 49 | .blacklisted-reason::before { | 52 | .blacklisted-reason::before { |
| 50 | content: ' - '; | 53 | content: ' - '; |
| 54 | } | ||
| 51 | } | 55 | } |
| 52 | } | ||
| 53 | 56 | ||
| 54 | .video-info-nsfw { | 57 | .video-info-nsfw { |
| 55 | color: red; | 58 | color: red; |
| 59 | } | ||
| 56 | } | 60 | } |
| 57 | } | ||
| 58 | |||
| 59 | .video-bottom { | ||
| 60 | display: flex; | ||
| 61 | 61 | ||
| 62 | .video-actions { | 62 | .video-actions { |
| 63 | margin-top: 3px; | 63 | margin-top: 3px; |
| 64 | margin-right: 10px; | 64 | margin-right: 10px; |
| 65 | } | ||
| 66 | 65 | ||
| 67 | /deep/ .dropdown-root:not(.show) { | 66 | /deep/ .dropdown-root:not(.show) { |
| 68 | display: none; | 67 | display: none; |
| 69 | } | 68 | } |
| 70 | 69 | ||
| 71 | &:hover /deep/ .dropdown-root { | 70 | /deep/ .playlist-dropdown.show + my-action-dropdown .dropdown-root { |
| 72 | display: block; | 71 | display: block; |
| 72 | } | ||
| 73 | } | 73 | } |
| 74 | 74 | ||
| 75 | /deep/ .playlist-dropdown.show + my-action-dropdown .dropdown-root { | 75 | &:hover .video-actions /deep/ .dropdown-root { |
| 76 | display: block; | 76 | display: block; |
| 77 | } | 77 | } |
| 78 | 78 | ||
| 79 | @media screen and (max-width: $small-view) { | 79 | @media screen and (max-width: $small-view) { |
| 80 | .video-actions { | 80 | .video-miniature-information .video-miniature-name { |
| 81 | margin-right: 0; | 81 | margin-top: 0; |
| 82 | } | 82 | } |
| 83 | 83 | ||
| 84 | /deep/ .dropdown-root { | 84 | .video-actions { |
| 85 | display: block !important; | 85 | margin: 0; |
| 86 | top: -3px; | ||
| 87 | |||
| 88 | /deep/ .dropdown-root { | ||
| 89 | display: block !important; | ||
| 90 | } | ||
| 86 | } | 91 | } |
| 87 | } | 92 | } |
| 88 | } | 93 | } |
| @@ -97,38 +102,40 @@ | |||
| 97 | margin-right: 10px; | 102 | margin-right: 10px; |
| 98 | } | 103 | } |
| 99 | 104 | ||
| 100 | .video-miniature-information { | 105 | .video-bottom { |
| 101 | width: auto; | 106 | .video-miniature-information { |
| 102 | min-width: 500px; | 107 | width: auto; |
| 103 | 108 | min-width: 500px; | |
| 104 | .video-miniature-name { | 109 | |
| 105 | @include ellipsis-multiline(1.3em, 2); | 110 | .video-miniature-name { |
| 106 | 111 | @include ellipsis-multiline(1.3em, 2); | |
| 107 | margin-top: 2px; | 112 | |
| 108 | margin-bottom: 5px; | 113 | margin-top: 2px; |
| 109 | } | 114 | margin-bottom: 5px; |
| 110 | 115 | } | |
| 111 | .video-miniature-created-at-views, | 116 | |
| 112 | .video-miniature-account, | 117 | .video-miniature-created-at-views, |
| 113 | .video-miniature-channel { | 118 | .video-miniature-account, |
| 114 | font-size: 14px; | 119 | .video-miniature-channel { |
| 115 | width: fit-content; | 120 | font-size: 14px; |
| 116 | } | 121 | width: fit-content; |
| 117 | 122 | } | |
| 118 | .video-info-privacy { | 123 | |
| 119 | margin-top: 5px; | 124 | .video-info-privacy { |
| 125 | margin-top: 5px; | ||
| 126 | } | ||
| 127 | |||
| 128 | .video-info-blacklisted { | ||
| 129 | margin-top: 3px; | ||
| 130 | } | ||
| 120 | } | 131 | } |
| 121 | 132 | ||
| 122 | .video-info-blacklisted { | 133 | .video-actions { |
| 123 | margin-top: 3px; | 134 | margin: 0; |
| 135 | top: -3px; | ||
| 124 | } | 136 | } |
| 125 | } | 137 | } |
| 126 | 138 | ||
| 127 | .video-bottom .video-actions { | ||
| 128 | margin: 0; | ||
| 129 | top: -3px; | ||
| 130 | } | ||
| 131 | |||
| 132 | @media screen and (max-width: $small-view) { | 139 | @media screen and (max-width: $small-view) { |
| 133 | flex-direction: column; | 140 | flex-direction: column; |
| 134 | height: auto; | 141 | height: auto; |