PeerTube/client/src/sass/include/_actor.scss

87 lines
1.4 KiB
SCSS

@import '_variables';
@mixin section-label-responsive {
color: pvar(--mainColor);
font-size: 12px;
margin-bottom: 15px;
font-weight: $font-bold;
letter-spacing: 2.5px;
@media screen and (max-width: $mobile-view) {
font-size: 10px;
letter-spacing: 2.1px;
margin-bottom: 5px;
}
}
@mixin show-more-description {
color: pvar(--mainColor);
cursor: pointer;
margin: 10px auto 45px auto;
}
@mixin avatar-row-responsive ($img-margin, $grey-font-size) {
display: flex;
grid-column: 1;
margin-bottom: 30px;
.channel-avatar {
@include channel-avatar(120px);
}
.account-avatar {
@include avatar(120px);
}
> div {
margin-left: $img-margin;
}
.actor-info {
display: flex;
> div:first-child {
flex-grow: 1;
}
}
.actor-display-name {
display: flex;
flex-wrap: wrap;
}
h1 {
font-size: 28px;
font-weight: $font-bold;
margin: 0;
}
.actor-handle,
.actor-counters {
color: pvar(--greyForegroundColor);
font-size: $grey-font-size;
}
.actor-counters > *:not(:last-child)::after {
content: '';
margin: 0 10px;
color: pvar(--mainColor);
}
@media screen and (max-width: $mobile-view) {
margin-bottom: 15px;
h1 {
font-size: 22px;
}
.channel-avatar {
@include channel-avatar(80px);
}
.account-avatar {
@include avatar(120px);
}
}
}