Skip to content
This repository has been archived by the owner on Dec 26, 2024. It is now read-only.

Commit

Permalink
update: msg style
Browse files Browse the repository at this point in the history
  • Loading branch information
@festoney8
festoney8 committed Jun 2, 2024
1 parent 98c4bf2 commit 66c510d
Show file tree
Hide file tree
Showing 2 changed files with 44 additions and 24 deletions.
2 changes: 1 addition & 1 deletion src/style/telegram.css
View file

Large diffs are not rendered by default.

66 changes: 43 additions & 23 deletions src/style/telegram.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -933,8 +933,9 @@
background-color: var(--tg-message-others-bg-color);

// 单图，表情包，红包 无背景色
&:is(.mix-message__container--market-face, .wallet-message__container),
&:has(.pic-element:only-child) {
&.mix-message__container--market-face,
&.mix-message__container--pic,
&.wallet-message__container {
background-color: transparent !important;
}

Expand All @@ -946,15 +947,10 @@
}

// 图片、动图
& .pic-element {
zoom: var(--tg-message-others-pic-element-zoom);
&.mix-message__container--pic {
zoom: var(--tg-message-self-pic-element-zoom);
}

// // 图片最大宽度
// &.mix-message__container.mix-message__container--pic {
// max-width: min(40vw, 500px) !important;
// }

// 图文混合气泡, 图图混合气泡
&.mix-message__container:not(.mix-message__container--pic):has(.pic-element) {
padding: 0;
Expand All @@ -963,19 +959,33 @@
// 消息泡贴合图片
& .message-content {
width: min-content;
// 最小宽度12em
min-width: calc(12 * var(--tg-message-self-font-size) + 24px);
// 最小宽度
min-width: calc(10 * var(--tg-message-others-font-size) + 24px);
}

& .pic-element {
border-radius: 0;
padding: 0;
margin: 0 auto;
zoom: var(--tg-message-others-pic-element-zoom);
}

// 文字与气泡间距
& .text-element {
margin: 8px 12px;
display: inline-block;
}
& .face-element {
margin: 2px 12px;
display: inline-block;
margin: 8px 16px;
}
& :is(.face-element, .text-element) {
& + :is(.face-element, .text-element) {
margin-left: 1px !important;
}
&:has(+ :is(.face-element, .text-element)) {
margin-right: 1px !important;
}
}
}

Expand Down Expand Up @@ -1131,8 +1141,9 @@
background-color: var(--tg-message-self-bg-color);

// 单图，表情包，红包 无背景色
&:is(.mix-message__container--market-face, .wallet-message__container),
&:has(.pic-element:only-child) {
&.mix-message__container--market-face,
&.mix-message__container--pic,
&.wallet-message__container {
background-color: transparent !important;
}

Expand All @@ -1144,15 +1155,10 @@
}

// 图片、动图
& .pic-element {
&.mix-message__container--pic {
zoom: var(--tg-message-self-pic-element-zoom);
}

// // 图片最大宽度
// &.mix-message__container.mix-message__container--pic {
// max-width: min(40vw, 500px) !important;
// }

// 图文混合气泡, 图图混合气泡
&.mix-message__container:not(.mix-message__container--pic):has(.pic-element) {
padding: 0;
Expand All @@ -1161,19 +1167,33 @@
// 消息泡贴合图片
& .message-content {
width: min-content;
// 最小宽度12em
min-width: calc(12 * var(--tg-message-self-font-size) + 24px);
// 最小宽度
min-width: calc(10 * var(--tg-message-self-font-size) + 24px);
}

& .pic-element {
border-radius: 0;
padding: 0;
margin: 0 auto;
zoom: var(--tg-message-self-pic-element-zoom);
}

// 文字与气泡间距
& .text-element {
margin: 8px 12px;
display: inline-block;
}
& .face-element {
margin: 2px 12px;
display: inline-block;
margin: 8px 16px;
}
& :is(.face-element, .text-element) {
& + :is(.face-element, .text-element) {
margin-left: 1px !important;
}
&:has(+ :is(.face-element, .text-element)) {
margin-right: 1px !important;
}
}
}

Expand Down

0 comments on commit 66c510d

Please sign in to comment.