미디어위키:Common.css: 두 판 사이의 차이

i.kawa {
	display: inline-block;
	width: 1em;
	height: 1em;
	background-color: currentcolor;
	mask-size: contain;
	mask-position: center;
	mask-repeat: no-repeat;

	&.kawa-namuwiki { mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjIyMCIgaGVpZ2h0PSIyMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CiAgIDxwYXRoIGQ9Im0xMTAsMGMtNjAuNzUsMCAtMTEwLDQ5LjI0IC0xMTAsMTEwYzAsNjAuNzUgNDkuMjUsMTEwIDExMCwxMTBjNjAuNzYsMCAxMTAsLTQ5LjI1IDExMCwtMTEwYzAsLTYwLjc2IC00OS4yNCwtMTEwIC0xMTAsLTExMHptNzEuODIsMTI5LjEyYy01LjU1LDAuMDQgLTEwLjU1LC0yLjMyIC0xNC4wNywtNi4wOGwtMzMuMTIsMTQuMDFsNC41NSwxMC43NmE1LjA4LDUuMDggMCAwIDEgLTIuNjksNi42NmE1LjA4LDUuMDggMCAwIDEgLTYuNjYsLTIuNzFsLTExLjI4LC0yNi42NWwtNDQuNzYsMTguOTRjMC4xLDAuNzcgMC4xOCwxLjU2IDAuMTgsMi4zNGMwLjA4LDEwLjUyIC04LjQxLDE5LjEzIC0xOC45MiwxOS4yMmMtMTAuNSwwLjA3IC0xOS4xMiwtOC40MSAtMTkuMiwtMTguOTJjLTAuMDgsLTEwLjUxIDguNDEsLTE5LjEyIDE4LjkyLC0xOS4yMWM2LjA5LC0wLjA1IDExLjUzLDIuNzkgMTUuMDUsNy4yM2w4LjI5LC0zLjVsLTE2LjQ3LC0zOC45MWMtMC42MSwwLjA2IC0xLjIzLDAuMTEgLTEuODUsMC4xMWMtMTAuNTEsMC4wOCAtMTkuMTMsLTguNDEgLTE5LjIxLC0xOC45MmMtMC4wOCwtMTAuNTEgOC40MSwtMTkuMTMgMTguOTIsLTE5LjIxYzEwLjUxLC0wLjA3IDE5LjEyLDguNDEgMTkuMiwxOC45MmMwLjA1LDYuMjcgLTIuOTYsMTEuODUgLTcuNjIsMTUuMzZsMTYuMzgsMzguNjhsMjcuMTMsLTExLjQ4bC0zLjUzLC04LjMzYy0wLjg0LDAuMTIgLTEuNywwLjIxIC0yLjU4LDAuMjJjLTEwLjUxLDAuMDggLTE5LjEyLC04LjQxIC0xOS4yMSwtMTguOTFjLTAuMDgsLTEwLjUyIDguNDEsLTE5LjEzIDE4LjkyLC0xOS4yMWMxMC41MSwtMC4wOCAxOS4xMyw4LjQxIDE5LjIxLDE4LjkxYzAuMDQsNi4wMSAtMi43MSwxMS4zOSAtNy4wNCwxNC45MWwxMC4zMSwyNC4zNWwzMi4zNiwtMTMuN2ExOS4xLDE5LjEgMCAwIDEgLTAuNDEsLTMuNzljLTAuMDgsLTEwLjUyIDguNDEsLTE5LjEzIDE4LjkyLC0xOS4yMWMxMC41MSwtMC4wOCAxOS4xMiw4LjQxIDE5LjIsMTguOTFjMC4wOCwxMC41MiAtOC40MSwxOS4xNCAtMTguOTIsMTkuMjF6Ii8+CiAgIDxwYXRoIGQ9Im02Ny41Myw3My4yOWMtMC4wNCwtNC4zNSAtMy42LC03Ljg3IC03Ljk0LC03LjgzYy00LjM2LDAuMDMgLTcuODcsMy42IC03LjgzLDcuOTRjMC4wMyw0LjM2IDMuNTksNy44NyA3Ljk0LDcuODNjNC4zNSwtMC4wMyA3Ljg2LC0zLjU5IDcuODMsLTcuOTR6Ii8+CiAgIDxwYXRoIGQ9Im01NC44NSwxMzguNjVjLTQuMzUsMC4wNCAtNy44NiwzLjYgLTcuODMsNy45NGE3Ljg5LDcuODkgMCAwIDAgNy45NSw3Ljg0YzQuMzQsLTAuMDMgNy44NiwtMy42MSA3LjgzLC03Ljk1Yy0wLjA0LC00LjM0IC0zLjYsLTcuODYgLTcuOTUsLTcuODRsMCwwLjAxeiIvPgogICA8cGF0aCBkPSJtMTE2LjIyLDg4LjUzYy0wLjAzLC00LjM1IC0zLjYsLTcuODYgLTcuOTQsLTcuODNjLTQuMzYsMC4wMyAtNy44NiwzLjYgLTcuODMsNy45NWMwLjAzLDQuMzUgMy42LDcuODUgNy45NCw3LjgyYzQuMzYsLTAuMDMgNy44NywtMy41OSA3LjgzLC03Ljk0eiIvPgogICA8cGF0aCBkPSJtMTgxLjYyLDEwMi4xN2MtNC4zNSwwLjAzIC03Ljg2LDMuNiAtNy44Myw3Ljk1YzAuMDMsNC4zNSAzLjYsNy44NSA3Ljk1LDcuODNjNC4zNSwtMC4wNCA3Ljg2LC0zLjYgNy44MywtNy45NWMtMC4wNCwtNC4zNSAtMy42MSwtNy44NiAtNy45NSwtNy44M3oiLz4KPC9zdmc+") }
}

/*******************************
 * Module:Deck
 *******************************/
:root {
	--kawa-deck-text: currentColor;
	--kawa-deck-icon: currentColor;
	--kawa-deck-border: rgba(0, 0, 0, 0.5);
	--kawa-deck-border-hover: rgba(0, 0, 0, 0.4);
	--kawa-deck-hover-bg: rgba(0, 0, 0, 0.04);
	--kawa-deck-speed: 0.25s;
	--kawa-deck-timing: cubic-bezier(0.16, 1, 0.3, 1);
}

.kawa-deck,
.kawa-deck * {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

.kawa-deck {
	display: flex;
	width: 100%;
	padding: 1.25em;
	gap: 1.25em;
	container-type: inline-size;

	& > a[href] {
		position: relative;
		flex: 0 0 100%;
		width: 100%;
		padding: 0;
		border: 1px solid var(--kawa-deck-border);
		border-radius: 12px;
		background: initial;
		transition:
			background-color var(--kawa-deck-speed) var(--kawa-deck-timing),
			border-color var(--kawa-deck-speed) var(--kawa-deck-timing);

		&:last-child {
			flex-grow: 1;
			aspect-ratio: auto;
			min-height: 140px;
		}

		& > span {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			pointer-events: none;
		}

		& > span:first-child {
			font-size: 2em;
			opacity: 1;
			transition:
				opacity var(--kawa-deck-speed) var(--kawa-deck-timing),
				transform var(--kawa-deck-speed) var(--kawa-deck-timing);

			& > img {
				max-width: 40px;
				max-height: 40px;
				object-fit: contain;
			}
		}

		& > span:last-child {
			opacity: 0;
			transform: scale(1.15);
			transition:
				opacity var(--kawa-deck-speed) var(--kawa-deck-timing),
				transform var(--kawa-deck-speed) var(--kawa-deck-timing);
		}

		&:hover,
		&:focus-visible {
			background-color: var(--kawa-deck-hover-bg);
			border-color: var(--kawa-deck-border-hover);

			& > span:first-child {
				opacity: 0;
				transform: scale(0.7);
			}

			& > span:last-child {
				opacity: 1;
				transform: scale(1);
			}
		}
	}

	@container (min-width: 300px) {
		a[href] {
			flex: 0 0 calc((100% - 1.25rem) / 2);
			max-width: calc((100% - 1.25rem) / 2);

			&:last-child {
				max-width: 100%;
				min-height: calc((100cqw - 1.25rem) / 2);
			}
		}
	}

	@container (min-width: 460px) {
		a[href] {
			flex: 0 0 calc((100% - 2.5rem) / 3);
			max-width: calc((100% - 2.5rem) / 3);

			&:last-child {
				max-width: 100%;
				min-height: calc((100cqw - 2.5rem) / 3);
			}
		}
	}

	@container (min-width: 620px) {
		a[href] {
			flex: 0 0 calc((100% - 3.75rem) / 4);
			max-width: calc((100% - 3.75rem) / 4);

			&:last-child {
				max-width: 100%;
				min-height: calc((100cqw - 3.75rem) / 4);
			}
		}
	}

	@container (min-width: 780px) {
		a[href] {
			flex: 0 0 calc((100% - 5rem) / 5);
			max-width: calc((100% - 5rem) / 5);

			&:last-child {
				max-width: 100%;
				min-height: calc((100cqw - 5rem) / 5);
			}
		}
	}
}