171 lines
3.1 KiB
SCSS
171 lines
3.1 KiB
SCSS
@import '../config/import';
|
|
|
|
.profile-header {
|
|
--padding: var(--su-3);
|
|
border-radius: 0;
|
|
|
|
@media (min-width: $breakpoint-s) {
|
|
--padding: var(--su-4);
|
|
}
|
|
|
|
@media (min-width: $breakpoint-m) {
|
|
border-radius: var(--radius);
|
|
text-align: center;
|
|
}
|
|
|
|
@media (min-width: $breakpoint-l) {
|
|
--padding: var(--su-6);
|
|
}
|
|
|
|
&__top {
|
|
margin-top: calc(-1 * var(--su-7));
|
|
margin-bottom: var(--su-4);
|
|
position: relative;
|
|
padding: 0 var(--padding);
|
|
|
|
@media (min-width: $breakpoint-m) {
|
|
margin-top: calc(-1 * var(--su-9));
|
|
margin-bottom: var(--su-3);
|
|
}
|
|
}
|
|
|
|
&__actions {
|
|
display: flex;
|
|
right: 0;
|
|
top: var(--su-7);
|
|
position: absolute;
|
|
left: 0;
|
|
justify-content: flex-end;
|
|
padding: var(--padding) var(--padding) 0 0;
|
|
|
|
@media (min-width: $breakpoint-m) {
|
|
top: var(--su-9);
|
|
}
|
|
}
|
|
|
|
&__details {
|
|
padding: var(--padding);
|
|
}
|
|
|
|
&__meta {
|
|
font-size: var(--fs-s);
|
|
color: var(--base-60);
|
|
margin-bottom: var(--su-2);
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
margin-left: calc(-1 * var(--su-1));
|
|
|
|
@media (min-width: $breakpoint-m) {
|
|
justify-content: center;
|
|
margin-left: 0;
|
|
}
|
|
|
|
a {
|
|
color: var(--link-color-secondary);
|
|
|
|
&:hover {
|
|
color: var(--link-color-hover);
|
|
}
|
|
}
|
|
|
|
&__item {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: nowrap;
|
|
white-space: nowrap;
|
|
padding: var(--su-2) var(--su-2);
|
|
|
|
@media (min-width: $breakpoint-m) {
|
|
padding: var(--su-1) var(--su-3);
|
|
}
|
|
}
|
|
}
|
|
|
|
&__bottom {
|
|
border-top: 1px solid var(--base-10);
|
|
padding: calc(var(--padding) / 2);
|
|
display: flex;
|
|
flex-flow: column;
|
|
justify-content: space-evenly;
|
|
|
|
@media (min-width: $breakpoint-s) {
|
|
flex-flow: row;
|
|
}
|
|
|
|
.crayons-definition {
|
|
padding: calc(var(--padding) / 2);
|
|
}
|
|
}
|
|
|
|
.crayons-avatar,
|
|
.crayons-logo {
|
|
width: var(--su-9);
|
|
height: var(--su-9);
|
|
background-color: var(--profile-brand-color);
|
|
padding: var(--su-1);
|
|
|
|
&::after {
|
|
content: none;
|
|
}
|
|
|
|
@media (min-width: $breakpoint-m) {
|
|
padding: var(--su-2);
|
|
width: var(--su-10);
|
|
height: var(--su-10);
|
|
}
|
|
}
|
|
}
|
|
|
|
.crayons-definition {
|
|
font-size: inherit;
|
|
|
|
&__title {
|
|
font-size: 85%;
|
|
font-weight: var(--fw-medium);
|
|
color: var(--base-60);
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.brand-bg {
|
|
background: linear-gradient(
|
|
180deg,
|
|
var(--profile-brand-color) var(--su-9),
|
|
transparent var(--su-9)
|
|
);
|
|
|
|
@media (min-width: $breakpoint-m) {
|
|
background: linear-gradient(
|
|
180deg,
|
|
var(--profile-brand-color) var(--su-10),
|
|
transparent var(--su-10)
|
|
);
|
|
}
|
|
}
|
|
|
|
.profile-comment-card {
|
|
border-radius: 0;
|
|
|
|
@media screen and (min-width: $breakpoint-s) {
|
|
border-radius: var(--radius);
|
|
}
|
|
}
|
|
|
|
.profile-comment-row {
|
|
color: var(--base-90);
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-bottom: 1px solid var(--card-border);
|
|
padding: var(--su-3) var(--su-4);
|
|
|
|
&:hover,
|
|
&:focus,
|
|
&:active {
|
|
background-color: var(--card-secondary-border);
|
|
}
|
|
|
|
&:last-child {
|
|
border-bottom: unset;
|
|
}
|
|
}
|