gitea/nas
1
0
Fork 1
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 19

Change design of people tab on explore in web UI (#30059)

Browse source
This commit is contained in:
Eugen Rochko 2024-04-25 18:25:33 +02:00 • committed by GitHub
parent 85fdbd0ad5
commit 0ec061aa8f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 175 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

79
app/javascript/styles/mastodon/components.scss
View file

@ -2016,7 +2016,10 @@ a .account__avatar {
display: flex;
align-items: center;
gap: 8px;
}
.account__relationship,
.explore__suggestions__card {
.icon-button {
border: 1px solid var(--background-border-color);
border-radius: 4px;
@ -2964,6 +2967,75 @@ $ui-header-logo-wordmark-width: 99px;
display: none;
}
.explore__suggestions__card {
padding: 12px 16px;
gap: 8px;
display: flex;
flex-direction: column;
border-bottom: 1px solid var(--background-border-color);
&:last-child {
border-bottom: 0;
}
&__source {
padding-inline-start: 60px;
font-size: 13px;
line-height: 16px;
color: $dark-text-color;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
&__body {
display: flex;
gap: 12px;
align-items: center;
&__main {
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
&__name-button {
display: flex;
align-items: center;
gap: 8px;
&__name {
display: block;
color: inherit;
text-decoration: none;
flex: 1 1 auto;
min-width: 0;
}
.button {
min-width: 80px;
}
.display-name {
font-size: 15px;
line-height: 20px;
color: $secondary-text-color;
strong {
font-weight: 700;
}
&__account {
color: $darker-text-color;
display: block;
}
}
}
}
}
}
@media screen and (max-width: $no-gap-breakpoint - 1px) {
.columns-area__panels__pane--compositional {
display: none;
@ -7293,10 +7365,11 @@ a.status-card {
content: '';
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 3px;
border-radius: 4px;
border-radius: 4px 4px 0 0;
background: $highlight-text-color;
}
}