lingling
/
tiny-rdm
mirror of https://github.com/tiny-craft/tiny-rdm.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

perf: adjust tab color in dark theme

This commit is contained in:
tiny-craft 2023-09-02 23:43:17 +08:00
parent bc499643db
commit 425d9a3eae
1 changed files with 8 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/components/content/ContentValueTab.vue
View File

@ -25,17 +25,17 @@ const activeTabStyle = computed(() => {
const { name } = tabStore.currentTab const { name } = tabStore.currentTab
const { markColor = '' } = connectionStore.serverProfile[name] || {} const { markColor = '' } = connectionStore.serverProfile[name] || {}
return { return {
backgroundColor: themeVars.value.baseColor, backgroundColor: themeVars.value.bodyColor,
borderTopWidth: markColor ? '3px' : '1px', borderTopWidth: markColor ? '3px' : '1px',
borderTopColor: markColor || themeVars.value.borderColor, borderTopColor: markColor || themeVars.value.borderColor,
borderBottomColor: themeVars.value.baseColor, borderBottomColor: themeVars.value.bodyColor,
borderTopLeftRadius: themeVars.value.borderRadius, borderTopLeftRadius: themeVars.value.borderRadius,
borderTopRightRadius: themeVars.value.borderRadius, borderTopRightRadius: themeVars.value.borderRadius,
} }
}) })
const inactiveTabStyle = computed(() => ({ const inactiveTabStyle = computed(() => ({
borderWidth: '0 0 1px', borderWidth: '0 0 1px',
borderBottomColor: themeVars.value.borderColor, // borderBottomColor: themeVars.value.borderColor,
borderTopLeftRadius: themeVars.value.borderRadius, borderTopLeftRadius: themeVars.value.borderRadius,
borderTopRightRadius: themeVars.value.borderRadius, borderTopRightRadius: themeVars.value.borderRadius,
})) }))
@ -55,6 +55,8 @@ const tab = computed(() =>
:tab-style="{ :tab-style="{
borderStyle: 'solid', borderStyle: 'solid',
borderWidth: '1px', borderWidth: '1px',
borderLeftColor: themeVars.borderColor,
borderRightColor: themeVars.borderColor,
}" }"
size="small" size="small"
type="card" type="card"
@ -67,7 +69,9 @@ const tab = computed(() =>
tabGapMediumCard: 0, tabGapMediumCard: 0,
tabGapLargeCard: 0, tabGapLargeCard: 0,
tabColor: '#0000', tabColor: '#0000',
tabBorderColor: themeVars.borderColor, // tabBorderColor: themeVars.borderColor,
tabBorderColor: '#0000',
tabTextColorCard: themeVars.closeIconColor,
}"> }">
<n-tab <n-tab
v-for="(t, i) in tab" v-for="(t, i) in tab"