미디어위키:Gadget-CU.css: 두 판 사이의 차이

/* Common */
i.cu-icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	background-color: currentColor;
	mask-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABABAMAAABYR2ztAAAAIVBMVEX////v4n//yQBDry3/AAAAAAD////v4n//yQBDry3/AAB6sOsvAAAABnRSTlMAAAAAAABupgeRAAACB0lEQVRIx92Sv27bQAzGaRTmbA2G1z6CgKsHZSoQZcnkIL2dE/dOfoMiuybtmfSU/UieZNVSoyFAh9I663T3u49/jkQsRMrkZnMMFbIfkXD5GwHMWViE8WYWxYNNJVY7isPsuDgnvsgOqLKaNPZFheEBa5Cw4zit4gBAO68wi0rEBMn+oWhqqkXNAdssAGQ9SPN4U2DLIwD7nqUZLj1yVywb5a1U6sB6qwt5YgWIQmFfo4CmYokx0xikA5a4cEQRBeKQLf4NiED5puBlnQGuMHfhKRUXpod9ngAPMj5KPZT+ULhPcxo6LvhbKS7HW4Gp+lkdogd0pCUy+UV2ewZURZikAOzjzQPcna5VSHiwAUTzvInd8BU2OrELovFymL46cAIAiUNpzGhTd2ErAHYmUB12JpBa60ovIWQkira7ngBYnMpf2pYCKGmaK2xfHaipboa2Hb43XaRbrCpGiVI/vD8PbdPVXt4FkJr+YRjeU9MlnjpnBnSp774Nw2MPi06/A/qmT+0E0AoAgefJBS1duMCHQXYAkCaAtJLmAVmk1g0TmtkszQmoPw1suvg88A9i+H/rcNwC8oaL4xaQ88cujltAXgf2F4yqejGB1RiwSvnlmE1gTWGf57YC5A1g/3egXhFYKuyXwHkEzisCmV5T/tE+4UkpX5YCmfI559aeV0wui/28kLy330oeUZO6Wg+OAAAAAElFTkSuQmCC');
	mask-size: 8em 8em;
	mask-repeat: no-repeat;
	image-rendering: pixelated;
	image-rendering: crisp-edges;
	transform: translateY(0.1em);

	&.c-0 {
		mask-position: calc(-1em * 0) calc(-1em * 0);
	}
	&.c-6 {
		mask-position: calc(-1em * 6) calc(-1em * 0);
	}
	&.c-9 {
		mask-position: calc(-1em * 1) calc(-1em * 1);
	}
	&.c-11 {
		mask-position: calc(-1em * 3) calc(-1em * 1);
	}
	&.c-12 {
		mask-position: calc(-1em * 4) calc(-1em * 1);
	}
	&.c-26 {
		mask-position: calc(-1em * 4) calc(-1em * 1);
	}
}

/* Skin */
@media screen and (prefers-color-scheme: dark) {
	:root.skin-theme-clientpref-os.gadget-cu {
		--background-color-base: color(srgb 0 0 0 / 0.8);
		--background-color-neutral-subtle: #080808;
		--background-color-interactive: #555;
		--background-color-interactive-subtle--hover: #000;
		--color-base: #fff;
		--color-inverted: #000;
		--color-inverted-fixed: #000;
		--color-emphasized: #ff0;
		--color-progressive: #ff0;
		--color-progressive--hover: #aa0;

		--border-color-base: #444;
		--border-size: 4px;

		body {
			/* TODO: CHANGE ME */
			background: url('https://scavprototype.wiki.gg/images/Background_dark.png');
			background-size: cover;
			background-position: center;
			background-attachment: fixed;
			background-repeat: no-repeat;
		}

		.vector-header {
			background: inear-gradient(
				to top,
				var(--border-color-base),
				var(--background-color-neutral-subtle)
			);
		}

		.mw-logo-container {
			filter: initial !important;
		}

		.mw-page-container,
		.vector-dropdown-content {
			backdrop-filter: blur(10px);
			border: var(--border-size) solid var(--border-color-base);
		}

		.vector-sticky-pinned-container {
			background: initial;
		}
	}
}

/* NoRetroFont */
:root:not([data-no-retro-font]) {
	body,
	h1#firstHeading,
	.vector-sticky-header-context-bar-primary {
		font-family:
			'TemplateStyles_RetroGaming', 'TemplateStyles_NeoDunggeunmoPro',
			sans-serif;
	}

	pre {
		font-family: 'TemplateStyles_NeoDunggeunmoMono', monospace;
	}
}

/* CUI */
.cu-tooltip {
	position: fixed;
	min-width: 200px;
	max-width: 500px;
	font-family: var(--cu-font);
	color: white;

	.cu-liquids {
		margin: 1em 0;
	}

	.cu-liquid {
		p:last-child {
			margin-bottom: 1em;
		}
	}

	& > section {
		display: inline-block;
		padding: 0.25em;
		background-color: color(srgb 0 0 0 / 0.9);

		p {
			margin: 0;

			&:first-child {
				color: color-mix(in srgb, currentColor 50%, white);
			}
		}
	}

	&:not([open]) {
		p:not(.essential) {
			display: none;
		}

		.cu-liquid {
			display: inline-block;

			/* 닫힌 상태일 때 다음 요소가 있으면 쉼표 붙이기 */
			&:has(+ section) p:first-child::after {
				content: ',\a0';
			}
		}
	}
}