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

192
public/base.css
View file

@ -354,6 +354,42 @@ body[data-perms*="rooms.create"] [data-requires-permission="rooms.create"] {
right: -5px;
}
/* ICON - FORWARD */
.icon.forward-copy {
box-sizing: border-box;
position: relative;
display: block;
transform: scale(var(--icon-scale, 1));
width: 16px;
height: 16px;
box-shadow: 6px -6px 0 -4px;
}
.icon.forward-copy::before {
content: "";
display: block;
box-sizing: border-box;
position: absolute;
width: 8px;
height: 8px;
border: 2px solid;
border-radius: 1px;
left: 0;
bottom: 0;
}
.icon.forward-copy::after {
content: "";
display: block;
box-sizing: border-box;
position: absolute;
background: currentColor;
width: 2px;
height: 10px;
transform: rotate(45deg);
bottom: 8px;
right: 2px;
border-radius: 4px;
}
/* ICON - HOME */
.icon.home {
background:
@ -406,6 +442,33 @@ body[data-perms*="rooms.create"] [data-requires-permission="rooms.create"] {
bottom: 0;
}
/* ICON - MORE */
.icon.more {
box-sizing: border-box;
position: relative;
display: block;
transform: scale(var(--icon-scale, 1));
width: 24px;
height: 20px;
border: 2px solid;
border-radius: 3px;
}
.icon.more::before {
content: "";
position: absolute;
box-sizing: border-box;
display: block;
width: 4px;
height: 4px;
background-color: currentColor;
border-radius: 20px;
top: 6px;
left: 8px;
box-shadow:
-5px 0 0,
5px 0 0;
}
/* ICON - PLUS */
.icon.plus,
.icon.plus::after,
@ -441,6 +504,42 @@ body[data-perms*="rooms.create"] [data-requires-permission="rooms.create"] {
left: 0;
}
/* ICON - REPLY */
.icon.reply {
box-sizing: border-box;
position: relative;
display: block;
transform: scale(var(--icon-scale, 1));
width: 16px;
height: 16px;
box-shadow: -6px -6px 0 -4px;
}
.icon.reply::before {
content: "";
display: block;
box-sizing: border-box;
position: absolute;
width: 8px;
height: 8px;
border: 2px solid;
border-radius: 1px;
right: 0;
bottom: 0;
}
.icon.reply::after {
content: "";
display: block;
box-sizing: border-box;
position: absolute;
background: currentColor;
width: 2px;
height: 10px;
transform: rotate(-45deg);
bottom: 8px;
left: 2px;
border-radius: 4px;
}
/* ICON - RESOURCES */
.icon.resources,
.icon.resources::after {
@ -529,6 +628,46 @@ body[data-perms*="rooms.create"] [data-requires-permission="rooms.create"] {
inset 0 0 0 2px currentColor;
}
/* ICON - TRASH */
.icon.trash {
box-sizing: border-box;
position: relative;
display: block;
transform: scale(var(--icon-scale, 1));
width: 10px;
height: 12px;
border: 2px solid transparent;
box-shadow: 0 0 0 2px, inset -2px 0 0, inset 2px 0 0;
border-bottom-left-radius: 1px;
border-bottom-right-radius: 1px;
margin-top: 4px;
}
.icon.trash::after,
.icon.trash::before {
content: "";
display: block;
box-sizing: border-box;
position: absolute;
}
.icon.trash::after {
background: currentColor;
border-radius: 3px;
width: 16px;
height: 2px;
top: -4px;
left: -5px;
}
.icon.trash::before {
width: 10px;
height: 4px;
border: 2px solid;
border-bottom: transparent;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
top: -7px;
left: -2px;
}
/* ICON - USER */
.icon.user,
.icon.user::after,
@ -597,3 +736,56 @@ body[data-perms*="rooms.create"] [data-requires-permission="rooms.create"] {
left: -1px;
top: 8px;
}
/* ICONS - RIGHT/LEFT */
.icon.right {
box-sizing: border-box;
position: relative;
display: block;
transform: scale(var(--icon-scale, 1));
width: 22px;
height: 22px;
}
.icon.right::after,
.icon.right::before {
content: "";
display: block;
box-sizing: border-box;
position: absolute;
width: 8px;
height: 8px;
border-right: 2px solid;
border-top: 2px solid;
transform: rotate(45deg);
top: 7px;
right: 6px;
}
.icon.right::after {
right: 11px;
}
.icon.left {
box-sizing: border-box;
position: relative;
display: block;
transform: scale(var(--icon-scale, 1));
width: 22px;
height: 22px;
}
.icon.left::after,
.icon.left::before {
content: "";
display: block;
box-sizing: border-box;
position: absolute;
width: 8px;
height: 8px;
border-left: 2px solid;
border-bottom: 2px solid;
transform: rotate(45deg);
top: 7px;
left: 6px;
}
.icon.left::after {
left: 11px;
}