andyburke/autonomous.contact
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feature: sidebar hiding on mobile

Browse source 
feature: message actions button (nothing works yet, tho)
This commit is contained in:
Andy Burke 2025-08-19 16:58:35 -07:00
parent 01768da647
commit 2224e1abe0
5 changed files with 328 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

114
public/tabs/talk/talk.css
View file

@ -43,6 +43,12 @@
padding: 0.5rem;
}
#talk .sidebar #sidebar-toggle,
#talk .sidebar #sidebar-toggle-icon {
opacity: 0;
display: none;
}
#talk .sidebar .title {
text-transform: uppercase;
font-size: small;
@ -85,18 +91,20 @@
}
#talk #room-chat-entry-container form button {
width: inherit;
width: 50px;
padding: inherit;
margin: 0 1rem;
}
#talk #room-chat-entry-container form textarea {
width: 100%;
flex-grow: 1;
background: inherit;
color: inherit;
}
#talk .message-container {
position: relative;
transition: all 0.33s;
background: rgba(255, 255, 255, 0.03);
margin-top: 0.75rem;
@ -138,6 +146,49 @@
opacity: 0.75;
}
#talk .message-container .message-actions-container {
position: absolute;
top: 0.5rem;
right: 0.5rem;
display: flex;
flex-direction: row;
}
#talk .message-container .message-actions-container .message-action {
opacity: 0;
transition: 0.2s ease-in-out;
width: 0;
height: 4rem;
overflow: hidden;
order: -1;
cursor: pointer;
margin-right: 1.25rem;
padding-top: 0.25rem;
text-align: center;
}
#talk .message-container .message-actions-container label {
cursor: pointer;
}
#talk .message-container .message-actions-container input[type="checkbox"] {
opacity: 0;
display: none;
}
#talk
.message-container
.message-actions-container
input[type="checkbox"]:checked
~ .message-action {
opacity: 1;
width: 4rem;
}
#talk .message-container .message-actions-container .message-action .action-name {
font-size: x-small;
}
#talk .message-container .info-container {
display: flex;
margin-bottom: -1.5rem;
@ -187,9 +238,6 @@
max-width: 640px;
}
#talk .embed-container.iframe {
}
#talk .embed-container .embed-actions-container {
position: absolute;
z-index: 100;
@ -245,3 +293,61 @@
overflow: hidden;
border-style: none;
}
@media screen and (max-width: 768px) {
#talk .sidebar {
z-index: 100;
background: var(--bg);
position: absolute;
top: 0;
bottom: 0;
width: 100%;
left: -100%;
overflow-y: scroll;
overflow: visible;
transition: all ease-in-out 0.33s;
}
#talk .sidebar #sidebar-toggle-icon {
opacity: 1;
display: block;
position: absolute;
top: 1rem;
right: -2.5rem;
cursor: pointer;
transition: all ease-in-out 0.33s;
background: rgba(128, 128, 128, 0.5);
border-radius: 0 1rem 1rem 0;
padding: 0.5rem;
}
#talk .sidebar .icon {
transition: all ease-in-out 0.33s;
}
#talk .sidebar:has(#sidebar-toggle:checked) {
left: 0;
}
#talk .sidebar:has(#sidebar-toggle:checked) #sidebar-toggle-icon {
right: 0;
rotate: 180deg;
}
#talk #room-chat-container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#talk #room-chat-container #room-chat-entry-container,
#talk #room-chat-container #room-chat-entry-container form {
padding: 0.25rem;
}
#talk #room-chat-container #room-chat-entry-container form button {
margin: 0 0.5rem;
}
}