7 --myGlobalTopPadding: 60px;
8 --myChannelImgMargin: 30px;
10 --myGreyChannelFontSize: 16px;
11 --myGreyOwnerFontSize: 14px;
15 @include section-label-responsive;
19 @include fluid-videos-miniature-margins;
23 @include fluid-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 {
48 @include show-more-description;
57 > *:not(:last-child) {
62 .channel-buttons.right {
66 // Only used by mobile
67 .channel-buttons.bottom {
73 color: pvar(--greyForegroundColor);
80 // Takes all the column
85 // Only used on mobile
91 background-color: pvar(--mainBackgroundColor);
94 font-size: var(--myFontSize);
101 @include avatar(48px);
114 font-size: var(--myGreyOwnerFontSize);
115 color: pvar(--greyForegroundColor);
122 @include fade-text(120px, pvar(--mainBackgroundColor));
126 .view-account.short {
127 @include peertube-button-link;
128 @include orange-button-inverted;
133 .view-account.complete {
141 @media screen and (max-width: 1400px) {
142 // Takes all the row width
143 .channel-avatar-row {
153 @media screen and (max-width: 1100px) {
155 --myGlobalTopPadding: 45px;
156 --myChannelImgMargin: 15px;
161 flex-direction: column;
165 .channel-description:not(.expanded) {
168 @include fade-text(30px, pvar(--channelBackgroundColor));
172 display: inline-block;
175 .channel-buttons.bottom {
177 justify-content: center;
181 .channel-buttons.right {
192 border-bottom: 2px solid $separator-border-color;
193 padding: var(--myGlobalTopPadding) 45px;
211 @include fade-text(30px, pvar(--mainBackgroundColor));
219 .view-account.complete {
220 display: inline-block;
222 color: pvar(--mainColor);
225 .view-account.short {
230 @media screen and (max-width: $mobile-view) {
232 --myGlobalTopPadding: 15px;
234 --myGreyChannelFontSize: 13px;
235 --myGreyOwnerFontSize: 13px;
239 margin: auto !important;
261 flex-direction: row-reverse;
270 flex-direction: column;
271 align-items: flex-end;
272 justify-content: flex-end;
277 @include channel-avatar(64px);
279 margin: -30px 0 0 15px;