7 --myGlobalTopPadding: 60px;
8 --myChannelImgMargin: 30px;
10 --myGreyChannelFontSize: 16px;
11 --myGreyOwnerFontSize: 14px;
15 @include section-label-responsive;
19 @include grid-videos-miniature-margins;
23 @include grid-videos-miniature-margins(false, 15px);
26 grid-template-columns: 1fr auto;
27 grid-template-rows: auto auto;
29 background-color: pvar(--channelBackgroundColor);
31 padding-top: var(--myGlobalTopPadding);
32 font-size: var(--myFontSize);
36 @include avatar-row-responsive(var(--myChannelImgMargin), var(--myGreyChannelFontSize));
40 @include button-with-icon(21px, 0, -1px);
43 .channel-description {
45 word-break: break-word;
49 @include show-more-description;
58 > *:not(:last-child) {
63 .channel-buttons.right {
67 // Only used by mobile
68 .channel-buttons.bottom {
74 color: pvar(--greyForegroundColor);
81 // Takes all the column
86 // Only used on mobile
92 background-color: pvar(--mainBackgroundColor);
95 font-size: var(--myFontSize);
102 @include avatar(48px);
114 color: pvar(--mainForegroundColor);
119 font-size: var(--myGreyOwnerFontSize);
120 color: pvar(--greyForegroundColor);
126 word-break: break-word;
128 @include fade-text(120px, pvar(--mainBackgroundColor));
132 .view-account.short {
133 @include peertube-button-link;
134 @include orange-button-inverted;
139 .view-account.complete {
147 @media screen and (max-width: 1400px) {
148 // Takes all the row width
149 .channel-avatar-row {
159 @media screen and (max-width: 1100px) {
161 --myGlobalTopPadding: 45px;
162 --myChannelImgMargin: 15px;
167 flex-direction: column;
171 .channel-description:not(.expanded) {
174 @include fade-text(30px, pvar(--channelBackgroundColor));
178 display: inline-block;
181 .channel-buttons.bottom {
183 justify-content: center;
187 .channel-buttons.right {
198 border-bottom: 2px solid $separator-border-color;
199 padding: var(--myGlobalTopPadding) 45px;
217 @include fade-text(30px, pvar(--mainBackgroundColor));
225 .view-account.complete {
229 color: pvar(--mainColor);
232 .view-account.short {
237 @media screen and (max-width: $mobile-view) {
239 --myGlobalTopPadding: 15px;
241 --myGreyChannelFontSize: 13px;
242 --myGreyOwnerFontSize: 13px;
246 margin: auto !important;
268 flex-direction: row-reverse;
277 flex-direction: column;
278 align-items: flex-end;
279 justify-content: flex-end;
284 @include channel-avatar(64px);
286 margin: -30px 0 0 15px;