tim/autonomous.contact
1
0
Fork 0
forked from andyburke/autonomous.contact
Code Pull requests Activity

fix: improve CSS for avatars, chat message grouping, etc.

Browse source
This commit is contained in:
Andy Burke 2025-10-11 17:42:50 -07:00
parent 14a33fc77d
commit 9e8dc14029
7 changed files with 90 additions and 77 deletions
Download patch file Download diff file Expand all files Collapse all files

43
public/base.css
View file

@ -3,6 +3,8 @@
--base-color: #518;
--bg: hsl(from var(--base-color) h 20% 7.5%);
--bg-darker: hsl(from var(--base-color) h 20% 5%);
--bg-lighter: hsl(from var(--base-color) h 20% 10%);
--text: hsl(from var(--base-color) h 5% 100%);
--accent: hsl(from var(--base-color) h clamp(0, calc(s + 10), 100) clamp(0, calc(l + 20), 100));
@ -176,6 +178,47 @@ textarea:focus {
0 0 2px rgb(from var(--border-highlight) r g b / 60%);
}
.avatar-container {
display: block;
margin: 0.5rem auto;
width: 3rem;
height: 3rem;
border-radius: var(--border-radius);
overflow: hidden;
}
.avatar-container.inline {
display: inline-block;
margin: 0.5rem;
}
.avatar-container.medium {
width: 4.5rem;
height: 4.5rem;
}
.avatar-container.large {
width: 6rem;
height: 6rem;
}
.avatar-container.x-large {
width: 9rem;
height: 9rem;
}
.avatar-container.xx-large {
width: 12rem;
height: 12rem;
}
.avatar-container img {
height: 100%;
width: 100%;
max-width: none;
object-fit: cover;
}
.clickable {
cursor: pointer;
}