mirror of
				https://codeberg.org/yeentown/barkey.git
				synced 2025-11-04 07:24:13 +00:00 
			
		
		
		
	Hover effect for conversation notes (like Firefish)
This commit is contained in:
		
							parent
							
								
									43b3b5a34b
								
							
						
					
					
						commit
						1ca0cd727e
					
				
					 2 changed files with 21 additions and 2 deletions
				
			
		| 
						 | 
				
			
			@ -43,7 +43,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 | 
			
		|||
		<SkNoteSub v-for="note in conversation" :key="note.id" :class="$style.replyToMore" :note="note" :expandAllCws="props.expandAllCws"/>
 | 
			
		||||
	</template>
 | 
			
		||||
	<SkNoteSub v-if="appearNote.reply" :note="appearNote.reply" :class="$style.replyTo" :expandAllCws="props.expandAllCws"/>
 | 
			
		||||
	<article ref="noteEl" :class="$style.note" tabindex="-1" @contextmenu.stop="onContextmenu">
 | 
			
		||||
	<article :id="appearNote.id" ref="noteEl" :class="$style.note" tabindex="-1" @contextmenu.stop="onContextmenu">
 | 
			
		||||
		<header :class="$style.noteHeader">
 | 
			
		||||
			<MkAvatar :class="$style.noteHeaderAvatar" :user="appearNote.user" indicator link preview/>
 | 
			
		||||
			<div style="display: flex; align-items: center; white-space: nowrap; overflow: hidden;">
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -461,7 +461,26 @@ if (props.detail) {
 | 
			
		|||
}
 | 
			
		||||
 | 
			
		||||
.main {
 | 
			
		||||
	position: relative;
 | 
			
		||||
	display:  flex;
 | 
			
		||||
 | 
			
		||||
	&::after {
 | 
			
		||||
		content: "";
 | 
			
		||||
		position: absolute;
 | 
			
		||||
		top: -12px;
 | 
			
		||||
		right: -12px;
 | 
			
		||||
		left: -12px;
 | 
			
		||||
		bottom: -12px;
 | 
			
		||||
		background: var(--panelHighlight);
 | 
			
		||||
		border-radius: var(--radius);
 | 
			
		||||
		opacity: 0;
 | 
			
		||||
		transition: opacity .2s, background .2s;
 | 
			
		||||
		z-index: -1;
 | 
			
		||||
	}
 | 
			
		||||
	
 | 
			
		||||
	&:hover::after {
 | 
			
		||||
		opacity: 1;
 | 
			
		||||
	}
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.colorBar {
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
	Add table
		
		Reference in a new issue