cleanup
This commit is contained in:
@@ -54,116 +54,6 @@
|
|||||||
backdrop-filter: blur(8px);
|
backdrop-filter: blur(8px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.call-choice-backdrop {
|
|
||||||
position: fixed;
|
|
||||||
inset: 0;
|
|
||||||
z-index: 1240;
|
|
||||||
display: grid;
|
|
||||||
place-items: center;
|
|
||||||
padding: 1rem;
|
|
||||||
background: rgba(3, 8, 14, 0.46);
|
|
||||||
backdrop-filter: blur(6px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.call-choice-card {
|
|
||||||
width: min(100%, 25rem);
|
|
||||||
}
|
|
||||||
|
|
||||||
.conversation-modal-backdrop {
|
|
||||||
position: fixed;
|
|
||||||
inset: 0;
|
|
||||||
z-index: 1230;
|
|
||||||
display: grid;
|
|
||||||
place-items: center;
|
|
||||||
padding: 0.75rem;
|
|
||||||
background: rgba(3, 8, 14, 0.56);
|
|
||||||
backdrop-filter: blur(8px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.conversation-modal {
|
|
||||||
display: grid;
|
|
||||||
grid-template-rows: auto minmax(0, 1fr);
|
|
||||||
width: min(100%, 96rem);
|
|
||||||
height: min(100dvh - 1.5rem, 100%);
|
|
||||||
max-height: 100dvh;
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.conversation-modal-header {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
gap: 1rem;
|
|
||||||
padding-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.conversation-modal-eyebrow {
|
|
||||||
font-size: 0.78rem;
|
|
||||||
letter-spacing: 0.14em;
|
|
||||||
text-transform: uppercase;
|
|
||||||
color: var(--page-text-soft);
|
|
||||||
}
|
|
||||||
|
|
||||||
.conversation-modal-close {
|
|
||||||
width: 2.5rem;
|
|
||||||
height: 2.5rem;
|
|
||||||
padding: 0;
|
|
||||||
border: 0;
|
|
||||||
border-radius: 999px;
|
|
||||||
color: var(--page-text);
|
|
||||||
background: var(--badge-background);
|
|
||||||
font-size: 1.35rem;
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.conversation-modal-body {
|
|
||||||
min-height: 0;
|
|
||||||
max-height: none;
|
|
||||||
padding-top: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.call-choice-eyebrow {
|
|
||||||
margin-bottom: 0.45rem;
|
|
||||||
font-size: 0.78rem;
|
|
||||||
letter-spacing: 0.16em;
|
|
||||||
text-transform: uppercase;
|
|
||||||
color: var(--page-text-soft);
|
|
||||||
}
|
|
||||||
|
|
||||||
.call-choice-actions {
|
|
||||||
display: grid;
|
|
||||||
gap: 0.85rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.call-choice-button {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.85rem;
|
|
||||||
width: 100%;
|
|
||||||
padding: 1rem 1.1rem;
|
|
||||||
border: 1px solid var(--surface-border);
|
|
||||||
border-radius: 1rem;
|
|
||||||
color: var(--page-text);
|
|
||||||
background: var(--surface-background);
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.call-choice-button:hover,
|
|
||||||
.call-choice-button:focus-visible {
|
|
||||||
border-color: color-mix(in srgb, var(--accent-color) 35%, transparent);
|
|
||||||
background: var(--surface-hover-background);
|
|
||||||
}
|
|
||||||
|
|
||||||
.call-choice-icon {
|
|
||||||
display: inline-grid;
|
|
||||||
place-items: center;
|
|
||||||
width: 2.5rem;
|
|
||||||
height: 2.5rem;
|
|
||||||
border-radius: 999px;
|
|
||||||
background: var(--badge-background);
|
|
||||||
font-size: 1.2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.back-link {
|
.back-link {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -191,51 +81,11 @@
|
|||||||
color: var(--page-text-soft);
|
color: var(--page-text-soft);
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-indicator-action {
|
|
||||||
padding: 0;
|
|
||||||
border: 0;
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-indicator-action:not(:disabled) {
|
|
||||||
color: var(--page-text);
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-indicator-action:not(:disabled):hover,
|
|
||||||
.status-indicator-action:not(:disabled):focus-visible {
|
|
||||||
color: var(--accent-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-indicator-action:disabled {
|
|
||||||
cursor: default;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.expand-action-icon {
|
.expand-action-icon {
|
||||||
font-size: 1.9rem;
|
font-size: 1.9rem;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-led {
|
|
||||||
width: 0.8rem;
|
|
||||||
height: 0.8rem;
|
|
||||||
border-radius: 999px;
|
|
||||||
box-shadow: 0 0 0 1px var(--input-border);
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-led-ok {
|
|
||||||
background: #59d66f;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-led-connecting {
|
|
||||||
background: #f3ad3d;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-led-offline {
|
|
||||||
background: #eb5d64;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-layout {
|
.chat-layout {
|
||||||
display: grid;
|
display: grid;
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
@@ -244,145 +94,6 @@
|
|||||||
min-height: 0;
|
min-height: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.peer-dropdown {
|
|
||||||
position: relative;
|
|
||||||
min-width: min(18rem, 42vw);
|
|
||||||
}
|
|
||||||
|
|
||||||
.peer-dropdown-trigger {
|
|
||||||
width: 100%;
|
|
||||||
padding-top: 0.56rem;
|
|
||||||
padding-bottom: 0.56rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.peer-dropdown-menu {
|
|
||||||
position: absolute;
|
|
||||||
top: calc(100% + 0.65rem);
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
z-index: 4;
|
|
||||||
display: grid;
|
|
||||||
gap: 0.75rem;
|
|
||||||
max-height: calc(3 * 4.55rem + 1.5rem);
|
|
||||||
overflow: auto;
|
|
||||||
padding: 0.75rem;
|
|
||||||
border: 1px solid var(--surface-border);
|
|
||||||
border-radius: 1rem;
|
|
||||||
background: var(--panel-background);
|
|
||||||
box-shadow: 0 18px 36px rgba(0, 0, 0, 0.18);
|
|
||||||
}
|
|
||||||
|
|
||||||
.peer-tile {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: minmax(0, 1fr) auto;
|
|
||||||
gap: 0.75rem;
|
|
||||||
align-items: center;
|
|
||||||
width: 100%;
|
|
||||||
padding: 0.8rem 0.85rem 0.8rem 1rem;
|
|
||||||
border: 1px solid var(--surface-border);
|
|
||||||
border-radius: 1rem;
|
|
||||||
color: inherit;
|
|
||||||
background: var(--surface-background);
|
|
||||||
font-size: 1.05em;
|
|
||||||
transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.peer-tile-main {
|
|
||||||
display: block;
|
|
||||||
min-width: 0;
|
|
||||||
padding: 0;
|
|
||||||
border: 0;
|
|
||||||
color: inherit;
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.peer-tile-indicators {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.38rem;
|
|
||||||
flex: 0 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.peer-dropdown-caret {
|
|
||||||
font-size: 4.02rem;
|
|
||||||
line-height: 1;
|
|
||||||
transition: transform 160ms ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.peer-dropdown-caret-open {
|
|
||||||
transform: rotate(180deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.peer-tile-delete {
|
|
||||||
width: 1.54rem;
|
|
||||||
height: 1.54rem;
|
|
||||||
padding: 0;
|
|
||||||
border: 0;
|
|
||||||
border-radius: 999px;
|
|
||||||
background: transparent;
|
|
||||||
font-size: 0.7rem;
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.peer-tile-delete:hover,
|
|
||||||
.peer-tile-delete:focus-visible {
|
|
||||||
background: var(--badge-background);
|
|
||||||
}
|
|
||||||
|
|
||||||
.peer-tile:hover,
|
|
||||||
.peer-tile:focus-visible,
|
|
||||||
.peer-tile-active {
|
|
||||||
transform: translateY(-1px);
|
|
||||||
border-color: color-mix(in srgb, var(--accent-color) 35%, transparent);
|
|
||||||
background: var(--surface-hover-background);
|
|
||||||
}
|
|
||||||
|
|
||||||
.peer-tile-unread {
|
|
||||||
border-color: #c62828;
|
|
||||||
box-shadow: inset 0 0 0 2px #c62828;
|
|
||||||
}
|
|
||||||
|
|
||||||
.peer-tile-row {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
gap: 0.53rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.peer-tile-title {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.32rem;
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.peer-typing-dots {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.2rem;
|
|
||||||
min-height: 0.9rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.peer-typing-dots span {
|
|
||||||
width: 0.27rem;
|
|
||||||
height: 0.27rem;
|
|
||||||
border-radius: 999px;
|
|
||||||
background: var(--page-text);
|
|
||||||
opacity: 0.28;
|
|
||||||
animation: peer-typing-pulse 900ms infinite ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.peer-typing-dots span:nth-child(2) {
|
|
||||||
animation-delay: 120ms;
|
|
||||||
}
|
|
||||||
|
|
||||||
.peer-typing-dots span:nth-child(3) {
|
|
||||||
animation-delay: 240ms;
|
|
||||||
}
|
|
||||||
|
|
||||||
.peer-tile-status {
|
|
||||||
flex: 0 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-main {
|
.chat-main {
|
||||||
display: grid;
|
display: grid;
|
||||||
@@ -455,80 +166,11 @@
|
|||||||
background: var(--input-background);
|
background: var(--input-background);
|
||||||
}
|
}
|
||||||
|
|
||||||
.bubble-incoming {
|
|
||||||
justify-self: start;
|
|
||||||
color: var(--incoming-bubble-text);
|
|
||||||
background: var(--incoming-bubble-background);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bubble-outgoing {
|
|
||||||
justify-self: end;
|
|
||||||
color: var(--outgoing-bubble-text);
|
|
||||||
background: var(--outgoing-bubble-background);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bubble-pending {
|
|
||||||
opacity: 0.58;
|
|
||||||
filter: grayscale(0.28);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bubble-system {
|
|
||||||
justify-self: center;
|
|
||||||
max-width: 90%;
|
|
||||||
color: var(--page-text-soft);
|
|
||||||
background: var(--badge-background);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bubble-emoji-only {
|
|
||||||
max-width: none;
|
|
||||||
padding: 0;
|
|
||||||
border-radius: 0;
|
|
||||||
background: transparent;
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bubble-meta {
|
|
||||||
display: grid;
|
|
||||||
gap: 0.12rem;
|
|
||||||
margin-bottom: 0.35rem;
|
|
||||||
font-size: 0.78rem;
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bubble-time {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bubble-delivery-state {
|
|
||||||
display: inline-block;
|
|
||||||
margin-top: 0.1rem;
|
|
||||||
font-size: 0.72rem;
|
|
||||||
letter-spacing: 0.06em;
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
|
|
||||||
.emoji-only-text {
|
.emoji-only-text {
|
||||||
font-size: clamp(2.1rem, 5vw, 3.4rem);
|
font-size: clamp(2.1rem, 5vw, 3.4rem);
|
||||||
line-height: 1.15;
|
line-height: 1.15;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bubble-system-status {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.7rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bubble-spinner {
|
|
||||||
width: 1rem;
|
|
||||||
height: 1rem;
|
|
||||||
flex: 0 0 auto;
|
|
||||||
border: 0.15rem solid currentColor;
|
|
||||||
border-right-color: transparent;
|
|
||||||
border-radius: 999px;
|
|
||||||
opacity: 0.8;
|
|
||||||
animation: bubble-spin 700ms linear infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
.composer {
|
.composer {
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: 0.85rem;
|
gap: 0.85rem;
|
||||||
@@ -778,50 +420,16 @@
|
|||||||
color: var(--page-text);
|
color: var(--page-text);
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes peer-typing-pulse {
|
|
||||||
0%,
|
|
||||||
80%,
|
|
||||||
100% {
|
|
||||||
opacity: 0.28;
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
40% {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(-1px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes bubble-spin {
|
|
||||||
to {
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 767.98px) {
|
@media (max-width: 767.98px) {
|
||||||
.chat-layout {
|
.chat-layout {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
}
|
}
|
||||||
|
|
||||||
.peer-dropdown {
|
|
||||||
min-width: min(100%, 18rem);
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-indicators {
|
.status-indicators {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.conversation-modal-backdrop {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.conversation-modal {
|
|
||||||
width: 100vw;
|
|
||||||
height: 100dvh;
|
|
||||||
border-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bubble {
|
.bubble {
|
||||||
max-width: 88%;
|
max-width: 88%;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -55,7 +55,7 @@ export class ChatPageComponent implements OnDestroy {
|
|||||||
private resolveDictationCompletion: (() => void) | null = null;
|
private resolveDictationCompletion: (() => void) | null = null;
|
||||||
private dictationApplyToken = 0;
|
private dictationApplyToken = 0;
|
||||||
private lastConversationSnapshot: { peerId: string; length: number; lastEntryId: string | null } | null = null;
|
private lastConversationSnapshot: { peerId: string; length: number; lastEntryId: string | null } | null = null;
|
||||||
private lastAutoConnectSnapshot: { peerId: string; hasLivePeer: boolean } | null = null;
|
private lastAutoConnectedPeerId: string | null = null;
|
||||||
@ViewChild('callAudioElement')
|
@ViewChild('callAudioElement')
|
||||||
set callAudioElementRef(value: ElementRef<HTMLAudioElement> | undefined) {
|
set callAudioElementRef(value: ElementRef<HTMLAudioElement> | undefined) {
|
||||||
this.callAudioElement = value;
|
this.callAudioElement = value;
|
||||||
@@ -312,24 +312,26 @@ export class ChatPageComponent implements OnDestroy {
|
|||||||
effect(() => {
|
effect(() => {
|
||||||
const peerId = this.peerId();
|
const peerId = this.peerId();
|
||||||
const hasLivePeer = !!this.peer();
|
const hasLivePeer = !!this.peer();
|
||||||
const previousSnapshot = this.lastAutoConnectSnapshot;
|
|
||||||
|
|
||||||
if (!peerId) {
|
if (!peerId) {
|
||||||
this.lastAutoConnectSnapshot = null;
|
this.lastAutoConnectedPeerId = null;
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
this.lastAutoConnectSnapshot = { peerId, hasLivePeer };
|
|
||||||
this.session.selectPeer(peerId);
|
this.session.selectPeer(peerId);
|
||||||
|
|
||||||
if (!hasLivePeer) {
|
if (!hasLivePeer) {
|
||||||
|
if (this.lastAutoConnectedPeerId === peerId) {
|
||||||
|
this.lastAutoConnectedPeerId = null;
|
||||||
|
}
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (previousSnapshot?.peerId === peerId && previousSnapshot.hasLivePeer) {
|
if (this.lastAutoConnectedPeerId === peerId) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
this.lastAutoConnectedPeerId = peerId;
|
||||||
void this.session.connectToPeer(peerId);
|
void this.session.connectToPeer(peerId);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -176,3 +176,407 @@ textarea {
|
|||||||
.alert-warning {
|
.alert-warning {
|
||||||
border: 1px solid var(--surface-border);
|
border: 1px solid var(--surface-border);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.call-choice-backdrop {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
z-index: 1240;
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
padding: 1rem;
|
||||||
|
background: rgba(3, 8, 14, 0.46);
|
||||||
|
backdrop-filter: blur(6px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.call-choice-card {
|
||||||
|
width: min(100%, 25rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.conversation-modal-backdrop {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
z-index: 1230;
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
padding: 0.75rem;
|
||||||
|
background: rgba(3, 8, 14, 0.56);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.conversation-modal {
|
||||||
|
display: grid;
|
||||||
|
grid-template-rows: auto minmax(0, 1fr);
|
||||||
|
width: min(100%, 96rem);
|
||||||
|
height: min(100dvh - 1.5rem, 100%);
|
||||||
|
max-height: 100dvh;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.conversation-modal-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 1rem;
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.conversation-modal-eyebrow,
|
||||||
|
.call-choice-eyebrow,
|
||||||
|
.bubble-delivery-state {
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.conversation-modal-eyebrow {
|
||||||
|
font-size: 0.78rem;
|
||||||
|
letter-spacing: 0.14em;
|
||||||
|
color: var(--page-text-soft);
|
||||||
|
}
|
||||||
|
|
||||||
|
.conversation-modal-close {
|
||||||
|
width: 2.5rem;
|
||||||
|
height: 2.5rem;
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 999px;
|
||||||
|
color: var(--page-text);
|
||||||
|
background: var(--badge-background);
|
||||||
|
font-size: 1.35rem;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.conversation-modal-body {
|
||||||
|
min-height: 0;
|
||||||
|
max-height: none;
|
||||||
|
padding-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.call-choice-eyebrow {
|
||||||
|
margin-bottom: 0.45rem;
|
||||||
|
font-size: 0.78rem;
|
||||||
|
letter-spacing: 0.16em;
|
||||||
|
color: var(--page-text-soft);
|
||||||
|
}
|
||||||
|
|
||||||
|
.call-choice-actions {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.call-choice-button {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.85rem;
|
||||||
|
width: 100%;
|
||||||
|
padding: 1rem 1.1rem;
|
||||||
|
border: 1px solid var(--surface-border);
|
||||||
|
border-radius: 1rem;
|
||||||
|
color: var(--page-text);
|
||||||
|
background: var(--surface-background);
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.call-choice-button:hover,
|
||||||
|
.call-choice-button:focus-visible,
|
||||||
|
.peer-tile:hover,
|
||||||
|
.peer-tile:focus-visible,
|
||||||
|
.peer-tile-active {
|
||||||
|
border-color: color-mix(in srgb, var(--accent-color) 35%, transparent);
|
||||||
|
background: var(--surface-hover-background);
|
||||||
|
}
|
||||||
|
|
||||||
|
.call-choice-icon {
|
||||||
|
display: inline-grid;
|
||||||
|
place-items: center;
|
||||||
|
width: 2.5rem;
|
||||||
|
height: 2.5rem;
|
||||||
|
border-radius: 999px;
|
||||||
|
background: var(--badge-background);
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-indicator-action {
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-indicator-action:not(:disabled) {
|
||||||
|
color: var(--page-text);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-indicator-action:not(:disabled):hover,
|
||||||
|
.status-indicator-action:not(:disabled):focus-visible {
|
||||||
|
color: var(--accent-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-indicator-action:disabled {
|
||||||
|
cursor: default;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-led,
|
||||||
|
.peer-tile-delete,
|
||||||
|
.bubble-spinner {
|
||||||
|
border-radius: 999px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-led {
|
||||||
|
width: 0.8rem;
|
||||||
|
height: 0.8rem;
|
||||||
|
box-shadow: 0 0 0 1px var(--input-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-led-ok {
|
||||||
|
background: #59d66f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-led-connecting {
|
||||||
|
background: #f3ad3d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-led-offline {
|
||||||
|
background: #eb5d64;
|
||||||
|
}
|
||||||
|
|
||||||
|
.peer-dropdown {
|
||||||
|
position: relative;
|
||||||
|
min-width: min(18rem, 42vw);
|
||||||
|
}
|
||||||
|
|
||||||
|
.peer-dropdown-trigger {
|
||||||
|
width: 100%;
|
||||||
|
padding-top: 0.56rem;
|
||||||
|
padding-bottom: 0.56rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.peer-dropdown-menu {
|
||||||
|
position: absolute;
|
||||||
|
top: calc(100% + 0.65rem);
|
||||||
|
left: 0;
|
||||||
|
z-index: 4;
|
||||||
|
display: grid;
|
||||||
|
gap: 0.75rem;
|
||||||
|
width: 100%;
|
||||||
|
max-height: calc(3 * 4.55rem + 1.5rem);
|
||||||
|
overflow: auto;
|
||||||
|
padding: 0.75rem;
|
||||||
|
border: 1px solid var(--surface-border);
|
||||||
|
border-radius: 1rem;
|
||||||
|
background: var(--panel-background);
|
||||||
|
box-shadow: 0 18px 36px rgba(0, 0, 0, 0.18);
|
||||||
|
}
|
||||||
|
|
||||||
|
.peer-tile {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(0, 1fr) auto;
|
||||||
|
gap: 0.75rem;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0.8rem 0.85rem 0.8rem 1rem;
|
||||||
|
border: 1px solid var(--surface-border);
|
||||||
|
border-radius: 1rem;
|
||||||
|
color: inherit;
|
||||||
|
background: var(--surface-background);
|
||||||
|
font-size: 1.05em;
|
||||||
|
transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.peer-tile-main {
|
||||||
|
display: block;
|
||||||
|
min-width: 0;
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
color: inherit;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.peer-tile-indicators,
|
||||||
|
.bubble-system-status {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.peer-tile-indicators {
|
||||||
|
gap: 0.38rem;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.peer-dropdown-caret {
|
||||||
|
font-size: 4.02rem;
|
||||||
|
line-height: 1;
|
||||||
|
transition: transform 160ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.peer-dropdown-caret-open {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.peer-tile-delete {
|
||||||
|
width: 1.54rem;
|
||||||
|
height: 1.54rem;
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
background: transparent;
|
||||||
|
font-size: 0.7rem;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.peer-tile-delete:hover,
|
||||||
|
.peer-tile-delete:focus-visible {
|
||||||
|
background: var(--badge-background);
|
||||||
|
}
|
||||||
|
|
||||||
|
.peer-tile:hover,
|
||||||
|
.peer-tile:focus-visible,
|
||||||
|
.peer-tile-active {
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.peer-tile-unread {
|
||||||
|
border-color: #c62828;
|
||||||
|
box-shadow: inset 0 0 0 2px #c62828;
|
||||||
|
}
|
||||||
|
|
||||||
|
.peer-tile-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 0.53rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.peer-tile-title {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.32rem;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.peer-typing-dots {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.2rem;
|
||||||
|
min-height: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.peer-typing-dots span {
|
||||||
|
width: 0.27rem;
|
||||||
|
height: 0.27rem;
|
||||||
|
border-radius: 999px;
|
||||||
|
background: var(--page-text);
|
||||||
|
opacity: 0.28;
|
||||||
|
animation: peer-typing-pulse 900ms infinite ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.peer-typing-dots span:nth-child(2) {
|
||||||
|
animation-delay: 120ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
.peer-typing-dots span:nth-child(3) {
|
||||||
|
animation-delay: 240ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
.peer-tile-status {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bubble-incoming {
|
||||||
|
justify-self: start;
|
||||||
|
color: var(--incoming-bubble-text);
|
||||||
|
background: var(--incoming-bubble-background);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bubble-outgoing {
|
||||||
|
justify-self: end;
|
||||||
|
color: var(--outgoing-bubble-text);
|
||||||
|
background: var(--outgoing-bubble-background);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bubble-pending {
|
||||||
|
opacity: 0.58;
|
||||||
|
filter: grayscale(0.28);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bubble-system {
|
||||||
|
justify-self: center;
|
||||||
|
max-width: 90%;
|
||||||
|
color: var(--page-text-soft);
|
||||||
|
background: var(--badge-background);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bubble-emoji-only {
|
||||||
|
max-width: none;
|
||||||
|
padding: 0;
|
||||||
|
border-radius: 0;
|
||||||
|
background: transparent;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bubble-meta {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.12rem;
|
||||||
|
margin-bottom: 0.35rem;
|
||||||
|
font-size: 0.78rem;
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bubble-time {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bubble-delivery-state {
|
||||||
|
display: inline-block;
|
||||||
|
margin-top: 0.1rem;
|
||||||
|
font-size: 0.72rem;
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bubble-system-status {
|
||||||
|
gap: 0.7rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bubble-spinner {
|
||||||
|
width: 1rem;
|
||||||
|
height: 1rem;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
border: 0.15rem solid currentColor;
|
||||||
|
border-right-color: transparent;
|
||||||
|
opacity: 0.8;
|
||||||
|
animation: bubble-spin 700ms linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes peer-typing-pulse {
|
||||||
|
0%,
|
||||||
|
80%,
|
||||||
|
100% {
|
||||||
|
opacity: 0.28;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
40% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes bubble-spin {
|
||||||
|
to {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 767.98px) {
|
||||||
|
.peer-dropdown {
|
||||||
|
min-width: min(100%, 18rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.conversation-modal-backdrop {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.conversation-modal {
|
||||||
|
width: 100vw;
|
||||||
|
height: 100dvh;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user