"미디어위키:Common.css"의 두 판 사이의 차이
| 58번째 줄: | 58번째 줄: | ||
.divTable .cell:nth-child(3) { | .divTable .cell:nth-child(3) { | ||
flex: 1 1 auto; | flex: 1 1 auto; | ||
| + | } | ||
| + | |||
| + | /* ===== 스토리 목차: 탭 스타일 ===== */ | ||
| + | .story-toc-tabs { | ||
| + | border: none; | ||
| + | background: transparent; | ||
| + | } | ||
| + | |||
| + | .story-toc-tabs > tbody > tr > td, | ||
| + | .story-toc-tabs > tbody > tr > th { | ||
| + | border: none; | ||
| + | padding: 6px; | ||
| + | vertical-align: top; | ||
| + | } | ||
| + | |||
| + | /* 제목 영역 */ | ||
| + | .story-toc-title { | ||
| + | font-weight: 700; | ||
| + | font-size: 16px; | ||
| + | padding: 10px 6px; | ||
| + | text-align: left; | ||
| + | } | ||
| + | |||
| + | /* 탭 컨테이너(각 부) */ | ||
| + | .story-toc-tabs .story-tab { | ||
| + | border: 1px solid #dcdcdc; | ||
| + | border-bottom: none; | ||
| + | background: #f6f7f8; | ||
| + | border-radius: 8px 8px 0 0; | ||
| + | padding: 8px 10px; | ||
| + | text-align: center; | ||
| + | cursor: pointer; | ||
| + | box-sizing: border-box; | ||
| + | min-height: 44px; | ||
| + | } | ||
| + | |||
| + | /* “부” 텍스트(탭 라벨) */ | ||
| + | .story-toc-tabs .story-tab > p, | ||
| + | .story-toc-tabs .story-tab > b, | ||
| + | .story-toc-tabs .story-tab > strong { | ||
| + | margin: 0; | ||
| + | } | ||
| + | |||
| + | /* mw-collapsible의 기본 토글 아이콘/문구가 보이면 숨김 처리(스킨/버전에 따라 다름) */ | ||
| + | .story-toc-tabs .story-tab .mw-collapsible-toggle { | ||
| + | display: none; | ||
| + | } | ||
| + | |||
| + | /* 펼쳐지는 패널(탭 내용) */ | ||
| + | .story-toc-tabs .story-panel { | ||
| + | border: 1px solid #dcdcdc; | ||
| + | border-top: 1px solid #dcdcdc; | ||
| + | background: #ffffff; | ||
| + | padding: 10px 12px; | ||
| + | border-radius: 0 0 8px 8px; | ||
| + | margin-top: 8px; | ||
| + | } | ||
| + | |||
| + | /* 펼쳐졌을 때(선택된 탭처럼 보이게) */ | ||
| + | .story-toc-tabs .story-tab.mw-collapsible:not(.mw-collapsed) { | ||
| + | background: #ffffff; | ||
| + | border-color: #cfcfcf; | ||
| + | position: relative; | ||
| + | z-index: 2; | ||
| + | } | ||
| + | |||
| + | /* 펼쳐졌을 때 탭 아래 경계가 패널과 자연스럽게 이어지게 */ | ||
| + | .story-toc-tabs .story-tab.mw-collapsible:not(.mw-collapsed) .story-panel { | ||
| + | margin-top: 10px; | ||
| + | } | ||
| + | |||
| + | /* 패널 내부 리스트 여백 정리 */ | ||
| + | .story-toc-tabs .story-panel ul { | ||
| + | margin: 0.2em 0 0.2em 1.2em; | ||
| + | } | ||
| + | .story-toc-tabs .story-panel li { | ||
| + | margin: 0.15em 0; | ||
} | } | ||
2025년 12월 17일 (수) 17:53 판
/* 이 CSS 설정은 모든 스킨에 적용됩니다 */
.episode-filter-input {
box-sizing: border-box;
width: 100%;
max-width: 100%;
border: 1px solid #ddd;
padding: 8px 10px;
min-height: 32px;
margin-bottom: 12px;
font-size: 14px;
border-radius: 4px;
outline: none;
}
/* placeholder 효과 */
.episode-filter-input:empty:before {
content: attr(data-placeholder);
color: #aaa;
}
.divTable {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
.divTable .row {
display: flex;
border-bottom: 1px solid #eee;
}
.divTable .thead .row {
background-color: #f5f5f5;
font-weight: 600;
}
.divTable .header,
.divTable .cell {
padding: 8px 10px;
border-right: 1px solid #eee;
}
.divTable .header:last-child,
.divTable .cell:last-child {
border-right: none;
}
.divTable .header:nth-child(1),
.divTable .cell:nth-child(1) {
flex: 0 0 120px;
}
.divTable .header:nth-child(2),
.divTable .cell:nth-child(2) {
flex: 0 0 260px;
}
.divTable .header:nth-child(3),
.divTable .cell:nth-child(3) {
flex: 1 1 auto;
}
/* ===== 스토리 목차: 탭 스타일 ===== */
.story-toc-tabs {
border: none;
background: transparent;
}
.story-toc-tabs > tbody > tr > td,
.story-toc-tabs > tbody > tr > th {
border: none;
padding: 6px;
vertical-align: top;
}
/* 제목 영역 */
.story-toc-title {
font-weight: 700;
font-size: 16px;
padding: 10px 6px;
text-align: left;
}
/* 탭 컨테이너(각 부) */
.story-toc-tabs .story-tab {
border: 1px solid #dcdcdc;
border-bottom: none;
background: #f6f7f8;
border-radius: 8px 8px 0 0;
padding: 8px 10px;
text-align: center;
cursor: pointer;
box-sizing: border-box;
min-height: 44px;
}
/* “부” 텍스트(탭 라벨) */
.story-toc-tabs .story-tab > p,
.story-toc-tabs .story-tab > b,
.story-toc-tabs .story-tab > strong {
margin: 0;
}
/* mw-collapsible의 기본 토글 아이콘/문구가 보이면 숨김 처리(스킨/버전에 따라 다름) */
.story-toc-tabs .story-tab .mw-collapsible-toggle {
display: none;
}
/* 펼쳐지는 패널(탭 내용) */
.story-toc-tabs .story-panel {
border: 1px solid #dcdcdc;
border-top: 1px solid #dcdcdc;
background: #ffffff;
padding: 10px 12px;
border-radius: 0 0 8px 8px;
margin-top: 8px;
}
/* 펼쳐졌을 때(선택된 탭처럼 보이게) */
.story-toc-tabs .story-tab.mw-collapsible:not(.mw-collapsed) {
background: #ffffff;
border-color: #cfcfcf;
position: relative;
z-index: 2;
}
/* 펼쳐졌을 때 탭 아래 경계가 패널과 자연스럽게 이어지게 */
.story-toc-tabs .story-tab.mw-collapsible:not(.mw-collapsed) .story-panel {
margin-top: 10px;
}
/* 패널 내부 리스트 여백 정리 */
.story-toc-tabs .story-panel ul {
margin: 0.2em 0 0.2em 1.2em;
}
.story-toc-tabs .story-panel li {
margin: 0.15em 0;
}