Template:Codex/PatchHistory/styles.css: 두 판 사이의 차이

/* ============================================================
   틀:Codex/PatchHistory/styles.css (TemplateStyles)
   - 콘텐츠 모델은 반드시 'sanitized-css' 여야 합니다.
   [상호작용]
   - 적용 대상: 틀:Codex/PatchHistory 이 출력하는 .codex-patch 구조
   - 배지 색: PatchInfo/Tag 가 출력하는 .pi-tag/.pi-* 클래스를 여기서도
             착색합니다. (PatchInfo/styles.css 는 .patchinfo 안에서만
             로딩되므로, 코덱스 문서에서 쓰려면 색 규칙이 별도로 필요)
   [반응형]
   - 640px 이상에서만 우측 인포박스 영역(약 440px)을 비워둠.
     좁은 화면에선 인포박스가 본문 위로 가므로 제한을 풀어 전체 폭 사용.
   ============================================================ */
.codex-patch {
	/* 배지 고유색 토큰 (PatchInfo/styles.css 와 동일 값 유지) */
	--pi-buff: #2f6fdb;
	--pi-nerf: #d24545;
	--pi-adjust: #c5921b;
	--pi-new: #7c4dd6;
	--pi-del: #4b5563;
	--pi-update: #0e8a8a;
	margin: 8px 0;
	padding: 10px 14px;
	border: 1px solid var(--border-color-base, #e1e5ea);
	border-left: 3px solid var(--color-progressive, #3a7bd5);
	border-radius: 8px;
	background: var(--color-surface-2, #fafbfc);
}
.codex-patch__ver {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	font-size: 1.02em;
}
.codex-patch__tags { display: inline-flex; gap: 4px; }
.codex-patch__body { margin-top: 6px; }
.codex-patch__body ul { margin: 2px 0; padding-left: 0; list-style: none; }
.codex-patch__body li { margin: 3px 0; }

/* 1단계(li) 직계 볼드 = 소제목에만 위 여백 (2단계 강조 볼드는 제외) */
.codex-patch__body > ul > li > b,
.codex-patch__body > ul > li > strong {
	display: inline-block;
	margin-top: 6px;
}

/* 2단계 항목: 스킬에 종속된 세부 변경 (PatchInfo 본문과 동일 처리) */
.codex-patch__body li li {
	margin-left: 1.1em;
	font-weight: normal;
}
.codex-patch__body li li::before {
	content: "– ";
	color: var(--color-subtle, #9aa3af);
}

/* --- 배지 (PatchInfo/Tag 재사용분 착색) --- */
.codex-patch .pi-tag {
	display: inline-block;
	min-width: 3em;
	padding: 1px 8px;
	font-size: 0.78em;
	font-weight: 700;
	text-align: center;
	color: #fff;
	border-radius: 5px;
	vertical-align: middle;
}
.codex-patch .pi-up   { background: var(--pi-buff); }
.codex-patch .pi-down { background: var(--pi-nerf); }
.codex-patch .pi-mid  { background: var(--pi-adjust); }
.codex-patch .pi-new  { background: var(--pi-new); }
.codex-patch .pi-del  { background: var(--pi-del); }
.codex-patch .pi-update { background: var(--pi-update); }

/* 인포박스가 우측에 뜨는 640px 이상에서만 그 영역을 비워둠
   (인포박스는 639px 이하에서 본문 위로 내려감) */
@media (min-width: 640px) {
	.codex-patch { max-width: calc(100% - 440px); }
}

/* 다크 모드 보정 */
html.skin-theme-clientpref-night .codex-patch {
	--pi-buff: #4a86e8;
	--pi-nerf: #e06a6a;
	--pi-adjust: #d6a93c;
	--pi-new: #9b72e0;
	--pi-del: #6b7280;
	--pi-update: #2bb3b3;
}
@media (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .codex-patch {
		--pi-buff: #4a86e8;
		--pi-nerf: #e06a6a;
		--pi-adjust: #d6a93c;
		--pi-new: #9b72e0;
		--pi-del: #6b7280;
		--pi-update: #2bb3b3;
	}
}