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

/*******************************
 * 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);
			}
		}
	}
}