【多引擎搜索】，处理【iframe谷歌】的【登录框弹出】 by hanshou101

/* ==UserStyle==
@name           2022/8/14 19:38:38
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    A new userstyle
@author         Me
==/UserStyle== */
:root {
	--iframe-gap: /* 在【localhost】不起作用，那里是用React控制的；对【谷百度歌】有用 */
	0.4%;

	--ifrmae-google-width: /* 在【localhost】不起作用，那里是用React控制的；对【谷百度歌】有用 */
	68%;

	/*闪电滚动条*/
	/* 	--iframe-thunder-scrollbar-width: 36px; */
	--iframe-scrollbar-small-width: 5px;
}




@-moz-document domain("www.gobaidugle.com") {
	/*处理【根网站】*/
	/* 在此插入代码... */
	/*
	
	【Google】
	
	*/
	iframe[src^="https://www.google.com"] {
		/*设置外部宽度*/
		width: var(--ifrmae-google-width);
	}

	/*
	
	【Baidu】
	
	*/
	iframe[src^="https://www.baidu.com"] {
		width: calc( 100% - var(--iframe-gap) - var(--ifrmae-google-width));
	}
}



@-moz-document url-prefix("https://www.google.com") {
	/*处理【根网站——Google子页面】*/
	html[stylus-iframe*="www.gobaidugle.com"] {
		background: black;
	}
	/*
	隐藏【登录框弹出】
	*/
	html[stylus-iframe*="www.gobaidugle.com"] body .HTjtHe {
		visibility: hidden !important;
	}
	html[stylus-iframe*="www.gobaidugle.com"] body {
		overflow: auto;
	}

	/* 	
	
	
	隐藏搜索条
	
	
	*/
	:is(html[stylus-iframe*="localhost"]) :is( div#searchform, form[action="/search"], div#sfcnt) {
		/* 		visibility: hidden; */
		display: none;
	}


	/*
	
	修改【滚动条】
	
	参考资料：
			合集：https://onaircode.com/html-css-custom-scrollbar-examples/
					这个特例：https://codepen.io/zkreations/pen/bZRgqd
	
	*/
	/* Scroll 2 */
	:is(html[stylus-iframe*="localhost"])::-webkit-scrollbar {
		/* 		width: 5px; */
		width: var(--iframe-scrollbar-small-width);
		height: 5px;
	}
	:is(html[stylus-iframe*="localhost"]:hover)::-webkit-scrollbar {
		/* 	下面baidu生效，这里又不生效？？？	 */
		/* 		width: 72px; */
	}
	:is(html[stylus-iframe*="localhost"])::-webkit-scrollbar-track {
		background-color: rgba(255, 255, 255, 0.1);
		border-radius: 10px;
	}
	:is(html[stylus-iframe*="localhost"])::-webkit-scrollbar-thumb {
		background-color: #11171a;
		border-radius: 10px;
	}
}
@-moz-document url-prefix("https://www.baidu.com") {
	/*处理【根网站——Google子页面】*/
	/*
	采用【:is】，可以改变【CSS结合律】。
	参考资料：    https://developer.mozilla.org/zh-CN/docs/Web/CSS/Selector_list#%E9%80%89%E6%8B%A9%E5%99%A8%E5%88%97%E8%A1%A8%E6%97%A0%E6%95%88%E5%8C%96
	*/
	:is(html[stylus-iframe*="www.gobaidugle.com"], html[stylus-iframe*="localhost"]) {
		background: black;
		/* 		width: 590px; */
		overflow-x: hidden;
	}

	:is(html[stylus-iframe*="www.gobaidugle.com"], html[stylus-iframe*="localhost"]) body {
		/* 		background: black; */
	}

	:is(html[stylus-iframe*="www.gobaidugle.com"], html[stylus-iframe*="localhost"]) body div#wrapper_wrapper div#container {
		margin-left: /*unset*/
		2em !important;
	}

	:is(html[stylus-iframe*="www.gobaidugle.com"], html[stylus-iframe*="localhost"]) div#page div {
		padding-left: 0;
	}



	/* 	
	
	
	隐藏搜索条
	
	
	*/
	:is( html[stylus-iframe*="localhost"]) :is(/* div.result-molecule , */
	div#head) {
		display: none;
	}

	:is( html[stylus-iframe*="localhost"]) :is( div#s_tab) {
		padding: unset !important;
	}


	/*
	
	修改【滚动条】
	
	参考资料：
			合集：https://css-tricks.com/the-current-state-of-styling-scrollbars-in-css/
					可供备选的（有不少挺好的）：https://codepen.io/devstreak/pen/dMYgeO
					想用，但用不了的（彩虹猫，可惜需要使用JS  ）：https://codepen.io/chriscoyier/pen/wQgXPV
	
			最后采用的合集：https://unclebigbay.com/10-custom-scrollbar-samples-for-your-next-project
					蓝色自定义箭头：https://codepen.io/unclebay143/pen/PopyBNR
					小老鼠：https://codepen.io/unclebay143/pen/PopyyvO
					彩色字母：https://codepen.io/unclebay143/pen/wvJYxpR
					会动的小老鼠-1：https://codepen.io/unclebay143/pen/poexZNm
					会动的小老鼠-2：https://codepen.io/unclebay143/pen/ExWdOVj
					雷电gif图片：https://codepen.io/unclebay143/pen/PopyBKB
	
	*/
	/* 
	Scroll 2 
	
	此处，设置了【当hover覆盖】时，才会变宽。
	
	*/
	:is(html[stylus-iframe*="localhost"])::-webkit-scrollbar {
		width: var(--iframe-scrollbar-small-width);
		/* 后来一想，干脆不设置宽度 */
		/* 		width:0px; */
		transition: all;
	}
	:is(html[stylus-iframe*="localhost"]:hover)::-webkit-scrollbar {
		width: 72px;
	}

	:is(html[stylus-iframe*="localhost"])::-webkit-scrollbar-track {
		-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
	}

	:is(html[stylus-iframe*="localhost"])::-webkit-scrollbar-thumb {
		/*
		
		大部分的【GIF图】来源地址：
				知乎收集贴：https://zhuanlan.zhihu.com/p/64312250
				国外最大的，GIF图网站：https://giphy.com/trending-gifs
		
		我自己摸索的，【GIF】+【部分背景色】的方式：
				参考资料：
						多个背景图像    https://www.runoob.com/css3/css3-backgrounds.html
		
		
		*/
		/* 闪电 */
		/* 		background-image: url("https://thumbs.gfycat.com/ShyAdventurousAsianporcupine-max-1mb.gif"), */
		/* 小狗小狗 */
		/* 		background-image: url("https://pic3.zhimg.com/50/v2-defea296a4137e2e4e5da6d2822d4c06_720w.webp?source=1940ef5c"), */
		/* 舞火者 */
		/* 		background-image: url("http://img.soogif.com/k6seMGV8bRNYycRCNa1ISsIql4wdL3w5.gif"), */
		/*跳舞熊*/
		/* 		background-image: url("https://media3.giphy.com/media/tsX3YMWYzDPjAARfeg/giphy.gif?cid=790b7611e5757692beb064748df47eaec5c23837578de1f4&rid=giphy.gif&ct=g"), */
		/*李小龙*/
		/* 		background-color: black; */
		background-image: /*闪电自带*/
		url("https://media1.giphy.com/media/rvMmdCAgLYFfPtIng5/giphy.webp"),
		/*闪电自带*/
		linear-gradient(100deg, transparent, transparent),
		/* 新插入，其它的背景图片，命名为【自定义A】 */
		-webkit-linear-gradient(90deg,
		rgba(0, 0, 0, .2) 25%,
		transparent 25%,
		transparent 50%,
		rgba(0, 0, 0, .2) 50%,
		rgba(0, 0, 0, .2) 75%,
		transparent 75%,
		transparent);
		/* 		 */
		/*这个红色，加上【自定义A】图片，就是红色条纹。很配！！！*/
		background-color: #D62929;
		/*其它的背景图片，【自定义A】，所带的*/
		border-radius: 10px;
		/* 		 */
		background-position: center bottom, center -40px;
		background-repeat: no-repeat, no-repeat;
		background-size: contain, contain;
	}
}



@-moz-document url-prefix("https://hackerone.com/hacktivity") {/*新增加了【HackerOne】的嵌入iframe页面*/
	/*处理【根网站——Google子页面】*/
	html[stylus-iframe*="localhost"] header {
		display: none;
	}

}