]>
Commit | Line | Data |
---|---|---|
1 | @import '_variables'; | |
2 | @import '_mixins'; | |
3 | @import '_miniature'; | |
4 | ||
5 | .root { | |
6 | --myGlobalPadding: 60px; | |
7 | --myChannelImgMargin: 30px; | |
8 | --myFontSize: 16px; | |
9 | --myGreyChannelFontSize: 16px; | |
10 | --myGreyOwnerFontSize: 14px; | |
11 | } | |
12 | ||
13 | .section-label { | |
14 | color: pvar(--mainColor); | |
15 | font-size: 12px; | |
16 | margin-bottom: 15px; | |
17 | font-weight: $font-bold; | |
18 | letter-spacing: 2.5px; | |
19 | } | |
20 | ||
21 | .links { | |
22 | @include fluid-videos-miniature-layout; | |
23 | } | |
24 | ||
25 | .channel-info { | |
26 | display: grid; | |
27 | grid-template-columns: 1fr auto; | |
28 | grid-template-rows: auto auto; | |
29 | ||
30 | background-color: pvar(--channelBackgroundColor); | |
31 | margin-bottom: 45px; | |
32 | padding: var(--myGlobalPadding) var(--myGlobalPadding) 0 var(--myGlobalPadding); | |
33 | font-size: var(--myFontSize); | |
34 | } | |
35 | ||
36 | .channel-avatar-row { | |
37 | display: flex; | |
38 | grid-column: 1; | |
39 | margin-bottom: 30px; | |
40 | ||
41 | img { | |
42 | @include channel-avatar(120px); | |
43 | } | |
44 | ||
45 | > div { | |
46 | margin-left: var(--myChannelImgMargin); | |
47 | } | |
48 | ||
49 | .actor-info { | |
50 | display: flex; | |
51 | ||
52 | > div:first-child { | |
53 | flex-grow: 1; | |
54 | } | |
55 | } | |
56 | ||
57 | .actor-display-name { | |
58 | display: flex; | |
59 | flex-wrap: wrap; | |
60 | } | |
61 | ||
62 | h1 { | |
63 | font-size: 28px; | |
64 | font-weight: $font-bold; | |
65 | margin: 0; | |
66 | } | |
67 | ||
68 | .actor-handle, | |
69 | .actor-counters { | |
70 | color: pvar(--greyForegroundColor); | |
71 | font-size: var(--myGreyChannelFontSize); | |
72 | } | |
73 | ||
74 | .actor-counters > *:not(:last-child)::after { | |
75 | content: '•'; | |
76 | margin: 0 10px; | |
77 | color: pvar(--mainColor); | |
78 | } | |
79 | } | |
80 | ||
81 | .channel-description { | |
82 | grid-column: 1; | |
83 | } | |
84 | ||
85 | .show-more { | |
86 | display: none; | |
87 | color: pvar(--mainColor); | |
88 | cursor: pointer; | |
89 | margin: 10px auto 45px auto; | |
90 | } | |
91 | ||
92 | ||
93 | .channel-buttons { | |
94 | display: flex; | |
95 | flex-wrap: wrap; | |
96 | ||
97 | > *:not(:last-child) { | |
98 | margin-right: 15px; | |
99 | } | |
100 | } | |
101 | ||
102 | .channel-buttons.right { | |
103 | margin-left: 45px; | |
104 | } | |
105 | ||
106 | // Only used by mobile | |
107 | .channel-buttons.bottom { | |
108 | display: none; | |
109 | } | |
110 | ||
111 | .created-at { | |
112 | margin-top: 15px; | |
113 | color: pvar(--greyForegroundColor); | |
114 | padding-bottom: 60px; | |
115 | } | |
116 | ||
117 | .owner-card { | |
118 | margin-left: 105px; | |
119 | grid-column: 2; | |
120 | // Takes all the column | |
121 | grid-row: 1 / 3; | |
122 | place-self: end; | |
123 | } | |
124 | ||
125 | // Only used on mobile | |
126 | .bottom-owner { | |
127 | display: none; | |
128 | } | |
129 | ||
130 | .owner-block { | |
131 | background-color: pvar(--mainBackgroundColor); | |
132 | padding: 30px; | |
133 | width: 300px; | |
134 | font-size: var(--myFontSize); | |
135 | ||
136 | .avatar-row { | |
137 | display: flex; | |
138 | margin-bottom: 15px; | |
139 | ||
140 | img { | |
141 | @include avatar(48px); | |
142 | } | |
143 | ||
144 | .actor-info { | |
145 | margin-left: 15px; | |
146 | } | |
147 | ||
148 | h4 { | |
149 | font-size: 18px; | |
150 | margin: 0; | |
151 | } | |
152 | ||
153 | .actor-handle { | |
154 | font-size: var(--myGreyOwnerFontSize); | |
155 | color: pvar(--greyForegroundColor); | |
156 | } | |
157 | } | |
158 | ||
159 | .owner-description { | |
160 | height: 140px; | |
161 | ||
162 | @include fade-text(120px, pvar(--mainBackgroundColor)); | |
163 | } | |
164 | } | |
165 | ||
166 | .view-account.short { | |
167 | @include peertube-button-link; | |
168 | @include orange-button-inverted; | |
169 | ||
170 | margin-top: 30px; | |
171 | } | |
172 | ||
173 | .view-account.complete { | |
174 | display: none; | |
175 | } | |
176 | ||
177 | .copy-button { | |
178 | border: none; | |
179 | } | |
180 | ||
181 | @media screen and (max-width: 1400px) { | |
182 | // Takes all the row width | |
183 | .channel-avatar-row { | |
184 | grid-column: 1 / 3; | |
185 | } | |
186 | ||
187 | .owner-card { | |
188 | grid-row: 2; | |
189 | margin-left: 60px; | |
190 | } | |
191 | } | |
192 | ||
193 | @media screen and (max-width: 1100px) { | |
194 | .root { | |
195 | --myGlobalPadding: 45px; | |
196 | --myChannelImgMargin: 15px; | |
197 | } | |
198 | ||
199 | .channel-info { | |
200 | display: flex; | |
201 | flex-direction: column; | |
202 | margin-bottom: 0; | |
203 | } | |
204 | ||
205 | .channel-description:not(.expanded) { | |
206 | max-height: 70px; | |
207 | ||
208 | @include fade-text(30px, pvar(--channelBackgroundColor)); | |
209 | } | |
210 | ||
211 | .show-more { | |
212 | display: inline-block; | |
213 | } | |
214 | ||
215 | .channel-buttons.bottom { | |
216 | display: flex; | |
217 | justify-content: center; | |
218 | margin-bottom: 30px; | |
219 | } | |
220 | ||
221 | .channel-buttons.right { | |
222 | display: none; | |
223 | } | |
224 | ||
225 | .owner-card { | |
226 | display: none; | |
227 | } | |
228 | ||
229 | .bottom-owner { | |
230 | display: block; | |
231 | width: 100%; | |
232 | border-bottom: 2px solid $separator-border-color; | |
233 | padding: var(--myGlobalPadding) 45px; | |
234 | margin-bottom: 60px; | |
235 | } | |
236 | ||
237 | .owner-block { | |
238 | display: grid; | |
239 | width: 100%; | |
240 | padding: 0; | |
241 | ||
242 | .avatar-row { | |
243 | grid-column: 1; | |
244 | margin-right: 30px; | |
245 | } | |
246 | ||
247 | .owner-description { | |
248 | grid-column: 2; | |
249 | max-height: 70px; | |
250 | ||
251 | @include fade-text(30px, pvar(--mainBackgroundColor)); | |
252 | } | |
253 | ||
254 | .view-account { | |
255 | grid-column: 2; | |
256 | } | |
257 | } | |
258 | ||
259 | .view-account.complete { | |
260 | display: inline-block; | |
261 | margin-top: 10px; | |
262 | color: pvar(--mainColor); | |
263 | } | |
264 | ||
265 | .view-account.short { | |
266 | display: none; | |
267 | } | |
268 | } | |
269 | ||
270 | @media screen and (max-width: $mobile-view) { | |
271 | .root { | |
272 | --myGlobalPadding: 15px; | |
273 | --myFontSize: 14px; | |
274 | --myGreyChannelFontSize: 13px; | |
275 | --myGreyOwnerFontSize: 13px; | |
276 | } | |
277 | ||
278 | .links { | |
279 | margin: auto !important; | |
280 | width: min-content; | |
281 | } | |
282 | ||
283 | .section-label { | |
284 | font-size: 10px; | |
285 | letter-spacing: 2.1px; | |
286 | margin-bottom: 5px; | |
287 | } | |
288 | ||
289 | .channel-avatar-row { | |
290 | margin-bottom: 15px; | |
291 | ||
292 | h1 { | |
293 | font-size: 22px; | |
294 | } | |
295 | ||
296 | img { | |
297 | @include channel-avatar(80px); | |
298 | } | |
299 | } | |
300 | ||
301 | .show-more { | |
302 | margin-bottom: 30px; | |
303 | } | |
304 | ||
305 | .bottom-owner { | |
306 | padding: 15px; | |
307 | margin-bottom: 30px; | |
308 | ||
309 | .section-label { | |
310 | display: none; | |
311 | } | |
312 | } | |
313 | ||
314 | .owner-block { | |
315 | display: block; | |
316 | ||
317 | .avatar-row { | |
318 | display: flex; | |
319 | flex-direction: row-reverse; | |
320 | margin: 0; | |
321 | ||
322 | h4 { | |
323 | font-size: 16px; | |
324 | } | |
325 | ||
326 | .actor-info { | |
327 | display: flex; | |
328 | flex-direction: column; | |
329 | align-items: flex-end; | |
330 | justify-content: flex-end; | |
331 | margin-top: -5px; | |
332 | } | |
333 | ||
334 | img { | |
335 | @include channel-avatar(64px); | |
336 | ||
337 | margin: -30px 0 0 15px; | |
338 | } | |
339 | } | |
340 | ||
341 | .owner-description { | |
342 | display: none; | |
343 | } | |
344 | } | |
345 | } |