미디어위키:Common.css: 두 판 사이의 차이

기술노트
편집 요약 없음
편집 요약 없음
7번째 줄: 7번째 줄:
html, body, #content, #mw-content-text, .mw-body, .mw-parser-output {
html, body, #content, #mw-content-text, .mw-body, .mw-parser-output {
   font-family:
   font-family:
     "Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",
     "Malgun Gothic", "맑은 고딕", "Noto Sans KR", "Apple SD Gothic Neo",
     Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",
     Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
     sans-serif !important;
     sans-serif !important;
   font-size: 16px;
   font-size: 16px;
   line-height: 1.65;
   line-height: 1.65;
   color: #202122;
   color: #202122;
   letter-spacing: -0.2px;       /* 자간: 나무위키 느낌 */
   letter-spacing: -0.2px;     /* 자간: 나무위키 느낌 */
   word-break: keep-all;         /* 한글 줄바꿈 개선 */
   word-break: keep-all;         /* 한글 줄바꿈 개선 */
   -webkit-font-smoothing: antialiased;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   -moz-osx-font-smoothing: grayscale;
21번째 줄: 21번째 줄:
/* 페이지 제목(H1) */
/* 페이지 제목(H1) */
#firstHeading, .mw-body h1.firstHeading {
#firstHeading, .mw-body h1.firstHeading {
   font-size: 1.875rem;           /* ≈ 30px */
   font-size: 1.875rem;         /* ≈ 30px */
   font-weight: 700;
   font-weight: 700;
   color: #1f2328;
   color: #1f2328;
30번째 줄: 30번째 줄:
/* 섹션 제목(H2/H3) */
/* 섹션 제목(H2/H3) */
.mw-body h2 {
.mw-body h2 {
   font-size: 1.375rem;           /* ≈ 22~24px */
   font-size: 1.375rem;         /* ≈ 22~24px */
   font-weight: 700;
   font-weight: 700;
   color: #1f2328;
   color: #1f2328;
41번째 줄: 41번째 줄:


.mw-body h3 {
.mw-body h3 {
   font-size: 1.125rem;           /* ≈ 18~20px */
   font-size: 1.125rem;         /* ≈ 18~20px */
   font-weight: 700;
   font-weight: 700;
   color: #1f2328;
   color: #1f2328;
102번째 줄: 102번째 줄:
pre, code, kbd, samp, tt {
pre, code, kbd, samp, tt {
   font-family: ui-monospace, SFMono-Regular, Menlo, Consolas,
   font-family: ui-monospace, SFMono-Regular, Menlo, Consolas,
              "Liberation Mono", "Noto Sans Mono", monospace !important;
                "Liberation Mono", "Noto Sans Mono", monospace !important;
   font-size: .95em;
   font-size: .95em;
}
}
121번째 줄: 121번째 줄:
/* 본문 전체: 코드/모노스페이스 제외하고 자간 적용 */
/* 본문 전체: 코드/모노스페이스 제외하고 자간 적용 */
.mw-parser-output :not(pre):not(code):not(kbd):not(samp):not(tt) {
.mw-parser-output :not(pre):not(code):not(kbd):not(samp):not(tt) {
   letter-spacing: -0.25px !important;   /* 필요시 -0.20 ~ -0.30px로 조절 */
   letter-spacing: -0.25px !important;   /* 필요시 -0.20 ~ -0.30px로 조절 */
}
}


154번째 줄: 154번째 줄:
#left-navigation,
#left-navigation,
#right-navigation {
#right-navigation {
     font-family: "Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",
     font-family: "Malgun Gothic", "맑은 고딕", "Noto Sans KR", "Apple SD Gothic Neo",
                Helvetica,Arial,sans-serif !important;
                  Helvetica, Arial, sans-serif !important;
     letter-spacing: -0.2px !important;
     letter-spacing: -0.2px !important;
}
}


/* 입력 필드 및 버튼 */
/* 입력 필드 및 버튼 */
input,  
input,
textarea,  
textarea,
select,  
select,
button,
button,
.oo-ui-inputWidget input,
.oo-ui-inputWidget input,
.oo-ui-buttonElement-button {
.oo-ui-buttonElement-button {
     font-family: "Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",
     font-family: "Malgun Gothic", "맑은 고딕", "Noto Sans KR", "Apple SD Gothic Neo",
                Helvetica,Arial,sans-serif !important;
                  Helvetica, Arial, sans-serif !important;
     letter-spacing: -0.2px !important;
     letter-spacing: -0.2px !important;
}
}
175번째 줄: 175번째 줄:
.vector-search-box-input,
.vector-search-box-input,
.oo-ui-textInputWidget {
.oo-ui-textInputWidget {
     font-family: "Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",
     font-family: "Malgun Gothic", "맑은 고딕", "Noto Sans KR", "Apple SD Gothic Neo",
                Helvetica,Arial,sans-serif !important;
                  Helvetica, Arial, sans-serif !important;
}
}


183번째 줄: 183번째 줄:
.vector-menu-tabs li,
.vector-menu-tabs li,
.vector-menu-tabs a {
.vector-menu-tabs a {
     font-family: "Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",
     font-family: "Malgun Gothic", "맑은 고딕", "Noto Sans KR", "Apple SD Gothic Neo",
                Helvetica,Arial,sans-serif !important;
                  Helvetica, Arial, sans-serif !important;
     letter-spacing: -0.2px !important;
     letter-spacing: -0.2px !important;
}
}
191번째 줄: 191번째 줄:
.vector-menu-dropdown,
.vector-menu-dropdown,
.vector-menu-dropdown-content {
.vector-menu-dropdown-content {
     font-family: "Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",
     font-family: "Malgun Gothic", "맑은 고딕", "Noto Sans KR", "Apple SD Gothic Neo",
                Helvetica,Arial,sans-serif !important;
                  Helvetica, Arial, sans-serif !important;
}
}


198번째 줄: 198번째 줄:
#footer,
#footer,
#footer * {
#footer * {
     font-family: "Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",
     font-family: "Malgun Gothic", "맑은 고딕", "Noto Sans KR", "Apple SD Gothic Neo",
                Helvetica,Arial,sans-serif !important;
                  Helvetica, Arial, sans-serif !important;
     letter-spacing: -0.2px !important;
     letter-spacing: -0.2px !important;
}
}
208번째 줄: 208번째 줄:
.errorbox,
.errorbox,
.successbox {
.successbox {
     font-family: "Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",
     font-family: "Malgun Gothic", "맑은 고딕", "Noto Sans KR", "Apple SD Gothic Neo",
                Helvetica,Arial,sans-serif !important;
                  Helvetica, Arial, sans-serif !important;
}
}

2025년 9월 11일 (목) 13:45 판

/* =========================================================
   MediaWiki:Common.css  (NamuWiki-like 스타일, 호환 버전)
   - CSS 변수(:root, --token) 미사용
   ========================================================= */

/* 기본 폰트 & 가독성 */
html, body, #content, #mw-content-text, .mw-body, .mw-parser-output {
  font-family:
    "Malgun Gothic", "맑은 고딕", "Noto Sans KR", "Apple SD Gothic Neo",
    Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
    sans-serif !important;
  font-size: 16px;
  line-height: 1.65;
  color: #202122;
  letter-spacing: -0.2px;      /* 자간: 나무위키 느낌 */
  word-break: keep-all;         /* 한글 줄바꿈 개선 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 페이지 제목(H1) */
#firstHeading, .mw-body h1.firstHeading {
  font-size: 1.875rem;          /* ≈ 30px */
  font-weight: 700;
  color: #1f2328;
  letter-spacing: -0.1px;
  margin: 0 0 .6rem 0;
}

/* 섹션 제목(H2/H3) */
.mw-body h2 {
  font-size: 1.375rem;          /* ≈ 22~24px */
  font-weight: 700;
  color: #1f2328;
  letter-spacing: -0.1px;
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: .35rem;
  margin-top: 1.4rem;
}
.mw-body h2 .mw-headline { font-weight: 700; }

.mw-body h3 {
  font-size: 1.125rem;          /* ≈ 18~20px */
  font-weight: 700;
  color: #1f2328;
  letter-spacing: -0.1px;
  margin-top: 1.1rem;
}

/* 본문 여백 */
.mw-body-content p { margin: .6rem 0 .7rem; }
b, strong { font-weight: 700; letter-spacing: -0.1px; }
i, em { font-style: italic; }

/* 리스트 간격 */
.mw-body ul, .mw-body ol { margin: .4rem 0 .7rem 1.3rem; }

/* 링크 색상 */
.mw-body a {
  color: #1a73e8;
  text-decoration: none;
}
.mw-body a:hover, .mw-body a:focus { text-decoration: underline; }

/* [편집] 링크 톤다운 */
.mw-editsection, .mw-editsection a {
  color: #6b7280;
  font-size: .875rem;
}

/* 목차(TOC) */
#toc, .toc {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: .6rem .75rem;
  font-size: .95rem;
  line-height: 1.6;
}
#toc .toctitle { font-weight: 700; letter-spacing: -0.1px; }
#toc ul { margin-left: 1rem; }

/* 표(wikitable) */
.mw-body .wikitable {
  border: 1px solid #e5e7eb;
  border-collapse: collapse;
  font-size: .95rem;
  background: #fff;
}
.mw-body .wikitable th {
  background: #f3f4f6;
  font-weight: 700;
}
.mw-body .wikitable th,
.mw-body .wikitable td {
  border: 1px solid #e5e7eb;
  padding: .45rem .6rem;
}
.mw-body .wikitable tr:nth-child(even) { background: #fafafa; }

/* 코드 블록 */
pre, code, kbd, samp, tt {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas,
                "Liberation Mono", "Noto Sans Mono", monospace !important;
  font-size: .95em;
}
pre {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: .7rem;
}

/* 구분선 */
hr { border: 0; border-top: 1px solid #e5e7eb; margin: 1rem 0; }

/* 캡션 살짝 그레이 */
div.thumb .thumbcaption { color: #6b7280; font-size: .92rem; }

/* === Letter-spacing fix: 강제 적용 (TOC/리스트/링크/제목) === */
/* 본문 전체: 코드/모노스페이스 제외하고 자간 적용 */
.mw-parser-output :not(pre):not(code):not(kbd):not(samp):not(tt) {
  letter-spacing: -0.25px !important;    /* 필요시 -0.20 ~ -0.30px로 조절 */
}

/* H1/H2/H3 가끔 초기화되는 경우 보강 */
#firstHeading,
.mw-body h2, .mw-body h2 .mw-headline,
.mw-body h3 { letter-spacing: -0.25px !important; }

/* TOC(목차) 내부는 별도 강제 */
#toc, .toc,
#toc *, .toc * { letter-spacing: -0.25px !important; }

/* 리스트 항목/링크에도 확실히 적용 */
.mw-parser-output li,
.mw-parser-output a,
.mw-parser-output span { letter-spacing: -0.25px !important; }

/* 코드·모노스페이스 블록은 원래 간격 유지 */
pre, code, kbd, samp, tt { letter-spacing: 0 !important; }

/* =========================================================
   추가 보완: 네비게이션 및 누락된 영역에 폰트 적용
   ========================================================= */

/* 네비게이션 메뉴 (좌측 사이드바, 상단 메뉴) */
.vector-menu,
.vector-menu-content,
#mw-navigation,
.mw-portlet,
.mw-portlet-body,
#p-logo,
#left-navigation,
#right-navigation {
    font-family: "Malgun Gothic", "맑은 고딕", "Noto Sans KR", "Apple SD Gothic Neo",
                  Helvetica, Arial, sans-serif !important;
    letter-spacing: -0.2px !important;
}

/* 입력 필드 및 버튼 */
input,  
textarea,  
select,  
button,
.oo-ui-inputWidget input,
.oo-ui-buttonElement-button {
    font-family: "Malgun Gothic", "맑은 고딕", "Noto Sans KR", "Apple SD Gothic Neo",
                  Helvetica, Arial, sans-serif !important;
    letter-spacing: -0.2px !important;
}

/* 검색창 */
#searchInput,
.vector-search-box-input,
.oo-ui-textInputWidget {
    font-family: "Malgun Gothic", "맑은 고딕", "Noto Sans KR", "Apple SD Gothic Neo",
                  Helvetica, Arial, sans-serif !important;
}

/* 탭 메뉴 (편집, 토론, 역사 등) */
.vector-menu-tabs,
.vector-menu-tabs li,
.vector-menu-tabs a {
    font-family: "Malgun Gothic", "맑은 고딕", "Noto Sans KR", "Apple SD Gothic Neo",
                  Helvetica, Arial, sans-serif !important;
    letter-spacing: -0.2px !important;
}

/* 드롭다운 메뉴 */
.vector-menu-dropdown,
.vector-menu-dropdown-content {
    font-family: "Malgun Gothic", "맑은 고딕", "Noto Sans KR", "Apple SD Gothic Neo",
                  Helvetica, Arial, sans-serif !important;
}

/* 푸터 */
#footer,
#footer * {
    font-family: "Malgun Gothic", "맑은 고딕", "Noto Sans KR", "Apple SD Gothic Neo",
                  Helvetica, Arial, sans-serif !important;
    letter-spacing: -0.2px !important;
}

/* 알림/메시지 박스 */
.mw-notification,
.warningbox,
.errorbox,
.successbox {
    font-family: "Malgun Gothic", "맑은 고딕", "Noto Sans KR", "Apple SD Gothic Neo",
                  Helvetica, Arial, sans-serif !important;
}