mirror of
https://github.com/misskey-dev/misskey.git
synced 2024-12-30 22:39:13 +01:00
refactor(client): use css modules
This commit is contained in:
parent
4b1009b34e
commit
5da74897ae
2 changed files with 14 additions and 24 deletions
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<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>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
|
@ -157,8 +157,8 @@ const props = withDefaults(defineProps<{
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" module>
|
||||||
.havbbuyv {
|
.root {
|
||||||
white-space: pre-wrap;
|
white-space: pre-wrap;
|
||||||
|
|
||||||
&.nowrap {
|
&.nowrap {
|
||||||
|
@ -167,24 +167,5 @@ const props = withDefaults(defineProps<{
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
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>
|
</style>
|
||||||
|
|
|
@ -12,6 +12,15 @@ import MkA from '@/components/global/MkA.vue';
|
||||||
import { host } from '@/config';
|
import { host } from '@/config';
|
||||||
import { MFM_TAGS } from '@/scripts/mfm-tags';
|
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({
|
export default defineComponent({
|
||||||
props: {
|
props: {
|
||||||
text: {
|
text: {
|
||||||
|
@ -276,11 +285,11 @@ export default defineComponent({
|
||||||
case 'quote': {
|
case 'quote': {
|
||||||
if (!this.nowrap) {
|
if (!this.nowrap) {
|
||||||
return [h('div', {
|
return [h('div', {
|
||||||
class: 'quote',
|
style: QUOTE_STYLE,
|
||||||
}, genEl(token.children))];
|
}, genEl(token.children))];
|
||||||
} else {
|
} else {
|
||||||
return [h('span', {
|
return [h('span', {
|
||||||
class: 'quote',
|
style: QUOTE_STYLE,
|
||||||
}, genEl(token.children))];
|
}, genEl(token.children))];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue