diff options
Diffstat (limited to 'client/src/app/shared/shared-video-miniature/video-miniature.component.scss')
-rw-r--r-- | client/src/app/shared/shared-video-miniature/video-miniature.component.scss | 308 |
1 files changed, 155 insertions, 153 deletions
diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.scss b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss index a9628c696..39d6e97c9 100644 --- a/client/src/app/shared/shared-video-miniature/video-miniature.component.scss +++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss | |||
@@ -3,204 +3,206 @@ | |||
3 | @import '_miniature'; | 3 | @import '_miniature'; |
4 | 4 | ||
5 | $more-button-width: 40px; | 5 | $more-button-width: 40px; |
6 | $more-margin-right: 15px; | ||
7 | 6 | ||
8 | .video-miniature { | 7 | .video-miniature-name { |
9 | display: inline-flex; | 8 | @include miniature-name; |
10 | flex-direction: column; | 9 | } |
11 | padding-bottom: $video-miniature-margin-bottom; | ||
12 | vertical-align: top; | ||
13 | 10 | ||
14 | .video-bottom { | 11 | .video-miniature-information { |
15 | display: flex; | 12 | width: calc(100% - #{$more-button-width}); |
13 | } | ||
16 | 14 | ||
17 | .video-miniature-information { | 15 | .avatar { |
18 | width: $video-miniature-width - $more-button-width - $more-margin-right; | 16 | margin: 10px 10px 0 0; |
19 | line-height: normal; | ||
20 | 17 | ||
21 | .avatar { | 18 | img:not(.channel) { |
22 | margin: 10px 10px 0 0; | 19 | @include avatar(40px); |
20 | } | ||
23 | 21 | ||
24 | img:not(.channel) { | 22 | img.channel { |
25 | @include avatar(40px); | 23 | @include channel-avatar(40px); |
26 | } | 24 | } |
25 | } | ||
27 | 26 | ||
28 | img.channel { | 27 | .video-miniature-created-at-views { |
29 | @include channel-avatar(40px); | 28 | font-size: 13px; |
30 | } | 29 | } |
31 | } | ||
32 | 30 | ||
33 | .video-miniature-name { | 31 | .video-miniature-account, |
34 | @include miniature-name; | 32 | .video-miniature-channel { |
33 | @include disable-default-a-behaviour; | ||
34 | @include ellipsis; | ||
35 | 35 | ||
36 | word-wrap: break-word; | 36 | display: block; |
37 | width: calc(100% - #{$more-button-width}); | 37 | font-size: 13px; |
38 | } | 38 | color: pvar(--greyForegroundColor); |
39 | 39 | ||
40 | .video-miniature-meta { | 40 | &:hover { |
41 | width: calc(100% + #{$more-button-width}); | 41 | color: $grey-foreground-hover-color; |
42 | overflow: hidden; | 42 | } |
43 | } | 43 | } |
44 | 44 | ||
45 | .video-miniature-created-at-views { | 45 | .video-info-privacy, |
46 | display: block; | 46 | .video-info-blocked .blocked-label, |
47 | font-size: 13px; | 47 | .video-info-nsfw { |
48 | } | 48 | font-weight: $font-semibold; |
49 | } | ||
49 | 50 | ||
50 | .video-miniature-account, | 51 | .video-info-blocked { |
51 | .video-miniature-channel { | 52 | color: red; |
52 | @include disable-default-a-behaviour; | ||
53 | @include ellipsis; | ||
54 | 53 | ||
55 | display: block; | 54 | .blocked-reason::before { |
56 | font-size: 13px; | 55 | content: ' - '; |
57 | color: pvar(--greyForegroundColor); | 56 | } |
57 | } | ||
58 | 58 | ||
59 | &:hover { | 59 | .video-info-nsfw { |
60 | color: $grey-foreground-hover-color; | 60 | color: red; |
61 | } | 61 | } |
62 | } | ||
63 | 62 | ||
64 | .video-info-privacy, | 63 | .video-actions { |
65 | .video-info-blocked .blocked-label, | 64 | width: $more-button-width; |
66 | .video-info-nsfw { | 65 | height: 30px; |
67 | font-weight: $font-semibold; | ||
68 | } | ||
69 | 66 | ||
70 | .video-info-blocked { | 67 | ::ng-deep .dropdown-root:not(.show) { |
71 | color: red; | 68 | opacity: 0; |
69 | } | ||
72 | 70 | ||
73 | .blocked-reason::before { | 71 | ::ng-deep .playlist-dropdown.show + my-action-dropdown .dropdown-root { |
74 | content: ' - '; | 72 | opacity: 1; |
75 | } | 73 | } |
76 | } | ||
77 | 74 | ||
78 | .video-info-nsfw { | 75 | ::ng-deep .more-icon { |
79 | color: red; | 76 | opacity: .6; |
80 | } | ||
81 | } | ||
82 | 77 | ||
83 | .video-actions { | 78 | &:hover { |
84 | margin-top: 3px; | 79 | opacity: 1; |
85 | width: $more-button-width; | 80 | } |
86 | height: 30px; | 81 | } |
82 | } | ||
87 | 83 | ||
88 | ::ng-deep .dropdown-root:not(.show) { | 84 | .video-miniature { |
89 | opacity: 0; | 85 | &:hover ::ng-deep .video-thumbnail-actions-overlay, |
90 | } | 86 | &:hover .video-actions ::ng-deep .dropdown-root { |
87 | opacity: 1 !important; | ||
88 | } | ||
89 | } | ||
91 | 90 | ||
92 | ::ng-deep .playlist-dropdown.show + my-action-dropdown .dropdown-root { | 91 | // Grid mode |
93 | opacity: 1; | 92 | // Takes all the width on mobile |
94 | } | 93 | .video-miniature:not(.display-as-row) { |
94 | display: flex; | ||
95 | flex-direction: column; | ||
96 | padding-bottom: $video-miniature-margin-bottom; | ||
97 | width: 100%; | ||
95 | 98 | ||
96 | ::ng-deep .more-icon { | 99 | my-video-thumbnail { |
97 | opacity: .6; | 100 | @include large-screen-ratio($selector: '::ng-deep .video-thumbnail'); |
101 | } | ||
98 | 102 | ||
99 | &:hover { | 103 | .video-bottom { |
100 | opacity: 1; | 104 | display: flex; |
101 | } | 105 | width: 100%; |
102 | } | 106 | } |
103 | } | ||
104 | 107 | ||
105 | @media screen and (max-width: $small-view) { | ||
106 | .video-miniature-information { | ||
107 | margin: 0 10px; | ||
108 | } | ||
109 | 108 | ||
110 | .video-actions { | 109 | .video-miniature-name { |
111 | margin: 0; | 110 | margin-top: 10px; |
112 | top: -3px; | 111 | margin-bottom: 5px; |
112 | } | ||
113 | 113 | ||
114 | ::ng-deep .dropdown-root { | 114 | .video-miniature-created-at-views { |
115 | opacity: 1 !important; | 115 | display: block; |
116 | } | ||
117 | } | ||
118 | } | ||
119 | } | 116 | } |
120 | 117 | ||
121 | &:hover ::ng-deep .video-thumbnail .video-thumbnail-actions-overlay, | 118 | .video-actions { |
122 | &:hover .video-bottom .video-actions ::ng-deep .dropdown-root { | 119 | margin-top: 3px; |
123 | opacity: 1; | ||
124 | } | 120 | } |
125 | 121 | ||
126 | &.fit-width { | 122 | @media screen and (max-width: $small-view) { |
127 | width: 100%; | 123 | width: 100%; |
124 | margin-bottom: 25px; | ||
125 | |||
126 | .video-miniature-information { | ||
127 | margin: 0 10px; | ||
128 | |||
129 | width: 100%; | ||
130 | text-align: left; | ||
131 | } | ||
128 | 132 | ||
129 | .video-bottom { | 133 | .video-actions { |
130 | width: 100% !important; | 134 | margin: 0; |
135 | top: -3px; | ||
131 | 136 | ||
132 | .video-miniature-information { | 137 | ::ng-deep .dropdown-root { |
133 | width: calc(100% - #{$more-button-width}) !important; | 138 | opacity: 1 !important; |
134 | } | 139 | } |
135 | } | 140 | } |
136 | 141 | ||
137 | my-video-thumbnail { | 142 | ::ng-deep .video-thumbnail { |
138 | @include large-screen-ratio($selector: '::ng-deep .video-thumbnail'); | 143 | border-radius: 0; |
139 | } | 144 | } |
140 | } | 145 | } |
146 | } | ||
147 | |||
148 | .video-miniature.display-as-row { | ||
149 | --rowThumbnailWidth: #{$video-thumbnail-width}; | ||
150 | --rowThumbnailHeight: #{$video-thumbnail-height}; | ||
151 | |||
152 | display: flex; | ||
153 | flex-direction: row; | ||
141 | 154 | ||
142 | &.display-as-row { | 155 | .video-bottom { |
143 | flex-direction: row; | ||
144 | padding-bottom: 0; | ||
145 | height: auto; | ||
146 | display: flex; | 156 | display: flex; |
147 | flex-grow: 1; | 157 | } |
148 | 158 | ||
149 | my-video-thumbnail { | 159 | // We don't display avatar in row mode |
150 | margin-right: 10px; | 160 | .avatar { |
151 | } | 161 | display: none; |
162 | } | ||
152 | 163 | ||
153 | .video-bottom { | 164 | my-video-thumbnail { |
154 | .video-miniature-information { | 165 | min-width: var(--rowThumbnailWidth); |
155 | @media screen and (min-width: $small-view) { | 166 | max-width: var(--rowThumbnailWidth); |
156 | width: auto; | 167 | height: var(--rowThumbnailHeight); |
157 | min-width: 500px; | 168 | margin-right: 10px; |
158 | } | 169 | } |
159 | |||
160 | .video-miniature-name { | ||
161 | @include ellipsis-multiline(1.3em, 2); | ||
162 | |||
163 | margin-top: 2px; | ||
164 | margin-bottom: 5px; | ||
165 | } | ||
166 | |||
167 | .video-miniature-created-at-views, | ||
168 | .video-miniature-account, | ||
169 | .video-miniature-channel { | ||
170 | font-size: 95%; | ||
171 | width: fit-content; | ||
172 | } | ||
173 | |||
174 | .video-miniature-created-at-views + .video-miniature-channel { | ||
175 | margin-top: 5px; | ||
176 | } | ||
177 | |||
178 | .video-info-privacy { | ||
179 | margin-top: 5px; | ||
180 | } | ||
181 | |||
182 | .video-info-blocked { | ||
183 | margin-top: 3px; | ||
184 | } | ||
185 | } | ||
186 | 170 | ||
187 | .video-actions { | 171 | .video-miniature-name { |
188 | margin: 0; | 172 | @include ellipsis-multiline(1.3em, 2); |
189 | top: -3px; | 173 | } |
190 | } | 174 | |
191 | } | 175 | .video-miniature-created-at-views, |
176 | .video-miniature-account, | ||
177 | .video-miniature-channel { | ||
178 | font-size: 14px; | ||
179 | } | ||
192 | 180 | ||
193 | @media screen and (max-width: $small-view) { | 181 | .video-actions { |
194 | flex-direction: column; | 182 | margin-top: -3px; |
195 | height: auto; | 183 | } |
184 | } | ||
196 | 185 | ||
197 | my-video-thumbnail { | 186 | @include on-small-main-col { |
198 | margin-right: 0; | 187 | .video-miniature.display-as-row { |
199 | } | 188 | --rowThumbnailWidth: #{$video-thumbnail-medium-width}; |
189 | --rowThumbnailHeight: #{$video-thumbnail-medium-height}; | ||
190 | } | ||
191 | } | ||
200 | 192 | ||
201 | .video-miniature-information { | 193 | @include on-mobile-main-col { |
202 | min-width: initial; | 194 | .video-miniature.display-as-row { |
203 | } | 195 | --rowThumbnailWidth: #{$video-thumbnail-small-width}; |
196 | --rowThumbnailHeight: #{$video-thumbnail-small-height}; | ||
197 | |||
198 | .video-miniature-name { | ||
199 | font-size: 14px; | ||
200 | } | ||
201 | |||
202 | .video-miniature-created-at-views, | ||
203 | .video-miniature-account, | ||
204 | .video-miniature-channel { | ||
205 | font-size: 12px; | ||
204 | } | 206 | } |
205 | } | 207 | } |
206 | } | 208 | } |