틀:정보상자/styles.css: 두 판 사이의 차이
식물 vs 좀비 위키
편집 요약 없음 |
편집 요약 없음 태그: 모바일 편집 모바일 웹 편집 |
||
| 7번째 줄: | 7번째 줄: | ||
margin: 0 0 1.25rem 1.25rem; | margin: 0 0 1.25rem 1.25rem; | ||
padding: 0.78rem; | padding: 0.78rem; | ||
border: 2px solid # | border: 2px solid #587656; | ||
border-radius: 20px; | border-radius: 20px; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
background: # | background: #dce8d8; | ||
color: # | color: #30402f; | ||
font-family: | font-family: | ||
"SB Aggro L", | "SB Aggro L", | ||
| 24번째 줄: | 24번째 줄: | ||
font-weight: 300; | font-weight: 300; | ||
line-height: 1.55; | line-height: 1.55; | ||
box-shadow: 0 9px 24px rgba( | box-shadow: 0 9px 24px rgba(51, 82, 49, 0.15); | ||
overflow: hidden; | overflow: hidden; | ||
} | } | ||
| 60번째 줄: | 60번째 줄: | ||
border-radius: 0; | border-radius: 0; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
background: # | background: #638861; | ||
clip-path: polygon( | clip-path: polygon( | ||
0 0, | 0 0, | ||
| 69번째 줄: | 69번째 줄: | ||
100% 0 | 100% 0 | ||
); | ); | ||
color: # | color: #f7fbf5; | ||
font-family: | font-family: | ||
"SB Aggro B", | "SB Aggro B", | ||
| 98번째 줄: | 98번째 줄: | ||
margin-top: 0.66rem; | margin-top: 0.66rem; | ||
padding: 0.62rem; | padding: 0.62rem; | ||
border: 1px solid # | border: 1px solid #aebfa9; | ||
border-radius: 14px; | border-radius: 14px; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
background: # | background: #edf3e9; | ||
overflow: hidden; | overflow: hidden; | ||
} | } | ||
| 135번째 줄: | 135번째 줄: | ||
max-height: 225px; | max-height: 225px; | ||
padding: 0.58rem; | padding: 0.58rem; | ||
border: 1px solid # | border: 1px solid #bdcbb8; | ||
border-radius: 10px; | border-radius: 10px; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
background: rgba( | background: rgba(248, 251, 246, 0.94); | ||
overflow: hidden; | overflow: hidden; | ||
} | } | ||
| 149번째 줄: | 149번째 줄: | ||
height: 3px; | height: 3px; | ||
border-radius: 3px; | border-radius: 3px; | ||
background: # | background: #7fa17a; | ||
content: ""; | content: ""; | ||
opacity: 0.42; | opacity: 0.42; | ||
| 196번째 줄: | 196번째 줄: | ||
.infobox__details td { | .infobox__details td { | ||
min-width: 0; | min-width: 0; | ||
padding-top: 0. | padding-top: 0.5rem; | ||
padding-bottom: 0. | padding-bottom: 0.5rem; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
vertical-align: middle; | vertical-align: middle; | ||
line-height: 1. | line-height: 1.44; | ||
} | } | ||
.infobox__details th { | .infobox__details th { | ||
width: 31%; | width: 31%; | ||
padding-right: 0. | padding-right: 0.64rem; | ||
padding-left: 0. | padding-left: 0.64rem; | ||
border: 1px solid # | border: 1px solid #8fa58a; | ||
border-right: 0; | border-right: 0; | ||
border-radius: 9px 0 0 9px; | border-radius: 9px 0 0 9px; | ||
background: # | background: #c7d8c1; | ||
color: # | color: #30462f; | ||
font-family: | font-family: | ||
"SB Aggro M", | "SB Aggro M", | ||
| 229번째 줄: | 229번째 줄: | ||
.infobox__details td { | .infobox__details td { | ||
width: 69%; | width: 69%; | ||
padding-right: 0. | padding-right: 0.7rem; | ||
padding-left: 0. | padding-left: 0.7rem; | ||
border: 1px solid # | border: 1px solid #b2c3ad; | ||
border-left: 0; | border-left: 0; | ||
border-radius: 0 9px 9px 0; | border-radius: 0 9px 9px 0; | ||
background: rgba( | background: rgba(247, 250, 245, 0.96); | ||
color: # | color: #30402f; | ||
font-family: | font-family: | ||
"SB Aggro L", | "SB Aggro L", | ||
| 253번째 줄: | 253번째 줄: | ||
.infobox__details p { | .infobox__details p { | ||
margin: 0. | margin: 0.14em 0; | ||
font: inherit; | font: inherit; | ||
} | } | ||
| 259번째 줄: | 259번째 줄: | ||
.infobox__details ul, | .infobox__details ul, | ||
.infobox__details ol { | .infobox__details ol { | ||
margin: 0. | margin: 0.18em 0 0.18em 1.1em; | ||
padding: 0; | padding: 0; | ||
font: inherit; | font: inherit; | ||
| 265번째 줄: | 265번째 줄: | ||
.infobox__details li { | .infobox__details li { | ||
margin: 0. | margin: 0.1em 0; | ||
font: inherit; | font: inherit; | ||
} | } | ||
| 274번째 줄: | 274번째 줄: | ||
.infobox a { | .infobox a { | ||
color: # | color: #3f7441; | ||
font-family: inherit; | font-family: inherit; | ||
font-weight: inherit; | font-weight: inherit; | ||
| 281번째 줄: | 281번째 줄: | ||
.infobox a:hover { | .infobox a:hover { | ||
color: # | color: #2d5a30; | ||
text-decoration: underline; | text-decoration: underline; | ||
} | } | ||
.infobox a:focus { | .infobox a:focus { | ||
outline: 2px solid # | outline: 2px solid #739370; | ||
} | } | ||
| 300번째 줄: | 300번째 줄: | ||
font-size: 1rem; | font-size: 1rem; | ||
line-height: 1.55; | line-height: 1.55; | ||
box-shadow: 0 7px 18px rgba( | box-shadow: 0 7px 18px rgba(51, 82, 49, 0.13); | ||
} | } | ||
| 351번째 줄: | 351번째 줄: | ||
.infobox__details th, | .infobox__details th, | ||
.infobox__details td { | .infobox__details td { | ||
padding-top: 0. | padding-top: 0.52rem; | ||
padding-bottom: 0. | padding-bottom: 0.52rem; | ||
line-height: 1. | line-height: 1.42; | ||
} | } | ||
.infobox__details th { | .infobox__details th { | ||
width: 30%; | width: 30%; | ||
padding-right: 0. | padding-right: 0.64rem; | ||
padding-left: 0. | padding-left: 0.64rem; | ||
font-size: 0.98rem; | font-size: 0.98rem; | ||
} | } | ||
| 365번째 줄: | 365번째 줄: | ||
.infobox__details td { | .infobox__details td { | ||
width: 70%; | width: 70%; | ||
padding-right: 0. | padding-right: 0.7rem; | ||
padding-left: 0. | padding-left: 0.7rem; | ||
font-size: 1rem; | font-size: 1rem; | ||
} | } | ||
| 420번째 줄: | 420번째 줄: | ||
.infobox__details th, | .infobox__details th, | ||
.infobox__details td { | .infobox__details td { | ||
padding-top: 0. | padding-top: 0.46rem; | ||
padding-bottom: 0. | padding-bottom: 0.46rem; | ||
line-height: 1. | line-height: 1.4; | ||
} | } | ||
.infobox__details th { | .infobox__details th { | ||
width: 34%; | width: 34%; | ||
padding-right: 0. | padding-right: 0.56rem; | ||
padding-left: 0. | padding-left: 0.56rem; | ||
border-radius: 8px 0 0 8px; | border-radius: 8px 0 0 8px; | ||
font-size: 0.92rem; | font-size: 0.92rem; | ||
| 435번째 줄: | 435번째 줄: | ||
.infobox__details td { | .infobox__details td { | ||
width: 66%; | width: 66%; | ||
padding-right: 0. | padding-right: 0.6rem; | ||
padding-left: 0. | padding-left: 0.6rem; | ||
border-radius: 0 8px 8px 0; | border-radius: 0 8px 8px 0; | ||
font-size: 0.96rem; | font-size: 0.96rem; | ||
| 444번째 줄: | 444번째 줄: | ||
@media screen { | @media screen { | ||
html.skin-theme-clientpref-night .infobox { | html.skin-theme-clientpref-night .infobox { | ||
border-color: # | border-color: #4f694d; | ||
background: # | background: #293329; | ||
color: # | color: #e3ebe0; | ||
box-shadow: 0 9px 24px rgba(0, 0, 0, 0.28); | box-shadow: 0 9px 24px rgba(0, 0, 0, 0.28); | ||
} | } | ||
| 455번째 줄: | 455번째 줄: | ||
html.skin-theme-clientpref-night .infobox__title { | html.skin-theme-clientpref-night .infobox__title { | ||
background: # | background: #486747; | ||
color: # | color: #f3f8f1; | ||
} | } | ||
html.skin-theme-clientpref-night .infobox__panel { | html.skin-theme-clientpref-night .infobox__panel { | ||
border-color: # | border-color: #4e604c; | ||
background: # | background: #222a22; | ||
} | } | ||
| 469번째 줄: | 469번째 줄: | ||
html.skin-theme-clientpref-night .infobox__image { | html.skin-theme-clientpref-night .infobox__image { | ||
border-color: # | border-color: #536651; | ||
background: # | background: #2c352c; | ||
} | } | ||
html.skin-theme-clientpref-night .infobox__image::after { | html.skin-theme-clientpref-night .infobox__image::after { | ||
background: # | background: #86a582; | ||
} | } | ||
html.skin-theme-clientpref-night .infobox__details th { | html.skin-theme-clientpref-night .infobox__details th { | ||
border-color: # | border-color: #5d745a; | ||
background: # | background: #3d503c; | ||
color: # | color: #e7efe4; | ||
} | } | ||
html.skin-theme-clientpref-night .infobox__details td { | html.skin-theme-clientpref-night .infobox__details td { | ||
border-color: # | border-color: #50634e; | ||
background: # | background: #303c30; | ||
color: # | color: #e3ebe0; | ||
} | } | ||
html.skin-theme-clientpref-night .infobox a { | html.skin-theme-clientpref-night .infobox a { | ||
color: # | color: #a4c9a0; | ||
} | } | ||
html.skin-theme-clientpref-night .infobox a:hover { | html.skin-theme-clientpref-night .infobox a:hover { | ||
color: # | color: #c1ddbe; | ||
} | } | ||
html.skin-theme-clientpref-night .infobox a:focus { | html.skin-theme-clientpref-night .infobox a:focus { | ||
outline-color: # | outline-color: #8caf88; | ||
} | } | ||
} | } | ||
| 504번째 줄: | 504번째 줄: | ||
@media screen and (prefers-color-scheme: dark) { | @media screen and (prefers-color-scheme: dark) { | ||
html.skin-theme-clientpref-os .infobox { | html.skin-theme-clientpref-os .infobox { | ||
border-color: # | border-color: #4f694d; | ||
background: # | background: #293329; | ||
color: # | color: #e3ebe0; | ||
box-shadow: 0 9px 24px rgba(0, 0, 0, 0.28); | box-shadow: 0 9px 24px rgba(0, 0, 0, 0.28); | ||
} | } | ||
| 515번째 줄: | 515번째 줄: | ||
html.skin-theme-clientpref-os .infobox__title { | html.skin-theme-clientpref-os .infobox__title { | ||
background: # | background: #486747; | ||
color: # | color: #f3f8f1; | ||
} | } | ||
html.skin-theme-clientpref-os .infobox__panel { | html.skin-theme-clientpref-os .infobox__panel { | ||
border-color: # | border-color: #4e604c; | ||
background: # | background: #222a22; | ||
} | } | ||
| 529번째 줄: | 529번째 줄: | ||
html.skin-theme-clientpref-os .infobox__image { | html.skin-theme-clientpref-os .infobox__image { | ||
border-color: # | border-color: #536651; | ||
background: # | background: #2c352c; | ||
} | } | ||
html.skin-theme-clientpref-os .infobox__image::after { | html.skin-theme-clientpref-os .infobox__image::after { | ||
background: # | background: #86a582; | ||
} | } | ||
html.skin-theme-clientpref-os .infobox__details th { | html.skin-theme-clientpref-os .infobox__details th { | ||
border-color: # | border-color: #5d745a; | ||
background: # | background: #3d503c; | ||
color: # | color: #e7efe4; | ||
} | } | ||
html.skin-theme-clientpref-os .infobox__details td { | html.skin-theme-clientpref-os .infobox__details td { | ||
border-color: # | border-color: #50634e; | ||
background: # | background: #303c30; | ||
color: # | color: #e3ebe0; | ||
} | } | ||
html.skin-theme-clientpref-os .infobox a { | html.skin-theme-clientpref-os .infobox a { | ||
color: # | color: #a4c9a0; | ||
} | } | ||
html.skin-theme-clientpref-os .infobox a:hover { | html.skin-theme-clientpref-os .infobox a:hover { | ||
color: # | color: #c1ddbe; | ||
} | } | ||
html.skin-theme-clientpref-os .infobox a:focus { | html.skin-theme-clientpref-os .infobox a:focus { | ||
outline-color: # | outline-color: #8caf88; | ||
} | } | ||
} | } | ||
