틀:정보상자/styles.css: 두 판 사이의 차이
식물 vs 좀비 위키
잔글 Brokey님이 틀:기업/styles.css 문서를 넘겨주기를 만들지 않고 틀:정보상자/styles.css 문서로 이동했습니다 |
편집 요약 없음 |
||
| 1번째 줄: | 1번째 줄: | ||
. | .infobox { | ||
float: right; | float: right; | ||
clear: right; | clear: right; | ||
| 23번째 줄: | 23번째 줄: | ||
} | } | ||
. | .infobox__title { | ||
padding: 0.62rem 0.85rem; | padding: 0.62rem 0.85rem; | ||
border-radius: 17px; | border-radius: 17px; | ||
| 44번째 줄: | 44번째 줄: | ||
} | } | ||
. | .infobox__panel { | ||
margin-top: 0.7rem; | margin-top: 0.7rem; | ||
border: 1px solid #ead4b2; | border: 1px solid #ead4b2; | ||
| 52번째 줄: | 52번째 줄: | ||
} | } | ||
. | .infobox__image { | ||
display: flex; | display: flex; | ||
align-items: center; | align-items: center; | ||
| 61번째 줄: | 61번째 줄: | ||
} | } | ||
. | .infobox__image img { | ||
display: block; | display: block; | ||
width: auto; | width: auto; | ||
| 72번째 줄: | 72번째 줄: | ||
} | } | ||
. | .infobox__details { | ||
width: calc(100% - 2rem); | width: calc(100% - 2rem); | ||
margin: 0 1rem 0.8rem; | margin: 0 1rem 0.8rem; | ||
| 92번째 줄: | 92번째 줄: | ||
} | } | ||
. | .infobox__details th, | ||
. | .infobox__details td { | ||
min-width: 0; | min-width: 0; | ||
padding: 0.48rem 0; | padding: 0.48rem 0; | ||
| 112번째 줄: | 112번째 줄: | ||
} | } | ||
. | .infobox__details th { | ||
width: 35%; | width: 35%; | ||
padding-right: 0.75rem; | padding-right: 0.75rem; | ||
| 121번째 줄: | 121번째 줄: | ||
} | } | ||
. | .infobox__details td { | ||
color: #38312b; | color: #38312b; | ||
font-size: 0.9rem; | font-size: 0.9rem; | ||
| 129번째 줄: | 129번째 줄: | ||
} | } | ||
. | .infobox__details p { | ||
margin: 0.2em 0; | margin: 0.2em 0; | ||
} | } | ||
. | .infobox__details ul, | ||
. | .infobox__details ol { | ||
margin: 0.2em 0 0.2em 1.2em; | margin: 0.2em 0 0.2em 1.2em; | ||
padding: 0; | padding: 0; | ||
} | } | ||
. | .infobox__details li { | ||
margin: 0.1em 0; | margin: 0.1em 0; | ||
} | } | ||
. | .infobox__details sup { | ||
line-height: 1; | line-height: 1; | ||
} | } | ||
. | .infobox a { | ||
color: #875635; | color: #875635; | ||
text-decoration: none; | text-decoration: none; | ||
} | } | ||
. | .infobox a:hover { | ||
color: #5f3924; | color: #5f3924; | ||
text-decoration: underline; | text-decoration: underline; | ||
| 158번째 줄: | 158번째 줄: | ||
@media screen and (max-width: 720px) { | @media screen and (max-width: 720px) { | ||
. | .infobox { | ||
float: none; | float: none; | ||
clear: both; | clear: both; | ||
| 169번째 줄: | 169번째 줄: | ||
} | } | ||
. | .infobox__title { | ||
padding: 0.58rem 0.75rem; | padding: 0.58rem 0.75rem; | ||
font-size: 1.16rem; | font-size: 1.16rem; | ||
} | } | ||
. | .infobox__panel { | ||
margin-top: 0.62rem; | margin-top: 0.62rem; | ||
border-radius: 16px; | border-radius: 16px; | ||
} | } | ||
. | .infobox__image { | ||
padding: 1.25rem 0.85rem; | padding: 1.25rem 0.85rem; | ||
} | } | ||
. | .infobox__image img { | ||
max-height: 195px; | max-height: 195px; | ||
} | } | ||
. | .infobox__details { | ||
width: calc(100% - 1.6rem); | width: calc(100% - 1.6rem); | ||
margin-right: 0.8rem; | margin-right: 0.8rem; | ||
| 193번째 줄: | 193번째 줄: | ||
} | } | ||
. | .infobox__details th { | ||
width: 34%; | width: 34%; | ||
padding-right: 0.6rem; | padding-right: 0.6rem; | ||
| 200번째 줄: | 200번째 줄: | ||
@media screen and (max-width: 420px) { | @media screen and (max-width: 420px) { | ||
. | .infobox { | ||
padding: 0.52rem; | padding: 0.52rem; | ||
} | } | ||
. | .infobox__image img { | ||
max-height: 180px; | max-height: 180px; | ||
} | } | ||
. | .infobox__details { | ||
width: calc(100% - 1.3rem); | width: calc(100% - 1.3rem); | ||
margin-right: 0.65rem; | margin-right: 0.65rem; | ||
| 214번째 줄: | 214번째 줄: | ||
} | } | ||
. | .infobox__details th { | ||
width: 36%; | width: 36%; | ||
padding-right: 0.5rem; | padding-right: 0.5rem; | ||
| 220번째 줄: | 220번째 줄: | ||
} | } | ||
. | .infobox__details td { | ||
font-size: 0.86rem; | font-size: 0.86rem; | ||
} | } | ||
| 226번째 줄: | 226번째 줄: | ||
@media screen { | @media screen { | ||
html.skin-theme-clientpref-night . | html.skin-theme-clientpref-night .infobox { | ||
border-color: #7d674f; | border-color: #7d674f; | ||
background: #3d332a; | background: #3d332a; | ||
| 233번째 줄: | 233번째 줄: | ||
} | } | ||
html.skin-theme-clientpref-night . | html.skin-theme-clientpref-night .infobox__title { | ||
background: #795a46; | background: #795a46; | ||
color: #fff5e9; | color: #fff5e9; | ||
} | } | ||
html.skin-theme-clientpref-night . | html.skin-theme-clientpref-night .infobox__panel { | ||
border-color: #665443; | border-color: #665443; | ||
background: #332b25; | background: #332b25; | ||
} | } | ||
html.skin-theme-clientpref-night . | html.skin-theme-clientpref-night .infobox__image { | ||
background: #3a312a; | background: #3a312a; | ||
} | } | ||
html.skin-theme-clientpref-night . | 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 . | html.skin-theme-clientpref-night .infobox__details { | ||
border-top-color: #705d4b; | border-top-color: #705d4b; | ||
} | } | ||
html.skin-theme-clientpref-night . | html.skin-theme-clientpref-night .infobox__details th { | ||
color: #c8b8a8; | color: #c8b8a8; | ||
} | } | ||
html.skin-theme-clientpref-night . | html.skin-theme-clientpref-night .infobox__details td { | ||
color: #eee6dc; | color: #eee6dc; | ||
} | } | ||
html.skin-theme-clientpref-night . | html.skin-theme-clientpref-night .infobox a { | ||
color: #e8b78a; | color: #e8b78a; | ||
} | } | ||
html.skin-theme-clientpref-night . | html.skin-theme-clientpref-night .infobox a:hover { | ||
color: #ffd0a7; | color: #ffd0a7; | ||
} | } | ||
| 273번째 줄: | 273번째 줄: | ||
@media screen and (prefers-color-scheme: dark) { | @media screen and (prefers-color-scheme: dark) { | ||
html.skin-theme-clientpref-os . | html.skin-theme-clientpref-os .infobox { | ||
border-color: #7d674f; | border-color: #7d674f; | ||
background: #3d332a; | background: #3d332a; | ||
| 280번째 줄: | 280번째 줄: | ||
} | } | ||
html.skin-theme-clientpref-os . | html.skin-theme-clientpref-os .infobox__title { | ||
background: #795a46; | background: #795a46; | ||
color: #fff5e9; | color: #fff5e9; | ||
} | } | ||
html.skin-theme-clientpref-os . | html.skin-theme-clientpref-os .infobox__panel { | ||
border-color: #665443; | border-color: #665443; | ||
background: #332b25; | background: #332b25; | ||
} | } | ||
html.skin-theme-clientpref-os . | html.skin-theme-clientpref-os .infobox__image { | ||
background: #3a312a; | background: #3a312a; | ||
} | } | ||
html.skin-theme-clientpref-os . | 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 . | html.skin-theme-clientpref-os .infobox__details { | ||
border-top-color: #705d4b; | border-top-color: #705d4b; | ||
} | } | ||
html.skin-theme-clientpref-os . | html.skin-theme-clientpref-os .infobox__details th { | ||
color: #c8b8a8; | color: #c8b8a8; | ||
} | } | ||
html.skin-theme-clientpref-os . | html.skin-theme-clientpref-os .infobox__details td { | ||
color: #eee6dc; | color: #eee6dc; | ||
} | } | ||
html.skin-theme-clientpref-os . | html.skin-theme-clientpref-os .infobox a { | ||
color: #e8b78a; | color: #e8b78a; | ||
} | } | ||
html.skin-theme-clientpref-os . | html.skin-theme-clientpref-os .infobox a:hover { | ||
color: #ffd0a7; | color: #ffd0a7; | ||
} | } | ||
} | } | ||
