the new skin is ready

This commit is contained in:
RockYang
2023-04-07 19:26:24 +08:00
parent 5a6f070f92
commit df7d4d5b94
5 changed files with 134 additions and 109 deletions

View File

@@ -32,7 +32,7 @@ export default defineComponent({
})
</script>
<style lang="stylus">
<style lang="stylus" scoped>
.chat-line-right {
justify-content: flex-end;
@@ -40,7 +40,7 @@ export default defineComponent({
margin-left 5px;
img {
border-radius 5px;
border-radius 50%;
}
}
@@ -52,9 +52,9 @@ export default defineComponent({
.triangle {
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid #223A34;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid #223A34;
position: absolute;
right: 0;
top: 10px;

View File

@@ -33,58 +33,63 @@ export default defineComponent({
</script>
<style lang="stylus">
.chat-line-left {
justify-content: flex-start;
.body-plus {
.chat-line-left {
justify-content: flex-start;
.chat-icon {
margin-right 5px;
.chat-icon {
margin-right 5px;
img {
border-radius 5px;
}
}
.chat-item {
display: inline-block;
position: relative;
padding: 0 0 0 5px;
overflow: hidden;
.triangle {
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right: 5px solid #404042;
position: absolute;
left: 0;
top: 13px;
img {
border-radius 50%;
}
}
.content {
min-height 20px;
word-break break-word;
padding: 12px 15px;
color var(--content-color)
background-color: #404042;
font-size: var(--content-font-size);
border-radius: 5px;
.chat-item {
display: inline-block;
position: relative;
padding: 0 0 0 5px;
overflow: hidden;
p {
line-height 1.5
.triangle {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid #404042;
position: absolute;
left: 0;
top: 13px;
}
p:last-child {
margin-bottom: 0
}
.content {
min-height 20px;
word-break break-word;
padding: 12px 15px;
color var(--content-color)
background-color: #404042;
font-size: var(--content-font-size);
border-radius: 5px;
p:first-child {
margin-top 0
}
p {
line-height 1.5
code {
color #f1f1f1
background-color #202121
padding 0 3px;
border-radius 5px;
}
}
p:last-child {
margin-bottom: 0
}
p:first-child {
margin-top 0
}
p > code {
color #cc0000
background-color #f1f1f1
}
}
}