미디어위키: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 */
:root.gadget-cu:not(.skin-theme-clientpref-day) {
	--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: linear-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::after {
		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';
			}
		}
	}
}