"미디어위키:Common.css"의 두 판 사이의 차이
| (같은 사용자의 중간 판 3개는 보이지 않습니다) | |||
| 58번째 줄: | 58번째 줄: | ||
.divTable .cell:nth-child(3) { | .divTable .cell:nth-child(3) { | ||
flex: 1 1 auto; | flex: 1 1 auto; | ||
| + | } | ||
| + | |||
| + | /* ===== 스토리 목차: 탭 스타일 ===== */ | ||
| + | /* ===== 스토리 목차: 탭 UI ===== */ | ||
| + | .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: 10px 10px 0 0; | ||
| + | padding: 0; | ||
| + | text-align: center; | ||
| + | box-sizing: border-box; | ||
| + | } | ||
| + | |||
| + | /* 탭 라벨을 버튼처럼 */ | ||
| + | .story-toc-tabs .story-tab-label { | ||
| + | display: block; | ||
| + | padding: 10px 10px; | ||
| + | font-weight: 700; | ||
| + | cursor: pointer; | ||
| + | user-select: none; | ||
| + | } | ||
| + | |||
| + | /* 기본 collapsible 토글(스킨/버전에 따라 다르게 표시됨) 숨김 */ | ||
| + | .story-toc-tabs .story-tab .mw-collapsible-toggle, | ||
| + | .story-toc-tabs .story-tab .mw-collapsible-toggle-default { | ||
| + | display: none !important; | ||
| + | } | ||
| + | |||
| + | /* 패널 */ | ||
| + | .story-toc-tabs .story-panel { | ||
| + | border-top: 1px solid #dcdcdc; | ||
| + | background: #ffffff; | ||
| + | padding: 10px 12px; | ||
| + | border-radius: 0 0 10px 10px; | ||
| + | text-align: left; | ||
| + | } | ||
| + | |||
| + | /* 열린 탭(선택 상태) */ | ||
| + | .story-toc-tabs .story-tab:not(.mw-collapsed) { | ||
| + | background: #ffffff; | ||
| + | border-color: #cfcfcf; | ||
| + | } | ||
| + | |||
| + | /* 리스트 여백 */ | ||
| + | .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일 (수) 18:18 기준 최신판
/* 이 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;
}
/* ===== 스토리 목차: 탭 스타일 ===== */
/* ===== 스토리 목차: 탭 UI ===== */
.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: 10px 10px 0 0;
padding: 0;
text-align: center;
box-sizing: border-box;
}
/* 탭 라벨을 버튼처럼 */
.story-toc-tabs .story-tab-label {
display: block;
padding: 10px 10px;
font-weight: 700;
cursor: pointer;
user-select: none;
}
/* 기본 collapsible 토글(스킨/버전에 따라 다르게 표시됨) 숨김 */
.story-toc-tabs .story-tab .mw-collapsible-toggle,
.story-toc-tabs .story-tab .mw-collapsible-toggle-default {
display: none !important;
}
/* 패널 */
.story-toc-tabs .story-panel {
border-top: 1px solid #dcdcdc;
background: #ffffff;
padding: 10px 12px;
border-radius: 0 0 10px 10px;
text-align: left;
}
/* 열린 탭(선택 상태) */
.story-toc-tabs .story-tab:not(.mw-collapsed) {
background: #ffffff;
border-color: #cfcfcf;
}
/* 리스트 여백 */
.story-toc-tabs .story-panel ul {
margin: 0.2em 0 0.2em 1.2em;
}
.story-toc-tabs .story-panel li {
margin: 0.15em 0;
}