]>
Commit | Line | Data |
---|---|---|
e31f6ad6 | 1 | #video-container { |
be6a4802 C |
2 | background-color: #000; |
3 | display: flex; | |
4 | justify-content: center; | |
5 | ||
6 | #video-element { | |
7 | width: 888px; | |
8 | height: 500px; | |
9 | } | |
e56b20f5 C |
10 | } |
11 | ||
9c89a45c C |
12 | #video-not-found { |
13 | height: 300px; | |
14 | line-height: 300px; | |
15 | margin-top: 50px; | |
16 | text-align: center; | |
17 | font-weight: bold; | |
18 | } | |
19 | ||
9ced64e0 C |
20 | #torrent-info { |
21 | font-size: 10px; | |
a64668c0 C |
22 | margin-top: 10px; |
23 | text-align: center; | |
9ced64e0 C |
24 | |
25 | div { | |
a64668c0 C |
26 | min-width: 60px; |
27 | } | |
28 | } | |
29 | ||
d1992b93 | 30 | #video-info { |
09223546 C |
31 | .video-name-views { |
32 | font-weight: bold; | |
33 | font-size: 18px; | |
e02573ad C |
34 | min-height: $video-watch-title-height; |
35 | display: flex; | |
36 | align-items: center; | |
897ec54d C |
37 | |
38 | .video-name { | |
39 | padding-left: $video-watch-info-padding-left; | |
40 | } | |
d1992b93 | 41 | |
09223546 C |
42 | .video-views { |
43 | text-align: right; | |
897ec54d C |
44 | // Keep a symmetry with the video name |
45 | padding-right: $video-watch-info-padding-left | |
d1992b93 | 46 | } |
3eeeb87f | 47 | |
09223546 | 48 | } |
d1992b93 | 49 | |
09223546 | 50 | .video-small-blocks { |
ea9f487b | 51 | height: $video-watch-info-height; |
09223546 C |
52 | color: $video-watch-info-color; |
53 | border-color: $video-watch-border-color; | |
54 | border-width: 1px 0px; | |
55 | border-style: solid; | |
56 | ||
57 | .video-small-block { | |
58 | height: $video-watch-info-height; | |
59 | display: flex; | |
60 | flex-direction: column; | |
61 | justify-content: center; | |
62 | text-align: center; | |
63 | ||
64 | a { | |
65 | cursor: pointer; | |
66 | transition: color 0.3s; | |
3eeeb87f C |
67 | white-space: nowrap; |
68 | overflow: hidden; | |
69 | text-overflow: ellipsis; | |
09223546 C |
70 | |
71 | &, &:hover { | |
72 | color: inherit; | |
73 | text-decoration:none; | |
74 | } | |
d38b8281 | 75 | |
09223546 C |
76 | &:hover { |
77 | color: #000 !important; | |
78 | } | |
4e1b0973 C |
79 | |
80 | &:hover > .glyphicon { | |
81 | opacity: 1 !important; | |
82 | } | |
d38b8281 C |
83 | } |
84 | ||
09223546 C |
85 | .option .glyphicon { |
86 | font-size: 22px; | |
87 | color: inherit; | |
4e1b0973 | 88 | opacity: 0.15; |
09223546 | 89 | margin-bottom: 10px; |
4e1b0973 | 90 | transition: opacity 0.3s; |
d38b8281 C |
91 | } |
92 | ||
09223546 C |
93 | .video-small-block-text { |
94 | font-size: 15px; | |
95 | font-weight: bold; | |
d38b8281 C |
96 | } |
97 | } | |
98 | ||
09223546 C |
99 | .video-small-block:not(:last-child) { |
100 | border-width: 0 1px 0 0; | |
101 | border-color: $video-watch-border-color; | |
102 | border-style: solid; | |
d1992b93 | 103 | } |
4f8c0eb0 | 104 | |
1e1265b3 | 105 | .video-small-block-account, .video-small-block-more { |
4e1b0973 C |
106 | a.option { |
107 | display: block; | |
108 | ||
109 | .glyphicon { | |
110 | display: block; | |
111 | } | |
112 | } | |
4f8c0eb0 | 113 | } |
d1992b93 | 114 | |
09223546 C |
115 | .video-small-block-share, .video-small-block-more { |
116 | a.option { | |
117 | display: block; | |
d1992b93 | 118 | |
09223546 C |
119 | .glyphicon { |
120 | display: block; | |
121 | } | |
122 | } | |
d1992b93 C |
123 | } |
124 | ||
09223546 C |
125 | .video-small-block-more .video-small-block-dropdown { |
126 | position: relative; | |
127 | ||
128 | .dropdown-item .glyphicon { | |
129 | margin-right: 5px; | |
130 | } | |
d1992b93 | 131 | } |
d1992b93 | 132 | |
09223546 | 133 | .video-small-block-rating { |
d1992b93 | 134 | |
09223546 C |
135 | .video-small-block-like { |
136 | margin-bottom: 10px; | |
137 | } | |
05a9feaa | 138 | |
09223546 C |
139 | .video-small-block-text { |
140 | vertical-align: top; | |
141 | } | |
d1992b93 | 142 | |
09223546 C |
143 | .glyphicon { |
144 | font-size: 18px; | |
145 | margin: 0 10px 0 0; | |
4e1b0973 | 146 | opacity: 0.3; |
09223546 | 147 | } |
6e07c3de | 148 | |
09223546 C |
149 | .interactive { |
150 | cursor: pointer; | |
4e1b0973 | 151 | transition: opacity, color 0.3s; |
09223546 C |
152 | |
153 | &.activated, &:hover { | |
4e1b0973 | 154 | opacity: 1; |
09223546 C |
155 | color: #000; |
156 | } | |
157 | } | |
6e07c3de C |
158 | } |
159 | } | |
160 | ||
09223546 C |
161 | .video-details { |
162 | margin-top: 30px; | |
d07137b9 | 163 | |
09223546 | 164 | .video-details-date-description { |
897ec54d | 165 | padding-left: $video-watch-info-padding-left; |
d1992b93 | 166 | |
80958c78 C |
167 | .description-loading { |
168 | display: inline-block; | |
169 | } | |
170 | ||
09223546 C |
171 | .video-details-date { |
172 | font-weight: bold; | |
173 | margin-bottom: 30px; | |
174 | } | |
2de96f4d C |
175 | |
176 | .video-details-description-more { | |
177 | cursor: pointer; | |
178 | margin-top: 15px; | |
179 | font-weight: bold; | |
180 | color: #acaeb7; | |
181 | ||
182 | .glyphicon { | |
183 | position: relative; | |
184 | top: 2px; | |
185 | } | |
186 | } | |
09223546 C |
187 | } |
188 | ||
189 | .video-details-attributes { | |
d1992b93 | 190 | font-weight: bold; |
09223546 C |
191 | font-size: 12px; |
192 | ||
e02573ad C |
193 | .video-details-attribute { |
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 | } | |
09223546 | 203 | } |
d1992b93 | 204 | } |
8ce9e815 C |
205 | |
206 | .video-details-tags { | |
e02573ad C |
207 | display: flex; |
208 | flex-wrap: wrap; | |
8ce9e815 C |
209 | |
210 | a { | |
e02573ad | 211 | margin: 0 3px 3px 0; |
8ce9e815 C |
212 | font-size: 11px; |
213 | } | |
214 | } | |
d1992b93 | 215 | } |
3eeeb87f | 216 | |
3eeeb87f C |
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 | ||
1e1265b3 | 239 | .video-small-block-account { |
3eeeb87f | 240 | padding-left: 10px; |
a01f107b | 241 | padding-right: 10px; |
3eeeb87f C |
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 | ||
254 | .video-details-attribute-label { | |
255 | width: 50px; | |
256 | } | |
257 | } | |
258 | } | |
259 | } | |
a01f107b C |
260 | |
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 | ||
1e1265b3 | 272 | .video-small-block-account { |
a01f107b C |
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 | } | |
d1992b93 | 294 | } |