refactor(client): use css modules

This commit is contained in:
syuilo 2023-01-14 12:43:54 +09:00
parent 4b1009b34e
commit 5da74897ae
2 changed files with 14 additions and 24 deletions

View file

@ -1,5 +1,5 @@
<template>
<MfmCore :text="text" :plain="plain" :nowrap="nowrap" :author="author" :is-note="isNote" class="havbbuyv" :class="{ nowrap }"/>
<MfmCore :text="text" :plain="plain" :nowrap="nowrap" :author="author" :is-note="isNote" :class="[$style.root, { [$style.nowrap]: nowrap }]"/>
</template>
<script lang="ts" setup>
@ -157,8 +157,8 @@ const props = withDefaults(defineProps<{
}
</style>
<style lang="scss" scoped>
.havbbuyv {
<style lang="scss" module>
.root {
white-space: pre-wrap;
&.nowrap {
@ -167,24 +167,5 @@ const props = withDefaults(defineProps<{
overflow: hidden;
text-overflow: ellipsis;
}
::v-deep(.quote) {
display: block;
margin: 8px;
padding: 6px 0 6px 12px;
color: var(--fg);
border-left: solid 3px var(--fg);
opacity: 0.7;
}
::v-deep(pre) {
font-size: 0.8em;
}
> ::v-deep(code) {
font-size: 0.8em;
word-break: break-all;
padding: 4px 6px;
}
}
</style>

View file

@ -12,6 +12,15 @@ import MkA from '@/components/global/MkA.vue';
import { host } from '@/config';
import { MFM_TAGS } from '@/scripts/mfm-tags';
const QUOTE_STYLE = `
display: block;
margin: 8px;
padding: 6px 0 6px 12px;
color: var(--fg);
border-left: solid 3px var(--fg);
opacity: 0.7;
`.split('\n').join(' ');
export default defineComponent({
props: {
text: {
@ -276,11 +285,11 @@ export default defineComponent({
case 'quote': {
if (!this.nowrap) {
return [h('div', {
class: 'quote',
style: QUOTE_STYLE,
}, genEl(token.children))];
} else {
return [h('span', {
class: 'quote',
style: QUOTE_STYLE,
}, genEl(token.children))];
}
}