feature: start to stub in live connections

This commit is contained in:
Andy Burke 2025-09-12 14:26:16 -07:00
parent 344199925e
commit 50dcb98e0d
4 changed files with 195 additions and 1 deletions

View file

@ -614,6 +614,44 @@ body[data-perms*="files.write.own"] [data-requires-permission="files.write.own"]
top: 2px;
}
/* ICON - CAMERA */
.icon.camera {
box-sizing: border-box;
position: relative;
display: block;
transform: scale(var(--icon-scale, 1));
border: 2px solid;
border-radius: 3px;
width: 18px;
height: 12px;
perspective: 24px;
}
.icon.camera::after,
.icon.camera::before {
content: "";
display: block;
box-sizing: border-box;
position: absolute;
}
.icon.camera::before {
border: 2px solid;
border-left-color: transparent;
transform: rotateY(-70deg);
width: 8px;
height: 8px;
right: -7px;
top: 0;
}
.icon.camera::after {
width: 10px;
height: 5px;
border-top: 2px solid;
border-right: 2px solid;
top: -5px;
right: 2px;
border-top-right-radius: 2px;
}
/* ICON - CHAT */
.icon.chat {
box-sizing: border-box;
@ -911,6 +949,38 @@ body[data-perms*="files.write.own"] [data-requires-permission="files.write.own"]
bottom: 0;
}
/* ICON - LIVE */
.icon.live {
transform: scale(var(--icon-scale, 1));
}
.icon.live,
.icon.live::after,
.icon.live::before {
box-sizing: border-box;
position: relative;
display: block;
width: 14px;
height: 14px;
border: 2px solid;
border-bottom-color: transparent;
border-radius: 50%;
}
.icon.live::after,
.icon.live::before {
content: "";
position: absolute;
width: 6px;
height: 6px;
top: 2px;
left: 2px;
}
.icon.live::after {
width: 22px;
height: 22px;
top: -6px;
left: -6px;
}
/* ICON - MORE */
.icon.more {
box-sizing: border-box;
@ -993,6 +1063,49 @@ body[data-perms*="files.write.own"] [data-requires-permission="files.write.own"]
5px 0 0;
}
/* ICON - PHONE */
.icon.phone {
box-sizing: border-box;
position: relative;
display: block;
width: 22px;
height: 22px;
transform: scale(var(--icon-scale, 1));
}
.icon.phone::after,
.icon.phone::before {
content: "";
display: block;
box-sizing: border-box;
position: absolute;
}
.icon.phone::after {
width: 18px;
height: 18px;
border-top-left-radius: 1px;
border-bottom-right-radius: 1px;
border-bottom-left-radius: 12px;
border-left: 4px solid;
border-bottom: 4px solid;
left: 2px;
bottom: 2px;
background:
linear-gradient(to left, currentColor 10px, transparent 0) no-repeat right 11px/6px 4px,
linear-gradient(to left, currentColor 10px, transparent 0) no-repeat -1px 0/4px 6px;
}
.icon.phone::before {
width: 20px;
height: 20px;
border: 6px double;
border-top-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
border-radius: 50%;
transform: rotate(-45deg);
bottom: 2px;
left: 2px;
}
/* ICON - PLUS */
.icon.plus,
.icon.plus::after,