更新优化
This commit is contained in:
annali168290-ux
+267
-64
@@ -1268,10 +1268,48 @@ button {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.conversation-item.active,
|
||||
.conversation-item:hover {
|
||||
background: #eaf3f1;
|
||||
}
|
||||
.conversation-item.active,
|
||||
.conversation-item:hover {
|
||||
background: #eaf3f1;
|
||||
}
|
||||
|
||||
.conversation-item.pinned {
|
||||
background: rgba(15, 118, 110, 0.055);
|
||||
}
|
||||
|
||||
.conversation-pin {
|
||||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
color: #0f766e;
|
||||
font-size: 12px;
|
||||
transform: rotate(-25deg);
|
||||
}
|
||||
|
||||
.conversation-context-menu {
|
||||
position: fixed;
|
||||
z-index: 1200;
|
||||
min-width: 124px;
|
||||
padding: 6px;
|
||||
border: 1px solid #d7e0e8;
|
||||
border-radius: 10px;
|
||||
background: #fff;
|
||||
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18);
|
||||
}
|
||||
|
||||
.conversation-context-menu button {
|
||||
width: 100%;
|
||||
padding: 9px 12px;
|
||||
border: 0;
|
||||
border-radius: 7px;
|
||||
background: transparent;
|
||||
color: #1f2937;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.conversation-context-menu button:hover {
|
||||
background: #eef7f6;
|
||||
}
|
||||
|
||||
.favorite-item {
|
||||
width: 100%;
|
||||
@@ -1485,7 +1523,7 @@ button {
|
||||
box-shadow: 0 0 0 2px #f7fafc;
|
||||
}
|
||||
|
||||
.chat-panel {
|
||||
.chat-panel {
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
@@ -1493,8 +1531,12 @@ button {
|
||||
display: grid;
|
||||
grid-template-rows: 72px minmax(0, 1fr) auto auto;
|
||||
overflow: hidden;
|
||||
background: #eef2f5;
|
||||
}
|
||||
background: #eef2f5;
|
||||
}
|
||||
|
||||
.chat-panel.has-pinned-message {
|
||||
grid-template-rows: 72px auto minmax(0, 1fr) auto auto;
|
||||
}
|
||||
|
||||
.contact-panel {
|
||||
min-width: 0;
|
||||
@@ -2273,7 +2315,7 @@ button {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.message-row.out .message-bubble {
|
||||
.message-row.out .message-bubble {
|
||||
background: var(--bubble-out);
|
||||
border-color: #bfe4dc;
|
||||
}
|
||||
@@ -2326,39 +2368,186 @@ button {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.message-image img {
|
||||
.message-image img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
max-height: 320px;
|
||||
-o-object-fit: contain;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
.pinned-message-banner {
|
||||
width: calc(100% - 28px);
|
||||
height: 42px;
|
||||
min-height: 42px;
|
||||
margin: 8px 14px;
|
||||
align-self: center;
|
||||
display: grid;
|
||||
grid-template-columns: auto auto minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #d5e2df;
|
||||
border-radius: 9px;
|
||||
background: #f7fbfa;
|
||||
color: #52606d;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.pinned-message-banner strong {
|
||||
color: #0f766e;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.pinned-message-preview {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.pinned-message-preview > span {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.pinned-message-preview img {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
flex: 0 0 28px;
|
||||
border-radius: 4px;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.pinned-message-close {
|
||||
padding: 0 4px;
|
||||
color: #748091;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.message-row.system {
|
||||
justify-content: center;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.system-message-pill {
|
||||
max-width: min(78%, 620px);
|
||||
padding: 5px 12px;
|
||||
border-radius: 5px;
|
||||
background: #c8c8c8;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
line-height: 1.45;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.message-video {
|
||||
display: block;
|
||||
width: min(360px, 68vw);
|
||||
max-height: 360px;
|
||||
border-radius: 7px;
|
||||
background: #111;
|
||||
}
|
||||
|
||||
.red-packet-card {
|
||||
width: min(320px, 68vw);
|
||||
margin: -10px -12px -8px;
|
||||
overflow: hidden;
|
||||
border-radius: 7px;
|
||||
background: #ff9f32;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.red-packet-card-main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 13px;
|
||||
padding: 20px 18px 17px;
|
||||
}
|
||||
|
||||
.red-packet-card-main > span:last-child {
|
||||
display: grid;
|
||||
gap: 7px;
|
||||
}
|
||||
|
||||
.red-packet-card-main strong {
|
||||
font-size: 17px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.red-packet-card-main small {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.red-packet-icon,
|
||||
.red-packet-mini-icon {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
flex: 0 0 auto;
|
||||
border-radius: 3px;
|
||||
background: #d92f27;
|
||||
color: #ffd968;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.red-packet-icon {
|
||||
width: 34px;
|
||||
height: 44px;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.red-packet-card-footer {
|
||||
padding: 9px 15px;
|
||||
background: #fff;
|
||||
color: #8a8f94;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.red-packet-receipt {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
color: #69747d;
|
||||
}
|
||||
|
||||
.red-packet-mini-icon {
|
||||
width: 22px;
|
||||
height: 28px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.image-viewer-backdrop {
|
||||
.image-viewer-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 80;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 24px;
|
||||
background: rgba(12, 18, 26, 0.58);
|
||||
}
|
||||
|
||||
.image-viewer-dialog {
|
||||
width: min(880px, calc(100vw - 48px));
|
||||
height: min(640px, calc(100vh - 48px));
|
||||
min-width: 360px;
|
||||
min-height: 280px;
|
||||
max-width: calc(100vw - 48px);
|
||||
max-height: calc(100vh - 48px);
|
||||
padding: 20px;
|
||||
background: rgba(7, 12, 20, 0.82);
|
||||
backdrop-filter: blur(6px);
|
||||
}
|
||||
|
||||
.image-viewer-dialog {
|
||||
width: min(920px, calc(100vw - 64px));
|
||||
height: min(660px, calc(100vh - 64px));
|
||||
min-width: 320px;
|
||||
min-height: 260px;
|
||||
max-width: calc(100vw - 64px);
|
||||
max-height: calc(100vh - 64px);
|
||||
display: grid;
|
||||
grid-template-rows: 52px minmax(0, 1fr);
|
||||
overflow: hidden;
|
||||
resize: both;
|
||||
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||
border-radius: 8px;
|
||||
background: #101820;
|
||||
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.36);
|
||||
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||
border-radius: 14px;
|
||||
background: #0b1119;
|
||||
box-shadow: 0 28px 90px rgba(0, 0, 0, 0.56);
|
||||
}
|
||||
|
||||
.image-viewer-toolbar {
|
||||
@@ -2372,17 +2561,6 @@ button {
|
||||
background: rgba(24, 33, 47, 0.94);
|
||||
}
|
||||
|
||||
.image-viewer-title {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
color: #f8fafc;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.image-viewer-toolbar button {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
@@ -2401,42 +2579,67 @@ button {
|
||||
background: rgba(255, 255, 255, 0.14);
|
||||
}
|
||||
|
||||
.image-viewer-stage {
|
||||
.image-viewer-stage {
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
overflow: hidden;
|
||||
background: #0c121a;
|
||||
cursor: default;
|
||||
touch-action: none;
|
||||
}
|
||||
overflow: hidden;
|
||||
background: #0c121a;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.image-viewer-nav {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
z-index: 2;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||
border-radius: 50%;
|
||||
background: rgba(18, 27, 39, 0.76);
|
||||
color: #fff;
|
||||
font-size: 42px;
|
||||
font-weight: 300;
|
||||
line-height: 1;
|
||||
transform: translateY(-50%);
|
||||
cursor: pointer;
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
|
||||
.image-viewer-nav:hover {
|
||||
background: rgba(41, 57, 75, 0.94);
|
||||
}
|
||||
|
||||
.image-viewer-prev {
|
||||
left: 18px;
|
||||
}
|
||||
|
||||
.image-viewer-next {
|
||||
right: 18px;
|
||||
}
|
||||
|
||||
.image-viewer-stage.zoomed {
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.image-viewer-stage.dragging {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.image-viewer-img {
|
||||
max-width: calc(100% - 32px);
|
||||
max-height: calc(100% - 32px);
|
||||
-o-object-fit: contain;
|
||||
object-fit: contain;
|
||||
.image-viewer-img {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 90px;
|
||||
width: calc(100% - 180px);
|
||||
height: calc(100% - 40px);
|
||||
max-width: none;
|
||||
max-height: none;
|
||||
-o-object-fit: contain;
|
||||
object-fit: contain;
|
||||
transform-origin: center center;
|
||||
transition: transform 0.08s ease-out;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
transition: transform 0.12s ease-out;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.image-viewer-stage.dragging .image-viewer-img {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.sender-profile-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
Reference in New Issue
Block a user