More actions
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
.profile-iconbox { | |||
position: relative; | |||
padding: 15px; | |||
background: var( --color-surface-1 ); | |||
border-radius: 8px; | |||
box-shadow: 0 3px 6px rgba( 0, 0, 0, 0.04 ), 0 3px 6px rgba( 0, 0, 0, 0.0575 ); | |||
font-size: 0.875rem; | |||
margin-bottom: 0.625rem; | |||
overflow: hidden; | |||
height: 209px; | |||
margin-bottom: 0.625rem; | |||
} | |||
.profile-iconbox .profile-iconbox__img a { | |||
display: block; | |||
height: 100%; | |||
} | |||
.profile-iconbox .profile-iconbox__img:after { | |||
position: absolute; | |||
pointer-events: none; | |||
right: 0; | |||
bottom: 0; | |||
left: 0; | |||
display: block; | |||
height: 60%; | |||
background: linear-gradient( to top, #000, transparent ); | |||
border-radius: 0 0 8px 8px; | |||
content: ''; | |||
} | |||
.profile-iconbox__foreground { | |||
position: absolute; | |||
} | |||
.profile-iconbox__foreground .profile-iconbox__label { | |||
color: #bababa; | |||
} | |||
.profile-iconbox__foreground .profile-iconbox__header { | |||
color: #fff; | |||
} | |||
.profile-iconbox .profile-iconbox__foreground { | |||
pointer-events: none; | |||
right: 15px; | |||
bottom: 15px; | |||
left: 15px; | |||
} | |||
.home-card__foreground .profile-iconbox__label { | |||
color: #bababa; | |||
} | |||
.profile-iconbox__label { | |||
color: var( --color-base--subtle ); | |||
font-size: 0.8125rem; | |||
letter-spacing: 0.75px; | |||
} | |||
h3.profile-iconbox__header { | |||
margin-top: 0; | |||
font-size: 1rem; | |||
} | |||
.profile-iconbox__header a { | |||
display: flex; | |||
align-items: center; | |||
justify-content: space-between; | |||
} | |||
.profile-iconbox__header a:after { | |||
content: '▶'; | |||
font-size: 0.8125rem; | |||
} | |||
.profile-header { | .profile-header { | ||
position: relative; | position: relative; | ||
Revision as of 05:35, 23 April 2023
.profile-iconbox {
position: relative;
padding: 15px;
background: var( --color-surface-1 );
border-radius: 8px;
box-shadow: 0 3px 6px rgba( 0, 0, 0, 0.04 ), 0 3px 6px rgba( 0, 0, 0, 0.0575 );
font-size: 0.875rem;
margin-bottom: 0.625rem;
overflow: hidden;
height: 209px;
margin-bottom: 0.625rem;
}
.profile-iconbox .profile-iconbox__img a {
display: block;
height: 100%;
}
.profile-iconbox .profile-iconbox__img:after {
position: absolute;
pointer-events: none;
right: 0;
bottom: 0;
left: 0;
display: block;
height: 60%;
background: linear-gradient( to top, #000, transparent );
border-radius: 0 0 8px 8px;
content: '';
}
.profile-iconbox__foreground {
position: absolute;
}
.profile-iconbox__foreground .profile-iconbox__label {
color: #bababa;
}
.profile-iconbox__foreground .profile-iconbox__header {
color: #fff;
}
.profile-iconbox .profile-iconbox__foreground {
pointer-events: none;
right: 15px;
bottom: 15px;
left: 15px;
}
.home-card__foreground .profile-iconbox__label {
color: #bababa;
}
.profile-iconbox__label {
color: var( --color-base--subtle );
font-size: 0.8125rem;
letter-spacing: 0.75px;
}
h3.profile-iconbox__header {
margin-top: 0;
font-size: 1rem;
}
.profile-iconbox__header a {
display: flex;
align-items: center;
justify-content: space-between;
}
.profile-iconbox__header a:after {
content: '▶';
font-size: 0.8125rem;
}
.profile-header {
position: relative;
padding: 15px;
background: var(--color-surface-1);
border-radius: 8px;
box-shadow: 0 3px 6px rgba(0,0,0,0.04),0 3px 6px rgba(0,0,0,0.0575);
font-size: 0.875rem;
}
.profile-avatar {
width: fit-content;
}
.profile-avatar img {
border-radius: 8px;
transition: transform 250ms cubic-bezier(0.215,0.61,0.355,1);
}
.profile-avatar img:hover {
transform: scale(1.02);
}