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 @include grid-videos-miniature-margins(false, 15px);
40 grid-template-columns: 1fr auto;
41 grid-template-rows: auto auto;
43 background-color: pvar(--channelBackgroundColor);
45 padding-top: var(--myGlobalTopPadding);
46 font-size: var(--myFontSize);
50 @include avatar-row-responsive(var(--myChannelImgMargin), var(--myGreyChannelFontSize));
54 @include button-with-icon(21px, 0, -1px);
57 .channel-description {
59 word-break: break-word;
60 padding-bottom: var(--myGlobalTopPadding);
64 @include show-more-description;
73 > *:not(:last-child) {
74 @include margin-right(15px);
78 .channel-buttons.right {
79 @include margin-left(45px);
82 // Only used by mobile
83 .channel-buttons.bottom {
88 @include margin-left(105px);
90 // Takes all the column
95 // Only used on mobile
101 background-color: pvar(--mainBackgroundColor);
104 font-size: var(--myFontSize);
111 @include margin-left(15px);
119 color: pvar(--mainForegroundColor);
124 font-size: var(--myGreyOwnerFontSize);
125 color: pvar(--greyForegroundColor);
130 @include fade-text(120px, pvar(--mainBackgroundColor));
133 word-break: break-word;
137 .view-account.short {
138 @include peertube-button-link;
139 @include orange-button-inverted;
144 .view-account.complete {
152 @media screen and (max-width: 1400px) {
153 // Takes all the row width
154 .channel-avatar-row {
159 @include margin-left(60px);
165 @media screen and (max-width: 1100px) {
167 --myGlobalTopPadding: 45px;
168 --myChannelImgMargin: 15px;
173 flex-direction: column;
177 .channel-description:not(.expanded) {
178 @include fade-text(30px, pvar(--channelBackgroundColor));
184 display: inline-block;
187 .channel-buttons.bottom {
189 justify-content: center;
193 .channel-buttons.right {
204 border-bottom: 2px solid $separator-border-color;
205 padding: var(--myGlobalTopPadding) 45px;
215 @include margin-right(30px);
221 @include fade-text(30px, pvar(--mainBackgroundColor));
232 .view-account.complete {
236 color: pvar(--mainColor);
239 .view-account.short {
244 @media screen and (max-width: $mobile-view) {
246 --myGlobalTopPadding: 15px;
248 --myGreyChannelFontSize: 13px;
249 --myGreyOwnerFontSize: 13px;
253 margin: auto !important;
275 flex-direction: row-reverse;
284 flex-direction: column;
285 align-items: flex-end;
286 justify-content: flex-end;
291 @include actor-avatar-size(64px);
293 margin: -30px 0 0 15px;