mirrors/gotosocial
1
0
Fork 0
mirror of https://github.com/superseriousbusiness/gotosocial.git synced 2025-12-29 17:16:14 -06:00
Code Issues Projects Releases Packages Wiki Activity Actions

[frontend] Redesign / color scheme (#688)

Browse source 
* fix css indentation

* profile styling update

* update status styling to match profile

* empty header fix

* generate random avatars for thread views

* appease the linter gods

* upgrade deps

* turn profile accent into border + $bg background

* upgrade deps

* small accessibility tweaks

* general redesign, clearer css variables

* configure instance.Version for testrig

* footer styling

* add sublte borders to box-shadow for separation

* accessible blues, other tweaks

* background bg_accent

* fix viewport

* change client entry buttons to links

* cw button styling

* status display+username spacing

* small thread view tweaks

* color tweaks for accessible contrasts

* use Noto Sans

* biiit less dark bg

* .info contrast, border

Co-authored-by: f0x <f0x@cthu.lu>
This commit is contained in:
tobi 2022-07-04 16:23:59 +02:00 • committed by GitHub
commit 16ddad36b2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 378 additions and 172 deletions
Download patch file Download diff file Expand all files Collapse all files

57
web/source/css/status.css
View file

@ -25,19 +25,16 @@ main {
display: flex;
flex-direction: column;
border-radius: $br;
background: $bg_darker5;
box-shadow: $boxshadow;
}
.toot {
background: $status_unfocus_bg;
box-shadow: $boxshadow;
border: $boxshadow_border;
position: relative;
background: $bg_darker3;
padding: 1.5rem;
display: grid;
grid-template-columns: 4rem auto 1fr;
column-gap: 0.5rem;
margin-bottom: $br;
border-radius: $br;
padding: 1.5rem 0;
a {
position: relative;
@ -46,10 +43,18 @@ main {
text-decoration: none;
}
.contentgrid {
padding: 0 1.5rem;
display: grid;
grid-template-columns: 4rem auto 1fr;
grid-template-rows: 1.5rem auto auto;
column-gap: 0.5rem;
}
.avatar {
grid-row: span 2;
aspect-ratio: 1/1;
img {
height: 100%;
width: 100%;
@ -60,16 +65,21 @@ main {
border-radius: calc($br / 1.5);
}
}
.displayname {
font-weight: bold;
font-size: 1.2rem;
line-height: 2rem;
margin-top: -0.5rem;
align-self: start;
}
.username {
color: $fg_dark;
color: $link_fg;
line-height: 2rem;
margin-top: -0.5rem;
justify-self: start;
align-self: start;
}
input.spoiler:checked ~ .content {
@ -78,25 +88,24 @@ main {
.spoiler {
label {
background: $acc1;
border-radius: 0.3rem;
padding: 0.3rem;
padding: 0.2rem 0.3rem;
margin-left: 0.4rem;
position: relative;
z-index: 2;
cursor: pointer;
font-size: 1rem;
}
label:hover {
background: $acc2;
}
}
.text {
margin: 0;
margin-top: 0.5rem;
grid-column: span 2;
a {
color: $acc1;
color: $link_fg;
text-decoration: underline;
}
}
@ -161,6 +170,8 @@ main {
.info {
display: none;
border-top: 0.15rem solid $status_unfocus_bg;
padding: 0.5rem 1.5rem;
div {
position: relative;
@ -171,7 +182,6 @@ main {
display: flex;
}
color: #b0b0b5;
grid-column: span 3;
margin-top: 0.5rem;
flex-wrap: wrap;
@ -216,28 +226,29 @@ main {
&:first-child {
/* top left, top right */
border-radius: $br $br 0 0;
border-top-left-radius: $br;
border-top-right-radius: $br;
}
&:last-child {
/* bottom left, bottom right */
border-radius: 0 0 $br $br;
padding-bottom: 1.5rem;
border-bottom-left-radius: $br;
border-bottom-right-radius: $br;
margin-bottom: 0;
}
&.expanded {
background: $bg;
padding-bottom: 1.5rem;
background: $status_focus_bg;
padding-bottom: 0;
.displayname {
grid-column: span 2;
}
.text {
margin-top: 0;
grid-column: span 3;
grid-row: span 1;
margin-top: 0.3rem;
}
.info {