为【沉浸式翻译】增加更好的模糊效果 by hanshou101

/* ==UserStyle==
@name           stackoverflow.com - 2023/4/13 19:12:20
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    A new userstyle
@author         Me
==/UserStyle== */
@-moz-document regexp(".*") {
	/* 在此插入代码... */
	:root {
		--placehoderHeight: 5px;
	}

	/**/
	.immersive-translate-target-wrapper {
		position: relative;
	}
	.immersive-translate-target-wrapper:hover {
		min-height: var(--placehoderHeight);
	}
	/**/
	/*此处，是为了给【沉浸式翻译】的模糊效果，增加【较为人性化】的交互  （原版交互不舒服）*/
	.immersive-translate-target-translation-theme-mask-inner {

		/*让翻译，立刻显示。不再等  0.3秒  。*/
		transition-duration: 0s !important;
		/*避免，中间有个缝，会疯狂的闪烁。  并且，需要和【zoom】搭配使用。【padding 8px + zoom 100%】、【padding 11px + zoom 60%】*/
		padding: 12px;
		/*修改，显示的大小。（我仍然嫌弃太大了一点）。   
				参考资料：
						面试官：让Chrome支持小于12px 的文字方式有哪些？区别？ | web前端面试 - 面试官系列    https://vue3js.cn/interview/css/less_12px.html#%E4%BA%8C%E3%80%81%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88
		*/
		zoom: 65%;
		/* 增大模糊的力度 */
		filter: blur(/*25px*/
		/*15px*/
		33px) !important;


		/*这行必须  要加，不然无法（在:hover时）放大		参考资料：https://stackoverflow.com/a/4920080/6264260*/
		display: inline-block;
		/*【只能起到50%的作用 ； 需要搭配height  一起使用  】调整【block】和【inline-block】的高度差异    
		参考资料：
				https://stackoverflow.com/a/27536454/6264260  
				https://stackoverflow.com/questions/65386958/why-inline-and-inline-block-have-different-height-with-the-same-text-content  
		*/
		vertical-align: top;
		min-height: var(--placehoderHeight);
	}

	.immersive-translate-target-translation-theme-mask-inner:hover {
		transform: scale(1.5);
		/* 				zoom: 1.5; */
		z-index: 9999;
/* 		position: absolute; */
		position: relative;
		height: auto;


		/* 此处，注意，放大的焦点， */
		/* 		transform-origin: 50% 50%; */
		transform-origin: 0% 0%;
		/* 		display: none; */
		background: #FFFFFF;
		
/* 		border: 1px solid #FF7878;
		box-sizing: border-box; */
		/*这种方式，也不会影响【div】高度				参考资料：https://stackoverflow.com/a/28643928/6264260  */
		outline:1px solid #FF7800;


		/* 		width: 100%; */
		/* 		width: 200px; */
		/* 		white-space: break-spaces; */
	}

	.immersive-translate-target-translation-block-wrapper {
		margin: 0px !important;
		/* 		 */
		/* 【让高度，更加缩减一点】 */
		line-height: initial;
		/* 		 */
	}
}