mirror/blueb-Chuckya-fe-standalone
1
0
Fork 0
mirror of https://iceshrimp.dev/blueb/Chuckya-fe-standalone.git synced 2026-01-11 13:33:21 -08:00
Code Issues Projects Releases Packages Wiki Activity

[Glitch] Change design of people tab on explore in web UI

Browse source 
Port 0ec061aa8f to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
Eugen Rochko 2024-04-25 18:25:33 +02:00 • committed by Claire
commit 8dbcf8a287
3 changed files with 171 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

79
app/javascript/flavours/glitch/styles/components.scss
View file

@ -2229,7 +2229,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;
@ -3178,6 +3181,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;
@ -7874,10 +7946,11 @@ img.modal-warning {
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;
}
}