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> | ||||
| <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> | ||||
|  |  | |||
|  | @ -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))]; | ||||
| 					} | ||||
| 				} | ||||
|  |  | |||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue