MediaWiki:Gadget-prism-plugin-previewers.css

来自萌娘共享
AnnAngela-dbot讨论 | 贡献2024年4月8日 (一) 18:41的版本 (代码变动:2d5d0ae - feat(Gadget/prism): 新的代码高亮工具 (#443) by U:AnnAngela, co-authored-by: GH:github-actions[bot],U:Bhsd
跳转至: 导航搜索

注意:在保存之后,您可能需要清除浏览器缓存才能看到所作出的变更的影响。

  • Firefox或Safari:按住Shift的同时单击刷新,或按Ctrl-F5Ctrl-R(Mac为⌘-R
  • Google Chrome:Ctrl-Shift-R(Mac为⌘-Shift-R
  • Internet Explorer:按住Ctrl的同时单击刷新,或按Ctrl-F5
  • Opera:前往菜单 → 设置(Mac为Opera → Preferences),然后隐私和安全 → 清除浏览数据 → 缓存的图片和文件
/**
 * -------------------------------------------------------------------------
 * !!! DON'T MODIFY THIS PAGE MANUALLY, YOUR CHANGES WILL BE OVERWRITTEN !!!
 * -------------------------------------------------------------------------
 */
._addText { content: '{{GHIACode|page=GHIA:MoegirlPediaInterfaceCodes/blob/master/src/gadgets/prism-plugin-previewers/MediaWiki:Gadget-prism-plugin-previewers.css|user=[[U:AnnAngela]]|co-authors=GH:github-actions[bot]、[[U:Bhsd]]|longId=2d5d0ae30421796cfa323a02a78713c0ed261417|shortId=2d5d0ae|summary=feat(Gadget/prism): 新的代码高亮工具 (#443)|body=<nowiki>Co-authored-by: github-actions[bot] <41898282+github-actions[bot]📧users.noreply.github.com>↩Co-authored-by: Bhsd <55071315+bhsd-harry📧users.noreply.github.com></nowiki>}}'; } 

/* <pre> */

.prism-previewer,
.prism-previewer:before,
.prism-previewer:after{
	position:absolute;
	pointer-events:none;
}
.prism-previewer,
.prism-previewer:after{
	left:50%;
}
.prism-previewer{
	margin-top:-48px;
	width:32px;
	height:32px;
	margin-left:-16px;
	z-index:10;

	opacity:0;
	transition:opacity .25s;
}
.prism-previewer.flipped{
	margin-top:0;
	margin-bottom:-48px;
}
.prism-previewer:before,
.prism-previewer:after{
	content:'';
	position:absolute;
	pointer-events:none;
}
.prism-previewer:before{
	top:-5px;
	right:-5px;
	left:-5px;
	bottom:-5px;
	border-radius:10px;
	border:5px solid #fff;
	box-shadow:0 0 3px rgba(0, 0, 0, 0.5) inset, 0 0 10px rgba(0, 0, 0, 0.75);
}
.prism-previewer:after{
	top:100%;
	width:0;
	height:0;
	margin:5px 0 0 -7px;
	border:7px solid transparent;
	border-color:rgba(255, 0, 0, 0);
	border-top-color:#fff;
}
.prism-previewer.flipped:after{
	top:auto;
	bottom:100%;
	margin-top:0;
	margin-bottom:5px;
	border-top-color:rgba(255, 0, 0, 0);
	border-bottom-color:#fff;
}
.prism-previewer.active{
	opacity:1;
}

.prism-previewer-angle:before{
	border-radius:50%;
	background:#fff;
}
.prism-previewer-angle:after{
	margin-top:4px;
}
.prism-previewer-angle svg{
	width:32px;
	height:32px;
	transform:rotate(-90deg);
}
.prism-previewer-angle[data-negative] svg{
	transform:scaleX(-1) rotate(-90deg);
}
.prism-previewer-angle circle{
	fill:transparent;
	stroke:hsl(200, 10%, 20%);
	stroke-opacity:0.9;
	stroke-width:32;
	stroke-dasharray:0, 500;
}

.prism-previewer-gradient{
	background-image:linear-gradient(45deg, #bbb 25%, transparent 25%, transparent 75%, #bbb 75%, #bbb), linear-gradient(45deg, #bbb 25%, #eee 25%, #eee 75%, #bbb 75%, #bbb);
	background-size:10px 10px;
	background-position:0 0, 5px 5px;

	width:64px;
	margin-left:-32px;
}
.prism-previewer-gradient:before{
	content:none;
}
.prism-previewer-gradient div{
	position:absolute;
	top:-5px;
	left:-5px;
	right:-5px;
	bottom:-5px;
	border-radius:10px;
	border:5px solid #fff;
	box-shadow:0 0 3px rgba(0, 0, 0, 0.5) inset, 0 0 10px rgba(0, 0, 0, 0.75);
}

.prism-previewer-color{
	background-image:linear-gradient(45deg, #bbb 25%, transparent 25%, transparent 75%, #bbb 75%, #bbb), linear-gradient(45deg, #bbb 25%, #eee 25%, #eee 75%, #bbb 75%, #bbb);
	background-size:10px 10px;
	background-position:0 0, 5px 5px;
}
.prism-previewer-color:before{
	background-color:inherit;
	background-clip:padding-box;
}

.prism-previewer-easing{
	margin-top:-76px;
	margin-left:-30px;
	width:60px;
	height:60px;
	background:#333;
}
.prism-previewer-easing.flipped{
	margin-bottom:-116px;
}
.prism-previewer-easing svg{
	width:60px;
	height:60px;
}
.prism-previewer-easing circle{
	fill:hsl(200, 10%, 20%);
	stroke:white;
}
.prism-previewer-easing path{
	fill:none;
	stroke:white;
	stroke-linecap:round;
	stroke-width:4;
}
.prism-previewer-easing line{
	stroke:white;
	stroke-opacity:0.5;
	stroke-width:2;
}

@keyframes prism-previewer-time{
	0%{
		stroke-dasharray:0, 500;
		stroke-dashoffset:0;
	}
	50%{
		stroke-dasharray:100, 500;
		stroke-dashoffset:0;
	}
	100%{
		stroke-dasharray:0, 500;
		stroke-dashoffset:-100;
	}
}

.prism-previewer-time:before{
	border-radius:50%;
	background:#fff;
}
.prism-previewer-time:after{
	margin-top:4px;
}
.prism-previewer-time svg{
	width:32px;
	height:32px;
	transform:rotate(-90deg);
}
.prism-previewer-time circle{
	fill:transparent;
	stroke:hsl(200, 10%, 20%);
	stroke-opacity:0.9;
	stroke-width:32;
	stroke-dasharray:0, 500;
	stroke-dashoffset:0;
	animation:prism-previewer-time linear infinite 3s;
} 

/* </pre> */