phanpy/src/components/generic-accounts.css

77 lines
1.4 KiB
CSS
Raw Normal View History

#generic-accounts-container {
.accounts-list {
2023-12-20 08:55:56 +03:00
--list-gap: 16px;
list-style: none;
margin: 0;
padding: 8px 0;
display: flex;
flex-wrap: wrap;
flex-direction: row;
column-gap: 1.5em;
2023-12-20 08:55:56 +03:00
row-gap: var(--list-gap);
li {
display: flex;
flex-grow: 1;
flex-basis: 16em;
2023-12-20 08:55:56 +03:00
/* align-items: center; */
margin: 0;
padding: 0;
gap: 8px;
2023-12-20 08:55:56 +03:00
position: relative;
&:before {
content: '';
display: block;
border-top: var(--hairline-width) solid var(--divider-color);
position: absolute;
bottom: calc(-1 * var(--list-gap) / 2);
left: 40px;
right: 0;
}
&:has(.reactions-block):before {
/* avatar + reactions + gap */
left: calc(40px + 16px + 8px);
}
}
.account-block-acct {
2023-12-20 08:55:56 +03:00
font-size: 0.9em;
color: var(--text-insignificant-color);
2023-12-20 08:55:56 +03:00
/* display: block; */
}
}
.reactions-block {
display: flex;
flex-direction: column;
2023-12-20 08:55:56 +03:00
/* align-self: center; */
.favourite-icon {
color: var(--favourite-color);
}
.reblog-icon {
color: var(--reblog-color);
}
2023-12-20 08:55:56 +03:00
> .icon:only-child {
margin-top: 8px; /* half of icon dimension */
}
}
.account-relationships {
flex-grow: 1;
.tag {
animation: appear 0.3s ease-out;
}
}
.account-block {
align-items: flex-start;
}
}