Template:PatchInfo/styles.css: 두 판 사이의 차이
틀 문서
더 많은 작업
내용 삭제됨 내용 추가됨
새 문서: →기본 패치 박스 구조: .patch-box { background-color: #f8f9fa; border-left: 4px solid #ced4da; border-radius: 0 4px 4px 0; margin-bottom: 12px; padding: 12px 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); } →상향/하향/조정에 따른 좌측 테두리 색상: .patch-buff { border-left-color: #3b82f6; } →파란색 (상향): .patch-nerf { border-left-color: #ef4444; } →빨간색 (하향): .patch-adj { border-left-color: #84cc16;... |
편집 요약 없음 |
||
| 1번째 줄: | 1번째 줄: | ||
/* ============================================================ |
|||
/* 기본 패치 박스 구조 */ |
|||
틀:PatchInfo 전용 스타일 (TemplateStyles) |
|||
.patch-box { |
|||
- 이 파일은 <templatestyles src="..."> 로만 로드됩니다. |
|||
background-color: #f8f9fa; |
|||
- 콘텐츠 모델은 반드시 'sanitized-css' 여야 합니다. |
|||
border-left: 4px solid #ced4da; |
|||
- 클래스명은 BEM 규칙: 블록=patchinfo, 요소=__, 변형=-- |
|||
border-radius: 0 4px 4px 0; |
|||
============================================================ */ |
|||
margin-bottom: 12px; |
|||
padding: 12px 16px; |
|||
box-shadow: 0 1px 3px rgba(0,0,0,0.05); |
|||
} |
|||
.patchinfo { |
|||
/* 상향/하향/조정에 따른 좌측 테두리 색상 */ |
|||
/* --- 색상 토큰: 색을 바꾸려면 여기만 수정하세요 --- */ |
|||
.patch-buff { border-left-color: #3b82f6; } /* 파란색 (상향) */ |
|||
--pi-buff: #1f9d57; /* 상향 배지 */ |
|||
--pi-nerf: #d24545; /* 하향 배지 */ |
|||
--pi-adjust: #c5921b; /* 조정 배지 */ |
|||
--pi-system: #3b6fb5; /* 체계 카테고리 */ |
|||
--pi-hero: #7d5bbe; /* 히어로 카테고리 */ |
|||
--pi-codex: #169b8a; /* 코덱스 카테고리 */ |
|||
--pi-other: #6b7280; /* 이외 카테고리 */ |
|||
/* --- 카드 외형 --- */ |
|||
/* 헤더 영역 (분류, 대상, 구분 나란히 배치) */ |
|||
max-width: 880px; |
|||
.patch-header { |
|||
margin: 1em 0; |
|||
display: flex; |
|||
border: 1px solid #e1e5ea; |
|||
align-items: center; |
|||
border-radius: 12px; |
|||
gap: 8px; |
|||
background: #ffffff; |
|||
margin-bottom: 8px; |
|||
overflow: hidden; /* 둥근 모서리 밖으로 배경이 새지 않도록 */ |
|||
border-bottom: 1px solid #e5e7eb; |
|||
font-size: 0.95em; |
|||
padding-bottom: 6px; |
|||
line-height: 1.65; |
|||
color: #1f2430; |
|||
} |
} |
||
/* --- 헤더: 버전명 + 날짜 --- */ |
|||
/* 텍스트 및 뱃지 스타일 */ |
|||
.patchinfo__head { |
|||
.patch-title { |
|||
display: flex; |
|||
font-size: 1.1em; |
|||
align-items: baseline; |
|||
font-weight: bold; |
|||
gap: 0.6em; |
|||
color: #111827; |
|||
padding: 14px 18px; |
|||
background: linear-gradient(180deg, #f7f9fc, #eef2f7); |
|||
border-bottom: 1px solid #e1e5ea; |
|||
} |
} |
||
.patchinfo__ver { font-size: 1.25em; font-weight: 700; letter-spacing: -0.01em; } |
|||
.patchinfo__date { font-size: 0.85em; color: #6b7280; } |
|||
/* --- 인트로: 패치 요약 문단 --- */ |
|||
.patch-badge { |
|||
.patchinfo__intro { |
|||
font-size: 0.85em; |
|||
padding: 12px 18px; |
|||
font-weight: bold; |
|||
color: #3a4150; |
|||
padding: 2px 8px; |
|||
border-bottom: 1px solid #f0f2f5; |
|||
color: white; |
|||
} |
} |
||
/* --- 카테고리 섹션 공통 --- */ |
|||
/* 구분(상/하/조정) 뱃지 색상 */ |
|||
.patchinfo__sec { |
|||
.patch-type-상향 { background-color: #3b82f6; } /* 파란색 */ |
|||
padding: 8px 18px 14px; |
|||
.patch-type-하향 { background-color: #ef4444; } /* 빨간색 */ |
|||
border-bottom: 1px solid #f0f2f5; |
|||
.patch-type-조정 { background-color: #84cc16; } /* 연녹색 */ |
|||
border-left: 3px solid transparent; /* 변형 클래스에서 색 지정 */ |
|||
.patch-type- { display: none; } /* 값 없을 때 숨김 */ |
|||
} |
|||
.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-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-body ul { margin: 4px 0; padding-left: 0; list-style: none; } |
|||
.patch-cat-체계 { background-color: #6366f1; } |
|||
.patchinfo__sec-body li { margin: 4px 0; padding-left: 2px; } |
|||
.patch-cat-히어로 { background-color: #10b981; } |
|||
.patchinfo__sec-body b, |
|||
.patch-cat-코덱스 { background-color: #8b5cf6; } |
|||
.patchinfo__sec-body strong { display: inline-block; margin-top: 6px; } /* 항목명 위 여백 */ |
|||
.patch-cat-이외 { background-color: #6b7280; } |
|||
/* --- 변경 유형 배지 (상향/하향/조정) --- */ |
|||
/* 본문 영역 */ |
|||
. |
.pi-tag { |
||
display: inline-block; |
|||
font-size: 0.95em; |
|||
min-width: 3em; /* 글자 수 달라도 폭 일정하게 */ |
|||
color: #374151; |
|||
margin-right: 6px; |
|||
line-height: 1.5; |
|||
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); } /* 조정 */ |
|||
2026년 6월 3일 (수) 01:40 판
/* ============================================================
틀:PatchInfo 전용 스타일 (TemplateStyles)
- 이 파일은 <templatestyles src="..."> 로만 로드됩니다.
- 콘텐츠 모델은 반드시 'sanitized-css' 여야 합니다.
- 클래스명은 BEM 규칙: 블록=patchinfo, 요소=__, 변형=--
============================================================ */
.patchinfo {
/* --- 색상 토큰: 색을 바꾸려면 여기만 수정하세요 --- */
--pi-buff: #1f9d57; /* 상향 배지 */
--pi-nerf: #d24545; /* 하향 배지 */
--pi-adjust: #c5921b; /* 조정 배지 */
--pi-system: #3b6fb5; /* 체계 카테고리 */
--pi-hero: #7d5bbe; /* 히어로 카테고리 */
--pi-codex: #169b8a; /* 코덱스 카테고리 */
--pi-other: #6b7280; /* 이외 카테고리 */
/* --- 카드 외형 --- */
max-width: 880px;
margin: 1em 0;
border: 1px solid #e1e5ea;
border-radius: 12px;
background: #ffffff;
overflow: hidden; /* 둥근 모서리 밖으로 배경이 새지 않도록 */
font-size: 0.95em;
line-height: 1.65;
color: #1f2430;
}
/* --- 헤더: 버전명 + 날짜 --- */
.patchinfo__head {
display: flex;
align-items: baseline;
gap: 0.6em;
padding: 14px 18px;
background: linear-gradient(180deg, #f7f9fc, #eef2f7);
border-bottom: 1px solid #e1e5ea;
}
.patchinfo__ver { font-size: 1.25em; font-weight: 700; letter-spacing: -0.01em; }
.patchinfo__date { font-size: 0.85em; color: #6b7280; }
/* --- 인트로: 패치 요약 문단 --- */
.patchinfo__intro {
padding: 12px 18px;
color: #3a4150;
border-bottom: 1px solid #f0f2f5;
}
/* --- 카테고리 섹션 공통 --- */
.patchinfo__sec {
padding: 8px 18px 14px;
border-bottom: 1px solid #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-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-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; } /* 항목명 위 여백 */
/* --- 변경 유형 배지 (상향/하향/조정) --- */
.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); } /* 조정 */