client/src/sass/include/_actor.scss
@use '_variables' as *;
@use '_mixins' as *;
@mixin actor-row ($avatar-margin-right: 10px, $min-height: 130px, $separator: true) {
@include row-blocks($min-height: $min-height, $separator: $separator);
> my-actor-avatar {
@include margin-right($avatar-margin-right);
}
.actor-info {
flex-grow: 1;
}
.actor-names {
width: fit-content;
display: flex;
align-items: baseline;
color: pvar(--mainForegroundColor);
@include disable-default-a-behaviour;
}
.actor-display-name {
font-weight: $font-semibold;
font-size: 18px;
}
.actor-name {
font-size: 14px;
color: pvar(--greyForegroundColor);
@include margin-left(5px);
}
.actor-owner {
color: pvar(--mainForegroundColor);
display: flex;
align-items: center;
@include disable-default-a-behaviour;
span:hover {
opacity: 0.8;
}
my-actor-avatar {
@include margin-left(5px);
}
}
@media screen and (max-width: $small-view) {
.actor-info {
padding-bottom: 10px;
text-align: center;
.actor-names {
flex-direction: column;
align-items: center !important;
margin: auto;
}
}
}
}