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) {
78 .channel-buttons.right {
82 // Only used by mobile
83 .channel-buttons.bottom {
90 // Takes all the column
95 // Only used on mobile
101 background-color: pvar(--mainBackgroundColor);
104 font-size: var(--myFontSize);
111 @include avatar(48px);
123 color: pvar(--mainForegroundColor);
128 font-size: var(--myGreyOwnerFontSize);
129 color: pvar(--greyForegroundColor);
135 word-break: break-word;
137 @include fade-text(120px, pvar(--mainBackgroundColor));
141 .view-account.short {
142 @include peertube-button-link;
143 @include orange-button-inverted;
148 .view-account.complete {
156 @media screen and (max-width: 1400px) {
157 // Takes all the row width
158 .channel-avatar-row {
168 @media screen and (max-width: 1100px) {
170 --myGlobalTopPadding: 45px;
171 --myChannelImgMargin: 15px;
176 flex-direction: column;
180 .channel-description:not(.expanded) {
183 @include fade-text(30px, pvar(--channelBackgroundColor));
187 display: inline-block;
190 .channel-buttons.bottom {
192 justify-content: center;
196 .channel-buttons.right {
207 border-bottom: 2px solid $separator-border-color;
208 padding: var(--myGlobalTopPadding) 45px;
226 @include fade-text(30px, pvar(--mainBackgroundColor));
234 .view-account.complete {
238 color: pvar(--mainColor);
241 .view-account.short {
246 @media screen and (max-width: $mobile-view) {
248 --myGlobalTopPadding: 15px;
250 --myGreyChannelFontSize: 13px;
251 --myGreyOwnerFontSize: 13px;
255 margin: auto !important;
277 flex-direction: row-reverse;
286 flex-direction: column;
287 align-items: flex-end;
288 justify-content: flex-end;
293 @include channel-avatar(64px);
295 margin: -30px 0 0 15px;