7 --myGlobalTopPadding: 60px;
8 --myChannelImgMargin: 30px;
10 --myGreyChannelFontSize: 16px;
11 --myGreyOwnerFontSize: 14px;
15 @include section-label-responsive;
19 @include grid-videos-miniature-margins;
33 @include grid-videos-miniature-margins(false, 15px);
36 grid-template-columns: 1fr auto;
37 grid-template-rows: auto auto;
39 background-color: pvar(--channelBackgroundColor);
41 padding-top: var(--myGlobalTopPadding);
42 font-size: var(--myFontSize);
46 @include avatar-row-responsive(var(--myChannelImgMargin), var(--myGreyChannelFontSize));
50 @include button-with-icon(21px, 0, -1px);
53 .channel-description {
55 word-break: break-word;
59 @include show-more-description;
68 > *:not(:last-child) {
73 .channel-buttons.right {
77 // Only used by mobile
78 .channel-buttons.bottom {
84 color: pvar(--greyForegroundColor);
91 // Takes all the column
96 // Only used on mobile
102 background-color: pvar(--mainBackgroundColor);
105 font-size: var(--myFontSize);
112 @include avatar(48px);
124 color: pvar(--mainForegroundColor);
129 font-size: var(--myGreyOwnerFontSize);
130 color: pvar(--greyForegroundColor);
136 word-break: break-word;
138 @include fade-text(120px, pvar(--mainBackgroundColor));
142 .view-account.short {
143 @include peertube-button-link;
144 @include orange-button-inverted;
149 .view-account.complete {
157 @media screen and (max-width: 1400px) {
158 // Takes all the row width
159 .channel-avatar-row {
169 @media screen and (max-width: 1100px) {
171 --myGlobalTopPadding: 45px;
172 --myChannelImgMargin: 15px;
177 flex-direction: column;
181 .channel-description:not(.expanded) {
184 @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;
227 @include fade-text(30px, pvar(--mainBackgroundColor));
235 .view-account.complete {
239 color: pvar(--mainColor);
242 .view-account.short {
247 @media screen and (max-width: $mobile-view) {
249 --myGlobalTopPadding: 15px;
251 --myGreyChannelFontSize: 13px;
252 --myGreyOwnerFontSize: 13px;
256 margin: auto !important;
278 flex-direction: row-reverse;
287 flex-direction: column;
288 align-items: flex-end;
289 justify-content: flex-end;
294 @include channel-avatar(64px);
296 margin: -30px 0 0 15px;