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 actor-avatar-size(48px);
115 @include margin-left(15px);
123 color: pvar(--mainForegroundColor);
128 font-size: var(--myGreyOwnerFontSize);
129 color: pvar(--greyForegroundColor);
134 @include fade-text(120px, pvar(--mainBackgroundColor));
137 word-break: break-word;
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 {
163 @include margin-left(60px);
169 @media screen and (max-width: 1100px) {
171 --myGlobalTopPadding: 45px;
172 --myChannelImgMargin: 15px;
177 flex-direction: column;
181 .channel-description:not(.expanded) {
182 @include fade-text(30px, pvar(--channelBackgroundColor));
188 display: inline-block;
191 .channel-buttons.bottom {
193 justify-content: center;
197 .channel-buttons.right {
208 border-bottom: 2px solid $separator-border-color;
209 padding: var(--myGlobalTopPadding) 45px;
219 @include margin-right(30px);
225 @include fade-text(30px, pvar(--mainBackgroundColor));
236 .view-account.complete {
240 color: pvar(--mainColor);
243 .view-account.short {
248 @media screen and (max-width: $mobile-view) {
250 --myGlobalTopPadding: 15px;
252 --myGreyChannelFontSize: 13px;
253 --myGreyOwnerFontSize: 13px;
257 margin: auto !important;
279 flex-direction: row-reverse;
288 flex-direction: column;
289 align-items: flex-end;
290 justify-content: flex-end;
295 @include actor-avatar-size(64px);
297 margin: -30px 0 0 15px;