미디어위키: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-gap: 1.25em;
	--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;
	flex-wrap: wrap;
	width: 100%;
	padding: var(--kawa-deck-gap);
	gap: var(--kawa-deck-gap);
	container-type: inline-size;

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

		& > 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 {
			opacity: 1;
			transition:
				font-size var(--kawa-deck-speed) var(--kawa-deck-timing),
				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 {
			text-align: center;
			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 {
			outline-width: 8px;

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

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

	&:has(+ .kawa-deck) {
		padding-bottom: 0;
	}

	@container (min-width: 0px) {
		& > a[href] {
			flex-basis: calc((100% - (2 * var(--kawa-deck-gap))) / 3);
			max-height: calc((100cqw - (2 * var(--kawa-deck-gap))) / 3);

			& > span:first-child { font-size: 1em; }
		}
	}

	@container (min-width: 320px) {
		& > a[href] {
			& > span:first-child { font-size: 2em; }
		}
	}

	@container (min-width: 480px) {
		& > a[href] { 
			& > span:first-child { font-size: 3em; }
		}
    }

	@container (min-width: 768px) {
		& > a[href] {
			flex-basis: calc((100% - (3 * var(--kawa-deck-gap))) / 4);
			max-height: calc((100cqw - (3 * var(--kawa-deck-gap))) / 4);
		}
	}

	@container (min-width: 1024px) {
		& > a[href] {
			flex-basis: calc((100% - (5 * var(--kawa-deck-gap))) / 6);
			max-height: calc((100cqw - (5 * var(--kawa-deck-gap))) / 6);
		}
	}

	@container (min-width: 1280px) {
		& > a[href] {
			flex-basis: calc((100% - (6 * var(--kawa-deck-gap))) / 7);
			max-height: calc((100cqw - (6 * var(--kawa-deck-gap))) / 7);
		}
	}
}