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;
63 @include show-more-description;
72 > *:not(:last-child) {
77 .channel-buttons.right {
81 // Only used by mobile
82 .channel-buttons.bottom {
88 color: pvar(--greyForegroundColor);
95 // Takes all the column
100 // Only used on mobile
106 background-color: pvar(--mainBackgroundColor);
109 font-size: var(--myFontSize);
116 @include avatar(48px);
128 color: pvar(--mainForegroundColor);
133 font-size: var(--myGreyOwnerFontSize);
134 color: pvar(--greyForegroundColor);
140 word-break: break-word;
142 @include fade-text(120px, pvar(--mainBackgroundColor));
146 .view-account.short {
147 @include peertube-button-link;
148 @include orange-button-inverted;
153 .view-account.complete {
161 @media screen and (max-width: 1400px) {
162 // Takes all the row width
163 .channel-avatar-row {
173 @media screen and (max-width: 1100px) {
175 --myGlobalTopPadding: 45px;
176 --myChannelImgMargin: 15px;
181 flex-direction: column;
185 .channel-description:not(.expanded) {
188 @include fade-text(30px, pvar(--channelBackgroundColor));
192 display: inline-block;
195 .channel-buttons.bottom {
197 justify-content: center;
201 .channel-buttons.right {
212 border-bottom: 2px solid $separator-border-color;
213 padding: var(--myGlobalTopPadding) 45px;
231 @include fade-text(30px, pvar(--mainBackgroundColor));
239 .view-account.complete {
243 color: pvar(--mainColor);
246 .view-account.short {
251 @media screen and (max-width: $mobile-view) {
253 --myGlobalTopPadding: 15px;
255 --myGreyChannelFontSize: 13px;
256 --myGreyOwnerFontSize: 13px;
260 margin: auto !important;
282 flex-direction: row-reverse;
291 flex-direction: column;
292 align-items: flex-end;
293 justify-content: flex-end;
298 @include channel-avatar(64px);
300 margin: -30px 0 0 15px;