145 lines
2.8 KiB
CSS
145 lines
2.8 KiB
CSS
.mainWrapper {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
flex: 1 0 0;
|
|
align-self: stretch;
|
|
}
|
|
.mainContainer {
|
|
display: flex;
|
|
padding: 36px;
|
|
align-items: flex-start;
|
|
flex: 1 0 0;
|
|
align-self: stretch;
|
|
background: #191a24;
|
|
background: color(display-p3 0.098 0.102 0.1373);
|
|
}
|
|
.userDashContainer {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
flex: 1 0 0;
|
|
align-self: stretch;
|
|
background: #191a24;
|
|
background: color(display-p3 0.098 0.102 0.1373);
|
|
}
|
|
.userNameContainer {
|
|
display: flex;
|
|
padding: 24px;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
align-self: stretch;
|
|
border-radius: 8px;
|
|
background: #21232f;
|
|
background: color(display-p3 0.1294 0.1373 0.1804);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.nameSection {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 24px;
|
|
flex: 1 0 0;
|
|
}
|
|
.logoSection {
|
|
display: flex;
|
|
padding-right: 16px;
|
|
flex-direction: column;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
align-self: stretch;
|
|
position: absolute;
|
|
right: 0;
|
|
}
|
|
.gradientGlass {
|
|
width: 350px;
|
|
height: 350px;
|
|
/* aspect-ratio: 75/75; */
|
|
background: url(/images/idp.png) 50% / cover no-repeat;
|
|
transform: translate(-5px, -30px) scale(0.9) rotate(5deg);
|
|
}
|
|
.weather {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
align-self: stretch;
|
|
}
|
|
.weather > p {
|
|
color: #d2d3e1;
|
|
color: color(display-p3 0.8235 0.8275 0.8784);
|
|
font-family: Inter;
|
|
font-size: 18px;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
letter-spacing: -0.18px;
|
|
}
|
|
|
|
.ordinal {
|
|
font-size: 0.6em;
|
|
vertical-align: super;
|
|
}
|
|
.name {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
gap: 48px;
|
|
align-self: stretch;
|
|
}
|
|
.welcomeGreet {
|
|
color: #d2d3e1;
|
|
color: color(display-p3 0.8235 0.8275 0.8784);
|
|
font-family: Inter;
|
|
font-size: 24px;
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
line-height: normal;
|
|
letter-spacing: -0.24px;
|
|
}
|
|
.welcomeMsg {
|
|
color: #d2d3e1;
|
|
color: color(display-p3 0.8235 0.8275 0.8784);
|
|
font-family: Inter;
|
|
font-size: 40px;
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
line-height: normal;
|
|
letter-spacing: 0.4px;
|
|
}
|
|
|
|
.linkMainContainer {
|
|
display: flex;
|
|
padding: 54px 10px;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 10px;
|
|
align-self: stretch;
|
|
}
|
|
.linkContainer {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
gap: 24px;
|
|
align-self: stretch;
|
|
}
|
|
.link {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
align-self: stretch;
|
|
}
|
|
.link > p {
|
|
color: #959aff;
|
|
color: color(display-p3 0.5892 0.6031 0.9766);
|
|
font-family: Inter;
|
|
font-size: 18px;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
letter-spacing: -0.18px;
|
|
width: 463px;
|
|
}
|