틀:정보상자/styles.css: 두 판 사이의 차이
식물 vs 좀비 위키
편집 요약 없음 |
편집 요약 없음 |
||
| 6번째 줄: | 6번째 줄: | ||
margin: 0 0 1.25rem 1.25rem; | margin: 0 0 1.25rem 1.25rem; | ||
padding: 0.72rem; | padding: 0.72rem; | ||
border: | border: 3px solid #71a993; | ||
border-radius: | border-radius: 6px; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
background: # | background: #dcefe7; | ||
color: # | color: #25362f; | ||
font-family: | font-family: | ||
-apple-system, | -apple-system, | ||
| 20번째 줄: | 20번째 줄: | ||
font-size: 0.92rem; | font-size: 0.92rem; | ||
line-height: 1.5; | line-height: 1.5; | ||
box-shadow: 0 0 24px rgba( | box-shadow: 0 0 24px rgba(48, 92, 75, 0.34); | ||
} | } | ||
.infobox__title { | .infobox__title { | ||
padding: 0. | padding: 0.62rem 0.85rem; | ||
border-radius: | border: 0; | ||
background: # | border-radius: 4px; | ||
color: # | background: #5f927f; | ||
color: #f7fffb; | |||
font-family: | font-family: | ||
"SB Aggro B", | "SB Aggro B", | ||
| 35번째 줄: | 36번째 줄: | ||
"Segoe UI", | "Segoe UI", | ||
sans-serif; | sans-serif; | ||
font-size: 1. | font-size: 1.22rem; | ||
font-weight: 700; | font-weight: 700; | ||
letter-spacing: -0.02em; | letter-spacing: -0.02em; | ||
| 46번째 줄: | 47번째 줄: | ||
.infobox__panel { | .infobox__panel { | ||
margin-top: 0.7rem; | margin-top: 0.7rem; | ||
border: | border: 0; | ||
border-radius: | border-radius: 5px; | ||
overflow: hidden; | overflow: hidden; | ||
background: # | background: #f5fbf8; | ||
} | } | ||
| 58번째 줄: | 59번째 줄: | ||
padding: 1.5rem 1rem 1.35rem; | padding: 1.5rem 1rem 1.35rem; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
background: # | background: #edf8f3; | ||
} | } | ||
| 69번째 줄: | 70번째 줄: | ||
margin: 0 auto; | margin: 0 auto; | ||
object-fit: contain; | object-fit: contain; | ||
filter: drop-shadow(0 11px 9px rgba( | filter: drop-shadow(0 11px 9px rgba(53, 91, 76, 0.24)); | ||
} | } | ||
| 76번째 줄: | 77번째 줄: | ||
margin: 0 1rem 0.8rem; | margin: 0 1rem 0.8rem; | ||
padding-top: 0.45rem; | padding-top: 0.45rem; | ||
border | border: 0; | ||
border-collapse: collapse; | border-collapse: collapse; | ||
border-spacing: 0; | border-spacing: 0; | ||
| 115번째 줄: | 116번째 줄: | ||
width: 35%; | width: 35%; | ||
padding-right: 0.75rem; | padding-right: 0.75rem; | ||
color: # | color: #60786e; | ||
font-size: 0.86rem; | font-size: 0.86rem; | ||
text-align: left; | text-align: left; | ||
| 122번째 줄: | 123번째 줄: | ||
.infobox__details td { | .infobox__details td { | ||
color: # | color: #2e3d37; | ||
font-size: 0.9rem; | font-size: 0.9rem; | ||
text-align: left; | text-align: left; | ||
| 148번째 줄: | 149번째 줄: | ||
.infobox a { | .infobox a { | ||
color: # | color: #34725e; | ||
text-decoration: none; | text-decoration: none; | ||
} | } | ||
.infobox a:hover { | .infobox a:hover { | ||
color: # | color: #235141; | ||
text-decoration: underline; | text-decoration: underline; | ||
} | } | ||
| 165번째 줄: | 166번째 줄: | ||
margin: 0 0 1.1rem; | margin: 0 0 1.1rem; | ||
padding: 0.62rem; | padding: 0.62rem; | ||
border-radius: | border-radius: 5px; | ||
box-shadow: 0 0 21px rgba( | box-shadow: 0 0 21px rgba(48, 92, 75, 0.31); | ||
} | } | ||
.infobox__title { | .infobox__title { | ||
padding: 0.58rem 0.75rem; | padding: 0.58rem 0.75rem; | ||
border-radius: 3px; | |||
font-size: 1.16rem; | font-size: 1.16rem; | ||
} | } | ||
| 176번째 줄: | 178번째 줄: | ||
.infobox__panel { | .infobox__panel { | ||
margin-top: 0.62rem; | margin-top: 0.62rem; | ||
border-radius: | border-radius: 4px; | ||
} | } | ||
| 227번째 줄: | 229번째 줄: | ||
@media screen { | @media screen { | ||
html.skin-theme-clientpref-night .infobox { | html.skin-theme-clientpref-night .infobox { | ||
border-color: # | border-color: #557b6d; | ||
background: # | background: #293b35; | ||
color: # | color: #e0eee8; | ||
box-shadow: 0 0 26px rgba(0, 0, 0, 0.46); | box-shadow: 0 0 26px rgba(0, 0, 0, 0.46); | ||
} | } | ||
html.skin-theme-clientpref-night .infobox__title { | html.skin-theme-clientpref-night .infobox__title { | ||
background: # | background: #456e60; | ||
color: # | color: #f1faf6; | ||
} | } | ||
html.skin-theme-clientpref-night .infobox__panel { | html.skin-theme-clientpref-night .infobox__panel { | ||
background: #26352f; | |||
background: # | |||
} | } | ||
html.skin-theme-clientpref-night .infobox__image { | html.skin-theme-clientpref-night .infobox__image { | ||
background: # | background: #30443d; | ||
} | } | ||
html.skin-theme-clientpref-night .infobox__image img { | html.skin-theme-clientpref-night .infobox__image img { | ||
filter: drop-shadow(0 11px 9px rgba(0, 0, 0, 0.36)); | filter: drop-shadow(0 11px 9px rgba(0, 0, 0, 0.36)); | ||
} | } | ||
html.skin-theme-clientpref-night .infobox__details th { | html.skin-theme-clientpref-night .infobox__details th { | ||
color: # | color: #a9c2b8; | ||
} | } | ||
html.skin-theme-clientpref-night .infobox__details td { | html.skin-theme-clientpref-night .infobox__details td { | ||
color: # | color: #e2eee9; | ||
} | } | ||
html.skin-theme-clientpref-night .infobox a { | html.skin-theme-clientpref-night .infobox a { | ||
color: # | color: #8ed0b5; | ||
} | } | ||
html.skin-theme-clientpref-night .infobox a:hover { | html.skin-theme-clientpref-night .infobox a:hover { | ||
color: # | color: #b0e7d0; | ||
} | } | ||
} | } | ||
| 274번째 줄: | 271번째 줄: | ||
@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: #557b6d; | ||
background: # | background: #293b35; | ||
color: # | color: #e0eee8; | ||
box-shadow: 0 0 26px rgba(0, 0, 0, 0.46); | box-shadow: 0 0 26px rgba(0, 0, 0, 0.46); | ||
} | } | ||
html.skin-theme-clientpref-os .infobox__title { | html.skin-theme-clientpref-os .infobox__title { | ||
background: # | background: #456e60; | ||
color: # | color: #f1faf6; | ||
} | } | ||
html.skin-theme-clientpref-os .infobox__panel { | html.skin-theme-clientpref-os .infobox__panel { | ||
background: #26352f; | |||
background: # | |||
} | } | ||
html.skin-theme-clientpref-os .infobox__image { | html.skin-theme-clientpref-os .infobox__image { | ||
background: # | background: #30443d; | ||
} | } | ||
html.skin-theme-clientpref-os .infobox__image img { | html.skin-theme-clientpref-os .infobox__image img { | ||
filter: drop-shadow(0 11px 9px rgba(0, 0, 0, 0.36)); | filter: drop-shadow(0 11px 9px rgba(0, 0, 0, 0.36)); | ||
} | } | ||
html.skin-theme-clientpref-os .infobox__details th { | html.skin-theme-clientpref-os .infobox__details th { | ||
color: # | color: #a9c2b8; | ||
} | } | ||
html.skin-theme-clientpref-os .infobox__details td { | html.skin-theme-clientpref-os .infobox__details td { | ||
color: # | color: #e2eee9; | ||
} | } | ||
html.skin-theme-clientpref-os .infobox a { | html.skin-theme-clientpref-os .infobox a { | ||
color: # | color: #8ed0b5; | ||
} | } | ||
html.skin-theme-clientpref-os .infobox a:hover { | html.skin-theme-clientpref-os .infobox a:hover { | ||
color: # | color: #b0e7d0; | ||
} | } | ||
} | } | ||
