Skip to content

Commit 01c4ce2

Browse files
29770946572977094657
committed
fix(chat-style): 修复深色主题下聊天浮层与卡片配色
1 parent 7958e02 commit 01c4ce2

6 files changed

Lines changed: 248 additions & 53 deletions

File tree

‎frontend/assets/css/chat.css‎

Lines changed: 29 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424

2525
.wechat-link-card.wechat-link-card--disabled:hover,
2626
.wechat-link-card-cover.wechat-link-card--disabled:hover {
27-
background: #fff;
27+
background: var(--merged-history-bg);
2828
}
2929

3030
/* 滚动条样式 */
@@ -704,7 +704,7 @@
704704
/* 文件消息样式 - 基于红包样式覆盖 */
705705
.wechat-file-card {
706706
width: 210px;
707-
background: #fff;
707+
background: var(--merged-history-bg);
708708
cursor: pointer;
709709
transition: background-color 0.15s ease;
710710
}
@@ -728,11 +728,11 @@
728728
left: 13px;
729729
right: 13px;
730730
height: 1.5px;
731-
background: #e8e8e8;
731+
background: var(--merged-history-divider);
732732
}
733733

734734
.wechat-file-card:hover {
735-
background: #f5f5f5;
735+
background: var(--merged-history-hover);
736736
}
737737

738738
.wechat-file-card .wechat-file-info {
@@ -742,7 +742,7 @@
742742

743743
.wechat-file-name {
744744
font-size: 14px;
745-
color: #1a1a1a;
745+
color: var(--merged-history-title);
746746
display: -webkit-box;
747747
-webkit-line-clamp: 2;
748748
-webkit-box-orient: vertical;
@@ -753,7 +753,7 @@
753753

754754
.wechat-file-size {
755755
font-size: 12px;
756-
color: #b2b2b2;
756+
color: var(--merged-history-footer);
757757
margin-top: 4px;
758758
}
759759

@@ -765,12 +765,16 @@
765765
}
766766

767767
.wechat-file-bottom {
768-
border-top: 1px solid #e8e8e8;
768+
border-top: 1px solid var(--merged-history-divider);
769769
}
770770

771771
.wechat-file-bottom span {
772772
font-size: 12px;
773-
color: #b2b2b2;
773+
color: var(--merged-history-footer);
774+
}
775+
776+
.wechat-file-card :is(.text-gray-500, .text-gray-400) {
777+
color: var(--merged-history-preview);
774778
}
775779

776780
.wechat-file-logo {
@@ -785,7 +789,7 @@
785789
width: 210px;
786790
min-width: 210px;
787791
max-width: 210px;
788-
background: #fff;
792+
background: var(--merged-history-bg);
789793
display: flex;
790794
flex-direction: column;
791795
box-sizing: border-box;
@@ -798,7 +802,7 @@
798802
}
799803

800804
.wechat-link-card:hover {
801-
background: #f5f5f5;
805+
background: var(--merged-history-hover);
802806
}
803807

804808
.wechat-link-content {
@@ -819,7 +823,7 @@
819823

820824
.wechat-link-title {
821825
font-size: 14px;
822-
color: #1a1a1a;
826+
color: var(--merged-history-title);
823827
display: -webkit-box;
824828
-webkit-line-clamp: 2;
825829
-webkit-box-orient: vertical;
@@ -830,7 +834,7 @@
830834

831835
.wechat-link-desc {
832836
font-size: 12px;
833-
color: #8c8c8c;
837+
color: var(--merged-history-preview);
834838
display: -webkit-box;
835839
-webkit-line-clamp: 2;
836840
-webkit-box-orient: vertical;
@@ -847,7 +851,7 @@
847851
flex: 0 0 auto;
848852
border-radius: 0;
849853
overflow: hidden;
850-
background: #f2f2f2;
854+
background: var(--app-surface-muted);
851855
align-self: flex-start;
852856
}
853857

@@ -905,7 +909,7 @@
905909

906910
.wechat-link-mini-header-name {
907911
font-size: 13px;
908-
color: #7d7d7d;
912+
color: var(--merged-history-preview);
909913
overflow: hidden;
910914
text-overflow: ellipsis;
911915
white-space: nowrap;
@@ -916,7 +920,7 @@
916920
.wechat-link-mini-title {
917921
font-size: 13px;
918922
line-height: 1.45;
919-
color: #1a1a1a;
923+
color: var(--merged-history-title);
920924
display: -webkit-box;
921925
-webkit-line-clamp: 2;
922926
-webkit-box-orient: vertical;
@@ -930,12 +934,12 @@
930934
min-height: 0;
931935
flex: 1 1 auto;
932936
overflow: hidden;
933-
background: #f2f2f2;
937+
background: var(--app-surface-muted);
934938
margin-top: auto;
935939
}
936940

937941
.wechat-link-mini-preview--empty {
938-
background: #f7f7f7;
942+
background: var(--app-surface-soft);
939943
}
940944

941945
.wechat-link-mini-preview-img {
@@ -964,7 +968,7 @@
964968
left: 12px;
965969
right: 12px;
966970
height: 1px;
967-
background: #e8e8e8;
971+
background: var(--merged-history-divider);
968972
}
969973

970974
.wechat-link-mini-footer-icon {
@@ -976,7 +980,7 @@
976980

977981
.wechat-link-mini-footer-text {
978982
font-size: 10px;
979-
color: #8c8c8c;
983+
color: var(--merged-history-preview);
980984
}
981985

982986
.wechat-link-from {
@@ -996,7 +1000,7 @@
9961000
left: 11px;
9971001
right: 11px;
9981002
height: 1.5px;
999-
background: #e8e8e8;
1003+
background: var(--merged-history-divider);
10001004
}
10011005

10021006
.wechat-link-from-avatar {
@@ -1024,7 +1028,7 @@
10241028

10251029
.wechat-link-from-name {
10261030
font-size: 12px;
1027-
color: #b2b2b2;
1031+
color: var(--merged-history-footer);
10281032
overflow: hidden;
10291033
text-overflow: ellipsis;
10301034
white-space: nowrap;
@@ -1035,7 +1039,7 @@
10351039
width: 137px;
10361040
min-width: 137px;
10371041
max-width: 137px;
1038-
background: #fff;
1042+
background: var(--merged-history-bg);
10391043
display: flex;
10401044
flex-direction: column;
10411045
box-sizing: border-box;
@@ -1048,7 +1052,7 @@
10481052
}
10491053

10501054
.wechat-link-card-cover:hover {
1051-
background: #f5f5f5;
1055+
background: var(--merged-history-hover);
10521056
}
10531057

10541058
.wechat-link-cover-image-wrap {
@@ -1057,7 +1061,7 @@
10571061
position: relative;
10581062
overflow: hidden;
10591063
border-radius: 4px 4px 0 0;
1060-
background: #f2f2f2;
1064+
background: var(--app-surface-muted);
10611065
flex-shrink: 0;
10621066
}
10631067

@@ -1126,7 +1130,7 @@
11261130
box-sizing: border-box;
11271131
font-size: 12px;
11281132
line-height: 1.24;
1129-
color: #1a1a1a;
1133+
color: var(--merged-history-title);
11301134
display: -webkit-box;
11311135
-webkit-line-clamp: 2;
11321136
-webkit-box-orient: vertical;

‎frontend/assets/css/tailwind.css‎

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1597,6 +1597,154 @@
15971597
background-color: var(--search-panel-bg);
15981598
}
15991599

1600+
.chat-overlay-dropdown,
1601+
.chat-context-menu,
1602+
.chat-floating-window,
1603+
.chat-edit-modal {
1604+
background-color: var(--app-surface-bg);
1605+
border: 1px solid var(--app-border);
1606+
color: var(--app-text-primary);
1607+
box-shadow: 0 20px 48px rgba(15, 23, 42, 0.16);
1608+
}
1609+
1610+
html[data-theme='dark'] :is(.chat-overlay-dropdown, .chat-context-menu, .chat-floating-window, .chat-edit-modal) {
1611+
box-shadow: 0 24px 56px rgba(0, 0, 0, 0.42);
1612+
}
1613+
1614+
.chat-overlay-dropdown input {
1615+
background-color: var(--app-input-bg);
1616+
border-color: var(--app-input-border);
1617+
color: var(--app-text-primary);
1618+
}
1619+
1620+
.chat-overlay-dropdown input::placeholder {
1621+
color: var(--app-text-muted);
1622+
}
1623+
1624+
.chat-overlay-dropdown :is(.bg-gray-200, .bg-gray-300),
1625+
.chat-floating-window :is(.bg-gray-200, .bg-gray-300) {
1626+
background-color: var(--app-border-soft);
1627+
}
1628+
1629+
.chat-overlay-dropdown :is(.border-gray-100, .border-gray-200, .border-gray-300),
1630+
.chat-floating-window :is(.border-gray-100, .border-gray-200, .border-gray-300) {
1631+
border-color: var(--app-border);
1632+
}
1633+
1634+
.chat-overlay-dropdown :is(.text-gray-900, .text-gray-800, .text-gray-700),
1635+
.chat-floating-window :is(.text-gray-900, .text-gray-800, .text-gray-700) {
1636+
color: var(--app-text-primary);
1637+
}
1638+
1639+
.chat-overlay-dropdown :is(.text-gray-600, .text-gray-500, .text-gray-400),
1640+
.chat-floating-window :is(.text-gray-600, .text-gray-500, .text-gray-400) {
1641+
color: var(--app-text-muted);
1642+
}
1643+
1644+
.chat-overlay-option {
1645+
color: var(--app-text-primary);
1646+
transition: background-color 0.15s ease;
1647+
}
1648+
1649+
.chat-overlay-option:hover {
1650+
background-color: var(--app-neutral-btn-hover);
1651+
}
1652+
1653+
.chat-overlay-option--active {
1654+
background-color: var(--app-surface-soft);
1655+
}
1656+
1657+
.chat-overlay-option--active:hover {
1658+
background-color: var(--app-neutral-btn-hover);
1659+
}
1660+
1661+
.chat-context-menu__item {
1662+
color: inherit;
1663+
transition: background-color 0.15s ease;
1664+
}
1665+
1666+
.chat-context-menu__item:hover {
1667+
background-color: var(--app-neutral-btn-hover);
1668+
}
1669+
1670+
.chat-context-menu :is(.border-gray-100, .border-gray-200, .border-gray-300) {
1671+
border-color: var(--app-border);
1672+
}
1673+
1674+
.chat-floating-window__header,
1675+
.chat-floating-window__body,
1676+
.chat-floating-window__row {
1677+
background-color: var(--app-surface-soft);
1678+
}
1679+
1680+
.chat-floating-window__header {
1681+
border-bottom: 1px solid var(--app-border);
1682+
}
1683+
1684+
.chat-floating-window__row {
1685+
border-bottom: 1px solid var(--app-border);
1686+
}
1687+
1688+
.chat-floating-window__title {
1689+
color: var(--app-text-primary);
1690+
}
1691+
1692+
.chat-floating-window__close {
1693+
color: var(--app-text-secondary);
1694+
transition: background-color 0.15s ease, color 0.15s ease;
1695+
}
1696+
1697+
.chat-floating-window__close:hover {
1698+
background-color: var(--app-neutral-btn-hover);
1699+
color: var(--app-text-primary);
1700+
}
1701+
1702+
.chat-floating-window .bg-white {
1703+
background-color: var(--app-surface-bg);
1704+
}
1705+
1706+
.chat-floating-window .bg-gray-50 {
1707+
background-color: var(--app-surface-soft);
1708+
}
1709+
1710+
.chat-floating-window [class*='hover:bg-gray-50']:hover {
1711+
background-color: var(--app-neutral-btn-hover);
1712+
}
1713+
1714+
.chat-edit-modal :is(.border-gray-100, .border-gray-200, .border-gray-300) {
1715+
border-color: var(--app-border);
1716+
}
1717+
1718+
.chat-edit-modal .bg-white {
1719+
background-color: var(--app-surface-bg);
1720+
}
1721+
1722+
.chat-edit-modal .bg-gray-50 {
1723+
background-color: var(--app-surface-soft);
1724+
}
1725+
1726+
.chat-edit-modal :is(.text-gray-900, .text-gray-800, .text-gray-700) {
1727+
color: var(--app-text-primary);
1728+
}
1729+
1730+
.chat-edit-modal :is(.text-gray-600, .text-gray-500, .text-gray-400) {
1731+
color: var(--app-text-muted);
1732+
}
1733+
1734+
.chat-edit-modal :is(input:not([type='checkbox']):not([type='radio']), textarea, select) {
1735+
background-color: var(--app-input-bg);
1736+
border-color: var(--app-input-border);
1737+
color: var(--app-text-primary);
1738+
}
1739+
1740+
.chat-edit-modal :is(input:not([type='checkbox']):not([type='radio']), textarea, select)::placeholder {
1741+
color: var(--app-text-muted);
1742+
}
1743+
1744+
.chat-edit-modal [class*='hover:bg-gray-50']:hover {
1745+
background-color: var(--app-neutral-btn-hover);
1746+
}
1747+
16001748
.search-input-combined {
16011749
background-color: var(--search-input-bg);
16021750
border-color: var(--search-input-border);

‎frontend/components/ChatLocationCard.vue‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -267,4 +267,10 @@ const openLocation = () => {
267267
width: 100%;
268268
height: 100%;
269269
}
270+
271+
html[data-theme='dark'] .wechat-location-card-wrap {
272+
--location-card-bg: var(--merged-history-bg);
273+
--location-card-text: var(--merged-history-title);
274+
--location-card-muted: var(--merged-history-preview);
275+
}
270276
</style>

0 commit comments

Comments
 (0)