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

16
public/tabs/blurbs/blurbs.html
View file

@ -76,20 +76,6 @@
display: flex;
}
.blurb-container .info-container .avatar-container {
display: block;
margin: 0.5rem;
width: 3rem;
height: 3rem;
border-radius: 20%;
overflow: hidden;
}
.blurb-container .info-container .avatar-container img {
min-width: 100%;
min-height: 100%;
}
.blurb-container .info-container .username-container {
display: block;
margin: 0 0.5rem;
@ -195,7 +181,7 @@
</div>
<div class="info-container">
<div class="avatar-container">
<div class="avatar-container inline">
<img src="${context.creator.meta?.avatar ?? '/images/default_avatar.gif'}" alt="user avatar" />
</div>
<div class="username-container">

65
public/tabs/chat/chat.css
View file

@ -67,8 +67,8 @@
#chat .message-container {
position: relative;
transition: all 0.33s;
background: rgba(255, 255, 255, 0.03);
margin-top: 0.75rem;
background: var(--bg-lighter);
margin-top: 0.5rem;
padding: 0.5rem;
border-radius: var(--border-radius);
}
@ -77,13 +77,44 @@
padding: 0;
}
#chat .message-container.user-tick.time-tick + .message-container.user-tick.time-tick,
#chat .message-container.user-tick.time-tock + .message-container.user-tick.time-tock,
#chat .message-container.user-tock.time-tick + .message-container.user-tock.time-tick,
#chat .message-container.user-tock.time-tock + .message-container.user-tock.time-tock {
padding-top: 0;
padding-bottom: 0;
margin-top: 0;
.user-tock.time-tock:has(+ .user-tock.time-tick),
.user-tock.time-tick:has(+ .user-tock.time-tock),
.user-tick.time-tock:has(+ .user-tick.time-tick),
.user-tick.time-tick:has(+ .user-tick.time-tock),
.user-tock.time-tock:has(+ .user-tick.time-tick),
.user-tock.time-tick:has(+ .user-tick.time-tock),
.user-tick.time-tock:has(+ .user-tock.time-tick),
.user-tick.time-tick:has(+ .user-tock.time-tock),
.user-tock.time-tock:last-of-type,
.user-tock.time-tick:last-of-type,
.user-tick.time-tock:last-of-type,
.user-tick.time-tick:last-of-type {
/* border: 1px dotted red; */
margin-bottom: 1rem !important;
padding-bottom: 0.25rem !important;
padding-top: 0 !important;
margin-top: 0.5rem !important;
}
.user-tock.time-tock:has(+ .user-tock.time-tock),
.user-tock.time-tick:has(+ .user-tock.time-tick),
.user-tick.time-tock:has(+ .user-tick.time-tock),
.user-tick.time-tick:has(+ .user-tick.time-tick) {
/* border: 1px dotted blue; */
margin-bottom: -0.75rem !important;
padding-top: 0 !important;
}
.user-tock.time-tock + .user-tock.time-tick:has(+ .user-tock.time-tick),
.user-tock.time-tick + .user-tock.time-tock:has(+ .user-tock.time-tock),
.user-tick.time-tock + .user-tick.time-tick:has(+ .user-tick.time-tick),
.user-tick.time-tick + .user-tick.time-tock:has(+ .user-tick.time-tock),
.user-tock.time-tock + .user-tick.time-tick:has(+ .user-tick.time-tick),
.user-tock.time-tick + .user-tick.time-tock:has(+ .user-tick.time-tock),
.user-tick.time-tock + .user-tock.time-tick:has(+ .user-tock.time-tick),
.user-tick.time-tick + .user-tock.time-tock:has(+ .user-tock.time-tock) {
/* border: 1px dotted green; */
margin-bottom: -0.75rem !important;
}
#chat
@ -179,27 +210,15 @@
height: 3.75rem;
}
#chat .message-container .info-container .avatar-container {
display: inline-block;
margin: 0 4px;
width: 3rem;
height: 3rem;
border-radius: 16%;
overflow: hidden;
}
#chat .message-container .info-container .avatar-container img {
min-width: 100%;
min-height: 100%;
}
#chat .message-container .info-container .username-container {
margin: 0 4px;
font-weight: bold;
padding-top: 0.5rem;
}
#chat .message-container .info-container .datetime-container {
margin: 0 4px;
padding-top: 0.4rem;
}
#chat .message-container .info-container .datetime-container .long {

2
public/tabs/chat/chat.html
View file

@ -118,7 +118,7 @@
</button>
</div>
<div class="info-container">
<div class="avatar-container">
<div class="avatar-container inline">
<img
src="${context.creator.meta?.avatar ?? '/images/default_avatar.gif'}"
alt="user avatar"

16
public/tabs/essays/essays.html
View file

@ -40,20 +40,6 @@
margin-left: 1.8rem;
}
.essay-container .info-container .avatar-container {
display: block;
margin: 0.5rem;
width: 3rem;
height: 3rem;
border-radius: 20%;
overflow: hidden;
}
.essay-container .info-container .avatar-container img {
min-width: 100%;
min-height: 100%;
}
.essay-container .info-container .username-container {
display: block;
margin: 0 0.5rem;
@ -175,7 +161,7 @@
</div>
<div class="info-container">
<div class="avatar-container">
<div class="avatar-container inline medium">
<img
src="${context.creator.meta?.avatar ?? '/images/default_avatar.gif'}"
alt="user avatar"

16
public/tabs/forum/forum.html
View file

@ -75,20 +75,6 @@
display: flex;
}
.post-container .info-container .avatar-container {
display: block;
margin: 0.5rem;
width: 3rem;
height: 3rem;
border-radius: 16%;
overflow: hidden;
}
.post-container .info-container .avatar-container img {
min-width: 100%;
min-height: 100%;
}
.post-container .info-container .username-container {
display: block;
margin: 0 0.5rem;
@ -210,7 +196,7 @@
</div>
<div class="info-container">
<div class="avatar-container">
<div class="avatar-container inline">
<img
src="${context.creator.meta?.avatar ?? '/images/default_avatar.gif'}"
alt="user avatar"