틀:정보상자/styles.css: 두 판 사이의 차이
식물 vs 좀비 위키
편집 요약 없음 태그: 수동 되돌리기 모바일 편집 모바일 웹 편집 |
편집 요약 없음 태그: 모바일 편집 모바일 웹 편집 |
||
| 50번째 줄: | 50번째 줄: | ||
} | } | ||
/* 이름칸 기존 디자인 유지 */ | |||
.infobox__title { | .infobox__title { | ||
display: flex; | display: flex; | ||
| 127번째 줄: | 128번째 줄: | ||
} | } | ||
/* 사진칸 */ | |||
.infobox__image { | .infobox__image { | ||
display: flex; | display: flex; | ||
| 135번째 줄: | 137번째 줄: | ||
max-height: 225px; | max-height: 225px; | ||
padding: 0.58rem; | padding: 0.58rem; | ||
border: 1px solid # | border: 1px solid #cfb99e; | ||
border-radius: 10px; | border-radius: 10px; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
background: rgba(255, | background: rgba(255, 250, 241, 0.96); | ||
overflow: hidden; | overflow: hidden; | ||
} | } | ||
| 151번째 줄: | 153번째 줄: | ||
background: #9b6745; | background: #9b6745; | ||
content: ""; | content: ""; | ||
opacity: 0. | opacity: 0.32; | ||
} | } | ||
| 170번째 줄: | 172번째 줄: | ||
} | } | ||
/* 정보칸 */ | |||
.infobox__details { | .infobox__details { | ||
width: 100%; | width: 100%; | ||
margin: 0.31rem 0 | margin: 0.31rem 0 0; | ||
border: | border: 1px solid #cfb99e; | ||
border-radius: 10px; | |||
border-collapse: separate; | border-collapse: separate; | ||
border-spacing: 0 | border-spacing: 0; | ||
table-layout: fixed; | table-layout: fixed; | ||
background: | background: #fffaf1; | ||
box-sizing: border-box; | |||
overflow: hidden; | |||
font-family: | font-family: | ||
"SB Aggro L", | "SB Aggro L", | ||
| 196번째 줄: | 202번째 줄: | ||
.infobox__details td { | .infobox__details td { | ||
min-width: 0; | min-width: 0; | ||
padding-top: 0. | padding-top: 0.56rem; | ||
padding-bottom: 0. | padding-bottom: 0.56rem; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
vertical-align: middle; | vertical-align: middle; | ||
| 205번째 줄: | 211번째 줄: | ||
.infobox__details th { | .infobox__details th { | ||
width: 31%; | width: 31%; | ||
padding-right: 0. | padding-right: 0.68rem; | ||
padding-left: 0. | padding-left: 0.68rem; | ||
border: | border: 0; | ||
border-right: | border-right: 1px solid #d3bda4; | ||
border- | border-bottom: 1px solid #ddcbb6; | ||
background: # | background: #ead8c2; | ||
color: #49352b; | color: #49352b; | ||
font-family: | font-family: | ||
| 229번째 줄: | 235번째 줄: | ||
.infobox__details td { | .infobox__details td { | ||
width: 69%; | width: 69%; | ||
padding-right: 0. | padding-right: 0.74rem; | ||
padding-left: 0. | padding-left: 0.74rem; | ||
border | border: 0; | ||
border-bottom: 1px solid #e2d4c2; | |||
border- | |||
background: rgba(255, 250, 241, 0.96); | background: rgba(255, 250, 241, 0.96); | ||
color: #49362c; | color: #49362c; | ||
| 250번째 줄: | 255번째 줄: | ||
overflow-wrap: anywhere; | overflow-wrap: anywhere; | ||
word-break: break-word; | word-break: break-word; | ||
} | |||
.infobox__details tr:last-child th, | |||
.infobox__details tr:last-child td { | |||
border-bottom: 0; | |||
} | } | ||
| 341번째 줄: | 351번째 줄: | ||
.infobox__details { | .infobox__details { | ||
margin-top: 0.3rem; | margin-top: 0.3rem; | ||
border-radius: 9px; | |||
border- | |||
} | } | ||
| 351번째 줄: | 360번째 줄: | ||
.infobox__details th, | .infobox__details th, | ||
.infobox__details td { | .infobox__details td { | ||
padding-top: 0. | padding-top: 0.58rem; | ||
padding-bottom: 0. | padding-bottom: 0.58rem; | ||
line-height: 1.42; | line-height: 1.42; | ||
} | } | ||
| 358번째 줄: | 367번째 줄: | ||
.infobox__details th { | .infobox__details th { | ||
width: 30%; | width: 30%; | ||
padding-right: 0. | padding-right: 0.68rem; | ||
padding-left: 0. | padding-left: 0.68rem; | ||
font-size: 0.98rem; | font-size: 0.98rem; | ||
} | } | ||
| 365번째 줄: | 374번째 줄: | ||
.infobox__details td { | .infobox__details td { | ||
width: 70%; | width: 70%; | ||
padding-right: 0. | padding-right: 0.74rem; | ||
padding-left: 0. | padding-left: 0.74rem; | ||
font-size: 1rem; | font-size: 1rem; | ||
} | } | ||
| 410번째 줄: | 419번째 줄: | ||
.infobox__details { | .infobox__details { | ||
margin-top: 0.25rem; | margin-top: 0.25rem; | ||
border-radius: 8px; | |||
border- | |||
} | } | ||
| 420번째 줄: | 428번째 줄: | ||
.infobox__details th, | .infobox__details th, | ||
.infobox__details td { | .infobox__details td { | ||
padding-top: 0. | padding-top: 0.5rem; | ||
padding-bottom: 0. | padding-bottom: 0.5rem; | ||
line-height: 1.4; | line-height: 1.4; | ||
} | } | ||
| 427번째 줄: | 435번째 줄: | ||
.infobox__details th { | .infobox__details th { | ||
width: 34%; | width: 34%; | ||
padding-right: 0. | padding-right: 0.58rem; | ||
padding-left: 0. | padding-left: 0.58rem; | ||
font-size: 0.92rem; | font-size: 0.92rem; | ||
} | } | ||
| 435번째 줄: | 442번째 줄: | ||
.infobox__details td { | .infobox__details td { | ||
width: 66%; | width: 66%; | ||
padding-right: 0. | padding-right: 0.62rem; | ||
padding-left: 0. | padding-left: 0.62rem; | ||
font-size: 0.96rem; | font-size: 0.96rem; | ||
} | } | ||
| 469번째 줄: | 475번째 줄: | ||
html.skin-theme-clientpref-night .infobox__image { | html.skin-theme-clientpref-night .infobox__image { | ||
border-color: # | border-color: #665244; | ||
background: # | background: #40342b; | ||
} | } | ||
html.skin-theme-clientpref-night .infobox__image::after { | html.skin-theme-clientpref-night .infobox__image::after { | ||
background: #aa7650; | background: #aa7650; | ||
} | |||
html.skin-theme-clientpref-night .infobox__details { | |||
border-color: #665244; | |||
background: #40342b; | |||
} | } | ||
html.skin-theme-clientpref-night .infobox__details th { | html.skin-theme-clientpref-night .infobox__details th { | ||
border-color: # | border-right-color: #6f5948; | ||
border-bottom-color: #665244; | |||
background: #594536; | background: #594536; | ||
color: #f0e5d9; | color: #f0e5d9; | ||
| 484번째 줄: | 496번째 줄: | ||
html.skin-theme-clientpref-night .infobox__details td { | html.skin-theme-clientpref-night .infobox__details td { | ||
border-color: # | border-bottom-color: #58483c; | ||
background: #40342b; | background: #40342b; | ||
color: #eee4d9; | color: #eee4d9; | ||
| 529번째 줄: | 541번째 줄: | ||
html.skin-theme-clientpref-os .infobox__image { | html.skin-theme-clientpref-os .infobox__image { | ||
border-color: # | border-color: #665244; | ||
background: # | background: #40342b; | ||
} | } | ||
html.skin-theme-clientpref-os .infobox__image::after { | html.skin-theme-clientpref-os .infobox__image::after { | ||
background: #aa7650; | background: #aa7650; | ||
} | |||
html.skin-theme-clientpref-os .infobox__details { | |||
border-color: #665244; | |||
background: #40342b; | |||
} | } | ||
html.skin-theme-clientpref-os .infobox__details th { | html.skin-theme-clientpref-os .infobox__details th { | ||
border-color: # | border-right-color: #6f5948; | ||
border-bottom-color: #665244; | |||
background: #594536; | background: #594536; | ||
color: #f0e5d9; | color: #f0e5d9; | ||
| 544번째 줄: | 562번째 줄: | ||
html.skin-theme-clientpref-os .infobox__details td { | html.skin-theme-clientpref-os .infobox__details td { | ||
border-color: # | border-bottom-color: #58483c; | ||
background: #40342b; | background: #40342b; | ||
color: #eee4d9; | color: #eee4d9; | ||
