diff options
Diffstat (limited to 'client/src/app/videos/+video-watch/video-watch.component.scss')
-rw-r--r-- | client/src/app/videos/+video-watch/video-watch.component.scss | 308 |
1 files changed, 80 insertions, 228 deletions
diff --git a/client/src/app/videos/+video-watch/video-watch.component.scss b/client/src/app/videos/+video-watch/video-watch.component.scss index 06c2de7c6..7bcfeb7c3 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.scss +++ b/client/src/app/videos/+video-watch/video-watch.component.scss | |||
@@ -17,167 +17,108 @@ | |||
17 | font-weight: bold; | 17 | font-weight: bold; |
18 | } | 18 | } |
19 | 19 | ||
20 | #torrent-info { | 20 | .video-bottom { |
21 | font-size: 10px; | 21 | margin-top: 40px; |
22 | margin-top: 10px; | 22 | display: flex; |
23 | text-align: center; | ||
24 | |||
25 | div { | ||
26 | min-width: 60px; | ||
27 | } | ||
28 | } | ||
29 | |||
30 | #video-info { | ||
31 | .video-name-views { | ||
32 | font-weight: bold; | ||
33 | font-size: 18px; | ||
34 | min-height: $video-watch-title-height; | ||
35 | display: flex; | ||
36 | align-items: center; | ||
37 | |||
38 | .video-name { | ||
39 | padding-left: $video-watch-info-padding-left; | ||
40 | } | ||
41 | 23 | ||
42 | .video-views { | 24 | .video-info { |
43 | text-align: right; | 25 | flex-grow: 1; |
44 | // Keep a symmetry with the video name | 26 | margin-right: 28px; |
45 | padding-right: $video-watch-info-padding-left | ||
46 | } | ||
47 | 27 | ||
48 | } | 28 | .video-info-name-actions { |
29 | display: flex; | ||
30 | align-items: center; | ||
49 | 31 | ||
50 | .video-small-blocks { | 32 | .video-info-name { |
51 | height: $video-watch-info-height; | 33 | font-size: 27px; |
52 | color: $video-watch-info-color; | 34 | font-weight: $font-semibold; |
53 | border-color: $video-watch-border-color; | 35 | flex-grow: 1; |
54 | border-width: 1px 0px; | 36 | } |
55 | border-style: solid; | ||
56 | 37 | ||
57 | .video-small-block { | 38 | .video-info-actions { |
58 | height: $video-watch-info-height; | 39 | .action-button { |
59 | display: flex; | 40 | @include peertube-button; |
60 | flex-direction: column; | ||
61 | justify-content: center; | ||
62 | text-align: center; | ||
63 | 41 | ||
64 | a { | 42 | font-size: 15px; |
65 | cursor: pointer; | 43 | font-weight: $font-semibold; |
66 | transition: color 0.3s; | 44 | color: #585858; |
67 | white-space: nowrap; | 45 | background-color: #E5E5E5; |
68 | overflow: hidden; | 46 | display: inline-block; |
69 | text-overflow: ellipsis; | 47 | padding: 0 10px 0 10px; |
70 | 48 | ||
71 | &, &:hover { | 49 | &:hover { |
72 | color: inherit; | 50 | background-color: #EFEFEF; |
73 | text-decoration:none; | 51 | } |
74 | } | 52 | } |
75 | 53 | ||
76 | &:hover { | 54 | .action-more { |
77 | color: #000 !important; | 55 | display: inline-block; |
78 | } | 56 | } |
79 | 57 | ||
80 | &:hover > .glyphicon { | 58 | .icon { |
81 | opacity: 1 !important; | 59 | display: inline-block; |
82 | } | 60 | background-repeat: no-repeat; |
83 | } | 61 | background-size: contain; |
62 | width: 21px; | ||
63 | height: 21px; | ||
64 | vertical-align: middle; | ||
65 | position: relative; | ||
66 | top: -2px; | ||
84 | 67 | ||
85 | .option .glyphicon { | 68 | &.icon-like { |
86 | font-size: 22px; | 69 | background-image: url('../../../assets/images/video/like.svg'); |
87 | color: inherit; | 70 | } |
88 | opacity: 0.15; | ||
89 | margin-bottom: 10px; | ||
90 | transition: opacity 0.3s; | ||
91 | } | ||
92 | 71 | ||
93 | .video-small-block-text { | 72 | &.icon-dislike { |
94 | font-size: 15px; | 73 | background-image: url('../../../assets/images/video/dislike.svg'); |
95 | font-weight: bold; | 74 | } |
96 | } | ||
97 | } | ||
98 | 75 | ||
99 | .video-small-block:not(:last-child) { | 76 | &.icon-share { |
100 | border-width: 0 1px 0 0; | 77 | background-image: url('../../../assets/images/video/share.svg'); |
101 | border-color: $video-watch-border-color; | 78 | } |
102 | border-style: solid; | ||
103 | } | ||
104 | 79 | ||
105 | .video-small-block-account, .video-small-block-more { | 80 | &.icon-more { |
106 | a.option { | 81 | background-image: url('../../../assets/images/video/more.svg'); |
107 | display: block; | 82 | } |
108 | |||
109 | .glyphicon { | ||
110 | display: block; | ||
111 | } | 83 | } |
112 | } | 84 | } |
113 | } | 85 | } |
114 | 86 | ||
115 | .video-small-block-share, .video-small-block-more { | 87 | .video-info-date-views { |
116 | a.option { | 88 | font-size: 16px; |
117 | display: block; | 89 | margin-bottom: 10px; |
118 | |||
119 | .glyphicon { | ||
120 | display: block; | ||
121 | } | ||
122 | } | ||
123 | } | 90 | } |
124 | 91 | ||
125 | .video-small-block-more .video-small-block-dropdown { | 92 | .video-info-channel { |
126 | position: relative; | 93 | font-weight: $font-semibold; |
127 | 94 | font-size: 15px; | |
128 | .dropdown-item .glyphicon { | ||
129 | margin-right: 5px; | ||
130 | } | ||
131 | } | 95 | } |
132 | 96 | ||
133 | .video-small-block-rating { | 97 | .video-info-by { |
134 | 98 | display: flex; | |
135 | .video-small-block-like { | 99 | align-items: center; |
136 | margin-bottom: 10px; | 100 | font-size: 13px; |
137 | } | ||
138 | |||
139 | .video-small-block-text { | ||
140 | vertical-align: top; | ||
141 | } | ||
142 | |||
143 | .glyphicon { | ||
144 | font-size: 18px; | ||
145 | margin: 0 10px 0 0; | ||
146 | opacity: 0.3; | ||
147 | } | ||
148 | |||
149 | .interactive { | ||
150 | cursor: pointer; | ||
151 | transition: opacity, color 0.3s; | ||
152 | 101 | ||
153 | &.activated, &:hover { | 102 | img { |
154 | opacity: 1; | 103 | width: 16px; |
155 | color: #000; | 104 | height: 16px; |
156 | } | 105 | margin-left: 3px; |
157 | } | 106 | } |
158 | } | 107 | } |
159 | } | ||
160 | |||
161 | .video-details { | ||
162 | margin-top: 30px; | ||
163 | 108 | ||
164 | .video-details-date-description { | 109 | .video-info-description { |
165 | padding-left: $video-watch-info-padding-left; | 110 | margin: 20px 0; |
111 | font-size: 15px; | ||
166 | 112 | ||
167 | .description-loading { | 113 | .description-loading { |
168 | display: inline-block; | 114 | display: inline-block; |
169 | } | 115 | } |
170 | 116 | ||
171 | .video-details-date { | 117 | .video-info-description-more { |
172 | font-weight: bold; | ||
173 | margin-bottom: 30px; | ||
174 | } | ||
175 | |||
176 | .video-details-description-more { | ||
177 | cursor: pointer; | 118 | cursor: pointer; |
178 | margin-top: 15px; | 119 | font-weight: $font-semibold; |
179 | font-weight: bold; | 120 | color: #585858; |
180 | color: #acaeb7; | 121 | font-size: 14px; |
181 | 122 | ||
182 | .glyphicon { | 123 | .glyphicon { |
183 | position: relative; | 124 | position: relative; |
@@ -186,109 +127,20 @@ | |||
186 | } | 127 | } |
187 | } | 128 | } |
188 | 129 | ||
189 | .video-details-attributes { | 130 | .video-attributes { |
190 | font-weight: bold; | 131 | .video-attribute { |
191 | font-size: 12px; | 132 | font-size: 13px; |
192 | 133 | display: block; | |
193 | .video-details-attribute { | 134 | margin-bottom: 12px; |
194 | display: flex; | ||
195 | |||
196 | .video-details-attribute-label { | ||
197 | color: $video-watch-info-color; | ||
198 | flex-basis: 60px; | ||
199 | flex-grow: 0; | ||
200 | flex-shrink: 0; | ||
201 | margin-right: 5px; | ||
202 | } | ||
203 | } | ||
204 | } | ||
205 | |||
206 | .video-details-tags { | ||
207 | display: flex; | ||
208 | flex-wrap: wrap; | ||
209 | |||
210 | a { | ||
211 | margin: 0 3px 3px 0; | ||
212 | font-size: 11px; | ||
213 | } | ||
214 | } | ||
215 | } | ||
216 | |||
217 | @media screen and (max-width: 800px) { | ||
218 | .video-name-views { | ||
219 | .video-name { | ||
220 | padding-left: 5px; | ||
221 | padding-right: 0px; | ||
222 | } | ||
223 | |||
224 | .video-views { | ||
225 | padding-left: 0px; | ||
226 | padding-right: 5px; | ||
227 | } | ||
228 | } | ||
229 | |||
230 | .video-small-blocks { | ||
231 | a, .video-small-block-text { | ||
232 | font-size: 13px !important; | ||
233 | } | ||
234 | |||
235 | .glyphicon { | ||
236 | font-size: 18px !important; | ||
237 | } | ||
238 | |||
239 | .video-small-block-account { | ||
240 | padding-left: 10px; | ||
241 | padding-right: 10px; | ||
242 | } | ||
243 | } | ||
244 | |||
245 | .video-details { | ||
246 | .video-details-date-description { | ||
247 | padding-left: 10px; | ||
248 | font-size: 13px !important; | ||
249 | } | ||
250 | |||
251 | .video-details-attributes { | ||
252 | font-size: 11px !important; | ||
253 | 135 | ||
254 | .video-details-attribute-label { | 136 | .video-attribute-label { |
255 | width: 50px; | 137 | width: 86px; |
138 | display: inline-block; | ||
139 | color: #585858; | ||
140 | font-weight: $font-bold; | ||
256 | } | 141 | } |
257 | } | 142 | } |
258 | } | 143 | } |
259 | } | ||
260 | 144 | ||
261 | @media screen and (max-width: 500px) { | ||
262 | .video-name-views { | ||
263 | font-size: 16px !important; | ||
264 | } | ||
265 | |||
266 | // Keep the same hierarchy than max-width: 800px | ||
267 | .video-small-blocks { | ||
268 | a, .video-small-block-text { | ||
269 | font-size: 10px !important; | ||
270 | } | ||
271 | |||
272 | .video-small-block-account { | ||
273 | padding-left: 5px; | ||
274 | padding-right: 5px; | ||
275 | } | ||
276 | } | ||
277 | |||
278 | .video-details { | ||
279 | .video-details-date-description { | ||
280 | margin-bottom: 30px; | ||
281 | width: 100%; | ||
282 | |||
283 | .video-details-date { | ||
284 | margin-bottom: 15px; | ||
285 | } | ||
286 | } | ||
287 | |||
288 | .video-details-attributes { | ||
289 | padding-left: 10px; | ||
290 | padding-right: 10px; | ||
291 | } | ||
292 | } | ||
293 | } | 145 | } |
294 | } | 146 | } |