1 @use '_variables' as *;
3 @use '_account-channel-page' as *;
4 @use '_miniature' as *;
7 --myGlobalTopPadding: 60px;
8 --myChannelImgMargin: 30px;
10 --myGreyChannelFontSize: 16px;
11 --myGreyOwnerFontSize: 14px;
15 @include block-ratio('img', $banner-inverted-ratio);
19 @include section-label-responsive;
23 @include grid-videos-miniature-margins;
37 // Use the same margin as the videos grid
38 @include grid-videos-miniature-margins(false, 15px);
39 @include margin-bottom(3rem);
42 grid-template-columns: 1fr auto;
43 grid-template-rows: auto auto;
45 background-color: pvar(--channelBackgroundColor);
46 padding-top: var(--myGlobalTopPadding);
47 font-size: var(--myFontSize);
51 @include avatar-row-responsive(var(--myChannelImgMargin), var(--myGreyChannelFontSize));
55 @include button-with-icon(21px, 0, -1px);
58 .channel-description {
60 word-break: break-word;
61 padding-bottom: var(--myGlobalTopPadding);
65 @include show-more-description;
77 @include margin-left(3rem);
80 // Only used on small screen
82 @include margin-bottom(2rem);
84 justify-content: center;
90 @include margin-left(105px);
93 // Takes all the column
98 // Only used on mobile
104 background-color: pvar(--mainBackgroundColor);
107 font-size: var(--myFontSize);
114 @include margin-left(15px);
122 color: pvar(--mainForegroundColor);
127 font-size: var(--myGreyOwnerFontSize);
128 color: pvar(--greyForegroundColor);
132 @include actor-avatar-size(48px);
137 @include fade-text(120px, pvar(--mainBackgroundColor));
140 word-break: break-word;
144 .view-account.short {
145 @include peertube-button-link;
146 @include orange-button-inverted;
151 .view-account.complete {
156 @include margin-left(3px);
165 @media screen and (max-width: 1400px) {
166 // Takes all the row width
167 .channel-avatar-row {
172 @include margin-left(60px);
178 @media screen and (max-width: 1100px) {
180 --myGlobalTopPadding: 45px;
181 --myChannelImgMargin: 15px;
186 flex-direction: column;
190 .channel-description:not(.expanded) {
191 @include fade-text(30px, pvar(--channelBackgroundColor));
197 display: inline-block;
217 border-bottom: 2px solid $separator-border-color;
218 padding: var(--myGlobalTopPadding) 45px;
228 @include margin-right(30px);
234 @include fade-text(30px, pvar(--mainBackgroundColor));
245 .view-account.complete {
249 color: pvar(--mainColor);
252 .view-account.short {
257 @media screen and (max-width: $mobile-view) {
259 --myGlobalTopPadding: 15px;
261 --myGreyChannelFontSize: 13px;
262 --myGreyOwnerFontSize: 13px;
266 margin: auto !important;
284 flex-direction: row-reverse;
293 flex-direction: column;
294 align-items: flex-end;
295 justify-content: flex-end;
300 @include actor-avatar-size(64px);
302 margin: -30px 0 0 15px;