Template:PatchInfo/styles.css
틀 문서
더 많은 작업
/* ============================================================
틀:PatchInfo 전용 스타일 (TemplateStyles)
- 이 파일은 <templatestyles src="..."> 로만 로드됩니다.
- 콘텐츠 모델은 반드시 'sanitized-css' 여야 합니다.
- 클래스명은 BEM 규칙: 블록=patchinfo, 요소=__, 변형=--
- 배경·텍스트·테두리는 MediaWiki 표준 토큰(var(--color-*))을
참조하므로 다크 모드에서 자동으로 대응됩니다. 두 번째 인자는
토큰 미지원 환경을 위한 라이트 모드 폴백값입니다.
============================================================ */
.patchinfo {
/* --- 카테고리·배지 고유색: 색을 바꾸려면 여기만 수정하세요 --- */
--pi-buff: #2f6fdb; /* 상향 배지 */
--pi-nerf: #d24545; /* 하향 배지 */
--pi-adjust: #c5921b; /* 조정 배지 */
--pi-system: #1f9d57; /* 체계 카테고리 */
--pi-hero: #7d5bbe; /* 히어로 카테고리 */
--pi-codex: #169b8a; /* 코덱스 카테고리 */
--pi-other: #6b7280; /* 기타 카테고리 */
--pi-bugfix: #4a7a85; /* 버그 수정 카테고리 */
--pi-new: #7c4dd6; /* 신규 배지 (보라색) */
--pi-del: #4b5563; /* 제거 배지 (회색) */
/* --- 카드 외형 --- */
max-width: 880px;
margin: 1em 0;
border: 1px solid var(--border-color-base, #e1e5ea);
border-radius: 12px;
background: var(--color-surface-1, #ffffff);
overflow: hidden; /* 둥근 모서리 밖으로 배경이 새지 않도록 */
font-size: 0.95em;
line-height: 1.65;
color: var(--color-base, #1f2430);
}
/* --- 카테고리 섹션 공통 --- */
.patchinfo__sec {
padding: 8px 18px 14px;
border-bottom: 1px solid var(--border-color-subtle, #f0f2f5);
border-left: 3px solid transparent; /* 변형 클래스에서 색 지정 */
}
.patchinfo__sec:last-child { border-bottom: none; }
/* 카테고리별 좌측 강조선: 새 카테고리 추가 시 여기에 한 줄 추가 */
.patchinfo__sec--system { border-left-color: var(--pi-system); }
.patchinfo__sec--hero { border-left-color: var(--pi-hero); }
.patchinfo__sec--codex { border-left-color: var(--pi-codex); }
.patchinfo__sec--other { border-left-color: var(--pi-other); }
.patchinfo__sec--bugfix { border-left-color: var(--pi-bugfix); }
/* --- 카테고리 제목 (알약형 라벨) --- */
.patchinfo__sec-title {
display: inline-block;
margin: 10px 0 8px;
padding: 2px 12px;
font-weight: 700;
font-size: 0.9em;
color: #fff;
border-radius: 999px; /* 완전한 알약 형태 */
}
/* 카테고리별 제목 배경: 위 border-left와 짝을 이룸 */
.patchinfo__sec--system .patchinfo__sec-title { background: var(--pi-system); }
.patchinfo__sec--hero .patchinfo__sec-title { background: var(--pi-hero); }
.patchinfo__sec--codex .patchinfo__sec-title { background: var(--pi-codex); }
.patchinfo__sec--other .patchinfo__sec-title { background: var(--pi-other); }
.patchinfo__sec--bugfix .patchinfo__sec-title { background: var(--pi-bugfix); }
/* --- 섹션 본문: 불릿 제거, 히어로/항목명 강조 --- */
.patchinfo__sec-body ul { margin: 4px 0; padding-left: 0; list-style: none; }
.patchinfo__sec-body li { margin: 4px 0; padding-left: 2px; }
.patchinfo__sec-body b,
.patchinfo__sec-body strong { display: inline-block; margin-top: 6px; } /* 항목명 위 여백 */
/* --- 2단계 항목: 스킬에 종속된 세부 변경 --- */
.patchinfo__sec-body li li {
margin-left: 1.1em; /* 한 단계 안쪽으로 들여쓰기 */
font-weight: normal; /* 세부 변경은 강조하지 않음 */
}
.patchinfo__sec-body li li::before {
content: "– "; /* 종속 관계를 나타내는 짧은 대시 */
color: var(--color-subtle, #9aa3af);
}
/* --- 항목 카드 (PatchInfo/Item): 섹션 안의 개별 대상 --- */
.patchinfo__item {
margin: 8px 0;
padding: 10px 12px;
background: var(--color-surface-2, #fafbfc);
border: 1px solid var(--border-color-subtle, #eceff3);
border-radius: 8px;
}
.patchinfo__item:first-child { margin-top: 4px; }
/* 카드 머리: 아이콘 + 이름 + 배지 한 줄 정렬 */
.patchinfo__item-head {
display: flex;
align-items: center;
gap: 6px;
}
.patchinfo__item-img {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
background: var(--color-surface-3, #e4e8ee); /* 중간 톤: 흰·어두운 아이콘 모두 대비 확보 */
border: 1px solid var(--border-color-base, #c4ccd6); /* 배경과 무관하게 아이콘 영역 경계 */
border-radius: 6px;
flex-shrink: 0; /* 이름이 길어도 아이콘이 찌그러지지 않도록 */
}
.patchinfo__item-name { font-weight: 700; font-size: 1.05em; }
.patchinfo__item-tags { display: inline-flex; gap: 4px; margin-left: 2px; }
/* 카드 본문: 머리와 살짝 간격, 세부 변경 목록 */
.patchinfo__item-body { margin-top: 6px; }
.patchinfo__item-body ul { margin: 2px 0; padding-left: 0; list-style: none; }
.patchinfo__item-body li { margin: 3px 0; }
.patchinfo__item-body li li {
margin-left: 1.1em;
font-weight: normal;
}
.patchinfo__item-body li li::before {
content: "– ";
color: var(--color-subtle, #9aa3af);
}
/* --- 개발자 코멘트: 변경 사실과 구분되는 강조 영역 --- */
.patchinfo__item-note {
margin-top: 8px;
padding: 8px 11px;
background: var(--color-surface-3, #eef2fb); /* 카드보다 진한 톤으로 또렷하게 */
border: 1px solid var(--border-color-base, #d4ddf0);
border-left: 4px solid var(--color-progressive, #5b7fc4); /* 좌측 강조선 */
border-radius: 6px;
font-size: 0.92em;
color: var(--color-base, #41506b);
line-height: 1.55;
}
.patchinfo__item-note::before {
content: "조정 목표"; /* 영역 제목 자동 표기 */
display: block;
margin-bottom: 3px;
font-size: 0.82em;
font-weight: 700;
color: var(--color-progressive, #5b7fc4);
letter-spacing: 0.02em;
}
/* --- 변경 유형 배지 공통 --- */
.pi-tag {
display: inline-block;
min-width: 3em; /* 글자 수 달라도 폭 일정하게 */
margin-right: 6px;
padding: 1px 8px;
font-size: 0.78em;
font-weight: 700;
text-align: center;
color: #fff;
border-radius: 5px;
vertical-align: middle;
}
.pi-up { background: var(--pi-buff); } /* 상향 */
.pi-down { background: var(--pi-nerf); } /* 하향 */
.pi-mid { background: var(--pi-adjust); } /* 조정 */
.pi-new { background: var(--pi-new); } /* 신규 */
.pi-del { background: var(--pi-del); } /* 제거 */
/* ============================================================
다크 모드 보정
- 배경·텍스트·테두리는 위에서 표준 토큰을 쓰므로 자동 대응됩니다.
- 카테고리·배지 고유색만, 어두운 배경에서 너무 쨍하지 않도록
채도를 살짝 낮춘 값으로 재정의합니다.
- Vector 2022(클래스 기반)와 OS 설정(미디어 쿼리) 양쪽 대응.
============================================================ */
html.skin-theme-clientpref-night .patchinfo {
--pi-buff: #4a86e8;
--pi-nerf: #e06a6a;
--pi-adjust: #d6a93c;
--pi-system: #3bb878;
--pi-hero: #9c7ed6;
--pi-codex: #2bb3a0;
--pi-other: #8b929e;
--pi-bugfix: #6a99a4;
--pi-new: #9b72e0;
--pi-del: #6b7280;
}
@media (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os .patchinfo {
--pi-buff: #4a86e8;
--pi-nerf: #e06a6a;
--pi-adjust: #d6a93c;
--pi-system: #3bb878;
--pi-hero: #9c7ed6;
--pi-codex: #2bb3a0;
--pi-other: #8b929e;
--pi-bugfix: #6a99a4;
--pi-new: #9b72e0;
--pi-del: #6b7280;
}
}