small ui fix
This commit is contained in:
parent
e3b1a6fc8b
commit
e00bfdce39
4 changed files with 22 additions and 4 deletions
|
|
@ -141,7 +141,7 @@ var invitesEntry = `
|
|||
|
||||
var chatScreen = `
|
||||
<div style="display: flex; flex-direction: column; height: 100%; width: 100%;">
|
||||
<div id="chat-messages" style="flex-grow: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem;">
|
||||
<div id="chat-messages" style="flex-grow: 1; overflow-y: auto; overflow-x: hidden; padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem;">
|
||||
</div>
|
||||
<div id="replying-bar" style="display: none; padding: 0 1rem; border-top: var(--border-width) solid var(--light-border-color); font-size: 0.85rem; justify-content: space-between; align-items: center; background: var(--main-bg-color);">
|
||||
<div style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-grow: 1;">
|
||||
|
|
|
|||
|
|
@ -686,6 +686,7 @@ space{
|
|||
flex-shrink: 0;
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
}
|
||||
.room-pfp {
|
||||
width: 2.2rem;
|
||||
|
|
@ -738,6 +739,7 @@ space{
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
.chat-message-header {
|
||||
display: flex;
|
||||
|
|
@ -1178,7 +1180,15 @@ input:checked + .toggle-slider:before {
|
|||
margin-top: 0.2rem;
|
||||
}
|
||||
|
||||
/* Czerwona kropka nieprzeczytanych - pozycjonowana absolutnie. Odstęp liczony tak,
|
||||
żeby ŚRODEK kropki leżał na tej samej osi co środek 1rem-owego .call-indicator
|
||||
(0.6rem paddingu + (1rem - 0.65rem)/2) - inaczej kropka "ucieka" w prawo
|
||||
względem większej ikony słuchawek. */
|
||||
.unread-badge {
|
||||
position: absolute;
|
||||
right: calc(0.6rem + (1rem - 0.65rem) / 2);
|
||||
top: 50%;
|
||||
margin-top: -0.325rem;
|
||||
width: 0.65rem;
|
||||
height: 0.65rem;
|
||||
min-width: 0.65rem;
|
||||
|
|
@ -1186,7 +1196,6 @@ input:checked + .toggle-slider:before {
|
|||
background-color: var(--big-red);
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
margin-right: 0.5rem;
|
||||
transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
transform: scale(0);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -141,7 +141,7 @@ var invitesEntry = `
|
|||
|
||||
var chatScreen = `
|
||||
<div style="display: flex; flex-direction: column; height: 100%; width: 100%;">
|
||||
<div id="chat-messages" style="flex-grow: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem;">
|
||||
<div id="chat-messages" style="flex-grow: 1; overflow-y: auto; overflow-x: hidden; padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem;">
|
||||
</div>
|
||||
<div id="replying-bar" style="display: none; padding: 0 1rem; border-top: var(--border-width) solid var(--light-border-color); font-size: 0.85rem; justify-content: space-between; align-items: center; background: var(--main-bg-color);">
|
||||
<div style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-grow: 1;">
|
||||
|
|
|
|||
|
|
@ -686,6 +686,7 @@ space{
|
|||
flex-shrink: 0;
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
}
|
||||
.room-pfp {
|
||||
width: 2.2rem;
|
||||
|
|
@ -738,6 +739,7 @@ space{
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
.chat-message-header {
|
||||
display: flex;
|
||||
|
|
@ -1178,7 +1180,15 @@ input:checked + .toggle-slider:before {
|
|||
margin-top: 0.2rem;
|
||||
}
|
||||
|
||||
/* Czerwona kropka nieprzeczytanych - pozycjonowana absolutnie. Odstęp liczony tak,
|
||||
żeby ŚRODEK kropki leżał na tej samej osi co środek 1rem-owego .call-indicator
|
||||
(0.6rem paddingu + (1rem - 0.65rem)/2) - inaczej kropka "ucieka" w prawo
|
||||
względem większej ikony słuchawek. */
|
||||
.unread-badge {
|
||||
position: absolute;
|
||||
right: calc(0.6rem + (1rem - 0.65rem) / 2);
|
||||
top: 50%;
|
||||
margin-top: -0.325rem;
|
||||
width: 0.65rem;
|
||||
height: 0.65rem;
|
||||
min-width: 0.65rem;
|
||||
|
|
@ -1186,7 +1196,6 @@ input:checked + .toggle-slider:before {
|
|||
background-color: var(--big-red);
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
margin-right: 0.5rem;
|
||||
transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
transform: scale(0);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue