Template:Notice/styles.css

/* [[Category:在模板命名空间下的CSS页面]] */
.notice {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	box-sizing: border-box;
	border: 1px solid;
	border-radius: var(--border-radius-medium, 2px);
	margin-block: 0.25rem;
	padding: 1rem;
	overflow: hidden;
}

body.main-sm .notice {
	width: 80%;
	margin-inline: auto;
}

.notice-icon {
	flex-shrink: 0;
	margin-block: calc(0.5em * var(--text-base--line-height) - 0.75rem);
	margin-block: calc(0.5lh - 0.75rem);
	width: 1.5rem;
	height: 1.5rem;
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	-webkit-mask-image: var(--notice-icon);
	mask-image: var(--notice-icon);
}

.notice-text {
	flex-grow: 1;
}

.notice-title {
	font-weight: 600;
}

.notice-list-title {
	margin-top: 0.25rem;
}

.notice-list {
	margin: 0.25rem 0;
}

.notice-image {
	position: absolute;
	bottom: 0;
	inset-inline-end: 0;
	inset-block: 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	pointer-events: none;
	opacity: 0.5;
	mix-blend-mode: multiply;
	z-index: 0;
}

.notice-image span.notpageimage[typeof="mw:File"] {
	max-height: 100%;
	object-fit: cover;
	object-position: top
}

body:not(.main-sm) .notice-image {
	display: none;
}

/* info */
.notice-info {
	border-color: var(--border-color-notice);
	background-color: var(--background-color-notice-subtle);
}
.notice-info .notice-icon {
	--notice-icon: url(/images/c/c9/Lucide-info.svg);
	background-color: var(--color-destructive--focus, #3366CC);
}

/* caution */
.notice-caution {
	border-color: var(--border-color-warning);
	background-color: var(--background-color-warning-subtle);
}
.notice-caution .notice-icon {
	--notice-icon: url(/images/f/f7/Lucide-circle-alert.svg);
	background-color: var(--color-icon-warning, #ab7f2a);
}

/* warning */
.notice-warning {
	border-color: var(--border-color-error);
	background-color: var(--background-color-error-subtle);
}
.notice-warning .notice-icon {
	--notice-icon: url(/images/7/7e/Lucide-triangle-alert.svg);
	background-color: var(--color-icon-error, #f54739);
}

/* policy */
.notice-policy {
	border-color: var(--border-color-success);
	background-color: var(--background-color-success-subtle);
}
.notice-policy .notice-icon {
	--notice-icon: url(/images/d/d9/Lucide-circle-check.svg);
	background-color: var(--color-icon-success, #099979);
}

/* essay */
.notice-essay {
	border-color: var(--border-color-warning);
	background-color: var(--background-color-warning-subtle);
}
.notice-essay .notice-icon {
	--notice-icon: url(/images/d/d9/Lucide-circle-check.svg);
	background-color: var(--color-icon-warning, #ab7f2a);
}

/* help */
.notice-help {
	border-color: var(--border-color-notice);
	background-color: var(--background-color-notice-subtle);
}
.notice-help .notice-icon {
	--notice-icon: url(/images/f/fb/Lucide-circle-question-mark.svg);
	background-color: var(--color-destructive--focus, #3366CC);
}

/* 已故现实人物 */
.notice-已故现实人物 {
	border-color: currentcolor;
	background-color: #FDFFFF;
}
html.skin-theme-clientpref-night .notice-已故现实人物 {
	background-color: #0D0D0D;
}
@media (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .notice-已故现实人物 {
		background-color: #0D0D0D;
	}
}
.notice-已故现实人物 .notice-icon {
	--notice-icon: url(/images/9/95/Tabler-candle.svg);
	background-color: currentcolor;
}

/* icons */
.notice-icon.notice-icon-clock {
	--notice-icon: url(/images/3/39/Lucide-clock-alert.svg);
}
.notice-icon.notice-icon-trash {
	--notice-icon: url(/images/b/b6/Lucide-trash.svg);
}
.notice-icon.notice-icon-pencil {
	--notice-icon: url(/images/6/66/Lucide-pencil.svg);
}
.notice-icon.notice-icon-messages {
	--notice-icon: url(/images/f/f0/Lucide-messages-square.svg);
}
.notice-icon.notice-icon-layers {
	--notice-icon: url(/images/8/8b/Lucide-layers.svg);
}
.notice-icon.notice-icon-megaphone {
	--notice-icon: url(/images/c/c2/Lucide-megaphone.svg);
}
.notice-icon.notice-icon-bot {
	--notice-icon: url(/images/a/a3/Lucide-bot.svg);
}
.notice-icon.notice-icon-code {
	--notice-icon: url(/images/9/91/Lucide-code-xml.svg);
}
.notice-icon.notice-icon-lua {
	--notice-icon: url(/images/6/6b/Material-lua.svg);
}
.notice-icon.notice-icon-disambig {
	mask-image: none;
	-webkit-mask-image: none;
	background-color: transparent;
	background-image: url(/images/7/72/Disambig.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
.notice-icon.notice-icon-scale {
	--notice-icon: url(/images/6/63/Lucide-scale.svg);
}
.notice-icon.notice-icon-c {
	--notice-icon: url(/images/f/f8/Lucide-copyright.svg);
}
.notice-icon.notice-icon-nc {
	--notice-icon: url(/images/d/d2/Lucide-no-copyright.svg);
}
.notice-icon.notice-icon-cc {
	--notice-icon: url(/images/c/c9/Lucide-creative-commons.svg);
}
.notice-icon.notice-icon-r {
	--notice-icon: url(/images/4/4e/Tabler-registered.svg);
}
.notice-icon.notice-icon-trophy {
	--notice-icon: url(/images/b/b1/Lucide-trophy.svg);
}
.notice-icon.notice-icon-crown {
	--notice-icon: url(/images/8/8d/Lucide-crown.svg);
}
.notice-icon.notice-icon-cake {
	--notice-icon: url(/images/d/de/Lucide-cake.svg);
}
.notice-icon.notice-icon-candle {
	--notice-icon: url(/images/9/95/Tabler-candle.svg);
}
.notice-icon.notice-icon-vcp {
	mask-image: none;
	-webkit-mask-image: none;
	background-color: transparent;
	background-image: url(/images/c/c1/VCPedia_logo.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}