Mobile.css: 두 판 사이의 차이
CABAL WIKI
편집 요약 없음 |
편집 요약 없음 |
||
1번째 줄: | 1번째 줄: | ||
@media screen and (max-width: 768px) { | @media screen and (max-width: 768px) { | ||
/* 📌 목차 스타일 + 겹침 해제 */ | |||
/* 📌 목차 스타일 */ | |||
#toc, .toc { | #toc, .toc { | ||
float: none !important; | float: none !important; | ||
clear: both !important; | |||
position: relative !important; | position: relative !important; | ||
width: 100% !important; | width: 100% !important; | ||
margin: 1.5em 0 !important; | |||
margin: | |||
padding: 12px !important; | padding: 12px !important; | ||
background: #f9f9f9 !important; | background: #f9f9f9 !important; | ||
border: 1px solid #ccc !important; | border: 1px solid #ccc !important; | ||
box-sizing: border-box !important; | box-sizing: border-box !important; | ||
z-index: 1 !important; | z-index: 1 !important; | ||
} | } | ||
/* 📌 목차 아래 | /* 📌 목차 바로 아래 요소 띄우기 (다양한 상황 대응) */ | ||
#toc + *, | |||
.toc + *, | |||
margin-top: | #toc ~ h2, | ||
.toc ~ h2, | |||
#toc ~ p, | |||
.toc ~ p { | |||
margin-top: 1.5em !important; | |||
clear: both !important; | clear: both !important; | ||
display: block !important; | display: block !important; | ||
} | } | ||
/* 📌 | /* 📌 float 요소 전반 초기화 (겹침 차단용) */ | ||
.thumb, .infobox, .navbox, .wikitable, table { | |||
float: none !important; | float: none !important; | ||
clear: both !important; | clear: both !important; | ||
display: block !important; | display: block !important; | ||
margin: | width: 100% !important; | ||
margin: 1.2em 0 !important; | |||
box-sizing: border-box; | box-sizing: border-box; | ||
} | } | ||
/* 📌 리스트 | /* 📌 폰트 사이즈 및 리스트 정리 */ | ||
body { | |||
font-size: 14px !important; | |||
} | |||
ul, ol { | ul, ol { | ||
padding-left: 1.2em !important; | padding-left: 1.2em !important; | ||
} | } | ||
li { | li { | ||
line-height: 1.6em !important; | line-height: 1.6em !important; | ||
word-break: break-word; | word-break: break-word; | ||
} | } | ||
71번째 줄: | 54번째 줄: | ||
#mw-panel, #site-navigation, .sidebar { | #mw-panel, #site-navigation, .sidebar { | ||
display: none !important; | display: none !important; | ||
} | } | ||
} | } |
2025년 7월 25일 (금) 06:40 판
@media screen and (max-width: 768px) { /* 📌 목차 스타일 + 겹침 해제 */ #toc, .toc { float: none !important; clear: both !important; position: relative !important; width: 100% !important; margin: 1.5em 0 !important; padding: 12px !important; background: #f9f9f9 !important; border: 1px solid #ccc !important; box-sizing: border-box !important; z-index: 1 !important; } /* 📌 목차 바로 아래 요소 띄우기 (다양한 상황 대응) */ #toc + *, .toc + *, #toc ~ h2, .toc ~ h2, #toc ~ p, .toc ~ p { margin-top: 1.5em !important; clear: both !important; display: block !important; } /* 📌 float 요소 전반 초기화 (겹침 차단용) */ .thumb, .infobox, .navbox, .wikitable, table { float: none !important; clear: both !important; display: block !important; width: 100% !important; margin: 1.2em 0 !important; box-sizing: border-box; } /* 📌 폰트 사이즈 및 리스트 정리 */ body { font-size: 14px !important; } ul, ol { padding-left: 1.2em !important; } li { line-height: 1.6em !important; word-break: break-word; } /* 📌 사이드바 감추기 */ #mw-panel, #site-navigation, .sidebar { display: none !important; } }