74 lines
1.2 KiB
CSS
74 lines
1.2 KiB
CSS
.profileBox {
|
|
background-color: #fff;
|
|
border-radius: 10px;
|
|
position: relative;
|
|
margin-bottom: 15px;
|
|
}
|
|
.header {
|
|
background: #EAEDFB;
|
|
border-radius: 10px 10px 0px 0px;
|
|
padding: 30px 15px 50px;
|
|
position: relative;
|
|
}
|
|
.headerContent {
|
|
max-width: 300px;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
.header h1 {
|
|
margin: 0 0 10px;
|
|
font-size: 18px;
|
|
color: #757FEF;
|
|
font-weight: 500;
|
|
}
|
|
.header p {
|
|
margin: 0;
|
|
font-size: 14px;
|
|
color: #757FEF;
|
|
}
|
|
.header img {
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
}
|
|
.profileInfoContent {
|
|
padding: 0 15px 30px;
|
|
}
|
|
.profileInfo {
|
|
position: relative;
|
|
}
|
|
.profileInfo img {
|
|
position: absolute;
|
|
top: -30px;
|
|
width: 60px;
|
|
height: 60px;
|
|
border: 5px solid #fff;
|
|
border-radius: 100%;
|
|
box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
|
|
}
|
|
.profileInfo h3 {
|
|
margin: 0 0 5px;
|
|
font-size: 14px;
|
|
padding-top: 45px;
|
|
}
|
|
.profileInfo p {
|
|
margin: 0;
|
|
font-size: 13px;
|
|
}
|
|
|
|
@media only screen and (max-width: 767px) {
|
|
.profileInfo h3 {
|
|
font-size: 12px;
|
|
}
|
|
.profileInfo p {
|
|
font-size: 11px;
|
|
}
|
|
}
|
|
|
|
/* For dark mode */
|
|
[class="dark"] .profileBox {
|
|
background-color: var(--cardBg);
|
|
}
|
|
[class="dark"] .header {
|
|
background: #161515;
|
|
} |