7 --myGlobalPadding: 60px;
8 --myChannelImgMargin: 30px;
10 --myGreyChannelFontSize: 16px;
11 --myGreyOwnerFontSize: 14px;
15 @include section-label-responsive;
19 @include fluid-videos-miniature-layout;
24 grid-template-columns: 1fr auto;
25 grid-template-rows: auto auto;
27 background-color: pvar(--channelBackgroundColor);
29 padding: var(--myGlobalPadding) var(--myGlobalPadding) 0 var(--myGlobalPadding);
30 font-size: var(--myFontSize);
34 @include avatar-row-responsive(var(--myChannelImgMargin), var(--myGreyChannelFontSize));
37 .channel-description {
42 @include show-more-description;
51 > *:not(:last-child) {
56 .channel-buttons.right {
60 // Only used by mobile
61 .channel-buttons.bottom {
67 color: pvar(--greyForegroundColor);
74 // Takes all the column
79 // Only used on mobile
85 background-color: pvar(--mainBackgroundColor);
88 font-size: var(--myFontSize);
95 @include avatar(48px);
108 font-size: var(--myGreyOwnerFontSize);
109 color: pvar(--greyForegroundColor);
116 @include fade-text(120px, pvar(--mainBackgroundColor));
120 .view-account.short {
121 @include peertube-button-link;
122 @include orange-button-inverted;
127 .view-account.complete {
135 @media screen and (max-width: 1400px) {
136 // Takes all the row width
137 .channel-avatar-row {
147 @media screen and (max-width: 1100px) {
149 --myGlobalPadding: 45px;
150 --myChannelImgMargin: 15px;
155 flex-direction: column;
159 .channel-description:not(.expanded) {
162 @include fade-text(30px, pvar(--channelBackgroundColor));
166 display: inline-block;
169 .channel-buttons.bottom {
171 justify-content: center;
175 .channel-buttons.right {
186 border-bottom: 2px solid $separator-border-color;
187 padding: var(--myGlobalPadding) 45px;
205 @include fade-text(30px, pvar(--mainBackgroundColor));
213 .view-account.complete {
214 display: inline-block;
216 color: pvar(--mainColor);
219 .view-account.short {
224 @media screen and (max-width: $mobile-view) {
226 --myGlobalPadding: 15px;
228 --myGreyChannelFontSize: 13px;
229 --myGreyOwnerFontSize: 13px;
233 margin: auto !important;
255 flex-direction: row-reverse;
264 flex-direction: column;
265 align-items: flex-end;
266 justify-content: flex-end;
271 @include channel-avatar(64px);
273 margin: -30px 0 0 15px;