xssbook/public/css/profile.css
2023-01-26 17:29:16 -05:00

121 lines
1.9 KiB
CSS

body {
background-color: #f0f2f5;
}
.spacer {
margin-bottom: 3.5em;
}
#top {
background-color: white;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
box-shadow: 0 2px 4px rgba(0, 0, 0, .05);
}
#banner {
background-image: linear-gradient(#949494, white, white);
height: 30em;
width: 100%;
display: flex;
justify-content: center;
}
#banner div, #banner img {
width: 80em;
height: inherit;
background-color: #e4e6e8;
border-radius: 0px 0px 20px 20px;
}
#info {
width: 80em;
display: flex;
flex-direction: row;
}
.face {
background-color: #e4e6e8;
height: 12em;
width: 12em;
border-radius: 7em;
border: solid 5px white;
margin-top: -2em;
margin-left: 2em;
margin-right: 2em;
}
.infodata {
margin-top: 2em;
display: flex;
flex-direction: column;
}
.infodata span {
margin-bottom: .5em;
}
.profilebuttons {
width: 80em;
height: 3em;
display: flex;
align-items: center;
}
.profilebuttons button {
all: unset;
font-family: sfprobold;
padding: 0px 50px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: #606770;
cursor: pointer;
}
.profilebuttons button:hover {
background-color: #dddfe2;
}
.selected {
color: #1778f2 !important;
border-bottom: 3px solid #1778f2 !important;
}
#about {
margin-top: 2em;
align-self: center;
padding: 0;
display: flex;
flex-direction: row;
}
#posts {
margin-top: 2em;
}
#about .ltext {
border-right: 2px solid #dadde1;
padding: 10px;
padding-right: 3em;
}
#about .data {
display: flex;
flex-direction: column;
padding: 10px;
padding-left: 20px;
padding-top: 15px;
}
#about .data span {
margin-bottom: 10px;
width: 28em;
margin-bottom: 5px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}