미디어위키:Common.css

참고: 설정을 저장한 후에 바뀐 점을 확인하기 위해서는 브라우저의 캐시를 새로 고쳐야 합니다.

• 파이어폭스 / 사파리: Shift 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5 또는 Ctrl-R을 입력 (Mac에서는 ⌘-R)
• 구글 크롬: Ctrl-Shift-R키를 입력 (Mac에서는 ⌘-Shift-R)
• 엣지: Ctrl 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5를 입력.

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

.drumpad-grid,
.drumpad-grid * {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

.drumpad-grid {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	max-width: 900px;
	gap: 1.25rem;
	container-type: inline-size;

	.drumpad-item {
		position: relative;
		flex: 0 0 100%;
		max-width: 100%;
		aspect-ratio: 1 / 1;
		background-color: transparent;
		border: 1px solid var(--drumpad-border);
		text-decoration: none;
		overflow: hidden;
		cursor: pointer;
		outline: none;
		border-radius: 12px;
		transition:
			background-color var(--drumpad-speed) var(--drumpad-timing),
			border-color var(--drumpad-speed) var(--drumpad-timing);

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

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

			.drumpad-icon {
				opacity: 0;
				transform: translate(-50%, -50%) scale(0.7);
			}

			.drumpad-content {
				opacity: 1;
				transform: translate(-50%, -50%) scale(1);
			}
		}

		&:focus-visible {
			outline: 2px solid var(--drumpad-text);
			outline-offset: -3px;
		}

		.drumpad-icon {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%) scale(1);
			color: var(--drumpad-icon);
			display: flex;
			align-items: center;
			justify-content: center;
			opacity: 1;
			transition:
				transform var(--drumpad-speed) var(--drumpad-timing),
				opacity var(--drumpad-speed) var(--drumpad-timing);

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

		.drumpad-content {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%) scale(1.15);
			width: 100%;
			padding: 0 12px;
			text-align: center;
			opacity: 0;
			pointer-events: none;
			transition:
				transform var(--drumpad-speed) var(--drumpad-timing),
				opacity var(--drumpad-speed) var(--drumpad-timing);

			.drumpad-title {
				display: block;
				font-size: 1.1rem;
				font-weight: 700;
				color: var(--drumpad-text);
				line-height: 1.2;
				word-break: keep-all;
			}
		}
	}

	@container (min-width: 300px) {
		.drumpad-item {
			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) {
		.drumpad-item {
			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) {
		.drumpad-item {
			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) {
		.drumpad-item {
			flex: 0 0 calc((100% - 5rem) / 5);
			max-width: calc((100% - 5rem) / 5);

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