미디어위키:Common.css
CABAL WIKI
참고: 설정을 저장한 후에 바뀐 점을 확인하기 위해서는 브라우저의 캐시를 새로 고쳐야 합니다.
- 파이어폭스 / 사파리: Shift 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5 또는 Ctrl-R을 입력 (Mac에서는 ⌘-R)
- 구글 크롬: Ctrl-Shift-R키를 입력 (Mac에서는 ⌘-Shift-R)
- 인터넷 익스플로러 / 엣지: Ctrl 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5를 입력.
- 오페라: Ctrl-F5를 입력.
/* =========================================================
* CABAL WIKI — Dark Fantasy Theme
* 적용 위치: MediaWiki:Common.css
* 적용 후 캐시 새로고침 필요: Ctrl + F5 또는 URL 뒤에 ?action=purge
* 작성: 2026.05 / 이창준 (카발서비스팀)
* ========================================================= */
/* ---------- 0. 폰트 ---------- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@500;700&family=Noto+Sans+KR:wght@400;500;700&display=swap');
/* ---------- 1. 컬러 변수 ---------- */
:root {
--cw-bg: #0a0e1a; /* 전체 배경 */
--cw-card: #1a1f33; /* 카드/박스 */
--cw-card-2: #12172a; /* 보조 카드 */
--cw-border: #2a3050; /* 테두리 */
--cw-gold: #c9a961; /* 메인 액센트 (골드) */
--cw-gold-2: #d4af37; /* 링크/하이라이트 */
--cw-gold-soft: #f4e8c8; /* 밝은 골드 (제목) */
--cw-purple: #4a2a6e; /* 보조 액센트 (보라) */
--cw-purple-2: #2a1d4a; /* 깊은 보라 */
--cw-text: #e8e4d4; /* 본문 텍스트 */
--cw-text-2: #cfcbc0; /* 보조 텍스트 */
--cw-text-3: #a8a8b3; /* 회색 (캡션) */
}
/* ---------- 2. 전체 배경 / 컨테이너 ---------- */
body.skin-vector,
body.skin-vector-2022 {
background: var(--cw-bg) !important;
color: var(--cw-text);
}
#content,
.mw-body,
.vector-body {
background:
radial-gradient(ellipse at top, rgba(201,169,97,0.04) 0%, transparent 50%),
linear-gradient(180deg, #0d1220 0%, var(--cw-bg) 100%) !important;
color: var(--cw-text) !important;
border-left: 1px solid var(--cw-border) !important;
border-color: var(--cw-border) !important;
}
/* 사이드바/탭 영역 */
.vector-menu-tabs,
.vector-menu-tabs ul,
.vector-menu-tabs li {
background-image: none !important;
background-color: transparent !important;
}
#mw-panel,
.mw-portlet,
.vector-menu-portal {
color: var(--cw-text-3) !important;
}
#mw-panel .vector-menu-heading,
.mw-portlet h3 {
color: var(--cw-gold) !important;
}
/* ---------- 3. 본문 타이포그래피 ---------- */
.mw-parser-output {
font-family: 'Noto Sans KR', 'Pretendard', '맑은 고딕', sans-serif;
font-size: 15px;
line-height: 1.85;
color: var(--cw-text);
}
.mw-parser-output p {
margin: 0 0 14px;
color: var(--cw-text-2);
}
.mw-parser-output b,
.mw-parser-output strong {
color: var(--cw-gold-soft);
}
/* ---------- 4. 페이지 제목 (h1) ---------- */
#firstHeading,
.mw-first-heading {
font-family: 'Noto Serif KR', serif !important;
font-size: 36px !important;
color: var(--cw-gold-soft) !important;
border: none !important;
padding-bottom: 16px !important;
margin-bottom: 8px !important;
border-bottom: 1px solid transparent !important;
border-image: linear-gradient(90deg, var(--cw-gold) 0%, transparent 80%) 1 !important;
letter-spacing: 1px;
}
#firstHeading::before {
content: '◆ ';
color: var(--cw-gold);
font-size: 24px;
vertical-align: 2px;
}
/* ---------- 5. 본문 헤더 (h2 / h3 / h4) ---------- */
.mw-parser-output h2 {
font-family: 'Noto Serif KR', serif;
font-size: 24px !important;
color: var(--cw-gold) !important;
margin: 36px 0 16px !important;
padding: 12px 0 12px 18px !important;
border: none !important;
border-left: 4px solid var(--cw-gold) !important;
background: linear-gradient(90deg, rgba(201,169,97,0.12) 0%, transparent 60%);
letter-spacing: 1px;
}
.mw-parser-output h3 {
font-size: 18px !important;
color: var(--cw-text) !important;
margin: 24px 0 12px !important;
padding-left: 14px !important;
border-left: 2px solid #6b5538 !important;
letter-spacing: 0.5px;
}
.mw-parser-output h4 {
font-size: 16px !important;
color: var(--cw-gold-2) !important;
margin: 18px 0 10px !important;
padding-left: 10px !important;
border-left: 2px solid var(--cw-purple) !important;
}
.mw-parser-output h5,
.mw-parser-output h6 {
color: var(--cw-text) !important;
}
/* ---------- 6. 링크 ---------- */
.mw-parser-output a,
.mw-body-content a {
color: var(--cw-gold-2) !important;
text-decoration: none !important;
border-bottom: 1px dashed rgba(212,175,55,0.35);
transition: color 0.15s, border-color 0.15s;
}
.mw-parser-output a:hover {
color: var(--cw-gold-soft) !important;
border-bottom-color: var(--cw-gold-soft);
}
.mw-parser-output a.new,
.mw-parser-output a.new:visited { /* 빨간 링크 (없는 문서) */
color: #c74e4e !important;
border-bottom-color: rgba(199,78,78,0.35);
}
.mw-parser-output a.external {
color: var(--cw-gold-2) !important;
}
/* ---------- 7. 목차 (TOC) ---------- */
#toc,
.toc,
.toccolours {
background: linear-gradient(180deg, var(--cw-card-2) 0%, #0d1220 100%) !important;
border: 1px solid var(--cw-border) !important;
border-left: 3px solid var(--cw-gold) !important;
padding: 18px 22px !important;
border-radius: 4px !important;
color: var(--cw-text-2) !important;
max-width: 480px;
}
#toc .toctitle,
.toc .toctitle {
color: var(--cw-gold) !important;
font-family: 'Noto Serif KR', serif;
font-size: 14px !important;
letter-spacing: 3px;
text-transform: uppercase;
padding-bottom: 10px;
margin-bottom: 8px;
border-bottom: 1px dashed rgba(201,169,97,0.3);
text-align: left !important;
}
#toc ul,
.toc ul {
color: var(--cw-text-2);
line-height: 1.9;
}
#toc a,
.toc a {
color: var(--cw-text-2) !important;
border-bottom: none !important;
}
#toc a:hover,
.toc a:hover {
color: var(--cw-gold-soft) !important;
}
.tocnumber {
color: var(--cw-gold) !important;
font-weight: bold;
margin-right: 6px;
}
/* ---------- 8. 표 (wikitable) ---------- */
.mw-parser-output table.wikitable,
.wikitable {
background: var(--cw-card) !important;
color: var(--cw-text-2) !important;
border: 1px solid var(--cw-border) !important;
border-collapse: separate !important;
border-spacing: 0;
border-radius: 4px;
overflow: hidden;
margin: 16px 0;
box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.wikitable th {
background: linear-gradient(180deg, var(--cw-purple) 0%, var(--cw-purple-2) 100%) !important;
color: var(--cw-gold-soft) !important;
border: 1px solid var(--cw-border) !important;
font-family: 'Noto Serif KR', serif;
letter-spacing: 1px;
padding: 10px 14px !important;
}
.wikitable td {
background: var(--cw-card) !important;
border: 1px solid var(--cw-border) !important;
color: var(--cw-text-2) !important;
padding: 10px 14px !important;
}
.wikitable tr:hover td {
background: #20253d !important;
}
.wikitable caption {
background: var(--cw-purple-2) !important;
color: var(--cw-gold-soft) !important;
font-family: 'Noto Serif KR', serif;
font-weight: bold;
padding: 10px;
letter-spacing: 1px;
}
/* ---------- 9. 인포박스 ---------- */
/* MediaWiki 표준 .infobox 클래스가 적용된 경우 자동 다크화 */
.infobox {
float: right;
width: 300px;
margin: 0 0 20px 24px;
background: linear-gradient(180deg, var(--cw-card) 0%, #0f1424 100%) !important;
border: 1px solid var(--cw-border) !important;
border-radius: 6px !important;
overflow: hidden;
box-shadow: 0 8px 32px rgba(0,0,0,0.5), inset 0 1px 0 rgba(201,169,97,0.15);
font-size: 13px;
color: var(--cw-text-2) !important;
}
.infobox caption,
.infobox-title,
.infobox > tbody > tr:first-child th {
background: linear-gradient(90deg, var(--cw-purple-2) 0%, var(--cw-purple) 100%) !important;
color: var(--cw-gold-soft) !important;
font-family: 'Noto Serif KR', serif;
font-size: 16px;
font-weight: bold;
letter-spacing: 2px;
padding: 14px 16px !important;
border-bottom: 1px solid var(--cw-gold) !important;
text-align: center;
}
.infobox th {
background: rgba(201,169,97,0.08) !important;
color: var(--cw-gold) !important;
font-weight: bold;
letter-spacing: 1px;
padding: 8px 14px !important;
border-right: 1px solid var(--cw-border) !important;
width: 35%;
text-align: left;
}
.infobox td {
padding: 8px 14px !important;
color: var(--cw-text-2) !important;
border-bottom: 1px solid var(--cw-border) !important;
}
.infobox img {
max-width: 100%;
height: auto;
}
/* ---------- 10. 인용/Blockquote ---------- */
.mw-parser-output blockquote {
margin: 20px 0;
padding: 16px 20px;
background: linear-gradient(90deg, rgba(74,42,110,0.2), transparent);
border-left: 3px solid var(--cw-purple);
color: var(--cw-text);
font-style: italic;
line-height: 1.8;
border-radius: 0 4px 4px 0;
}
/* ---------- 11. 코드 / pre ---------- */
.mw-parser-output code,
.mw-parser-output tt {
background: var(--cw-card) !important;
color: var(--cw-gold-2) !important;
padding: 2px 6px;
border-radius: 3px;
border: 1px solid var(--cw-border);
font-size: 13px;
}
.mw-parser-output pre {
background: var(--cw-card-2) !important;
color: var(--cw-text) !important;
border: 1px solid var(--cw-border) !important;
border-left: 3px solid var(--cw-gold) !important;
padding: 14px 18px;
border-radius: 4px;
}
/* ---------- 12. 리스트 / 구분선 ---------- */
.mw-parser-output ul,
.mw-parser-output ol {
color: var(--cw-text-2);
}
.mw-parser-output ul li::marker { color: var(--cw-gold); }
.mw-parser-output ol li::marker { color: var(--cw-gold); font-weight: bold; }
.mw-parser-output hr {
border: none;
height: 1px;
background: linear-gradient(90deg, transparent, var(--cw-gold), transparent);
margin: 28px 0;
}
/* ---------- 13. 카테고리 / Footer ---------- */
#catlinks,
.catlinks {
background: var(--cw-card-2) !important;
border: 1px solid var(--cw-border) !important;
border-radius: 4px;
padding: 10px 14px;
color: var(--cw-text-3) !important;
}
#catlinks a { color: var(--cw-gold-2) !important; }
#footer,
.mw-footer {
color: var(--cw-text-3) !important;
}
#footer a { color: var(--cw-gold-2) !important; }
/* ---------- 14. 검색창 / 입력 ---------- */
#searchInput,
.mw-ui-input,
input[type="text"],
input[type="search"] {
background: var(--cw-card-2) !important;
border: 1px solid var(--cw-border) !important;
color: var(--cw-text) !important;
border-radius: 3px;
}
#searchInput:focus {
border-color: var(--cw-gold) !important;
outline: none;
}
/* ---------- 15. 알림 박스 (정보/경고) ---------- */
.mbox,
.ambox,
.notice {
background: var(--cw-card) !important;
border: 1px solid var(--cw-border) !important;
border-left: 4px solid var(--cw-gold) !important;
color: var(--cw-text-2) !important;
padding: 12px 16px;
border-radius: 4px;
}
/* ---------- 16. 클랜 컬러 유틸리티 클래스 ----------
* 사용법: 인포박스 div에 class="clan-dark" 등을 추가하면 자동 컬러링
* 예: <div class="infobox clan-metal">...</div>
*/
.clan-dark .infobox-header, .clan-dark .dp-infobox-header { background: linear-gradient(90deg, #1a0a1a, #4a1f3a) !important; }
.clan-metal .infobox-header, .clan-metal .dp-infobox-header { background: linear-gradient(90deg, #2a2a3a, #5a5a7a) !important; }
.clan-mutant .infobox-header, .clan-mutant .dp-infobox-header { background: linear-gradient(90deg, #2a3a1a, #5a7a2a) !important; }
.clan-undead .infobox-header, .clan-undead .dp-infobox-header { background: linear-gradient(90deg, #2a1a1a, #6a2a2a) !important; }
.clan-plant .infobox-header, .clan-plant .dp-infobox-header { background: linear-gradient(90deg, #1a3a2a, #2a6a4a) !important; }
.clan-phantasmal .infobox-header, .clan-phantasmal .dp-infobox-header { background: linear-gradient(90deg, #2a1a3a, #5a2a7a) !important; }
/* ---------- 17. 반응형 (모바일) ---------- */
@media (max-width: 720px) {
.infobox {
float: none !important;
width: 100% !important;
margin: 0 0 20px 0 !important;
}
#firstHeading { font-size: 28px !important; }
.mw-parser-output h2 { font-size: 20px !important; }
}
/* ========== END OF CABAL WIKI DARK FANTASY THEME ========== */
/* =========================================================
* CABAL WIKI — Dark Fantasy Theme · PATCH v1.1
* 적용: 기존 MediaWiki:Common.css 맨 아래에 이어붙이기
* 수정: 1차 적용 후 발견된 5개 문제 해결
* ========================================================= */
/* ---------- [패치 1] FlaggedRevs 알림 메시지 (승인 판) ---------- */
/* "이 문서의 승인한 판은 최신 판입니다" / "이 판은 ... Wikiadmin이 승인" */
.flaggedrevs_short,
.flaggedrevs_basic,
.flaggedrevs_quality,
.flaggedrevs_pristine,
#mw-fr-revisiontag,
#mw-fr-revisiontag-old,
.fr-checkbox,
.fr-icon-current,
.fr-icon-stable,
.flaggedrevs-pending,
.flaggedrevs-stable {
background: var(--cw-card-2) !important;
color: var(--cw-text-2) !important;
border: 1px solid var(--cw-border) !important;
border-left: 3px solid var(--cw-gold) !important;
padding: 8px 14px !important;
border-radius: 4px !important;
margin: 8px 0 !important;
}
/* 승인 메시지 안의 빨간 글씨 → 골드로 */
.flaggedrevs_short *,
#mw-fr-revisiontag *,
.flaggedrevs-stable *,
.fr-text * {
color: var(--cw-text-2) !important;
}
.flaggedrevs_short b,
.flaggedrevs_short strong,
#mw-fr-revisiontag b,
.fr-user, .fr-text a {
color: var(--cw-gold) !important;
}
/* 사용자 이름 (Wikiadmin 등) - 빨간색 링크라도 골드로 */
.flaggedrevs_short a.new,
#mw-fr-revisiontag a.new {
color: var(--cw-gold-2) !important;
}
/* ---------- [패치 2] Hatnote / 알림 박스 (흰 배경 제거) ---------- */
/* "이 문서는 카발 온라인 세계관에 대한 정보를 담고 있습니다" */
.mw-parser-output .hatnote,
.mw-parser-output .dablink,
.mw-parser-output .rellink,
.hatnote,
.dablink,
.rellink {
background: var(--cw-card-2) !important;
color: var(--cw-text-2) !important;
border: 1px solid var(--cw-border) !important;
border-left: 3px solid var(--cw-gold) !important;
padding: 10px 16px !important;
border-radius: 4px !important;
font-style: normal !important;
margin: 12px 0 !important;
}
.mw-parser-output .hatnote a,
.hatnote a {
color: var(--cw-gold-2) !important;
}
/* ---------- [패치 3] 모든 표 셀 강제 다크화 ---------- */
/* 인라인 style="background:white" 또는 wikitable 클래스 없는 표 대응 */
.mw-parser-output table:not(.infobox) td,
.mw-parser-output table:not(.infobox) th,
#mw-content-text table:not(.infobox) td,
#mw-content-text table:not(.infobox) th {
background-color: var(--cw-card) !important;
color: var(--cw-text-2) !important;
}
/* 표 안의 흰색/밝은 텍스트도 강제 베이지 톤으로 */
.mw-parser-output table td,
.mw-parser-output table th,
.mw-parser-output table td b,
.mw-parser-output table td strong {
color: var(--cw-text) !important;
}
.mw-parser-output table td a {
color: var(--cw-gold-2) !important;
}
/* ---------- [패치 4] Collapsible (펼치기) 박스 ---------- */
.mw-collapsible,
.NavFrame,
.navbox {
background: var(--cw-card) !important;
border: 1px solid var(--cw-border) !important;
color: var(--cw-text-2) !important;
border-radius: 4px;
}
.mw-collapsible-toggle,
.mw-collapsible-toggle-default,
.NavToggle {
color: var(--cw-gold) !important;
font-weight: bold;
background: rgba(201,169,97,0.1) !important;
padding: 2px 8px !important;
border-radius: 3px;
border: 1px solid var(--cw-border);
}
.mw-collapsible-toggle:hover {
background: rgba(201,169,97,0.2) !important;
color: var(--cw-gold-soft) !important;
}
.NavHead,
.navbox-title,
.navbox-group {
background: linear-gradient(90deg, var(--cw-purple-2) 0%, var(--cw-purple) 100%) !important;
color: var(--cw-gold-soft) !important;
font-family: 'Noto Serif KR', serif !important;
}
/* 확장팩 카드 텍스트 강제 가독성 확보 */
.mw-parser-output table.wikitable td b,
.mw-parser-output table td b {
color: var(--cw-gold-soft) !important;
display: block;
margin-bottom: 6px;
font-family: 'Noto Serif KR', serif;
letter-spacing: 1px;
}
/* ---------- [패치 5] 섹션 편집 링크 [편집][원본 편집] ---------- */
.mw-editsection,
.mw-editsection-bracket,
span.mw-editsection {
color: var(--cw-text-3) !important;
font-size: 13px !important;
font-weight: normal !important;
margin-left: 10px;
}
.mw-editsection a,
.mw-editsection-bracket {
color: var(--cw-gold-2) !important;
border-bottom: none !important;
}
.mw-editsection a:hover {
color: var(--cw-gold-soft) !important;
}
/* ---------- [추가 보너스 1] 우상단 "행위" 드롭다운 ---------- */
.vector-page-toolbar,
.vector-dropdown-content,
#p-cactions,
.vector-menu-dropdown .vector-menu-content {
background: var(--cw-card) !important;
border: 1px solid var(--cw-border) !important;
color: var(--cw-text-2) !important;
}
.vector-page-toolbar a,
#p-cactions a {
color: var(--cw-gold-2) !important;
}
/* ---------- [추가 보너스 2] 사이드바 "목차" 박스 정리 ---------- */
/* 좌측 사이드바 TOC가 어색하게 베이지 박스로 보이는 문제 */
#mw-panel #toc,
.vector-toc,
.sidebar-toc,
#mw-panel-toc-list {
background: transparent !important;
border: none !important;
border-left: none !important;
padding: 0 !important;
box-shadow: none !important;
}
#mw-panel #toc .toctitle,
.vector-toc-heading {
background: transparent !important;
color: var(--cw-gold) !important;
border: none !important;
padding-left: 12px !important;
}
/* ---------- [추가 보너스 3] 빨간 링크(없는 문서) 가독성 ---------- */
/* 다크 배경에 진한 빨강이 안 보이므로 좀 더 밝게 */
.mw-parser-output a.new,
a.new,
a.new:visited {
color: #ff7a7a !important;
border-bottom-color: rgba(255,122,122,0.4) !important;
}
/* ---------- [추가 보너스 4] 페이지 제목 박스(🌐) 살리기 ---------- */
/* 본문 안에 "🌐 카발 온라인 세계관🌐" 같은 큰 검은 박스 */
.mw-parser-output div[style*="background"],
.mw-parser-output center[style] {
background-color: transparent !important;
}
/* ---------- [추가 보너스 5] 빈 테이블 셀 (이미지만 있는) ---------- */
/* 흰 배경 이미지 (CABAL 로고 등)가 흰 셀에 떠 있는 문제 - 셀 패딩으로 완화 */
.mw-parser-output table td:has(img:only-child),
.mw-parser-output table td img {
background-color: transparent !important;
}
.mw-parser-output table td img {
padding: 8px;
background: var(--cw-card-2) !important;
border-radius: 4px;
}
/* ========== END OF PATCH v1.1 ========== */