미디어위키:Common.css - 편집 역사

2026년 5월 27일 (수) 01:50에 Kawalain님의 편집

2026-05-27T01:50:26Z

← 이전 판		2026년 5월 27일 (수) 10:50 판
74번째 줄:		74번째 줄:

	& > span:last-child {		& > span:last-child {
			text-align: center;
	opacity: 0;		opacity: 0;
	transform: scale(1.15);		transform: scale(1.15);

2026년 5월 27일 (수) 01:46에 Kawalain님의 편집

2026-05-27T01:46:49Z

← 이전 판		2026년 5월 27일 (수) 10:46 판
39번째 줄:		39번째 줄:
	aspect-ratio: 1 / 1;		aspect-ratio: 1 / 1;
	flex: 1 1;		flex: 1 1;
	~~flex-basis: calc((100% - (2 * var(--kawa-deck-gap))) / 3);~~
	~~max-height: calc((100cqw - var(--kawa-deck-gap)) / 3);~~
	width: 100%;		width: 100%;
	padding: 0;		padding: 0;
62번째 줄:		60번째 줄:

	& > span:first-child {		& > span:first-child {
	~~font-size: 1.5em;~~
	opacity: 1;		opacity: 1;
	transition:		transition:
101번째 줄:		98번째 줄:

	&:has(+ .kawa-deck) {		&:has(+ .kawa-deck) {
	~~margin~~-bottom: 0;		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; }
			}
	}		}

110번째 줄:		122번째 줄:
	}		}

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

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

2026년 5월 27일 (수) 01:38에 Kawalain님의 편집

2026-05-27T01:38:59Z

← 이전 판		2026년 5월 27일 (수) 10:38 판
37번째 줄:		37번째 줄:
	& > a[href] {		& > a[href] {
	position: relative;		position: relative;
			aspect-ratio: 1 / 1;
	flex: 1 1;		flex: 1 1;
	flex-basis: calc((100% - (2 * var(--kawa-deck-gap))) / 3);		flex-basis: calc((100% - (2 * var(--kawa-deck-gap))) / 3);
	~~aspect~~-~~ratio~~: 1 / 1;		max-height: calc((100cqw - var(--kawa-deck-gap)) / 3);
	width: 100%;		width: 100%;
	padding: 0;		padding: 0;
97번째 줄:		98번째 줄:
	}		}
	}		}
			}

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

108번째 줄:		113번째 줄:
	& > a[href] {		& > a[href] {
	flex-basis: calc((100% - (3 * var(--kawa-deck-gap))) / 4);		flex-basis: calc((100% - (3 * var(--kawa-deck-gap))) / 4);
			max-height: calc((100cqw - var(--kawa-deck-gap)) / 4);
	}		}
	}		}
114번째 줄:		120번째 줄:
	& > a[href] {		& > a[href] {
	flex-basis: calc((100% - (5 * var(--kawa-deck-gap))) / 6);		flex-basis: calc((100% - (5 * var(--kawa-deck-gap))) / 6);
			max-height: calc((100cqw - var(--kawa-deck-gap)) / 6);
	}		}
	}		}
	}		}

2026년 5월 27일 (수) 01:33에 Kawalain님의 편집

2026-05-27T01:33:04Z

← 이전 판		2026년 5월 27일 (수) 10:33 판
1번째 줄:		1번째 줄:

	i.kawa {		i.kawa {
	display: inline-block;		display: inline-block;
16번째 줄:		15번째 줄:
	*******************************/		*******************************/
	:root {		:root {
	--kawa-deck-~~text~~: ~~currentColor;~~		--kawa-deck-gap: 1.25em;
	~~--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-speed: 0.25s;
	--kawa-deck-timing: cubic-bezier(0.16, 1, 0.3, 1);		--kawa-deck-timing: cubic-bezier(0.16, 1, 0.3, 1);
34번째 줄:		29번째 줄:
	.kawa-deck {		.kawa-deck {
	display: flex;		display: flex;
			flex-wrap: wrap;
	width: 100%;		width: 100%;
	padding: ~~1.25em~~;		padding: var(--kawa-deck-gap);
	gap: ~~1.25em~~;		gap: var(--kawa-deck-gap);
	container-type: inline-size;		container-type: inline-size;

	& > a[href] {		& > a[href] {
	position: relative;		position: relative;
	flex: ~~0 0~~ 100%;		flex: 1 1;
			flex-basis: calc((100% - (2 * var(--kawa-deck-gap))) / 3);
			aspect-ratio: 1 / 1;
	width: 100%;		width: 100%;
	padding: 0;		padding: 0;
	~~border: 1px solid var(--kawa-deck-border);~~
	border-radius: 12px;		border-radius: 12px;
			outline: currentcolor solid 2px;
	background: initial;		background: initial;
	transition:		transition:
	~~background-color~~ var(--kawa-deck-speed) var(--kawa-deck-timing),		outline 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 {		& > span {
70번째 줄:		61번째 줄:

	& > span:first-child {		& > span:first-child {
	font-size: ~~2em~~;		font-size: 1.5em;
	opacity: 1;		opacity: 1;
	transition:		transition:
			font-size var(--kawa-deck-speed) var(--kawa-deck-timing),
	opacity 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);		transform var(--kawa-deck-speed) var(--kawa-deck-timing);
93번째 줄:		85번째 줄:
	&:hover,		&:hover,
	&:focus-visible {		&:focus-visible {
	~~background~~-~~color~~: ~~var(--kawa-deck-hover-bg);~~		outline-width: 8px;
	~~border-color: var(--kawa-deck-border-hover)~~;

	& > span:first-child {		& > span:first-child {
108번째 줄:		99번째 줄:
	}		}

	@container (min-width: ~~300px~~) {		@container (min-width: 480px) {
	a[href] {		& > a[href] {
	~~flex: 0 0 calc((100% - 1.25rem) / 2);~~		& > span:first-child { font-size: 3em; }
	~~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~~ {		@container (min-width: 768px) {
	~~max~~-~~width~~: 100%;		& > a[href] {
	~~min~~-~~height: calc~~((~~100cqw~~ - ~~2.5rem~~) / 3);		flex-basis: calc((100% - (3 * var(--kawa-deck-gap))) / 4);
	}
	}		}
	}		}

	@container (min-width: ~~620px~~) {		@container (min-width: 1024px) {
	a[href] {		& > a[href] {
	flex~~: 0 0 calc((100%~~ - ~~3.75rem) / 4);~~		flex-basis: calc((100% - (5 * var(--kawa-deck-gap))) / 6);
	~~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);
	}
	}		}
	}		}
	}		}

2026년 5월 26일 (화) 12:31에 Kawalain님의 편집

2026-05-26T12:31:06Z

← 이전 판		2026년 5월 26일 (화) 21:31 판
1번째 줄:		1번째 줄:

			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		* Module:Deck

2026년 5월 26일 (화) 12:15에 Kawalain님의 편집

2026-05-26T12:15:39Z

← 이전 판		2026년 5월 26일 (화) 21:15 판
26번째 줄:		26번째 줄:
	container-type: inline-size;		container-type: inline-size;

	a[href] {		& > a[href] {
	position: relative;		position: relative;
	flex: 0 0 100%;		flex: 0 0 100%;

2026년 5월 26일 (화) 11:51에 Kawalain님의 편집

2026-05-26T11:51:06Z

← 이전 판		2026년 5월 26일 (화) 20:51 판
21번째 줄:		21번째 줄:
	.kawa-deck {		.kawa-deck {
	display: flex;		display: flex;
	~~flex-wrap: wrap;~~
	width: 100%;		width: 100%;
			padding: 1.25em;
	gap: 1.25em;		gap: 1.25em;
	container-type: inline-size;		container-type: inline-size;
57번째 줄:		57번째 줄:

	& > span:first-child {		& > span:first-child {
			font-size: 2em;
	opacity: 1;		opacity: 1;
	transition:		transition:

2026년 5월 26일 (화) 11:49에 Kawalain님의 편집

2026-05-26T11:49:04Z

← 이전 판		2026년 5월 26일 (화) 20:49 판
30번째 줄:		30번째 줄:
	flex: 0 0 100%;		flex: 0 0 100%;
	width: 100%;		width: 100%;
			padding: 0;
	border: 1px solid var(--kawa-deck-border);		border: 1px solid var(--kawa-deck-border);
	border-radius: 12px;		border-radius: 12px;
			background: initial;
	transition:		transition:
	background-color var(--kawa-deck-speed) var(--kawa-deck-timing),		background-color var(--kawa-deck-speed) var(--kawa-deck-timing),

2026년 5월 26일 (화) 11:44에 Kawalain님의 편집

2026-05-26T11:44:54Z

← 이전 판		2026년 5월 26일 (화) 20:44 판
57번째 줄:		57번째 줄:
	opacity: 1;		opacity: 1;
	transition:		transition:
	~~transform~~ var(--kawa-deck-speed) var(--kawa-deck-timing),		opacity 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 {		& > img {
68번째 줄:		68번째 줄:

	& > span:last-child {		& > span:last-child {
	~~transform: translate(-50%, -50%) scale(1.15);~~
	opacity: 0;		opacity: 0;
			transform: scale(1.15);
	transition:		transition:
	~~transform~~ var(--kawa-deck-speed) var(--kawa-deck-timing),		opacity 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);
	}		}

2026년 5월 26일 (화) 11:40에 Kawalain님의 편집

2026-05-26T11:40:28Z

← 이전 판		2026년 5월 26일 (화) 20:40 판
8번째 줄:		8번째 줄:
	--kawa-deck-border-hover: rgba(0, 0, 0, 0.4);		--kawa-deck-border-hover: rgba(0, 0, 0, 0.4);
	--kawa-deck-hover-bg: rgba(0, 0, 0, 0.04);		--kawa-deck-hover-bg: rgba(0, 0, 0, 0.04);
	--kawa-deck-speed: 0.3s;		--kawa-deck-speed: 0.25s;
	--kawa-deck-timing: cubic-bezier(0.16, 1, 0.3, 1);		--kawa-deck-timing: cubic-bezier(0.16, 1, 0.3, 1);
	}		}

	.kawa-deck~~-grid~~,		.kawa-deck,
	.kawa-deck~~-grid~~ * {		.kawa-deck * {
	box-sizing: border-box;		box-sizing: border-box;
	margin: 0;		margin: 0;
19번째 줄:		19번째 줄:
	}		}

	.kawa-deck~~-grid~~ {		.kawa-deck {
	display: flex;		display: flex;
	flex-wrap: wrap;		flex-wrap: wrap;
	width: 100%;		width: 100%;
	gap: 1.~~25rem~~;		gap: 1.25em;
	container-type: inline-size;		container-type: inline-size;

29번째 줄:		29번째 줄:
	position: relative;		position: relative;
	flex: 0 0 100%;		flex: 0 0 100%;
	~~max-~~width: 100%;		width: 100%;
	~~aspect-ratio: 1 / 1;~~
	~~background-color: transparent~~;
	border: 1px solid var(--kawa-deck-border);		border: 1px solid var(--kawa-deck-border);
	~~text-decoration: none;~~
	~~overflow: hidden;~~
	~~cursor: pointer;~~
	~~outline: none;~~
	border-radius: 12px;		border-radius: 12px;
	transition:		transition:
48번째 줄:		42번째 줄:
	}		}

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

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

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

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

	~~.kawa-deck-icon~~ {
	position: absolute;		position: absolute;
	top: ~~50%~~;		top: 0;
	left: ~~50%~~;		left: 0;
	~~transform~~: ~~translate(-50%, -50~~%~~) scale(1)~~;		width: 100%;
	~~color~~: ~~var(--kawa-deck-icon)~~;		height: 100%;
	display: flex;		display: flex;
	align-items: center;		align-items: center;
	justify-content: center;		justify-content: center;
			pointer-events: none;
			}

			& > span:first-child {
	opacity: 1;		opacity: 1;
	transition:		transition:
83번째 줄:		60번째 줄:
	opacity var(--kawa-deck-speed) var(--kawa-deck-timing);		opacity var(--kawa-deck-speed) var(--kawa-deck-timing);

	~~&>i,~~		& > img {
	&>img {
	max-width: 40px;		max-width: 40px;
	max-height: 40px;		max-height: 40px;
91번째 줄:		67번째 줄:
	}		}

	~~.kawa~~-~~deck-content~~ {		& > span:last-child {
	~~position: absolute;~~
	~~top: 50%;~~
	~~left: 50%;~~
	transform: translate(-50%, -50%) scale(1.15);		transform: translate(-50%, -50%) scale(1.15);
	~~width: 100%;~~
	~~padding: 0 12px;~~
	~~text-align: center;~~
	opacity: 0;		opacity: 0;
	~~pointer-events: none;~~
	transition:		transition:
	transform var(--kawa-deck-speed) var(--kawa-deck-timing),		transform var(--kawa-deck-speed) var(--kawa-deck-timing),
	opacity var(--kawa-deck-speed) var(--kawa-deck-timing);		opacity 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);
			}

	~~.kawa-deck~~-~~title~~ {		& > span:last-child {
	~~display: block;~~		opacity: 1;
	~~font-size~~: 1~~.1rem~~;		transform: scale(1);
	~~font-weight~~: ~~700;~~
	~~color: var~~(~~--kawa-deck-text~~);
	~~line-height: 1.2;~~
	~~word-break: keep-all~~;
	}		}
	}		}