diff options
Diffstat (limited to 'client/src/app/+video-channels/video-channels.component.scss')
-rw-r--r-- | client/src/app/+video-channels/video-channels.component.scss | 322 |
1 files changed, 268 insertions, 54 deletions
diff --git a/client/src/app/+video-channels/video-channels.component.scss b/client/src/app/+video-channels/video-channels.component.scss index 22f21dcc6..e946707ef 100644 --- a/client/src/app/+video-channels/video-channels.component.scss +++ b/client/src/app/+video-channels/video-channels.component.scss | |||
@@ -1,89 +1,303 @@ | |||
1 | // Bootstrap grid utilities require functions, variables and mixins | ||
2 | @import 'node_modules/bootstrap/scss/functions'; | ||
3 | @import 'node_modules/bootstrap/scss/variables'; | ||
4 | @import 'node_modules/bootstrap/scss/mixins'; | ||
5 | @import 'node_modules/bootstrap/scss/grid'; | ||
6 | |||
7 | @import '_variables'; | 1 | @import '_variables'; |
8 | @import '_mixins'; | 2 | @import '_mixins'; |
3 | @import '_actor'; | ||
4 | @import '_miniature'; | ||
9 | 5 | ||
10 | .sub-menu { | 6 | .root { |
11 | @include sub-menu-with-actor; | 7 | --myGlobalTopPadding: 60px; |
8 | --myChannelImgMargin: 30px; | ||
9 | --myFontSize: 16px; | ||
10 | --myGreyChannelFontSize: 16px; | ||
11 | --myGreyOwnerFontSize: 14px; | ||
12 | } | ||
12 | 13 | ||
13 | .actor, .actor-info { | 14 | .banner { |
14 | width: 100%; | 15 | @include block-ratio('img', $banner-inverted-ratio); |
15 | } | 16 | } |
16 | 17 | ||
17 | .actor-info { | 18 | .section-label { |
18 | display: grid !important; | 19 | @include section-label-responsive; |
19 | grid-template-columns: 1fr auto; | 20 | } |
20 | grid-template-rows: 1fr auto / 1fr auto; | ||
21 | grid-template-areas: "name buttons" "lower buttons"; | ||
22 | 21 | ||
23 | @include media-breakpoint-down(lg) { | 22 | .links { |
24 | grid-template-areas: "name name" "lower buttons"; | 23 | @include grid-videos-miniature-margins; |
25 | } | 24 | } |
25 | |||
26 | .actor-info { | ||
27 | min-width: 1px; | ||
28 | width: 100%; | ||
29 | |||
30 | > h4, | ||
31 | > .actor-handle { | ||
32 | @include ellipsis; | ||
26 | } | 33 | } |
34 | } | ||
35 | |||
36 | .channel-info { | ||
37 | @include grid-videos-miniature-margins(false, 15px); | ||
38 | |||
39 | display: grid; | ||
40 | grid-template-columns: 1fr auto; | ||
41 | grid-template-rows: auto auto; | ||
27 | 42 | ||
28 | .actor-names { | 43 | background-color: pvar(--channelBackgroundColor); |
29 | grid-area: name; | 44 | margin-bottom: 45px; |
45 | padding-top: var(--myGlobalTopPadding); | ||
46 | font-size: var(--myFontSize); | ||
47 | } | ||
48 | |||
49 | .channel-avatar-row { | ||
50 | @include avatar-row-responsive(var(--myChannelImgMargin), var(--myGreyChannelFontSize)); | ||
51 | } | ||
52 | |||
53 | .support-button { | ||
54 | @include button-with-icon(21px, 0, -1px); | ||
55 | } | ||
56 | |||
57 | .channel-description { | ||
58 | grid-column: 1; | ||
59 | word-break: break-word; | ||
60 | padding-bottom: var(--myGlobalTopPadding); | ||
61 | } | ||
62 | |||
63 | .show-more { | ||
64 | @include show-more-description; | ||
65 | |||
66 | display: none; | ||
67 | } | ||
68 | |||
69 | .channel-buttons { | ||
70 | display: flex; | ||
71 | flex-wrap: wrap; | ||
72 | |||
73 | > *:not(:last-child) { | ||
74 | margin-right: 15px; | ||
30 | } | 75 | } |
76 | } | ||
77 | |||
78 | .channel-buttons.right { | ||
79 | margin-left: 45px; | ||
80 | } | ||
81 | |||
82 | // Only used by mobile | ||
83 | .channel-buttons.bottom { | ||
84 | display: none; | ||
85 | } | ||
86 | |||
87 | .owner-card { | ||
88 | margin-left: 105px; | ||
89 | grid-column: 2; | ||
90 | // Takes all the column | ||
91 | grid-row: 1 / 3; | ||
92 | place-self: end; | ||
93 | } | ||
94 | |||
95 | // Only used on mobile | ||
96 | .bottom-owner { | ||
97 | display: none; | ||
98 | } | ||
99 | |||
100 | .owner-block { | ||
101 | background-color: pvar(--mainBackgroundColor); | ||
102 | padding: 30px; | ||
103 | width: 300px; | ||
104 | font-size: var(--myFontSize); | ||
105 | |||
106 | .avatar-row { | ||
107 | display: flex; | ||
108 | margin-bottom: 15px; | ||
31 | 109 | ||
32 | .actor-name { | 110 | img { |
33 | flex-grow: 1; | 111 | @include avatar(48px); |
112 | } | ||
113 | |||
114 | .actor-info { | ||
115 | margin-left: 15px; | ||
116 | } | ||
117 | |||
118 | h4 { | ||
119 | font-size: 18px; | ||
120 | margin: 0; | ||
121 | |||
122 | a { | ||
123 | color: pvar(--mainForegroundColor); | ||
124 | } | ||
125 | } | ||
34 | 126 | ||
35 | .copy-button { | 127 | .actor-handle { |
36 | border: none; | 128 | font-size: var(--myGreyOwnerFontSize); |
37 | padding: 5px; | 129 | color: pvar(--greyForegroundColor); |
38 | margin-top: -2px; | ||
39 | } | 130 | } |
40 | } | 131 | } |
132 | |||
133 | .owner-description { | ||
134 | max-height: 140px; | ||
135 | word-break: break-word; | ||
136 | |||
137 | @include fade-text(120px, pvar(--mainBackgroundColor)); | ||
138 | } | ||
41 | } | 139 | } |
42 | 140 | ||
43 | .margin-content { | 141 | .view-account.short { |
44 | // margin-content is required, but child views have their own margins | 142 | @include peertube-button-link; |
45 | // that match views outside the scope of accounts, so we only align | 143 | @include orange-button-inverted; |
46 | // them with the margins of .sub-menu when required. | 144 | |
47 | margin: 0; | 145 | margin-top: 30px; |
48 | } | 146 | } |
49 | 147 | ||
50 | .right-buttons { | 148 | .view-account.complete { |
51 | display: flex; | 149 | display: none; |
52 | height: max-content; | 150 | } |
53 | margin-left: auto; | 151 | |
54 | margin-top: 10px; | 152 | .copy-button { |
153 | border: none; | ||
154 | } | ||
55 | 155 | ||
56 | grid-row: buttons-start / span buttons-end; | 156 | @media screen and (max-width: 1400px) { |
57 | grid-column: buttons-start; | 157 | // Takes all the row width |
158 | .channel-avatar-row { | ||
159 | grid-column: 1 / 3; | ||
160 | } | ||
161 | |||
162 | .owner-card { | ||
163 | grid-row: 2; | ||
164 | margin-left: 60px; | ||
165 | } | ||
166 | } | ||
58 | 167 | ||
59 | @include media-breakpoint-down(lg) { | 168 | @media screen and (max-width: 1100px) { |
60 | flex-flow: column-reverse; | 169 | .root { |
170 | --myGlobalTopPadding: 45px; | ||
171 | --myChannelImgMargin: 15px; | ||
172 | } | ||
173 | |||
174 | .channel-info { | ||
175 | display: flex; | ||
176 | flex-direction: column; | ||
177 | margin-bottom: 0; | ||
178 | } | ||
179 | |||
180 | .channel-description:not(.expanded) { | ||
181 | max-height: 70px; | ||
182 | |||
183 | @include fade-text(30px, pvar(--channelBackgroundColor)); | ||
184 | } | ||
61 | 185 | ||
62 | a { | 186 | .show-more { |
63 | margin-top: 0.25rem; | 187 | display: inline-block; |
64 | margin-right: 0 !important; | 188 | } |
189 | |||
190 | .channel-buttons.bottom { | ||
191 | display: flex; | ||
192 | justify-content: center; | ||
193 | margin-bottom: 30px; | ||
194 | } | ||
195 | |||
196 | .channel-buttons.right { | ||
197 | display: none; | ||
198 | } | ||
199 | |||
200 | .owner-card { | ||
201 | display: none; | ||
202 | } | ||
203 | |||
204 | .bottom-owner { | ||
205 | display: block; | ||
206 | width: 100%; | ||
207 | border-bottom: 2px solid $separator-border-color; | ||
208 | padding: var(--myGlobalTopPadding) 45px; | ||
209 | margin-bottom: 60px; | ||
210 | } | ||
211 | |||
212 | .owner-block { | ||
213 | display: grid; | ||
214 | width: 100%; | ||
215 | padding: 0; | ||
216 | |||
217 | .avatar-row { | ||
218 | grid-column: 1; | ||
219 | margin-right: 30px; | ||
220 | } | ||
221 | |||
222 | .owner-description { | ||
223 | grid-column: 2; | ||
224 | max-height: 70px; | ||
225 | |||
226 | @include fade-text(30px, pvar(--mainBackgroundColor)); | ||
227 | } | ||
228 | |||
229 | .view-account { | ||
230 | grid-column: 2; | ||
65 | } | 231 | } |
66 | } | 232 | } |
67 | 233 | ||
68 | a { | 234 | .view-account.complete { |
69 | @include peertube-button-outline; | 235 | display: block; |
70 | line-height: 1.8; | 236 | text-align: right; |
237 | margin-top: 10px; | ||
238 | color: pvar(--mainColor); | ||
71 | } | 239 | } |
72 | 240 | ||
73 | my-subscribe-button { | 241 | .view-account.short { |
74 | height: min-content; | 242 | display: none; |
75 | } | 243 | } |
76 | } | 244 | } |
77 | 245 | ||
78 | @media screen and (max-width: $mobile-view) { | 246 | @media screen and (max-width: $mobile-view) { |
79 | .sub-menu { | 247 | .root { |
80 | .actor { | 248 | --myGlobalTopPadding: 15px; |
81 | flex-direction: column; | 249 | --myFontSize: 14px; |
250 | --myGreyChannelFontSize: 13px; | ||
251 | --myGreyOwnerFontSize: 13px; | ||
252 | } | ||
253 | |||
254 | .links { | ||
255 | margin: auto !important; | ||
256 | width: min-content; | ||
257 | } | ||
258 | |||
259 | .show-more { | ||
260 | margin-bottom: 30px; | ||
261 | } | ||
262 | |||
263 | .bottom-owner { | ||
264 | padding: 15px; | ||
265 | margin-bottom: 30px; | ||
82 | 266 | ||
83 | .actor-info .actor-names { | 267 | .section-label { |
268 | display: none; | ||
269 | } | ||
270 | } | ||
271 | |||
272 | .owner-block { | ||
273 | display: block; | ||
274 | |||
275 | .avatar-row { | ||
276 | display: flex; | ||
277 | flex-direction: row-reverse; | ||
278 | margin: 0; | ||
279 | |||
280 | h4 { | ||
281 | font-size: 16px; | ||
282 | } | ||
283 | |||
284 | .actor-info { | ||
285 | display: flex; | ||
84 | flex-direction: column; | 286 | flex-direction: column; |
85 | align-items: normal; | 287 | align-items: flex-end; |
288 | justify-content: flex-end; | ||
289 | margin-top: -5px; | ||
290 | } | ||
291 | |||
292 | img { | ||
293 | @include channel-avatar(64px); | ||
294 | |||
295 | margin: -30px 0 0 15px; | ||
86 | } | 296 | } |
87 | } | 297 | } |
298 | |||
299 | .owner-description { | ||
300 | display: none; | ||
301 | } | ||
88 | } | 302 | } |
89 | } | 303 | } |