github-repos/blivechat
1
0
Fork 0
mirror of https://github.com/xfgryujk/blivechat.git synced 2025-01-13 13:50:10 +08:00
Code Issues Packages Projects Releases Wiki Activity

优化样式

Browse Source
This commit is contained in:
John Smith 2024-02-08 01:58:29 +08:00
parent 261abd9bbf
commit d7738d0e64
4 changed files with 21 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/lang/en.js
View File

@ -70,7 +70,7 @@ export default {
},
stylegen: {
legacy: 'Classic',
lineLike: 'Line-like',
lineLike: 'LINE-like',
light: 'light',
dark: 'dark',

2
frontend/src/lang/ja.js
View File

@ -70,7 +70,7 @@ export default {
},
stylegen: {
legacy: '古典',
lineLike: 'Line風',
lineLike: 'LINE風',
light: '明るい',
dark: '暗い',

20
frontend/src/views/StyleGenerator/LineLike.vue
View File

@ -447,7 +447,7 @@ yt-live-chat-text-message-renderer #author-name {
${this.form.userNameColor ? `color: ${this.form.userNameColor} !important;` : ''}
font-family: "${common.cssEscapeStr(this.form.userNameFont)}"${common.FALLBACK_FONTS};
font-size: ${this.form.userNameFontSize}px !important;
line-height: ${this.form.userNameLineHeight || this.form.userNameFontSize}px !important;
line-height: ${this.form.userNameLineHeight || (this.form.userNameFontSize + 2)}px !important;
}
/* Hide badges */
@ -463,14 +463,16 @@ yt-live-chat-text-message-renderer #message * {
${this.form.messageColor ? `color: ${this.form.messageColor} !important;` : ''}
font-family: "${common.cssEscapeStr(this.form.messageFont)}"${common.FALLBACK_FONTS};
font-size: ${this.form.messageFontSize}px !important;
line-height: ${this.form.messageLineHeight || this.form.messageFontSize}px !important;
line-height: ${this.form.messageLineHeight || (this.form.messageFontSize + 2)}px !important;
}
yt-live-chat-text-message-renderer #message {
display: block !important;
position: relative;
width: fit-content;
overflow: visible !important;
padding: 20px;
border-radius: 30px;
padding: 15px;
border-radius: 24px;
}
yt-live-chat-text-message-renderer #message .emoji {
@ -487,8 +489,8 @@ yt-live-chat-text-message-renderer #message::before {
content: "";
display: inline-block;
position: absolute;
top: ${this.form.showUserNames ? (this.form.userNameLineHeight || this.form.userNameFontSize) + 10 : 20}px;
left: ${this.form.showAvatars ? this.form.avatarSize + (this.form.avatarSize / 4) - 8 : -8}px;
top: -3px;
left: -10px;
border: 8px solid transparent;
border-right: 18px solid;
transform: rotate(35deg);
@ -538,7 +540,7 @@ yt-live-chat-membership-item-renderer #header-content-inner-column,
yt-live-chat-membership-item-renderer #header-content-inner-column * {
font-family: "${common.cssEscapeStr(this.form.firstLineFont)}"${common.FALLBACK_FONTS};
font-size: ${this.form.firstLineFontSize}px !important;
line-height: ${this.form.firstLineLineHeight || this.form.firstLineFontSize}px !important;
line-height: ${this.form.firstLineLineHeight || (this.form.firstLineFontSize + 2)}px !important;
}
yt-live-chat-paid-message-renderer #purchase-amount,
@ -547,14 +549,14 @@ yt-live-chat-membership-item-renderer #header-subtext,
yt-live-chat-membership-item-renderer #header-subtext * {
font-family: "${common.cssEscapeStr(this.form.secondLineFont)}"${common.FALLBACK_FONTS};
font-size: ${this.form.secondLineFontSize}px !important;
line-height: ${this.form.secondLineLineHeight || this.form.secondLineFontSize}px !important;
line-height: ${this.form.secondLineLineHeight || (this.form.secondLineFontSize + 2)}px !important;
}
yt-live-chat-paid-message-renderer #content,
yt-live-chat-paid-message-renderer #content * {
font-family: "${common.cssEscapeStr(this.form.scContentFont)}"${common.FALLBACK_FONTS};
font-size: ${this.form.scContentFontSize}px !important;
line-height: ${this.form.scContentLineHeight || this.form.scContentFontSize}px !important;
line-height: ${this.form.scContentLineHeight || (this.form.scContentFontSize + 2)}px !important;
}`
},
showNewMemberBgStyle() {

23
frontend/src/views/StyleGenerator/index.vue
View File

@ -25,7 +25,7 @@
</el-col>
<el-col :sm="24" :md="8">
<div :style="{ position: 'relative', top: `${exampleTop}px` }">
<div id="example-panel">
<el-form inline style="line-height: 40px">
<el-form-item :label="$t('stylegen.playAnimation')" style="margin: 0">
<el-switch v-model="playAnimation" @change="setExampleRoomClientStart"></el-switch>
@ -69,7 +69,6 @@ export default {
// 防抖后延迟变化的结果
debounceResult: '',
exampleTop: 0,
playAnimation: true,
exampleBgLight: false
}
@ -94,21 +93,8 @@ export default {
},
mounted() {
this.debounceResult = this.inputResult = this.subComponentResult
this.$parent.$el.addEventListener('scroll', this.onParentScroll)
},
beforeDestroy() {
this.$parent.$el.removeEventListener('scroll', this.onParentScroll)
},
methods: {
onParentScroll(event) {
if (document.body.clientWidth <= 992) {
this.exampleTop = 0
} else {
this.exampleTop = event.target.scrollTop
}
},
onExampleRoomLoad() {
this.setExampleRoomCustomCss(this.debounceResult)
this.setExampleRoomClientStart(this.playAnimation)
@ -137,6 +123,13 @@ export default {
</script>
<style scoped>
@media only screen and (min-width: 992px) {
#example-panel {
position: fixed;
width: calc((100vw - 230px - 40px) / 3 - 20px);
}
}
#example-container {
height: calc(100vh - 150px);