Wiki.js 기본 테마의 가독성과 UI/UX를 전반적으로 개선하는 커스텀 CSS 테마입니다. Vuetify 기반 Wiki.js의 기본 스타일을 유지하면서, 본문 타이포그래피·코드 블록·테이블·콜아웃 등 거의 모든 요소의 여백·색상·테두리를 현대적인 에디토리얼 디자인으로 재정의합니다.
- Wiki.js 관리자 패널 접속 (
/a/theme)
- Theme 탭 → Code Injection 섹션 → CSS Override 필드
- 아래 전체 CSS 코드 복사 후 붙여넣기
- APPLY 클릭
기존 CSS Override에 내용이 있다면 기존 내용을 백업한 뒤 교체하세요. 이 스타일은 단독 사용을 전제로 설계되었습니다.
아래 "기본" 값은 Wiki.js 소스 코드(client/themes/default/scss/app.scss)에서 직접 확인한 값입니다. Material Color 함수 mc()의 결과는 실제 hex 값으로 표기합니다.
| 항목 |
기본 (Wiki.js 소스) |
변경 |
의도 |
| 본문 폰트 |
Roboto (Vuetify 기본, default.scss에서 woff2 로드) |
Pretendard — CJK 최적화 |
한글·일본어 환경에서의 글자 렌더링 품질 향상. Roboto는 라틴 중심 폰트로 CJK 글리프가 없어 시스템 fallback에 의존함 |
| 코드 폰트 |
'Roboto Mono', monospace |
JetBrains Mono, Ubuntu Mono |
리거처 지원 및 코드 가독성 향상. JetBrains Mono는 프로그래밍 특화 폰트로 0O, 1lI 등 혼동 글리프 구분이 뛰어남 |
| 본문 크기 |
Vuetify 기본 (0.875rem = 14px) |
clamp(15.5px, 1rem + 0.15vw, 17px) 반응형 |
14px은 긴 글 읽기에 작음. 뷰포트에 비례하는 반응형 크기로 모바일~데스크톱 모두 편안한 독서 경험 제공 |
| 줄간격 |
Vuetify 기본 (1.5) |
1.75 |
CJK 텍스트는 획이 복잡해 라틴보다 더 넓은 줄간격이 필요. 1.75는 에디토리얼 디자인의 표준 범위 |
| 본문 최대 너비 |
제한 없음 |
982px |
한 줄에 너무 많은 글자가 들어가면 시선 추적이 어려움. 60–80자/줄을 유지하여 읽기 피로도 감소 |
| 본문 색상 |
mc('grey', '800') = #424242 |
#2c2c2c |
순수 검정(#000)보다 부드러우면서도 #424242보다는 명확한 대비를 제공하는 중간값 |
배경색 (v-main) |
Vuetify 기본 #fff |
#fafafa |
순백 배경의 눈부심 완화. 미세한 off-white로 장시간 독서 시 눈의 피로 감소 |
| 레이아웃 |
사이드바 좌측 |
사이드바 우측 (flex-direction 반전) |
TOC를 우측에 배치하여 본문 시작점을 좌측에 고정, F 패턴 읽기 흐름에 부합 |
| 항목 |
기본 (Wiki.js 소스) |
변경 |
의도 |
| H1 크기 |
브라우저 기본 (약 2em) |
clamp(1.8em, 2vw + 1em, 2.4em) |
뷰포트 반응형으로 모바일에서 과도하게 커지지 않으면서 데스크톱에서는 충분한 시각적 계층 확보 |
| H1 색상 |
mc('blue', '800') = #1565c0 |
#111 |
헤딩에 파란색을 사용하면 링크와 시각적 혼동 발생. 뉴트럴 다크로 변경하여 역할 구분 명확화 |
| H1 마진 |
margin-top: 2rem, padding 0 |
margin: 0 0 0.75em |
페이지 최상단 H1은 상단 마진이 불필요. 하단 여백으로 본문과의 시각적 분리만 확보 |
| H1 하단선 |
linear-gradient (primary color → transparent), ::after 2px |
없음 (제거) |
그라디언트 하단선은 시각적으로 산만함. 클린한 타이포그래피로 제목 자체의 weight와 크기만으로 계층 전달 |
| H2 색상 |
mc('grey', '800') = #424242 |
#111 |
섹션 구분의 주요 헤딩으로서 시각적 무게감 강화 |
| H2 마진 |
margin: 1rem 0 0 0 |
margin: 3.2em 0 0.8em |
1rem은 새 섹션 시작을 알리기에 부족. 충분한 상단 여백으로 섹션 간 시각적 호흡 확보 |
| H2 하단선 |
::after — linear-gradient (grey 700 → transparent), 1px |
border-bottom: 1.5px solid rgba(0,0,0,0.06) |
그라디언트 대신 균일한 미세 선으로 교체. 시각적 잡음 감소, 단순하고 일관된 구분선 |
| H3 색상 |
mc('grey', '700') = #616161 |
#222 |
H2보다 약간 밝지만 여전히 뚜렷한 색상으로 3단계 계층 구조 유지 |
| H3 마진 |
margin: 8px 0 0 0 |
margin: 2.6em 0 0.6em |
8px은 H3 시작을 거의 표시하지 못함. 적절한 여백으로 하위 섹션 진입을 시각적으로 알림 |
| H3 하단선 |
::after — linear-gradient (grey 500 → transparent 90%), 1px |
border-bottom: 1px solid rgba(0,0,0,0.04) |
H2보다 더 미세한 선으로 계층적 차이 표현 |
| H4 크기 |
1rem |
1.04em |
H4/H5/H6이 모두 1rem이면 구분 불가. 미세하지만 크기 차이를 주어 시각적 계층 구조 재정립 |
| H4/H5/H6 색상 |
mc('grey', '700') = #616161 |
H4 #333, H5 #444, H6 #666 |
점진적으로 밝아지는 색상으로 6단계 헤딩의 시각적 위계 차이를 인식 가능하게 함 |
| H4/H5/H6 마진 |
margin: 8px 0 0 0 |
H4 1.8em, H5 1.5em, H6 1.3em |
동일한 8px 마진으로는 계층 구분 불가. 레벨별 차등 여백으로 문서 구조의 깊이를 시각화 |
| H5 크기 |
1rem |
0.95em |
본문보다 약간 작지만 weight로 구분되는 보조 헤딩 |
| H6 크기 |
1rem |
0.88em, UPPERCASE 추가 |
가장 낮은 레벨의 헤딩을 UPPERCASE + 작은 크기로 라벨/카테고리 스타일로 차별화 |
| 앵커 아이콘 |
display: none → hover 시 display: block, 우측 하단 배치 |
opacity 전환 (0 → 0.35) |
display 토글은 레이아웃 점프 유발. opacity 전환으로 부드러운 표시/숨김 |
| 항목 |
기본 (Wiki.js 소스) |
변경 |
의도 |
| 패딩 |
padding: 1rem 0 0 0 (상단 패딩) |
패딩 제거 |
단락 간 간격은 margin으로 통일. padding과 margin을 혼용하면 요소 조합 시 예측 불가한 여백 발생 |
| 마진 |
margin: 0, margin-bottom: 0 (Vuetify override) |
margin: 0 0 1.15em |
단락 사이에 일관된 하단 마진으로 텍스트 블록 간 호흡. 상단 패딩 방식 대비 마진 병합(collapse)이 더 예측 가능 |
| 항목 |
기본 (Wiki.js 소스) |
변경 |
의도 |
| 인라인 코드 배경 |
mc('indigo', '50') = #e8eaf6 |
rgba(0,0,0,0.048) |
indigo 배경은 코드가 링크처럼 보이는 문제. 뉴트럴 반투명 배경으로 본문 내에서 자연스럽게 구분 |
| 인라인 코드 색상 |
mc('indigo', '800') = #283593 |
#c7254e |
Bootstrap 계열에서 널리 사용되는 코드 강조색. 링크 파란색과 확실히 구별되면서 눈에 띄는 색상 |
| 인라인 코드 폰트 |
'Roboto Mono', monospace |
JetBrains Mono, Ubuntu Mono, SFMono-Regular, Consolas |
코드 블록과 동일한 폰트 스택으로 일관성 확보. 다양한 OS 환경 대응을 위한 fallback 체인 |
| 인라인 코드 크기 |
1rem |
0.86em |
모노스페이스 폰트는 같은 크기에서 프로포셔널 폰트보다 시각적으로 커 보임. 약간 줄여서 본문과 조화 |
| 인라인 코드 패딩 |
0 5px |
0.2em 0.45em |
em 단위 패딩으로 폰트 크기에 비례하는 일관된 여백 확보 |
.prismjs 모서리 |
border-radius: 5px |
border-radius: 10px |
전체 UI의 모서리 반경(10px)과 통일하여 시각적 일관성 확보 |
.prismjs 테두리 |
border: none |
border: 1px solid rgba(0,0,0,0.07) |
그림자 제거 후 코드 블록의 경계를 명확히 하기 위한 미세 border 추가 |
.prismjs 그림자 |
box-shadow: initial |
box-shadow: none |
그림자를 명시적으로 제거하여 플랫 디자인 일관성 유지 |
.prismjs 마진 |
margin: 1rem 0 |
margin: 1.6em 0 |
본문 폰트 크기 증가에 맞춰 주변 요소와의 간격 비례 조정 |
.prismjs > code 크기 |
.85rem |
.86em |
rem → em 변경으로 부모 컨테이너 크기에 비례하게 조정 |
| 복사 버튼 |
항상 표시 |
hover 시에만 표시 (opacity 전환) |
코드 블록에 항상 표시되는 버튼은 시각적 잡음. 필요 시에만 나타나는 progressive disclosure |
| 스크롤바 |
기본 |
6px 얇은 커스텀 스크롤바 |
기본 스크롤바가 코드 블록의 디자인을 깨뜨림. 얇고 투명한 스크롤바로 존재감 최소화 |
| 항목 |
기본 (Wiki.js 소스) |
변경 |
의도 |
| 스타일 |
Wiki.js에 <kbd> 전용 CSS 없음 (브라우저 기본) |
밝은 키캡 스타일 추가 |
브라우저 기본 <kbd>는 주변 텍스트와 거의 구분 안 됨. 실제 키보드 키를 모방한 시각적 메타포 |
| 배경 |
브라우저 기본 |
#f4f4f4 |
밝은 키캡 색상으로 물리적 키보드 느낌 재현 |
| 테두리 |
없음 |
1px solid #d1d1d1, 하단 2px (입체감) |
하단 border를 두껍게 하여 눌린 키의 3D 입체감 표현 |
| 색상 |
브라우저 기본 |
#333 |
밝은 배경 위에서 충분한 대비 확보 |
| 폰트 |
브라우저 기본 |
JetBrains Mono, 0.82em |
키보드 키 라벨은 모노스페이스가 자연스러움. 인라인 코드와 시각적 일관성 유지 |
| 항목 |
기본 (Wiki.js 소스) |
변경 |
의도 |
| 일반 blockquote 배경 |
mc('blue-grey', '50') = #eceff1 |
transparent |
콜아웃(is-info 등)과의 시각적 차별화. 일반 인용은 가볍게, 콜아웃은 강조하여 역할 구분 |
| 일반 blockquote 좌측 |
border-left: 55px solid #607d8b, 아이콘 표시 |
border-left: 3px solid #d4d4d4, 아이콘 제거 |
55px 좌측 바는 공간 낭비가 크고 시각적으로 과도. 3px 얇은 선으로 인용임을 표시하면서 공간 절약 |
| 일반 blockquote 모서리 |
border-radius: .5rem |
border-radius: 0 |
배경 제거 후 모서리 반경 불필요. 좌측 직선 바만으로 깔끔한 인용 표현 |
| 일반 blockquote 패딩 |
0 1rem 1rem 1rem |
0.15em 0 0.15em 1.2em |
좌측 바 뒤의 패딩만 유지하는 미니멀 인용 스타일 |
| is-info 배경 |
mc('blue', '50') = #e3f2fd |
linear-gradient(135deg, #f0f7ff, #f5f9ff) |
단색 대비 미묘한 그라디언트로 시각적 깊이감 추가. 더 세련된 느낌 |
| is-info 좌측 |
border-left: 55px solid #64b5f6 |
border-left: 3.5px solid #0066cc |
55px→3.5px로 공간 효율 극대화. 아이콘 제거하고 색상만으로 유형 구분 |
| is-warning 배경 |
mc('orange', '50') = #fff3e0 |
linear-gradient(135deg, #fffbeb, #fffdf5) |
동일 그라디언트 패턴으로 콜아웃 유형 간 시각적 일관성 |
| is-warning 좌측 |
border-left: 55px solid #ffb74d |
border-left: 3.5px solid #d97706 |
좌측 바 색상을 더 진하게 하여 경고 의미 강조 |
| is-danger 배경 |
mc('red', '50') = #ffebee |
linear-gradient(135deg, #fef2f2, #fff5f5) |
위험/에러 상황의 시각적 전달. 기본보다 더 부드러운 톤 |
| is-success 배경 |
mc('green', '50') = #e8f5e9 |
linear-gradient(135deg, #f0fdf4, #f5fff8) |
성공/팁의 시각적 전달 |
| 콜아웃 모서리 |
border-radius: .5rem |
border-radius: 10px |
UI 전체의 모서리 반경(10px)과 통일 |
| 항목 |
기본 (Wiki.js 소스) |
변경 |
의도 |
| 마진 |
margin: .5rem 0 |
margin: 1.8em 0 |
테이블은 정보 밀도가 높은 요소. 전후 충분한 여백으로 주변 텍스트와 분리하여 가독성 확보 |
| 테두리 |
border: 1px solid #e0e0e0 |
border: none |
외곽 테두리 제거로 콘텐츠와 자연스럽게 융합하는 borderless 테이블 디자인 |
| 모서리 |
border-radius: 5px |
border-radius: 0 |
외곽 테두리 제거에 따라 모서리 반경도 불필요 |
| th 배경 |
mc('grey', '100') = #f5f5f5 |
transparent |
헤더 배경 제거로 미니멀한 표. 타이포그래피(대문자, 작은 크기, 밝은 색상)만으로 헤더 구분 |
| th 색상 |
mc('grey', '600') = #757575 |
#888 |
본문보다 밝은 색상으로 헤더의 라벨 역할 시각화 |
| th 크기 |
기본 |
0.78em, uppercase, letter-spacing: 0.06em |
작은 대문자 + 넓은 자간으로 라벨/카테고리 느낌. 데이터와 헤더의 시각적 역할 차이를 명확히 |
| th 하단 |
border-bottom: 2px solid #9e9e9e |
border-bottom: 2px solid rgba(0,0,0,0.08) |
강한 구분선 대신 미세한 선으로 교체. 데이터 자체에 집중하게 유도 |
| td 패딩 |
.75rem |
0.8em 1em |
좌우 패딩 확대로 셀 간 시각적 여유 확보. 데이터가 빡빡하게 붙어 보이는 문제 해소 |
| td border |
border-bottom: 1px solid #e0e0e0 + border-right: 1px solid #f5f5f5 |
하단만 rgba(0,0,0,0.04), 좌우 제거 |
수직 구분선 제거로 수평 흐름 강조. 행(row) 단위 읽기에 최적화 |
| 짝수행 배경 |
mc('grey', '50') = #fafafa (줄무늬) |
없음 (hover 시 rgba(0,0,0,0.015)) |
줄무늬 대신 hover 피드백으로 교체. 시각적 잡음 감소, 인터랙티브한 행 추적 |
.dense th/td |
font-size: .85rem, padding: .5rem |
th 0.72em/0.45em 0.7em, td 0.88em/0.45em 0.7em |
em 단위 통일 및 더 컴팩트한 dense 모드 |
| 항목 |
기본 (Wiki.js 소스) |
변경 |
의도 |
| 색상 |
mc('blue', '700') = #1976d2 |
#0066cc |
더 진한 파란색으로 가독성 향상. WCAG AA 대비 기준 충족 |
| 밑줄 |
브라우저 기본 (밑줄 있음) |
밑줄 제거, hover 시 밑줄 |
상시 밑줄은 텍스트 밀도가 높은 문서에서 시각적 잡음. 색상만으로 링크 식별, hover로 클릭 가능성 확인 |
| 외부 링크 아이콘 |
Material Design Icons \F03CC (24px), #9e9e9e |
↗ 텍스트 (0.7em, super 위치, opacity 0.45) |
24px MDI 아이콘은 텍스트 흐름을 깨뜨림. 작은 유니코드 화살표로 외부 링크임을 은은하게 표시 |
| 항목 |
기본 (Wiki.js 소스) |
변경 |
의도 |
| 상단 패딩 |
padding-top: 1rem |
margin: 0.4em 0 1.2em |
padding → margin 통일. 다른 요소와 일관된 여백 시스템 |
| 중첩 리스트 |
padding-top: .5rem, padding-left: 1rem |
margin: 0.35em 0 |
중첩 시 과도한 들여쓰기 방지. 적절한 수직 여백만 유지 |
| 항목 간격 |
li + li { margin-top: .5rem } |
margin-bottom: 0.35em |
인접 형제 셀렉터 대신 일관된 하단 마진. .5rem은 밀도 높은 리스트에서 과도 |
| UL 불릿 |
content: '\25b8' (▸, 삼각형), #757575 |
기본 불릿 (CSS list-style 유지) |
삼각형 커스텀 불릿은 개성적이나, 일반적인 원형 불릿이 읽기 흐름을 덜 방해 |
| Task list 체크박스 |
커스텀 ::after pseudo (1.1rem, border: 1px solid #bdbdbd, ✓ 표시) |
네이티브 checkbox, accent-color: #0066cc, 15px |
네이티브 체크박스가 접근성(a11y) 측면에서 우수. accent-color로 테마 컬러 적용 |
| 항목 |
기본 (Wiki.js 소스) |
변경 |
의도 |
| 마진 |
margin: 1rem 0 |
margin: 3.5em 0 |
HR은 콘텐츠의 큰 주제 전환을 나타냄. 충분한 여백으로 시각적 "쉼"을 제공 |
| 배경 |
mc('grey', '400') = #bdbdbd (단색) |
linear-gradient(90deg, transparent, rgba(0,0,0,0.08) 20%, rgba(0,0,0,0.08) 80%, transparent) |
양 끝이 페이드아웃되는 선으로 본문 폭 전체를 가로지르지 않는 부드러운 구분 |
| 항목 |
기본 (Wiki.js 소스) |
변경 |
의도 |
| 모서리 |
없음 (max-width: 100%만) |
border-radius: 10px |
둥근 모서리로 이미지가 본문에 자연스럽게 녹아드는 느낌. UI 전체 반경 시스템과 통일 |
| 그림자 |
없음 (.decor-shadow 클래스로만 선택적 적용) |
box-shadow: 0 2px 12px rgba(0,0,0,0.06) 전역 적용 |
미세 그림자로 이미지에 살짝 떠 있는 느낌 부여. 본문과의 시각적 레이어 분리 |
| 마진 |
없음 |
margin: 1.4em 0 |
이미지 전후 여백으로 텍스트와의 밀착 방지 |
| 항목 |
기본 (Wiki.js 소스) |
변경 |
의도 |
| 배경 |
mc('grey', '50') = #fafafa |
#fff |
본문 배경(#fafafa)과 동일하면 details가 묻힘. 흰 배경으로 카드 느낌의 분리 |
| 마진 |
margin: 1rem 2rem |
margin: 1.5em 0 |
좌우 2rem 들여쓰기 제거. 본문 폭 전체를 사용하여 공간 효율 향상 |
| 테두리 |
1px solid #e0e0e0 |
1px solid rgba(0,0,0,0.07) |
반투명 border로 다크모드 등 다양한 배경에서 자연스러움 |
| 모서리 |
border-radius: 7px |
border-radius: 10px |
UI 전체 반경 시스템(10px)과 통일 |
| summary 패딩 |
0.4rem 1rem |
0.8em 1.1em |
클릭 영역 확대로 터치/클릭 사용성 향상 |
| 항목 |
기본 (Wiki.js 소스, tabset.vue) |
변경 |
의도 |
| 컨테이너 모서리 |
border-radius: 5px |
border-radius: 10px |
UI 전체 반경 시스템과 통일 |
| 컨테이너 그림자 |
.elevation-2 (Vuetify shadow) |
box-shadow: none, border: 1px solid rgba(0,0,0,0.07) |
Material Design의 elevation 그림자 대신 미세 border로 플랫 디자인 일관성 유지 |
| 탭 헤더 배경 |
linear-gradient(to bottom, #FFF, #FAFAFA), 하단 box-shadow: inset 0 -1px 0 0 #DDD |
background: #fafafa, border-bottom: 1px solid rgba(0,0,0,0.06) |
그라디언트 → 단색으로 단순화. inset shadow → border로 명시적 구분 |
| 탭 크기/weight |
14px, font-weight: 500 |
0.88em, font-weight: 550 |
em 단위로 본문 크기에 비례. 약간 더 두꺼운 weight로 탭 레이블 가독성 향상 |
| 탭 패딩 |
16px |
0.75em 1.2em |
상대 단위로 변경. 좌우 차등 패딩으로 탭 간 여유 확보 |
| 활성 탭 |
border-top: 3px solid #1976d2, 흰 배경 |
border-bottom: 2px solid #0066cc (상단→하단 변경) |
상단 border는 컨테이너 밖으로 튀어나오는 느낌. 하단 indicator는 콘텐츠와 연결되는 자연스러운 방향 |
| 탭 구분선 |
border-right: 1px solid #FFF + border-left: 1px solid #EEE |
없음 |
탭 간 구분선 제거로 클린한 탭 바. 공간과 색상 차이만으로 구분 가능 |
| 콘텐츠 패딩 |
2px 16px 16px |
1.2em 1.4em |
상대 단위로 변경. 상단 패딩 추가로 탭 전환 시 콘텐츠가 탭 바에 밀착되지 않게 |
| 요소 |
기본 (Wiki.js 소스) |
변경 |
의도 |
| Grid List 레이아웃 |
display: inline-block, 단일 열 |
CSS Grid repeat(auto-fill, minmax(260px, 1fr)) 3열 |
단일 열은 공간 낭비. 자동 열 채움 그리드로 화면 폭에 맞는 최적 열 수 자동 결정 |
| Grid List 배경 |
background: #FFF, border: 1px solid #eeeeee, padding 1px |
각 li에 border: 1px solid rgba(0,0,0,0.06), border-radius: 8px |
전체 컨테이너 border 대신 개별 카드 border로 변경. 각 항목의 독립적 시각 단위 강조 |
| Grid List 항목 |
padding: .6rem 1rem, 짝수행 #f5f5f5 |
padding: 0.8em 1em, hover 효과 |
줄무늬 → hover 인터랙션으로 교체. 그리드 카드에서 줄무늬는 의미 없음 |
| Links List 좌측선 |
border-left: 5px solid #e0e0e0 |
카드 스타일, 아이콘 → / ↗ / ✉ |
좌측 5px 선 + gradient 배경 → 카드 디자인으로 현대화. 링크 유형별 아이콘으로 시각적 힌트 제공 |
| Links List 그림자 |
box-shadow: 0 3px 8px 0 rgba(116, 129, 141, 0.1) |
hover 시에만 box-shadow: 0 2px 8px rgba(0,102,204,0.06) |
상시 그림자 제거로 시각적 무게 감소. hover 시에만 브랜드 컬러 그림자로 인터랙션 피드백 |
| Links List hover |
border-left-color: #2196f3 변경 |
border-color: rgba(0,102,204,0.2), transform: translateY(-1px) |
좌측선 색상 변경 대신 전체 border + 살짝 떠오르는 효과로 현대적인 hover 피드백 |
| Links List em |
color: #616161, border-left: 1px solid #e0e0e0 |
color: #aaa, font-size: 0.75em, border 제거 |
설명 텍스트의 시각적 비중 축소. 제목이 주 정보, 설명은 보조 정보라는 계층 명확화 |
| 항목 |
기본 (Wiki.js 소스) |
변경 |
의도 |
hr.footnotes-sep |
일반 hr 규칙 적용: margin: 1rem 0, background: #bdbdbd |
margin: 2.5em 0 1em, background: rgba(0,0,0,0.06) |
각주 구분선은 본문 종료를 나타냄. 위쪽 여백을 크게, 아래쪽은 짧게 하여 본문과 각주의 관계 시각화. 연한 색으로 보조적 역할 강조 |
| 각주 폰트 |
본문과 동일 |
0.85em, 색상 #666 |
각주는 보충 정보. 작은 크기 + 밝은 색상으로 본문 대비 시각적 위계 한 단계 낮춤 |
| 항목 |
기본 (Wiki.js 소스) |
변경 |
의도 |
기본 <mark> |
Wiki.js에 기본 <mark> 스타일 없음 (브라우저 기본 #ff0). .marker-yellow, .marker-blue 등 클래스 변형만 존재 |
rgba(255, 233, 100, 0.45), padding: 0.1em 0.3em, border-radius: 3px |
브라우저 기본 #ff0은 과도하게 선명. 반투명 소프트 노란색으로 강조하되 텍스트 가독성 유지 |
| 요소 |
기본 (Wiki.js 소스) |
변경 |
의도 |
| 브레드크럼 |
기본 Vuetify 크기 |
0.82rem, 기본 투명도 0.55 → hover 시 1 |
브레드크럼은 네비게이션 보조 요소. 평소에는 은은하게, 필요 시 hover로 확인하는 progressive disclosure |
| 페이지 제목 |
기본 Vuetify .headline |
clamp(1.8rem, 2.5vw + 0.8rem, 2.6rem), weight 800 |
페이지 제목은 최상위 시각 요소. 반응형 크기 + 굵은 weight로 강한 앵커 포인트 |
| TOC 카드 |
기본 Vuetify |
border-radius: 12px, 미세 border, 그림자 제거 |
Vuetify 기본 elevation → 플랫 디자인으로 본문 콘텐츠와 조화 |
| 선택 색상 |
브라우저 기본 |
rgba(0,102,204,0.12) |
텍스트 선택 시 브랜드 컬러 적용으로 일관된 색상 경험 |
| Mermaid 다이어그램 |
margin-top: 1rem, overflow: auto |
흰 배경 카드, border-radius: 12px, 미세 border + 그림자 |
다이어그램에 카드 프레임을 씌워 본문과 시각적으로 분리. 복잡한 SVG가 본문에 묻히지 않게 |
이 스타일은 대부분의 속성에 !important를 사용합니다. Wiki.js가 Vuetify 프레임워크의 인라인 스타일과 높은 specificity를 사용하기 때문에 이를 override하기 위한 불가피한 선택입니다.
- Vuetify 업데이트 주의: Wiki.js가 Vuetify 버전을 업데이트하면 셀렉터가 변경될 수 있습니다. 업데이트 후 스타일이 깨지는지 확인하세요.
- 단독 사용 전제: 다른 CSS Override와 병행 사용 시 충돌할 수 있습니다. 기존 CSS가 있다면 백업 후 교체하세요.
- 사이드바 우측 배치: 레이아웃 섹션에서 사이드바를 우측으로 이동시킵니다. 좌측 사이드바를 원하면
Layout (sidebar right) 섹션을 삭제하세요.
- Pretendard 폰트: CDN에서 로드합니다. 폰트 로드가 느린 환경에서는 FOUT(Flash of Unstyled Text)가 발생할 수 있습니다.
- 테스트 페이지: 스타일 적용 후 Wiki.js 마크다운 요소 테스트 페이지에서 모든 요소의 렌더링을 확인할 수 있습니다.
/* ============================================
Wiki.js Custom Theme — Modern Editorial v6
Refined readability + Modern UI/UX patterns
============================================ */
/* ----- Font Import ----- */
@import url(https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css);
@import url(https://fonts.googleapis.com/css2?family=Ubuntu+Mono&display=swap);
@import url(https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap);
/* ----- Base Font ----- */
.v-application {
font-family: Pretendard, "Pretendard JP", -apple-system, system-ui,
"Apple SD Gothic Neo", "Noto Sans KR", "Noto Sans CJK KR",
NanumBarunGothic, Roboto, "Segoe UI", "Malgun Gothic",
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif, emoji;
}
/* ----- Layout (sidebar right) ----- */
#app > div.v-application--wrap > main > div > div.container.pl-5.pt-4.container--fluid.grid-list-xl > div {
flex-direction: row-reverse;
}
.v-application--is-ltr .offset-xl-2 {
margin-left: 0 !important;
}
.v-application--is-ltr .offset-lg-3 {
margin-left: 0 !important;
}
/* ----- Code Block Font ----- */
.v-main .contents .prismjs > code {
font-family: 'JetBrains Mono', 'Ubuntu Mono', 'Roboto Mono', monospace;
font-size: 0.88rem;
}
/* ============================================
Main Content Background
============================================ */
.v-main {
background: #fafafa !important;
}
/* ============================================
Breadcrumbs
============================================ */
.breadcrumbs-nav {
font-size: 0.82rem !important;
opacity: 0.55 !important;
transition: opacity 0.25s ease !important;
}
.breadcrumbs-nav:hover {
opacity: 1 !important;
}
.breadcrumbs-nav .v-breadcrumbs__item {
font-weight: 500 !important;
}
/* ============================================
Page Header
============================================ */
.page-header .headline {
font-size: clamp(1.8rem, 2.5vw + 0.8rem, 2.6rem) !important;
font-weight: 800 !important;
letter-spacing: -0.04em !important;
line-height: 1.15 !important;
color: #111 !important;
margin-bottom: 0.3em !important;
}
.page-header .subtitle-1 {
font-size: 1.05rem !important;
color: #666 !important;
line-height: 1.55 !important;
font-weight: 400 !important;
letter-spacing: -0.01em !important;
}
/* ============================================
Body Typography
============================================ */
.v-main .contents {
max-width: 982px !important;
font-size: clamp(15.5px, 1rem + 0.15vw, 17px) !important;
line-height: 1.75 !important;
color: #2c2c2c !important;
letter-spacing: -0.014em !important;
word-break: keep-all !important;
overflow-wrap: break-word !important;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
text-rendering: optimizeLegibility !important;
}
/* ============================================
Headings
============================================ */
.v-main .contents h1 {
font-size: clamp(1.8em, 2vw + 1em, 2.4em) !important;
font-weight: 800 !important;
line-height: 1.15 !important;
margin: 0 0 0.75em !important;
color: #111 !important;
letter-spacing: -0.035em !important;
}
.v-main .contents h2 {
font-size: 1.55em !important;
font-weight: 720 !important;
line-height: 1.25 !important;
margin: 3.2em 0 0.8em !important;
padding-bottom: 0.5em !important;
color: #111 !important;
letter-spacing: -0.025em !important;
border-bottom: 1.5px solid rgba(0,0,0,0.06) !important;
}
/* First h2 reduced top margin */
.v-main .contents > h2:first-of-type {
margin-top: 1.5em !important;
}
.v-main .contents h3 {
font-size: 1.18em !important;
font-weight: 660 !important;
line-height: 1.3 !important;
margin: 2.6em 0 0.6em !important;
padding-bottom: 0.35em !important;
color: #222 !important;
letter-spacing: -0.018em !important;
border-bottom: 1px solid rgba(0,0,0,0.04) !important;
}
.v-main .contents h4 {
font-size: 1.04em !important;
font-weight: 620 !important;
line-height: 1.35 !important;
margin: 1.8em 0 0.4em !important;
padding-bottom: 0.25em !important;
color: #333 !important;
border-bottom: 1px solid rgba(0,0,0,0.03) !important;
}
.v-main .contents h5 {
font-size: 0.95em !important;
font-weight: 600 !important;
line-height: 1.4 !important;
margin: 1.5em 0 0.4em !important;
color: #444 !important;
letter-spacing: -0.01em !important;
}
.v-main .contents h6 {
font-size: 0.88em !important;
font-weight: 600 !important;
line-height: 1.4 !important;
margin: 1.3em 0 0.3em !important;
color: #666 !important;
letter-spacing: 0.02em !important;
text-transform: uppercase !important;
}
/* Heading anchor icon */
.v-main .contents h2 > a:first-child,
.v-main .contents h3 > a:first-child {
opacity: 0 !important;
transition: opacity 0.15s !important;
}
.v-main .contents h2:hover > a:first-child,
.v-main .contents h3:hover > a:first-child {
opacity: 0.35 !important;
}
/* ============================================
Paragraph
============================================ */
.v-main .contents p {
margin: 0 0 1.15em !important;
}
/* ============================================
Links (general) — no underline by default, underline on hover
============================================ */
.v-main .contents a:not(.v-btn):not(.btn) {
color: #0066cc !important;
text-decoration: none !important;
text-underline-offset: 3px !important;
text-decoration-thickness: 1.5px !important;
transition: all 0.15s ease !important;
}
.v-main .contents a:not(.v-btn):not(.btn):hover {
text-decoration: underline !important;
text-decoration-color: rgba(0,102,204,0.65) !important;
color: #0052a3 !important;
}
/* Links inside links-list cards — never underline (card hover handles feedback) */
.v-main .contents .links-list a,
.v-main .contents .links-list a:hover {
text-decoration: none !important;
}
/* ============================================
Links-list — mailto and other classless links
============================================ */
.v-main .contents .links-list > li > a:not(.is-internal-link):not(.is-external-link) {
display: flex !important;
align-items: center !important;
gap: 0.6em !important;
padding: 0.75em 1em 0.2em 1em !important;
margin: 0 -1em 0.15em calc(-24px - 0.6em) !important;
background: none !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
text-decoration: none !important;
font-weight: 600 !important;
color: #1a1a1a !important;
font-size: 1em !important;
transition: color 0.15s ease !important;
width: auto !important;
}
.v-main .contents .links-list > li > a:not(.is-internal-link):not(.is-external-link)::before {
content: "✉" !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 24px !important;
height: 24px !important;
background: rgba(0,102,204,0.08) !important;
color: #0066cc !important;
border-radius: 6px !important;
font-size: 0.8em !important;
font-weight: 700 !important;
flex-shrink: 0 !important;
transition: all 0.18s ease !important;
}
.v-main .contents .links-list > li:hover > a:not(.is-internal-link):not(.is-external-link)::before {
background: rgba(0,102,204,0.14) !important;
}
.v-main .contents .links-list > li > a:not(.is-internal-link):not(.is-external-link):hover {
color: #0066cc !important;
text-decoration: none !important;
background: none !important;
box-shadow: none !important;
border: none !important;
}
.v-main .contents .links-list > li > a:not(.is-internal-link):not(.is-external-link) em {
display: block !important;
font-style: normal !important;
font-size: 0.75em !important;
color: #aaa !important;
font-weight: 400 !important;
margin-top: 0.15em !important;
}
/* ============================================
Lists — unified with body text
============================================ */
.v-main .contents ul:not(.tabset-tabs):not(.links-list),
.v-main .contents ol {
margin: 0.4em 0 1.2em !important;
padding-left: 1.3em !important;
}
.v-main .contents ul:not(.tabset-tabs):not(.links-list) > li,
.v-main .contents ol > li {
margin-bottom: 0.35em !important;
line-height: 1.75 !important;
font-size: inherit !important;
color: inherit !important;
padding-left: 0.15em !important;
}
.v-main .contents li > ul,
.v-main .contents li > ol {
margin: 0.35em 0 !important;
}
/* ============================================
Inline Code
============================================ */
.v-main .contents code:not([class^="language-"]):not(.prismjs code) {
background: rgba(0,0,0,0.048) !important;
color: #c7254e !important;
padding: 0.2em 0.45em !important;
border-radius: 5px !important;
font-size: 0.86em !important;
font-family: 'JetBrains Mono', 'Ubuntu Mono', 'SFMono-Regular', 'Consolas', monospace !important;
border: none !important;
font-weight: 500 !important;
white-space: nowrap !important;
}
/* ============================================
Keyboard Keys (kbd)
============================================ */
.v-main .contents kbd {
background: #f4f4f4 !important;
color: #333 !important;
font-family: 'JetBrains Mono', 'Ubuntu Mono', 'SFMono-Regular', monospace !important;
font-size: 0.82em !important;
font-weight: 500 !important;
padding: 0.15em 0.5em !important;
border: 1px solid #d1d1d1 !important;
border-bottom-width: 2px !important;
border-radius: 5px !important;
box-shadow: 0 1px 0 rgba(0,0,0,0.06) !important;
white-space: nowrap !important;
vertical-align: baseline !important;
}
/* ============================================
Code Blocks
============================================ */
/* Code toolbar wrapper (Prism.js generates this around code blocks) */
.v-main .contents .code-toolbar {
margin: 1.6em 0 !important;
}
.v-main .contents .prismjs {
border-radius: 10px !important;
box-shadow: none !important;
border: 1px solid rgba(0,0,0,0.07) !important;
margin: 1.6em 0 !important;
overflow: hidden !important;
}
.v-main .contents .code-toolbar .prismjs {
margin: 0 !important;
}
.v-main .contents .prismjs > code {
font-size: 0.86em !important;
line-height: 1.7 !important;
}
/* Copy button in code blocks */
.v-main .contents .prismjs button {
opacity: 0 !important;
transition: opacity 0.2s !important;
}
.v-main .contents .prismjs:hover button {
opacity: 0.5 !important;
}
.v-main .contents .prismjs button:hover {
opacity: 1 !important;
}
/* Smooth scrollbar for code blocks */
.v-main .contents .prismjs::-webkit-scrollbar {
height: 6px !important;
}
.v-main .contents .prismjs::-webkit-scrollbar-track {
background: transparent !important;
}
.v-main .contents .prismjs::-webkit-scrollbar-thumb {
background: rgba(0,0,0,0.12) !important;
border-radius: 3px !important;
}
/* ============================================
Blockquote
============================================ */
.v-main .contents blockquote {
border-left: 3px solid #d4d4d4 !important;
border-radius: 0 !important;
padding: 0.15em 0 0.15em 1.2em !important;
margin: 1.4em 0 !important;
background: transparent !important;
box-shadow: none !important;
color: #555 !important;
font-style: normal !important;
}
.v-main .contents blockquote::before {
display: none !important;
}
/* Callouts — refined with subtle gradient */
.v-main .contents blockquote.is-info,
.v-main .contents blockquote.is-warning,
.v-main .contents blockquote.is-danger,
.v-main .contents blockquote.is-success {
border: 1px solid !important;
border-left-width: 3.5px !important;
border-radius: 10px !important;
padding: 1em 1.3em !important;
margin: 1.6em 0 !important;
font-style: normal !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.02) !important;
}
.v-main .contents blockquote.is-info {
background: linear-gradient(135deg, #f0f7ff 0%, #f5f9ff 100%) !important;
border-color: #dce8ff !important;
border-left-color: #0066cc !important;
color: #1a1a1a !important;
}
.v-main .contents blockquote.is-warning {
background: linear-gradient(135deg, #fffbeb 0%, #fffdf5 100%) !important;
border-color: #fef3c7 !important;
border-left-color: #d97706 !important;
color: #1a1a1a !important;
}
.v-main .contents blockquote.is-danger {
background: linear-gradient(135deg, #fef2f2 0%, #fff5f5 100%) !important;
border-color: #fecaca !important;
border-left-color: #ef4444 !important;
color: #1a1a1a !important;
}
.v-main .contents blockquote.is-success {
background: linear-gradient(135deg, #f0fdf4 0%, #f5fff8 100%) !important;
border-color: #dcfce7 !important;
border-left-color: #22c55e !important;
color: #1a1a1a !important;
}
/* ============================================
Tables
============================================ */
.v-main .contents table {
margin: 1.8em 0 !important;
border: none !important;
box-shadow: none !important;
border-radius: 0 !important;
border-collapse: collapse !important;
width: 100% !important;
}
.v-main .contents table th {
background: transparent !important;
color: #888 !important;
font-weight: 600 !important;
font-size: 0.78em !important;
padding: 0.7em 1em !important;
border-bottom: 2px solid rgba(0,0,0,0.08) !important;
text-align: left !important;
text-transform: uppercase !important;
letter-spacing: 0.06em !important;
}
.v-main .contents table td {
padding: 0.8em 1em !important;
border-bottom: 1px solid rgba(0,0,0,0.04) !important;
border-right: none !important;
border-left: none !important;
background: transparent !important;
font-size: 0.94em !important;
vertical-align: top !important;
}
.v-main .contents table tbody tr:last-child td {
border-bottom: none !important;
}
.v-main .contents table tbody tr {
transition: background 0.12s !important;
}
.v-main .contents table tbody tr:hover td {
background: rgba(0,0,0,0.015) !important;
}
/* ============================================
HR / Images / Details
============================================ */
.v-main .contents hr {
margin: 3.5em 0 !important;
border: none !important;
height: 1px !important;
background: linear-gradient(90deg, transparent, rgba(0,0,0,0.08) 20%, rgba(0,0,0,0.08) 80%, transparent) !important;
}
.v-main .contents img {
border-radius: 10px !important;
margin: 1.4em 0 !important;
box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
}
.v-main .contents details {
margin: 1.5em 0 !important;
border: 1px solid rgba(0,0,0,0.07) !important;
border-radius: 10px !important;
background: #fff !important;
}
.v-main .contents details > summary {
padding: 0.8em 1.1em !important;
font-weight: 600 !important;
cursor: pointer !important;
font-size: 0.95em !important;
user-select: none !important;
}
.v-main .contents details[open] > summary {
border-bottom: 1px solid rgba(0,0,0,0.05) !important;
}
/* ============================================
Mermaid Diagrams
============================================ */
.v-main .contents .diagram {
margin: 2em 0 !important;
padding: 2em 1.5em !important;
background: #fff !important;
border-radius: 12px !important;
border: 1px solid rgba(0,0,0,0.06) !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.03) !important;
overflow-x: auto !important;
}
.v-main .contents .mermaid {
margin: 2em 0 !important;
padding: 2em 1.5em !important;
background: #fff !important;
border-radius: 12px !important;
border: 1px solid rgba(0,0,0,0.06) !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.03) !important;
overflow-x: auto !important;
}
.v-main .contents .mermaid svg {
display: block !important;
margin: 0 auto !important;
}
/* ============================================
Links-list — Modern Card Navigation
============================================ */
.v-main .contents .links-list {
display: flex !important;
flex-direction: column !important;
gap: 6px !important;
margin: 1em 0 1.8em !important;
padding: 0 !important;
border: none !important;
background: transparent !important;
list-style: none !important;
}
.v-main .contents .links-list > li {
display: flex !important;
flex-direction: column !important;
list-style: none !important;
margin: 0 !important;
padding: 0 1em 0.7em calc(1em + 24px + 0.6em) !important;
line-height: 1.45 !important;
font-size: 0.92em !important;
color: #888 !important;
border-radius: 10px !important;
transition: all 0.18s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
background: #fff !important;
border: 1px solid rgba(0,0,0,0.06) !important;
overflow: hidden !important;
}
.v-main .contents .links-list > li:hover {
background: #fff !important;
border-color: rgba(0,102,204,0.2) !important;
box-shadow: 0 2px 8px rgba(0,102,204,0.06) !important;
transform: translateY(-1px) !important;
}
.v-main .contents .links-list > li > br {
display: none !important;
}
/* Internal links — card-style navigation */
.v-main .contents .links-list a.is-internal-link {
display: flex !important;
align-items: center !important;
gap: 0.6em !important;
padding: 0.75em 1em 0.2em 1em !important;
margin: 0 -1em 0.15em calc(-24px - 0.6em) !important;
background: none !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
text-decoration: none !important;
font-weight: 600 !important;
color: #1a1a1a !important;
font-size: 1em !important;
transition: color 0.15s ease !important;
width: auto !important;
}
.v-main .contents .links-list a.is-internal-link::before {
content: "→" !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 24px !important;
height: 24px !important;
background: rgba(0,102,204,0.08) !important;
color: #0066cc !important;
border-radius: 6px !important;
font-size: 0.8em !important;
font-weight: 700 !important;
flex-shrink: 0 !important;
transition: all 0.18s ease !important;
}
.v-main .contents .links-list > li:hover a.is-internal-link::before {
background: rgba(0,102,204,0.14) !important;
transform: translateX(2px) !important;
}
.v-main .contents .links-list a.is-internal-link:hover {
color: #0066cc !important;
text-decoration: none !important;
background: none !important;
box-shadow: none !important;
border: none !important;
}
/* Show path as subtitle */
.v-main .contents .links-list a.is-internal-link em {
display: block !important;
font-style: normal !important;
font-size: 0.75em !important;
color: #aaa !important;
font-weight: 400 !important;
margin-top: 0.15em !important;
letter-spacing: 0.01em !important;
}
/* External links inside links-list */
.v-main .contents .links-list a.is-external-link {
display: flex !important;
align-items: center !important;
gap: 0.6em !important;
padding: 0.75em 1em 0.2em 1em !important;
margin: 0 -1em 0.15em calc(-24px - 0.6em) !important;
background: none !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
text-decoration: none !important;
font-weight: 600 !important;
color: #1a1a1a !important;
font-size: 1em !important;
transition: color 0.15s ease !important;
width: auto !important;
}
.v-main .contents .links-list a.is-external-link::before {
content: "↗" !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 24px !important;
height: 24px !important;
background: rgba(0,102,204,0.08) !important;
color: #0066cc !important;
border-radius: 6px !important;
font-size: 0.8em !important;
font-weight: 700 !important;
flex-shrink: 0 !important;
transition: all 0.18s ease !important;
}
.v-main .contents .links-list > li:hover a.is-external-link::before {
background: rgba(0,102,204,0.14) !important;
transform: translateX(2px) !important;
}
.v-main .contents .links-list a.is-external-link:hover {
color: #0066cc !important;
text-decoration: none !important;
background: none !important;
box-shadow: none !important;
border: none !important;
}
.v-main .contents .links-list a.is-external-link::after {
content: none !important;
}
.v-main .contents .links-list a.is-external-link em {
font-style: normal !important;
font-size: 0.75em !important;
color: #aaa !important;
font-weight: 400 !important;
margin-left: 0.3em !important;
}
/* ============================================
External Links — inline style (outside links-list)
============================================ */
.v-main .contents a.is-external-link,
.v-main .contents li > a.is-external-link,
.v-main .contents p > a.is-external-link {
display: inline !important;
padding: 0 !important;
background: none !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
margin: 0 !important;
color: #0066cc !important;
font-weight: inherit !important;
text-decoration: none !important;
transition: all 0.15s ease !important;
flex-direction: unset !important;
align-items: unset !important;
gap: unset !important;
}
.v-main .contents a.is-external-link:hover,
.v-main .contents li > a.is-external-link:hover,
.v-main .contents p > a.is-external-link:hover {
text-decoration: underline !important;
text-decoration-color: rgba(0,102,204,0.65) !important;
color: #0052a3 !important;
background: none !important;
border: none !important;
box-shadow: none !important;
}
.v-main .contents a.is-external-link::after,
.v-main .contents li > a.is-external-link::after,
.v-main .contents p > a.is-external-link::after {
content: " ↗" !important;
font-size: 0.7em !important;
opacity: 0.45 !important;
vertical-align: super !important;
}
.v-main .contents a.is-external-link em {
font-style: normal !important;
font-size: 0.78em !important;
color: #aaa !important;
font-weight: 400 !important;
margin-left: 0.3em !important;
}
/* ============================================
Table of Contents (right sidebar)
============================================ */
.page-col-sd .page-toc-card {
border-radius: 12px !important;
border: 1px solid rgba(0,0,0,0.06) !important;
box-shadow: none !important;
background: #fff !important;
overflow: hidden !important;
}
.page-col-sd .page-toc-card .overline {
font-size: 0.7rem !important;
font-weight: 700 !important;
letter-spacing: 0.08em !important;
color: #999 !important;
}
.page-col-sd .v-list-item {
min-height: 32px !important;
border-radius: 6px !important;
margin: 1px 4px !important;
}
.page-col-sd .v-list-item:hover {
background: rgba(0,0,0,0.03) !important;
}
.page-col-sd .v-list-item__title {
font-size: 0.82rem !important;
font-weight: 450 !important;
color: #444 !important;
line-height: 1.4 !important;
}
.page-col-sd .v-list-item .v-icon {
font-size: 14px !important;
color: #ccc !important;
}
/* ============================================
Page Actions
============================================ */
.page-col-sd .v-btn {
border-radius: 8px !important;
text-transform: none !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
}
/* ============================================
Page Info Footer
============================================ */
.page-col-sd .page-info {
border-radius: 10px !important;
border: 1px solid rgba(0,0,0,0.05) !important;
box-shadow: none !important;
}
/* ============================================
Task Lists (Checkboxes)
============================================ */
.v-main .contents ul.contains-task-list {
list-style: none !important;
padding-left: 0.3em !important;
}
.v-main .contents ul.contains-task-list > li {
list-style: none !important;
padding-left: 0.15em !important;
}
.v-main .contents ul.contains-task-list > li::before,
.v-main .contents ul.contains-task-list > li::marker {
content: none !important;
display: none !important;
}
.v-main .contents ul.contains-task-list input[type="checkbox"] {
accent-color: #0066cc !important;
width: 15px !important;
height: 15px !important;
margin-right: 0.5em !important;
vertical-align: -1px !important;
cursor: default !important;
}
/* ============================================
Tabset
============================================ */
.v-main .contents .tabset {
margin: 1.8em 0 !important;
border-radius: 10px !important;
border: 1px solid rgba(0,0,0,0.07) !important;
box-shadow: none !important;
overflow: hidden !important;
background: #fff !important;
}
.v-main .contents .tabset .tabset-tabs {
border-bottom: 1px solid rgba(0,0,0,0.06) !important;
background: #fafafa !important;
}
.v-main .contents .tabset .tabset-tabs li {
font-size: 0.88em !important;
font-weight: 550 !important;
padding: 0.75em 1.2em !important;
border-bottom: 2px solid transparent !important;
transition: all 0.15s ease !important;
color: #666 !important;
cursor: pointer !important;
}
.v-main .contents .tabset .tabset-tabs li.is-active,
.v-main .contents .tabset .tabset-tabs li[class*="active"] {
color: #0066cc !important;
border-bottom-color: #0066cc !important;
background: #fff !important;
}
.v-main .contents .tabset .tabset-content {
padding: 1.2em 1.4em !important;
}
/* ============================================
Grid List
============================================ */
.v-main .contents ul.grid-list {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
gap: 8px !important;
margin: 1em 0 1.8em !important;
padding: 0 !important;
list-style: none !important;
}
.v-main .contents ul.grid-list > li {
background: #fff !important;
border: 1px solid rgba(0,0,0,0.06) !important;
border-radius: 8px !important;
padding: 0.8em 1em !important;
margin: 0 !important;
font-size: 0.94em !important;
transition: all 0.18s ease !important;
list-style: none !important;
}
.v-main .contents ul.grid-list > li:hover {
border-color: rgba(0,0,0,0.12) !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
}
/* ============================================
Highlight (mark)
============================================ */
.v-main .contents mark {
background: rgba(255, 233, 100, 0.45) !important;
color: inherit !important;
padding: 0.1em 0.3em !important;
border-radius: 3px !important;
}
/* ============================================
Table Container + Dense Table
============================================ */
.v-main .contents .table-container {
margin: 1.6em 0 !important;
overflow-x: auto !important;
}
.v-main .contents .table-container table {
margin: 0 !important;
}
.v-main .contents table.dense th {
padding: 0.45em 0.7em !important;
font-size: 0.72em !important;
}
.v-main .contents table.dense td {
padding: 0.45em 0.7em !important;
font-size: 0.88em !important;
}
/* ============================================
Footnotes
============================================ */
.v-main .contents hr.footnotes-sep {
margin: 2.5em 0 1em !important;
background: rgba(0,0,0,0.06) !important;
}
.v-main .contents section.footnotes {
font-size: 0.85em !important;
color: #666 !important;
line-height: 1.65 !important;
}
.v-main .contents section.footnotes ol {
padding-left: 1.5em !important;
}
.v-main .contents section.footnotes li {
margin-bottom: 0.5em !important;
}
.v-main .contents section.footnotes a {
font-size: 0.9em !important;
}
/* ============================================
Selection color
============================================ */
.v-main .contents ::selection {
background: rgba(0,102,204,0.12) !important;
color: inherit !important;
}
/* ============================================
Responsive
============================================ */
@media (max-width: 768px) {
.v-main .contents {
line-height: 1.65 !important;
}
.v-main .contents h2 {
margin-top: 2.2em !important;
}
.v-main .contents .diagram {
padding: 0.8em !important;
}
.v-main .contents .links-list > li {
border-radius: 8px !important;
}
}