refactor(client): use css modules
This commit is contained in:
		
							parent
							
								
									ce528ff22e
								
							
						
					
					
						commit
						d10e000883
					
				
					 1 changed files with 26 additions and 29 deletions
				
			
		|  | @ -2,15 +2,14 @@ | ||||||
| <MkStickyContainer> | <MkStickyContainer> | ||||||
| 	<template #header><MkPageHeader v-model:tab="src" :actions="headerActions" :tabs="headerTabs" :display-my-avatar="true"/></template> | 	<template #header><MkPageHeader v-model:tab="src" :actions="headerActions" :tabs="headerTabs" :display-my-avatar="true"/></template> | ||||||
| 	<MkSpacer :content-max="800"> | 	<MkSpacer :content-max="800"> | ||||||
| 		<div ref="rootEl" v-hotkey.global="keymap" class="cmuxhskf"> | 		<div ref="rootEl" v-hotkey.global="keymap"> | ||||||
| 			<XTutorial v-if="$store.reactiveState.tutorial.value != -1" class="tutorial _panel" style="margin-bottom: var(--margin);"/> | 			<XTutorial v-if="$store.reactiveState.tutorial.value != -1" class="_panel" style="margin-bottom: var(--margin);"/> | ||||||
| 			<XPostForm v-if="$store.reactiveState.showFixedPostForm.value" class="post-form _panel" fixed style="margin-bottom: var(--margin);"/> | 			<XPostForm v-if="$store.reactiveState.showFixedPostForm.value" :class="$style.postForm" class="post-form _panel" fixed style="margin-bottom: var(--margin);"/> | ||||||
| 
 | 
 | ||||||
| 			<div v-if="queue > 0" class="new"><button class="_buttonPrimary" @click="top()">{{ i18n.ts.newNoteRecived }}</button></div> | 			<div v-if="queue > 0" :class="$style.new"><button class="_buttonPrimary" @click="top()">{{ i18n.ts.newNoteRecived }}</button></div> | ||||||
| 			<div class="tl"> | 			<div :class="$style.tl"> | ||||||
| 				<XTimeline | 				<XTimeline | ||||||
| 					ref="tl" :key="src" | 					ref="tl" :key="src" | ||||||
| 					class="tl" |  | ||||||
| 					:src="src" | 					:src="src" | ||||||
| 					:sound="true" | 					:sound="true" | ||||||
| 					@queue="queueUpdated" | 					@queue="queueUpdated" | ||||||
|  | @ -154,9 +153,8 @@ definePageMetadata(computed(() => ({ | ||||||
| }))); | }))); | ||||||
| </script> | </script> | ||||||
| 
 | 
 | ||||||
| <style lang="scss" scoped> | <style lang="scss" module> | ||||||
| .cmuxhskf { | .new { | ||||||
| 	> .new { |  | ||||||
| 	position: sticky; | 	position: sticky; | ||||||
| 	top: calc(var(--stickyTop, 0px) + 16px); | 	top: calc(var(--stickyTop, 0px) + 16px); | ||||||
| 	z-index: 1000; | 	z-index: 1000; | ||||||
|  | @ -168,16 +166,15 @@ definePageMetadata(computed(() => ({ | ||||||
| 		padding: 8px 16px; | 		padding: 8px 16px; | ||||||
| 		border-radius: 32px; | 		border-radius: 32px; | ||||||
| 	} | 	} | ||||||
| 	} | } | ||||||
| 
 | 
 | ||||||
| 	> .post-form { | .postForm { | ||||||
| 	border-radius: var(--radius); | 	border-radius: var(--radius); | ||||||
| 	} | } | ||||||
| 
 | 
 | ||||||
| 	> .tl { | .tl { | ||||||
| 	background: var(--bg); | 	background: var(--bg); | ||||||
| 	border-radius: var(--radius); | 	border-radius: var(--radius); | ||||||
| 	overflow: clip; | 	overflow: clip; | ||||||
| 	} |  | ||||||
| } | } | ||||||
| </style> | </style> | ||||||
|  |  | ||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue