미디어위키:Common.css
참고: 설정을 저장한 후에 바뀐 점을 확인하기 위해서는 브라우저의 캐시를 새로 고쳐야 합니다.
- 파이어폭스 / 사파리: Shift 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5 또는 Ctrl-R을 입력 (Mac에서는 ⌘-R)
- 구글 크롬: Ctrl-Shift-R키를 입력 (Mac에서는 ⌘-Shift-R)
- 엣지: Ctrl 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5를 입력.
/* 이 CSS 설정은 모든 스킨에 적용됩니다 */
/* ===============================
문서 제목 자동 번호 매기기
(Vector 2022)
=============================== */
/* 카운터 초기화 */
.mw-parser-output {
counter-reset: h2;
}
/* == Heading == */
.mw-parser-output h2 {
counter-reset: h3;
}
.mw-parser-output h2::before {
counter-increment: h2;
content: counter(h2) ". ";
margin-right: 4px;
color: #000;
font-weight: 600;
}
/* === Heading === */
.mw-parser-output h3::before {
counter-increment: h3;
content: counter(h2) "." counter(h3) " ";
margin-right: 4px;
color: #000;
font-weight: 500;
}
/* === Heading (h3) 하단 구분선 추가 === */
.mw-parser-output h3 {
border-bottom: 1px solid #e1e8ed;
padding-bottom: 6px;
margin-bottom: 16px;
}
/* ==== Heading ==== (선택) */
.mw-parser-output h4::before {
counter-increment: h4;
content: counter(h2) "." counter(h3) "." counter(h4) " ";
margin-right: 4px;
color: #555;
}
/* 편집 링크가 없을 때(편집 모드 등) 제목이 벌어지지 않게 */
.mw-parser-output h2:not(:has(.mw-editsection)),
.mw-parser-output h3:not(:has(.mw-editsection)) {
justify-content: flex-start;
}
/* ===============================
Heading 제목 ↔ 편집 링크 양끝 정렬
(h2, h3 공통)
=============================== */
.mw-parser-output h2,
.mw-parser-output h3 {
display: flex;
align-items: center;
justify-content: space-between;
}
/* 제목 텍스트는 왼쪽 고정 */
.mw-parser-output .mw-headline {
flex: 1 1 auto;
}
/* [편집 | 원본 편집]은 오른쪽 */
.mw-parser-output .mw-editsection {
flex: 0 0 auto;
font-size: 12px;
white-space: nowrap;
}
/* ===============================
TOC(목차)에도 제목 번호 표시
Vector 2022(.vector-toc) + 구 TOC(#toc) 모두 지원
=============================== */
/* ---- Vector 2022 TOC ---- */
.vector-toc {
counter-reset: toc1;
}
.vector-toc .vector-toc-level-1 {
counter-reset: toc2;
}
.vector-toc .vector-toc-level-2 {
counter-reset: toc3;
}
/* 1단계 */
.vector-toc .vector-toc-level-1 > a .vector-toc-text::before {
counter-increment: toc1;
content: counter(toc1) ". ";
margin-right: 2px;
}
/* 2단계 */
.vector-toc .vector-toc-level-2 > a .vector-toc-text::before {
counter-increment: toc2;
content: counter(toc1) "." counter(toc2) " ";
margin-right: 2px;
}
/* 3단계(필요 시) */
.vector-toc .vector-toc-level-3 > a .vector-toc-text::before {
counter-increment: toc3;
content: counter(toc1) "." counter(toc2) "." counter(toc3) " ";
margin-right: 2px;
}
/* ---- 구형 TOC(#toc) ---- */
#toc,
.toc {
counter-reset: toc1;
}
#toc .toclevel-1,
.toc .toclevel-1 {
counter-reset: toc2;
}
#toc .toclevel-2,
.toc .toclevel-2 {
counter-reset: toc3;
}
/* 1단계 */
#toc .toclevel-1 > a .toctext::before,
.toc .toclevel-1 > a .toctext::before {
counter-increment: toc1;
content: counter(toc1) ". ";
margin-right: 2px;
}
/* 2단계 */
#toc .toclevel-2 > a .toctext::before,
.toc .toclevel-2 > a .toctext::before {
counter-increment: toc2;
content: counter(toc1) "." counter(toc2) " ";
margin-right: 2px;
}
/* 3단계(필요 시) */
#toc .toclevel-3 > a .toctext::before,
.toc .toclevel-3 > a .toctext::before {
counter-increment: toc3;
content: counter(toc1) "." counter(toc2) "." counter(toc3) " ";
margin-right: 2px;
}
/* (선택) 구 TOC의 기본 숫자 숨김 - 중복 방지 */
#toc .tocnumber,
.toc .tocnumber {
display: none;
}