xssbook/public/css/profile.css

199 lines
3.3 KiB
CSS
Raw Normal View History

2023-01-26 22:29:16 +00:00
body {
2023-01-30 23:55:36 +00:00
background-color: var(--secondary);
2023-01-31 13:47:18 +00:00
max-width: 100%;
2023-01-26 22:29:16 +00:00
}
.spacer {
margin-bottom: 3.5em;
}
#top {
2023-01-30 23:55:36 +00:00
background-color: var(--primary);
2023-01-26 22:29:16 +00:00
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
box-shadow: 0 2px 4px rgba(0, 0, 0, .05);
}
#banner {
2023-01-30 23:55:36 +00:00
background-image: linear-gradient(var(--banner), var(--primary), var(--primary));
2023-01-26 22:29:16 +00:00
height: 30em;
width: 100%;
display: flex;
justify-content: center;
}
2023-02-01 03:21:19 +00:00
#banner .bg, #banner img {
2023-01-26 22:29:16 +00:00
width: 80em;
2023-01-31 13:47:18 +00:00
max-width: 100%;
2023-01-26 22:29:16 +00:00
height: inherit;
2023-01-30 23:55:36 +00:00
background-color: var(--hover);
2023-01-26 22:29:16 +00:00
border-radius: 0px 0px 20px 20px;
2023-02-02 01:56:09 +00:00
object-fit: cover;
2023-01-26 22:29:16 +00:00
}
#info {
width: 80em;
2023-01-31 13:47:18 +00:00
max-width: 100%;
2023-01-26 22:29:16 +00:00
display: flex;
flex-direction: row;
}
.face {
2023-01-30 23:55:36 +00:00
background-color: var(--hover);
2023-01-26 22:29:16 +00:00
height: 12em;
width: 12em;
border-radius: 7em;
2023-01-30 23:55:36 +00:00
border: solid 5px var(--primary);
2023-01-26 22:29:16 +00:00
margin-top: -2em;
margin-left: 2em;
margin-right: 2em;
}
2023-01-31 03:55:14 +00:00
.face img {
height: 12em;
width: 12em;
border-radius: 7em;
}
2023-02-01 03:21:19 +00:00
.changeavatar, .changebanner {
all: unset;
position: absolute;
width: 3em;
height: 3em;
margin-left: -3em;
margin-top: 9em;
border-radius: 3em;
background-color: var(--secondary);
z-index: 10000 !important;
text-align: center;
2023-02-01 03:57:39 +00:00
background-image: url('/image/change.png');
2023-02-01 03:21:19 +00:00
cursor: pointer;
}
.changebanner {
position: relative;
margin-left: -4em;
margin-top: 26em;
}
2023-01-26 22:29:16 +00:00
.infodata {
margin-top: 2em;
display: flex;
flex-direction: column;
}
.infodata span {
margin-bottom: .5em;
}
.profilebuttons {
width: 80em;
2023-01-31 13:47:18 +00:00
max-width: 100%;
2023-01-26 22:29:16 +00:00
height: 3em;
display: flex;
align-items: center;
justify-content: space-between;
2023-01-26 22:29:16 +00:00
}
.profilebuttons button {
all: unset;
font-family: sfprobold;
padding: 0px 50px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
2023-01-30 23:55:36 +00:00
color: var(--medium);
2023-01-26 22:29:16 +00:00
cursor: pointer;
flex: 0;
2023-01-26 22:29:16 +00:00
}
.profilebuttons button:hover {
2023-01-30 23:55:36 +00:00
background-color: var(--mild);
2023-01-26 22:29:16 +00:00
}
.selected {
2023-01-30 23:55:36 +00:00
color: var(--logo) !important;
border-bottom: 3px solid var(--logo) !important;
2023-01-26 22:29:16 +00:00
}
2023-02-15 18:32:43 +00:00
#about, #friends, #followers, #following {
2023-01-26 22:29:16 +00:00
margin-top: 2em;
align-self: center;
padding: 0;
display: flex;
flex-direction: column;
}
#about {
2023-01-26 22:29:16 +00:00
flex-direction: row;
}
#posts {
2023-01-31 13:47:18 +00:00
max-width: 100%;
2023-01-26 22:29:16 +00:00
margin-top: 2em;
}
#about .ltext {
2023-01-30 23:55:36 +00:00
border-right: 2px solid var(--mild);
2023-01-26 22:29:16 +00:00
padding: 10px;
padding-right: 3em;
2023-01-31 13:47:18 +00:00
max-width: 100%;
2023-01-26 22:29:16 +00:00
}
#about .data {
display: flex;
flex-direction: column;
padding: 10px;
padding-left: 20px;
padding-top: 15px;
2023-01-31 13:47:18 +00:00
max-width: 100%;
2023-01-26 22:29:16 +00:00
}
#about .data span {
margin-bottom: 10px;
width: 28em;
margin-bottom: 5px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
2023-01-31 13:47:18 +00:00
max-width: 100%;
}
.logout {
flex: 1;
2023-02-15 00:28:10 +00:00
}
.follow {
display: flex;
justify-content: center;
align-items: center;
height: 40px;
width: 175px;
background-color: var(--secondary);
border-radius: 10px;
cursor: pointer;
}
.follow>span {
color: var(--medium);
}
.friend {
background-color: var(--logo);
border: 1px solid var(#ffffff)
}
.friend>span {
color: #ffffff;
}
.right {
flex: 1;
display: flex;
justify-content: end;
align-items: center;
padding-right: 50px;
2023-01-26 22:29:16 +00:00
}