미디어위키:Gadget-ArticleToc.css: 두 판 사이의 차이

식물 vs 좀비 위키
Brokey (토론 | 기여)
사무관, 인터페이스 관리자, 관리자
431 편집
새 문서: →MediaWiki:Gadget-ArticleToc.css * 데스크톱/모바일 공통 문서 목차 디자인: →문단 제목의 잔디밭 아래 여백 축소: .skin-vector-legacy .mw-parser-output .mw-heading2, .skin-vector-legacy .mw-parser-output h2.pvz-grass-heading, .skin-timeless .mw-parser-output .mw-heading2, .skin-timeless .mw-parser-output h2.pvz-grass-heading { margin-bottom: 0.65em !important; } /* 기본 목차의 외형만 교체하고 링크·번호·접기 기능은 그...
 
편집 요약 없음
 
(같은 사용자의 중간 판 6개는 보이지 않습니다)
2번째 줄: 2번째 줄:
  * 데스크톱/모바일 공통 문서 목차 디자인
  * 데스크톱/모바일 공통 문서 목차 디자인
  */
  */
/* 문단 제목의 잔디밭 아래 여백 축소 */
.skin-vector-legacy .mw-parser-output .mw-heading2,
.skin-vector-legacy .mw-parser-output h2.pvz-grass-heading,
.skin-timeless .mw-parser-output .mw-heading2,
.skin-timeless .mw-parser-output h2.pvz-grass-heading {
margin-bottom: 0.65em !important;
}


/* 기본 목차의 외형만 교체하고 링크·번호·접기 기능은 그대로 유지 */
/* 기본 목차의 외형만 교체하고 링크·번호·접기 기능은 그대로 유지 */
17번째 줄: 9번째 줄:
.skin-timeless .mw-parser-output .toc {
.skin-timeless .mw-parser-output .toc {
display: block !important;
display: block !important;
clear: both !important;
float: none !important;
float: none !important;
width: 100% !important;
width: fit-content !important;
max-width: 100% !important;
max-width: min(300px, 100%) !important;
margin: 1.15rem 0 1.5rem !important;
margin: 0.8rem 0 1.1rem !important;
padding: 1.55rem 1.75rem 1.6rem !important;
padding: 0.78rem 0.88rem 0.86rem !important;
border: 2px solid #b8aa97 !important;
border: 1px solid #b8aa97 !important;
border-radius: 7px !important;
border-radius: 7px !important;
box-sizing: border-box !important;
box-sizing: border-box !important;
41번째 줄: 32번째 줄:
align-items: center !important;
align-items: center !important;
justify-content: space-between !important;
justify-content: space-between !important;
gap: 1rem !important;
gap: 0.55rem !important;
width: 100% !important;
width: 100% !important;
margin: 0 0 1rem !important;
margin: 0 0 0.58rem !important;
padding: 0 !important;
padding: 0 !important;
border: 0 !important;
border: 0 !important;
61번째 줄: 52번째 줄:
color: #3f2113 !important;
color: #3f2113 !important;
font-family:
font-family:
"SB Aggro B",
"SB Aggro M",
"SB 어그로 B",
"SB 어그로 M",
"SB Aggro",
"SB Aggro",
"SB 어그로",
"SB 어그로",
sans-serif !important;
sans-serif !important;
font-size: 1.38rem !important;
font-size: 1.02rem !important;
font-weight: 700 !important;
font-weight: 500 !important;
line-height: 1.25 !important;
line-height: 1.25 !important;
text-align: left !important;
text-align: left !important;
104번째 줄: 95번째 줄:
align-items: center !important;
align-items: center !important;
justify-content: center !important;
justify-content: center !important;
min-width: 78px !important;
min-width: 54px !important;
min-height: 48px !important;
min-height: 32px !important;
margin: 0 !important;
margin: 0 !important;
padding: 0.62rem 1rem !important;
padding: 0.36rem 0.55rem !important;
border: 2px solid #b8aa97 !important;
border: 1px solid #b8aa97 !important;
border-radius: 6px !important;
border-radius: 6px !important;
box-sizing: border-box !important;
box-sizing: border-box !important;
background: #fff9ed !important;
background: #f1dfc8 !important;
color: #3f2113 !important;
color: #3f2113 !important;
font-family:
font-family:
134번째 줄: 125번째 줄:
content: "접기" !important;
content: "접기" !important;
display: block !important;
display: block !important;
font-size: 1rem !important;
font-size: 0.76rem !important;
line-height: 1 !important;
line-height: 1 !important;
}
}
157번째 줄: 148번째 줄:
.skin-timeless .mw-parser-output #toc .toctogglelabel:hover,
.skin-timeless .mw-parser-output #toc .toctogglelabel:hover,
.skin-timeless .mw-parser-output .toc .toctogglelabel:hover {
.skin-timeless .mw-parser-output .toc .toctogglelabel:hover {
background: #f8ecd6 !important;
background: #e8cfb3 !important;
text-decoration: none !important;
text-decoration: none !important;
}
}
168번째 줄: 159번째 줄:
margin: 0 !important;
margin: 0 !important;
padding: 0 !important;
padding: 0 !important;
max-height: 1200px !important;
overflow: hidden !important;
transition: max-height 200ms ease !important;
list-style: none !important;
list-style: none !important;
}
}
183번째 줄: 177번째 줄:
.skin-timeless .mw-parser-output #toc ul ul,
.skin-timeless .mw-parser-output #toc ul ul,
.skin-timeless .mw-parser-output .toc ul ul {
.skin-timeless .mw-parser-output .toc ul ul {
margin: 0.42rem 0 0.18rem 1.75rem !important;
margin: 0.24rem 0 0.1rem 0.95rem !important;
padding: 0 !important;
padding: 0 !important;
}
}
191번째 줄: 185번째 줄:
.skin-timeless .mw-parser-output #toc li,
.skin-timeless .mw-parser-output #toc li,
.skin-timeless .mw-parser-output .toc li {
.skin-timeless .mw-parser-output .toc li {
margin: 0.38rem 0 !important;
margin: 0.2rem 0 !important;
padding: 0 !important;
padding: 0 !important;
background: transparent !important;
background: transparent !important;
203번째 줄: 197번째 줄:
display: inline-grid !important;
display: inline-grid !important;
grid-template-columns: max-content minmax(0, 1fr) !important;
grid-template-columns: max-content minmax(0, 1fr) !important;
gap: 0.7rem !important;
gap: 0.42rem !important;
align-items: baseline !important;
align-items: baseline !important;
max-width: 100% !important;
max-width: 100% !important;
214번째 줄: 208번째 줄:
"SB 어그로",
"SB 어그로",
sans-serif !important;
sans-serif !important;
font-size: 1rem !important;
font-size: 0.82rem !important;
font-weight: 300 !important;
font-weight: 300 !important;
line-height: 1.45 !important;
line-height: 1.35 !important;
text-decoration: none !important;
text-decoration: none !important;
text-shadow: none !important;
text-shadow: none !important;
251번째 줄: 245번째 줄:
color: inherit !important;
color: inherit !important;
}
}
.skin-vector-legacy .mw-parser-output #toc > .toctogglecheckbox:checked ~ ul,
.skin-vector-legacy .mw-parser-output .toc > .toctogglecheckbox:checked ~ ul,
.skin-timeless .mw-parser-output #toc > .toctogglecheckbox:checked ~ ul,
.skin-timeless .mw-parser-output .toc > .toctogglecheckbox:checked ~ ul {
display: block !important;
max-height: 0 !important;
pointer-events: none !important;
}


/* 모바일 크기 보정 */
/* 모바일 크기 보정 */
258번째 줄: 263번째 줄:
.skin-timeless .mw-parser-output #toc,
.skin-timeless .mw-parser-output #toc,
.skin-timeless .mw-parser-output .toc {
.skin-timeless .mw-parser-output .toc {
margin: 0.9rem 0 1.2rem !important;
margin: 0.72rem 0 1rem !important;
padding: 1.2rem 1.05rem 1.3rem !important;
padding: 0.72rem 0.76rem 0.78rem !important;
border-radius: 6px !important;
border-radius: 6px !important;
}
}
267번째 줄: 272번째 줄:
.skin-timeless .mw-parser-output #toc .toctitle,
.skin-timeless .mw-parser-output #toc .toctitle,
.skin-timeless .mw-parser-output .toc .toctitle {
.skin-timeless .mw-parser-output .toc .toctitle {
margin-bottom: 0.82rem !important;
margin-bottom: 0.52rem !important;
}
}


274번째 줄: 279번째 줄:
.skin-timeless .mw-parser-output #toc .toctitle h2,
.skin-timeless .mw-parser-output #toc .toctitle h2,
.skin-timeless .mw-parser-output .toc .toctitle h2 {
.skin-timeless .mw-parser-output .toc .toctitle h2 {
font-size: 1.18rem !important;
font-size: 0.96rem !important;
}
}


281번째 줄: 286번째 줄:
.skin-timeless .mw-parser-output #toc .toctogglelabel,
.skin-timeless .mw-parser-output #toc .toctogglelabel,
.skin-timeless .mw-parser-output .toc .toctogglelabel {
.skin-timeless .mw-parser-output .toc .toctogglelabel {
min-width: 66px !important;
min-width: 50px !important;
min-height: 42px !important;
min-height: 30px !important;
padding: 0.52rem 0.72rem !important;
padding: 0.32rem 0.48rem !important;
}
}


290번째 줄: 295번째 줄:
.skin-timeless .mw-parser-output #toc .toctogglelabel::before,
.skin-timeless .mw-parser-output #toc .toctogglelabel::before,
.skin-timeless .mw-parser-output .toc .toctogglelabel::before {
.skin-timeless .mw-parser-output .toc .toctogglelabel::before {
font-size: 0.9rem !important;
font-size: 0.72rem !important;
}
}


297번째 줄: 302번째 줄:
.skin-timeless .mw-parser-output #toc a,
.skin-timeless .mw-parser-output #toc a,
.skin-timeless .mw-parser-output .toc a {
.skin-timeless .mw-parser-output .toc a {
gap: 0.55rem !important;
gap: 0.38rem !important;
font-size: 0.94rem !important;
font-size: 0.8rem !important;
}
}


305번째 줄: 310번째 줄:
.skin-timeless .mw-parser-output #toc ul ul,
.skin-timeless .mw-parser-output #toc ul ul,
.skin-timeless .mw-parser-output .toc ul ul {
.skin-timeless .mw-parser-output .toc ul ul {
margin-left: 1.25rem !important;
margin-left: 0.82rem !important;
}
}
}
}
316번째 줄: 321번째 줄:
align-items: center !important;
align-items: center !important;
justify-content: space-between !important;
justify-content: space-between !important;
gap: 1rem !important;
gap: 0.55rem !important;
width: 100% !important;
width: 100% !important;
margin: 0 0 1rem !important;
margin: 0 0 0.58rem !important;
padding: 0 !important;
padding: 0 !important;
}
}
331번째 줄: 336번째 줄:
color: #3f2113 !important;
color: #3f2113 !important;
font-family:
font-family:
"SB Aggro B",
"SB Aggro M",
"SB 어그로 B",
"SB 어그로 M",
"SB Aggro",
"SB Aggro",
"SB 어그로",
"SB 어그로",
sans-serif !important;
sans-serif !important;
font-size: 1.38rem !important;
font-size: 1.02rem !important;
font-weight: 700 !important;
font-weight: 500 !important;
line-height: 1.25 !important;
line-height: 1.25 !important;
}
}
346번째 줄: 351번째 줄:
align-items: center !important;
align-items: center !important;
justify-content: center !important;
justify-content: center !important;
min-width: 78px !important;
min-width: 54px !important;
min-height: 48px !important;
min-height: 32px !important;
margin: 0 !important;
margin: 0 !important;
padding: 0.62rem 1rem !important;
padding: 0.36rem 0.55rem !important;
border: 2px solid #b8aa97 !important;
border: 1px solid #b8aa97 !important;
border-radius: 6px !important;
border-radius: 6px !important;
box-sizing: border-box !important;
box-sizing: border-box !important;
background: #fff9ed !important;
background: #f1dfc8 !important;
color: #3f2113 !important;
color: #3f2113 !important;
font-family:
font-family:
361번째 줄: 366번째 줄:
"SB 어그로",
"SB 어그로",
sans-serif !important;
sans-serif !important;
font-size: 1rem !important;
font-size: 0.76rem !important;
font-weight: 500 !important;
font-weight: 500 !important;
line-height: 1 !important;
line-height: 1 !important;
370번째 줄: 375번째 줄:
.skin-vector-legacy .mw-parser-output .pvz-generated-toc .pvz-toc-toggle:hover,
.skin-vector-legacy .mw-parser-output .pvz-generated-toc .pvz-toc-toggle:hover,
.skin-timeless .mw-parser-output .pvz-generated-toc .pvz-toc-toggle:hover {
.skin-timeless .mw-parser-output .pvz-generated-toc .pvz-toc-toggle:hover {
background: #f8ecd6 !important;
background: #e8cfb3 !important;
}
}


377번째 줄: 382번째 줄:
margin: 0 !important;
margin: 0 !important;
padding: 0 !important;
padding: 0 !important;
max-height: 1200px !important;
overflow: hidden !important;
transition: max-height 200ms ease !important;
list-style: none !important;
list-style: none !important;
}
}


.skin-vector-legacy .mw-parser-output .pvz-generated-toc .pvz-toc-list[hidden],
.skin-vector-legacy .mw-parser-output .pvz-generated-toc .pvz-toc-list.is-collapsed,
.skin-timeless .mw-parser-output .pvz-generated-toc .pvz-toc-list[hidden] {
.skin-timeless .mw-parser-output .pvz-generated-toc .pvz-toc-list.is-collapsed {
display: none !important;
max-height: 0 !important;
pointer-events: none !important;
}
}


.skin-vector-legacy .mw-parser-output .pvz-generated-toc .pvz-toc-item,
.skin-vector-legacy .mw-parser-output .pvz-generated-toc .pvz-toc-item,
.skin-timeless .mw-parser-output .pvz-generated-toc .pvz-toc-item {
.skin-timeless .mw-parser-output .pvz-generated-toc .pvz-toc-item {
margin: 0.38rem 0 !important;
margin: 0.2rem 0 !important;
padding: 0 0 0 calc(var(--pvz-toc-depth, 0) * 1.75rem) !important;
padding: 0 0 0 calc(var(--pvz-toc-depth, 0) * 0.95rem) !important;
list-style: none !important;
list-style: none !important;
}
}
407번째 줄: 416번째 줄:
.skin-vector-legacy .mw-parser-output .pvz-generated-toc .pvz-toc-header h2,
.skin-vector-legacy .mw-parser-output .pvz-generated-toc .pvz-toc-header h2,
.skin-timeless .mw-parser-output .pvz-generated-toc .pvz-toc-header h2 {
.skin-timeless .mw-parser-output .pvz-generated-toc .pvz-toc-header h2 {
font-size: 1.18rem !important;
font-size: 0.96rem !important;
}
}


.skin-vector-legacy .mw-parser-output .pvz-generated-toc .pvz-toc-toggle,
.skin-vector-legacy .mw-parser-output .pvz-generated-toc .pvz-toc-toggle,
.skin-timeless .mw-parser-output .pvz-generated-toc .pvz-toc-toggle {
.skin-timeless .mw-parser-output .pvz-generated-toc .pvz-toc-toggle {
min-width: 66px !important;
min-width: 50px !important;
min-height: 42px !important;
min-height: 30px !important;
padding: 0.52rem 0.72rem !important;
padding: 0.32rem 0.48rem !important;
font-size: 0.9rem !important;
font-size: 0.72rem !important;
}
}


.skin-vector-legacy .mw-parser-output .pvz-generated-toc .pvz-toc-item,
.skin-vector-legacy .mw-parser-output .pvz-generated-toc .pvz-toc-item,
.skin-timeless .mw-parser-output .pvz-generated-toc .pvz-toc-item {
.skin-timeless .mw-parser-output .pvz-generated-toc .pvz-toc-item {
padding-left: calc(var(--pvz-toc-depth, 0) * 1.25rem) !important;
padding-left: calc(var(--pvz-toc-depth, 0) * 0.82rem) !important;
}
}
 
 
@media (max-width: 300px) {
.skin-vector-legacy .mw-parser-output #toc,
.skin-vector-legacy .mw-parser-output .toc,
.skin-timeless .mw-parser-output #toc,
.skin-timeless .mw-parser-output .toc {
width: 100% !important;
max-width: 100% !important;
}
}
 
 
@media (prefers-reduced-motion: reduce) {
.skin-vector-legacy .mw-parser-output #toc > ul,
.skin-vector-legacy .mw-parser-output .toc > ul,
.skin-timeless .mw-parser-output #toc > ul,
.skin-timeless .mw-parser-output .toc > ul,
.skin-vector-legacy .mw-parser-output .pvz-generated-toc .pvz-toc-list,
.skin-timeless .mw-parser-output .pvz-generated-toc .pvz-toc-list {
transition: none !important;
}
}
}
}
원본 주소 "https://pvzkrwiki.com/wiki/미디어위키:Gadget-ArticleToc.css"