phanpy/src/components/account.css
Lim Chee Aun e5e2bd6f2a Add account statuses timeline + few aesthetic changes to Account sheet
And secretly link to this timeline, don't tell anyone lol
2023-01-29 23:37:13 +08:00

91 lines
1.8 KiB
CSS

#account-container.skeleton {
color: var(--outline-color);
}
#account-container header {
display: flex;
align-items: center;
gap: 8px;
}
#account-container .note {
font-size: 95%;
line-height: 1.4;
}
#account-container .note:not(:has(p)):not(:empty) {
/* Some notes don't have <p> tags, so we need to add some padding */
padding: 1em 0;
}
#account-container .stats {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
gap: 16px;
opacity: 0.75;
font-size: 90%;
background-color: var(--bg-faded-color);
padding: 12px;
border-radius: 8px;
line-height: 1.25;
}
#account-container .stats > * {
text-align: center;
}
#account-container .stats a {
color: inherit;
}
#account-container .actions {
display: flex;
gap: 8px;
justify-content: space-between;
min-height: 2.5em;
}
#account-container .actions button {
align-self: flex-end;
}
#account-container .profile-metadata {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
#account-container .profile-field {
min-width: 0;
flex-grow: 1;
font-size: 90%;
background-color: var(--bg-faded-color);
padding: 12px;
border-radius: 8px;
filter: saturate(0.75);
line-height: 1.25;
}
#account-container :is(.note, .profile-field) .invisible {
display: none;
}
#account-container :is(.note, .profile-field) .ellipsis::after {
content: '…';
}
#account-container .profile-field b {
font-size: 90%;
color: var(--text-insignificant-color);
text-transform: uppercase;
}
#account-container .profile-field b .icon {
color: var(--green-color);
}
#account-container .profile-field p {
margin: 0;
}
#account-container .common-followers {
border-top: 1px solid var(--outline-color);
border-bottom: 1px solid var(--outline-color);
padding: 8px 0;
font-size: 90%;
line-height: 1.5;
color: var(--text-insignificant-color);
}