틀:메시지/styles.css - 편집 역사

2026년 7월 12일 (일) 02:59에 imported>Ljyee님의 편집

2026-07-12T02:59:01Z

← 이전 판		2026년 7월 12일 (일) 11:59 판
19번째 줄:		19번째 줄:

	box-sizing: border-box;		box-sizing: border-box;
	filter: drop-shadow(~~7px~~ 4px 2.5px rgba(0, 0, 0, 0.2));		filter: drop-shadow(4px 4px 2.5px rgba(0, 0, 0, 0.2));
	}		}
	/* 메시지 전체 끝 */		/* 메시지 전체 끝 */
27번째 줄:		27번째 줄:
	min-width: 0;		min-width: 0;
	padding: 14px 12px 14px 48px;		padding: 14px 12px 14px 48px;

			background: transparent;
			overflow: visible;
			}

			.pvz-message-tag::before {
			content: "";
			position: absolute;
			z-index: 0;
			inset: 0;

	background: var(--message-color);		background: var(--message-color);
	clip-path: polygon(23% 0, 100% 0, 100% 100%, 23% 100%, 0 50%);		clip-path: polygon(23% 0, 100% 0, 100% 100%, 23% 100%, 0 50%);
	~~overflow~~: ~~hidden~~;		pointer-events: none;
	}		}

74번째 줄:		84번째 줄:
	.pvz-message-image img {		.pvz-message-image img {
	display: block;		display: block;
	~~max-width: 100% !important;~~
	~~max-height: 100% !important;~~
	width: auto !important;		width: auto !important;
	height: auto !important;		height: auto !important;
216번째 줄:		224번째 줄:
	margin: 18px 0;		margin: 18px 0;

	filter: drop-shadow(~~4px~~ 3px 2px rgba(0, 0, 0, 0.17));		filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.17));
	}		}

	.pvz-message-tag {		.pvz-message-tag {
	padding: 14px 8px 14px 34px;		padding: 14px 8px 14px 34px;
			}

			.pvz-message-tag::before {
	clip-path: polygon(25% 0, 100% 0, 100% 100%, 25% 100%, 0 50%);		clip-path: polygon(25% 0, 100% 0, 100% 100%, 25% 100%, 0 50%);
	}		}

2026년 7월 12일 (일) 02:53에 imported>Ljyee님의 편집

2026-07-12T02:53:28Z

← 이전 판		2026년 7월 12일 (일) 11:53 판
19번째 줄:		19번째 줄:

	box-sizing: border-box;		box-sizing: border-box;
	filter: drop-shadow(7px ~~8px~~ 2.5px rgba(0, 0, 0, 0.2));		filter: drop-shadow(7px 4px 2.5px rgba(0, 0, 0, 0.2));
	}		}
	/* 메시지 전체 끝 */		/* 메시지 전체 끝 */
81번째 줄:		81번째 줄:

	object-fit: contain;		object-fit: contain;
	filter: drop-shadow(2px ~~3px 1px~~ rgba(0, 0, 0, 0.24));		filter: drop-shadow(2px 4px 2px rgba(0, 0, 0, 0.28));
	}		}

216번째 줄:		216번째 줄:
	margin: 18px 0;		margin: 18px 0;

	filter: drop-shadow(4px ~~5px~~ 2px rgba(0, 0, 0, 0.17));		filter: drop-shadow(4px 3px 2px rgba(0, 0, 0, 0.17));
	}		}

2026년 7월 12일 (일) 02:46에 imported>Ljyee님의 편집

2026-07-12T02:46:04Z

← 이전 판		2026년 7월 12일 (일) 11:46 판
10번째 줄:		10번째 줄:
	--message-text: #111;		--message-text: #111;

	position: relative ~~!important~~;		position: relative;
	display: grid ~~!important~~;		display: grid;
	grid-template-columns: 150px minmax(0, 1fr);		grid-template-columns: 150px minmax(0, 1fr);

	~~float: none !important;~~
	~~clear: none !important;~~
	~~order: 0 !important;~~
	~~grid-area: auto !important;~~
	~~align-self: auto !important;~~
	~~justify-self: auto !important;~~
	~~inset: auto !important;~~
	~~transform: none !important;~~

	width: 90%;		width: 90%;
	max-width: 720px;		max-width: 720px;
	margin: ~~12px~~ auto;		margin: 18px auto;

	box-sizing: border-box;		box-sizing: border-box;
	~~isolation: isolate;~~		filter: drop-shadow(7px 8px 2.5px rgba(0, 0, 0, 0.2));
	filter: drop-shadow(8px ~~9px 4px~~ rgba(0, 0, 0, 0.22));
	}

	~~#mw-content-text .mw-parser-output > .pvz-message {~~
	~~position: relative !important;~~
	~~float: none !important;~~
	~~clear: none !important;~~
	~~order: 0 !important;~~
	~~grid-area: auto !important;~~
	~~inset: auto !important;~~
	~~transform: none !important~~;
	}		}
	/* 메시지 전체 끝 */		/* 메시지 전체 끝 */
55번째 줄:		35번째 줄:
	.pvz-message-hole {		.pvz-message-hole {
	position: absolute;		position: absolute;
	left: ~~11.5~~%;		left: 13%;
	top: 50%;		top: 50%;

	width: ~~24px~~;		width: 20px;
	height: ~~24px~~;		height: 20px;

			z-index: 0;
	background: var(--message-hole-bg);		background: var(--message-hole-bg);
	border-radius: 50%;		border-radius: 50%;
106번째 줄:		87번째 줄:
	min-width: 0;		min-width: 0;
	margin-left: -1px;		margin-left: -1px;
	padding: ~~14px~~ 12px ~~12px 14px~~;		padding: 12px;

	background: var(--message-card-bg);		background: var(--message-card-bg);
114번째 줄:		95번째 줄:
	.pvz-message-content {		.pvz-message-content {
	min-width: 0;		min-width: 0;
	padding: ~~6px~~ 0 ~~0 7px~~;		padding: 0;

	color: var(--message-text);		color: var(--message-text);
187번째 줄:		168번째 줄:
	@media (min-width: 750px) and (max-width: 900px) {		@media (min-width: 750px) and (max-width: 900px) {
	.pvz-message {		.pvz-message {
	grid-template-columns: ~~150px~~ minmax(0, 1fr);		grid-template-columns: 165px minmax(0, 1fr);
	}		}

217번째 줄:		198번째 줄:

	.pvz-message-card {		.pvz-message-card {
	padding: ~~12px~~ 10px ~~10px 12px~~;		padding: 10px;
	}		}

	.pvz-message-content {		.pvz-message-content {
	padding: ~~5px~~ 0 ~~0 6px~~;		padding: 0;
	font-size: 1em;		font-size: 1em;
	line-height: 1.55;		line-height: 1.55;
233번째 줄:		214번째 줄:
	width: 100%;		width: 100%;
	max-width: none;		max-width: none;
	margin: ~~12px~~ 0;		margin: 18px 0;

	filter: drop-shadow(4px 5px ~~3px~~ rgba(0, 0, 0, 0.18));		filter: drop-shadow(4px 5px 2px rgba(0, 0, 0, 0.17));
	}		}

249번째 줄:		230번째 줄:

	.pvz-message-hole {		.pvz-message-hole {
	left: ~~12.5~~%;		left: 14%;
	width: ~~18px~~;		width: 16px;
	height: ~~18px~~;		height: 16px;
	}		}

	.pvz-message-card {		.pvz-message-card {
	padding: ~~9px~~ 8px ~~8px 9px~~;		padding: 8px;
	border-width: 2px;		border-width: 2px;
	}		}

	.pvz-message-content {		.pvz-message-content {
	padding: ~~4px~~ 0 ~~0 5px~~;		padding: 0;
	font-size: 1em;		font-size: 1em;
	line-height: 1.55;		line-height: 1.55;

imported>Ljyee: Ljyee (토론)의 1059 판 편집을 되돌림

2026-07-11T16:36:45Z

Ljyee (토론)의 1059 판 편집을 되돌림

← 이전 판		2026년 7월 12일 (일) 01:36 판
23번째 줄:		23번째 줄:
	transform: none !important;		transform: none !important;

	width: ~~100~~%;		width: 90%;
	max-width: 720px;		max-width: 720px;
	margin: 12px auto;		margin: 12px auto;
46번째 줄:		46번째 줄:
	position: relative;		position: relative;
	min-width: 0;		min-width: 0;
	padding: 14px 12px 14px ~~12px~~;		padding: 14px 12px 14px 48px;

	background: var(--message-color);		background: var(--message-color);

2026년 7월 11일 (토) 16:36에 imported>Ljyee님의 편집

2026-07-11T16:36:02Z

← 이전 판		2026년 7월 12일 (일) 01:36 판
23번째 줄:		23번째 줄:
	transform: none !important;		transform: none !important;

	width: 90%;		width: 100%;
	max-width: 720px;		max-width: 720px;
	margin: 12px auto;		margin: 12px auto;
46번째 줄:		46번째 줄:
	position: relative;		position: relative;
	min-width: 0;		min-width: 0;
	padding: 14px 12px 14px ~~48px~~;		padding: 14px 12px 14px 12px;

	background: var(--message-color);		background: var(--message-color);

2026년 7월 11일 (토) 14:37에 imported>Ljyee님의 편집

2026-07-11T14:37:51Z

← 이전 판		2026년 7월 11일 (토) 23:37 판
10번째 줄:		10번째 줄:
	--message-text: #111;		--message-text: #111;

	position: relative;		position: relative !important;
	display: grid;		display: grid !important;
	grid-template-columns: 150px minmax(0, 1fr);		grid-template-columns: 150px minmax(0, 1fr);

			float: none !important;
			clear: none !important;
			order: 0 !important;
			grid-area: auto !important;
			align-self: auto !important;
			justify-self: auto !important;
			inset: auto !important;
			transform: none !important;

	width: 90%;		width: 90%;
19번째 줄:		28번째 줄:

	box-sizing: border-box;		box-sizing: border-box;
			isolation: isolate;
	filter: drop-shadow(8px 9px 4px rgba(0, 0, 0, 0.22));		filter: drop-shadow(8px 9px 4px rgba(0, 0, 0, 0.22));
			}

			#mw-content-text .mw-parser-output > .pvz-message {
			position: relative !important;
			float: none !important;
			clear: none !important;
			order: 0 !important;
			grid-area: auto !important;
			inset: auto !important;
			transform: none !important;
	}		}
	/* 메시지 전체 끝 */		/* 메시지 전체 끝 */

2026년 7월 11일 (토) 12:15에 imported>Ljyee님의 편집

2026-07-11T12:15:51Z

← 이전 판		2026년 7월 11일 (토) 21:15 판
16번째 줄:		16번째 줄:
	width: 90%;		width: 90%;
	max-width: 720px;		max-width: 720px;
	margin: ~~14px~~ auto;		margin: 12px auto;

	box-sizing: border-box;		box-sizing: border-box;
213번째 줄:		213번째 줄:
	width: 100%;		width: 100%;
	max-width: none;		max-width: none;
	margin: ~~11px~~ 0;		margin: 12px 0;

	filter: drop-shadow(4px 5px 3px rgba(0, 0, 0, 0.18));		filter: drop-shadow(4px 5px 3px rgba(0, 0, 0, 0.18));

2026년 7월 11일 (토) 12:11에 imported>Ljyee님의 편집

2026-07-11T12:11:57Z

← 이전 판		2026년 7월 11일 (토) 21:11 판
16번째 줄:		16번째 줄:
	width: 90%;		width: 90%;
	max-width: 720px;		max-width: 720px;
	margin: ~~24px~~ auto;		margin: 14px auto;

	box-sizing: border-box;		box-sizing: border-box;
45번째 줄:		45번째 줄:
	transform: translate(-50%, -50%);		transform: translate(-50%, -50%);

	box-shadow: 0 ~~1px 2px~~ rgba(0, 0, 0, 0.12);		box-shadow: inset 0 4px 5px -4px rgba(0, 0, 0, 0.38);
	}		}

213번째 줄:		213번째 줄:
	width: 100%;		width: 100%;
	max-width: none;		max-width: none;
	margin: ~~18px~~ 0;		margin: 11px 0;

	filter: drop-shadow(4px 5px 3px rgba(0, 0, 0, 0.18));		filter: drop-shadow(4px 5px 3px rgba(0, 0, 0, 0.18));

2026년 7월 11일 (토) 12:03에 imported>Ljyee님의 편집

2026-07-11T12:03:39Z

← 이전 판		2026년 7월 11일 (토) 21:03 판
167번째 줄:		167번째 줄:
	@media (min-width: 750px) and (max-width: 900px) {		@media (min-width: 750px) and (max-width: 900px) {
	.pvz-message {		.pvz-message {
	grid-template-columns: ~~100px~~ minmax(0, 1fr);		grid-template-columns: 150px minmax(0, 1fr);
	}		}

2026년 7월 11일 (토) 11:54에 imported>Ljyee님의 편집

2026-07-11T11:54:16Z

← 이전 판		2026년 7월 11일 (토) 20:54 판
15번째 줄:		15번째 줄:

	width: 90%;		width: 90%;
	max-width: ~~750px~~;		max-width: 720px;
	margin: 24px auto;		margin: 24px auto;

97번째 줄:		97번째 줄:

	color: var(--message-text);		color: var(--message-text);
	font-size: ~~inherit~~;		font-size: 1em;
	line-height: 1.58;		line-height: 1.58;
	text-align: left;		text-align: left;
108번째 줄:		108번째 줄:
	color: var(--message-text);		color: var(--message-text);
	font-size: inherit;		font-size: inherit;
	line-height: 1;		line-height: 1.55;
	text-align: left;		text-align: left;
	}		}
163번째 줄:		163번째 줄:
	}		}
	/* 다크모드 대응 끝 */		/* 다크모드 대응 끝 */

			/* 아이폰 가로 화면 부근 대응 시작 */
			@media (min-width: 750px) and (max-width: 900px) {
			.pvz-message {
			grid-template-columns: 100px minmax(0, 1fr);
			}

			.pvz-message-tag {
			padding: 12px 8px 12px 30px;
			}

			.pvz-message-hole {
			width: 20px;
			height: 20px;
			}
			}
			/* 아이폰 가로 화면 부근 대응 끝 */

	/* 반응형 대응 시작 */		/* 반응형 대응 시작 */
	@media (max-width: ~~760px~~) {		@media (max-width: 749px) {
	.pvz-message {		.pvz-message {
	grid-template-columns: ~~36%~~ minmax(0, 1fr);		grid-template-columns: 112px minmax(0, 1fr);

			width: 100%;
			max-width: none;
			margin-left: 0;
			margin-right: 0;
	}		}

	.pvz-message-tag {		.pvz-message-tag {
	padding: ~~18px~~ 16px ~~18px 50px~~;		padding: 16px 10px 16px 38px;
	}		}

	.pvz-message-card {		.pvz-message-card {
	padding: 12px 10px 10px 12px;		padding: 12px 10px 10px 12px;
	}

	~~.pvz-message-heading {~~
	~~font-size: inherit;~~
	}		}

	.pvz-message-content {		.pvz-message-content {
	padding: 5px 0 0 6px;		padding: 5px 0 0 6px;
	font-size: ~~inherit~~;		font-size: 1em;
	line-height: 1.55;		line-height: 1.55;
	}		}
193번째 줄:		211번째 줄:
	grid-template-columns: 112px minmax(0, 1fr);		grid-template-columns: 112px minmax(0, 1fr);

	width: 90%;		width: 100%;
	max-width: ~~750px~~;		max-width: none;
	margin: 18px ~~auto~~;		margin: 18px 0;

	filter: drop-shadow(4px 5px 3px rgba(0, 0, 0, 0.18));		filter: drop-shadow(4px 5px 3px rgba(0, 0, 0, 0.18));
223번째 줄:		241번째 줄:
	.pvz-message-content {		.pvz-message-content {
	padding: 4px 0 0 5px;		padding: 4px 0 0 5px;
	font-size: ~~inherit~~;		font-size: 1em;
	line-height: 1.55;		line-height: 1.55;
	}		}