틀:정보상자/styles.css: 두 판 사이의 차이
식물 vs 좀비 위키
편집 요약 없음 태그: 되돌려진 기여 |
편집 요약 없음 태그: 모바일 편집 모바일 웹 편집 |
||
| (같은 사용자의 중간 판 123개는 보이지 않습니다) | |||
| 1번째 줄: | 1번째 줄: | ||
.infobox { | .infobox { | ||
--infobox-outer: #5d3b30; | |||
--infobox-outer-edge: #45291f; | |||
--infobox-inner: #ead5af; | |||
--infobox-inner-edge: #c8aa7e; | |||
--infobox-panel: #f3e8d7; | |||
--infobox-image-box: #f7f1e7; | |||
--infobox-image-pattern: rgba(145, 87, 70, 0.025); | |||
--infobox-image-line: #875340; | |||
--infobox-ribbon: #875340; | |||
--infobox-row-bg: #f7efe4; | |||
--infobox-row-edge: #bca184; | |||
--infobox-row-divider: #d5c0aa; | |||
--infobox-details-bg: #f1e4d2; | |||
--infobox-detail-label-bg: #ead9c2; | |||
--infobox-detail-value-bg: #f6ecde; | |||
--infobox-caption-bg: #efe2d2; | |||
--infobox-label-text: #231915; | |||
--infobox-text: #493329; | |||
--infobox-link: #8f573f; | |||
--infobox-link-hover: #653929; | |||
--infobox-focus: #ad775f; | |||
--infobox-title-text: #fffaf4; | |||
--infobox-text-outline: #472b20; | |||
--infobox-shadow: rgba(68, 42, 31, 0.16); | |||
--infobox-shape-shadow: rgba(69, 41, 31, 0.24); | |||
--infobox-background-shadow: rgba(69, 41, 31, 0.2); | |||
position: relative; | |||
float: right; | float: right; | ||
clear: right; | clear: right; | ||
width: | width: 328px; | ||
max-width: 100%; | max-width: 100%; | ||
margin: 0 0 1.25rem 1.25rem; | margin: 0 0 1.25rem 1.25rem; | ||
padding: 0. | padding: 1.05rem 0.48rem 1.18rem; | ||
border: 3px solid | border: 3px solid var(--infobox-outer-edge); | ||
border-radius: | border-radius: 24px; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
background: | background: var(--infobox-inner); | ||
color: | color: var(--infobox-text); | ||
font-family: | font-family: | ||
"SB Aggro L", | |||
"SB 어그로 L", | |||
-apple-system, | -apple-system, | ||
BlinkMacSystemFont, | BlinkMacSystemFont, | ||
| 19번째 줄: | 49번째 줄: | ||
sans-serif; | sans-serif; | ||
font-size: 0.92rem; | font-size: 0.92rem; | ||
line-height: 1. | font-weight: 300; | ||
box-shadow: 0 0 22px rgba( | line-height: 1.55; | ||
box-shadow: 0 0 22px 3px var(--infobox-shadow); | |||
filter: drop-shadow(0 0 5px rgba(69, 41, 31, 0.34)); | |||
overflow: visible; | |||
} | |||
.infobox::before { | |||
position: absolute; | |||
top: 6px; | |||
right: 6px; | |||
bottom: 6px; | |||
left: 6px; | |||
border: 3px solid var(--infobox-inner-edge); | |||
border-radius: 18px; | |||
box-sizing: border-box; | |||
content: ""; | |||
pointer-events: none; | |||
} | |||
.infobox__title, | |||
.infobox__panel { | |||
position: relative; | |||
z-index: 1; | |||
} | } | ||
/* 이름칸 */ | |||
.infobox__title { | .infobox__title { | ||
padding: 0. | display: flex; | ||
border: | align-items: center; | ||
border- | justify-content: center; | ||
width: calc(100% - 24px); | |||
margin: 0.46rem auto 0; | |||
padding: 0.76rem 2.35rem 0.7rem; | |||
border: 0; | |||
box-sizing: border-box; | |||
background: transparent; | |||
color: var(--infobox-title-text); | |||
isolation: isolate; | |||
font-family: | font-family: | ||
"SB Aggro B", | "SB Aggro B", | ||
| 36번째 줄: | 94번째 줄: | ||
BlinkMacSystemFont, | BlinkMacSystemFont, | ||
"Segoe UI", | "Segoe UI", | ||
"Apple SD Gothic Neo", | |||
"Noto Sans KR", | |||
sans-serif; | sans-serif; | ||
font-size: 1. | font-size: 1.36rem; | ||
font-weight: 700; | font-weight: 700; | ||
line-height: 1.14; | |||
letter-spacing: -0.03em; | |||
text-align: center; | text-align: center; | ||
filter: | |||
drop-shadow(0 3px 2px rgba(69, 41, 31, 0.38)) | |||
drop-shadow(0 1px 1px rgba(69, 41, 31, 0.24)); | |||
text-shadow: | |||
-2px -2px 0 var(--infobox-text-outline), | |||
0 -2px 0 var(--infobox-text-outline), | |||
2px -2px 0 var(--infobox-text-outline), | |||
-2px 0 0 var(--infobox-text-outline), | |||
2px 0 0 var(--infobox-text-outline), | |||
-2px 2px 0 var(--infobox-text-outline), | |||
0 2px 0 var(--infobox-text-outline), | |||
2px 2px 0 var(--infobox-text-outline), | |||
-1px -2px 0 var(--infobox-text-outline), | |||
1px -2px 0 var(--infobox-text-outline), | |||
-2px -1px 0 var(--infobox-text-outline), | |||
2px -1px 0 var(--infobox-text-outline), | |||
-2px 1px 0 var(--infobox-text-outline), | |||
2px 1px 0 var(--infobox-text-outline), | |||
-1px 2px 0 var(--infobox-text-outline), | |||
1px 2px 0 var(--infobox-text-outline); | |||
overflow-wrap: anywhere; | overflow-wrap: anywhere; | ||
word-break: keep-all; | word-break: keep-all; | ||
} | } | ||
.infobox__title p { | |||
margin: 0; | |||
font: inherit; | |||
color: inherit; | |||
line-height: inherit; | |||
} | |||
.infobox__title::before { | |||
position: absolute; | |||
z-index: -1; | |||
inset: 0; | |||
background: var(--infobox-ribbon); | |||
clip-path: polygon( | |||
0 0, | |||
100% 0, | |||
calc(100% - 16px) 50%, | |||
100% 100%, | |||
0 100%, | |||
16px 50% | |||
); | |||
content: ""; | |||
pointer-events: none; | |||
} | |||
/* 내부 영역 */ | |||
.infobox__panel { | .infobox__panel { | ||
margin-top: 0. | margin-top: 0.58rem; | ||
padding: 0 0.08rem 0.1rem; | |||
background: transparent; | |||
background: | |||
} | } | ||
/* 이미지칸 */ | |||
.infobox__image { | .infobox__image { | ||
position: relative; | |||
display: block; | |||
width: calc(100% - 24px); | |||
margin: 1.55rem auto 1.75rem; | |||
padding: 0.5rem; | |||
border: 1px solid var(--infobox-row-edge); | |||
border-radius: 11px; | |||
box-sizing: border-box; | |||
background-color: var(--infobox-image-box); | |||
background-image: | |||
linear-gradient( | |||
45deg, | |||
var(--infobox-image-pattern) 25%, | |||
transparent 25%, | |||
transparent 75%, | |||
var(--infobox-image-pattern) 75% | |||
), | |||
linear-gradient( | |||
-45deg, | |||
var(--infobox-image-pattern) 25%, | |||
transparent 25%, | |||
transparent 75%, | |||
var(--infobox-image-pattern) 75% | |||
); | |||
background-repeat: repeat; | |||
background-position: | |||
0 0, | |||
8px 8px; | |||
background-size: 16px 16px; | |||
box-shadow: | |||
0 4px 11px rgba(68, 42, 31, 0.1), | |||
inset 0 0 0 3px rgba(255, 250, 242, 0.16); | |||
overflow: visible; | |||
text-align: center; | |||
} | |||
.infobox__image::before { | |||
position: absolute; | |||
z-index: 0; | |||
top: 6px; | |||
right: 6px; | |||
bottom: 6px; | |||
left: 6px; | |||
border: 1px solid rgba(135, 83, 64, 0.14); | |||
border-radius: 7px; | |||
box-sizing: border-box; | |||
content: ""; | |||
pointer-events: none; | |||
} | |||
/* 오른쪽 아래 짧은 선 */ | |||
.infobox__image::after { | |||
position: absolute; | |||
z-index: 1; | |||
right: 0.78rem; | |||
bottom: 0.54rem; | |||
width: 30px; | |||
height: 3px; | |||
border-radius: 3px; | |||
background: var(--infobox-image-line); | |||
content: ""; | |||
opacity: 0.52; | |||
pointer-events: none; | |||
} | |||
/* 이미지 */ | |||
.infobox__image-media { | |||
position: relative; | |||
z-index: 2; | |||
display: flex; | display: flex; | ||
align-items: center; | align-items: center; | ||
justify-content: center; | justify-content: center; | ||
width: 100%; | |||
min-height: 0; | |||
max-height: 320px; | |||
box-sizing: border-box; | box-sizing: border-box; | ||
} | } | ||
.infobox__image img { | .infobox__image-media > a { | ||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
width: 100%; | |||
} | |||
.infobox__image-media img, | |||
.infobox__image-media .mw-file-element { | |||
display: block; | display: block; | ||
width: auto; | width: auto; | ||
max-width: 100%; | max-width: 100%; | ||
height: auto; | height: auto; | ||
max-height: | max-height: 320px; | ||
margin: 0 auto; | margin: 0 auto; | ||
object-fit: contain; | object-fit: contain; | ||
filter: drop-shadow(0 | filter: | ||
drop-shadow(0 3px 2px rgba(69, 41, 31, 0.68)) | |||
drop-shadow(0 1px 1px rgba(69, 41, 31, 0.48)) !important; | |||
} | } | ||
. | /* 별도 설명문 */ | ||
width: calc(100% - | .infobox__image-caption { | ||
margin: | position: relative; | ||
padding | z-index: 5; | ||
border | width: calc(100% - 0.8rem); | ||
border- | margin: -1.8rem auto -0.9rem; | ||
border- | padding: 0.56rem 0.66rem; | ||
border: 1px solid var(--infobox-row-edge); | |||
border-radius: 9px; | |||
box-sizing: border-box; | |||
background: var(--infobox-caption-bg); | |||
box-shadow: 0 3px 8px rgba(68, 42, 31, 0.1); | |||
color: #5a463d; | |||
font-family: | font-family: | ||
"SB Aggro L", | "SB Aggro L", | ||
| 93번째 줄: | 280번째 줄: | ||
"Noto Sans KR", | "Noto Sans KR", | ||
sans-serif; | sans-serif; | ||
font-size: 0.78rem; | |||
font-weight: 300; | |||
font-style: italic; | |||
line-height: 1.42; | |||
text-align: center; | |||
overflow-wrap: anywhere; | |||
word-break: keep-all; | |||
transform: translateY(1.18rem); | |||
} | |||
.infobox__image-caption p { | |||
margin: 0; | |||
font: inherit; | |||
} | |||
/* 정보칸 */ | |||
.infobox__details { | |||
width: calc(100% - 24px); | |||
margin: 0 auto; | |||
padding: 0; | |||
border: 1px solid var(--infobox-row-edge); | |||
border-collapse: separate; | |||
border-spacing: 0; | |||
border-radius: 12px; | |||
table-layout: fixed; | |||
background: var(--infobox-detail-value-bg); | |||
box-sizing: border-box; | |||
box-shadow: none; | |||
overflow: hidden; | |||
} | |||
.infobox__details tbody { | |||
display: block; | |||
width: 100%; | |||
} | |||
.infobox__details tr { | |||
position: relative; | |||
display: grid; | |||
grid-template-columns: minmax(0, 31%) minmax(0, 69%); | |||
width: 100%; | |||
background: transparent; | |||
} | |||
.infobox__details tr::before { | |||
position: absolute; | |||
z-index: 0; | |||
top: 0; | |||
bottom: 0; | |||
left: 0; | |||
width: 31%; | |||
background: var(--infobox-detail-label-bg); | |||
content: ""; | |||
pointer-events: none; | |||
} | } | ||
.infobox__details th, | .infobox__details th, | ||
.infobox__details td { | .infobox__details td { | ||
position: relative; | |||
z-index: 1; | |||
display: block; | |||
width: auto; | |||
min-width: 0; | min-width: 0; | ||
padding: 0. | max-width: 100%; | ||
padding: 0.62rem 0.72rem; | |||
border: 0; | |||
border-radius: 0; | |||
box-sizing: border-box; | box-sizing: border-box; | ||
vertical-align: | background: transparent; | ||
line-height: 1.4; | |||
text-align: left; | |||
max-height: 11.2em; | |||
overflow-x: hidden; | |||
overflow-y: auto; | |||
white-space: normal; | |||
word-break: break-word; | |||
overflow-wrap: anywhere; | |||
} | |||
.infobox__details tr:not(:last-child) { | |||
border-bottom: 1px solid var(--infobox-row-divider); | |||
} | |||
.infobox__details th { | |||
width: auto; | |||
background: transparent; | |||
color: var(--infobox-label-text); | |||
font-family: | |||
"SB Aggro M", | |||
"SB 어그로 M", | |||
-apple-system, | |||
BlinkMacSystemFont, | |||
"Segoe UI", | |||
"Apple SD Gothic Neo", | |||
"Noto Sans KR", | |||
sans-serif; | |||
font-size: 0.83rem; | |||
font-weight: 500; | |||
vertical-align: top; | |||
text-shadow: none; | |||
word-break: keep-all; | |||
} | |||
.infobox__details td { | |||
width: auto; | |||
color: var(--infobox-text); | |||
font-family: | font-family: | ||
"SB Aggro L", | "SB Aggro L", | ||
| 110번째 줄: | 396번째 줄: | ||
"Noto Sans KR", | "Noto Sans KR", | ||
sans-serif; | sans-serif; | ||
font-size: 0.9rem; | |||
font-weight: 300; | font-weight: 300; | ||
line-height: 1. | vertical-align: middle; | ||
word-break: break-word; | |||
overflow-wrap: anywhere; | |||
} | |||
.infobox b, | |||
.infobox strong { | |||
font-family: | |||
"SB Aggro M", | |||
"SB 어그로 M", | |||
-apple-system, | |||
BlinkMacSystemFont, | |||
"Segoe UI", | |||
"Apple SD Gothic Neo", | |||
"Noto Sans KR", | |||
sans-serif; | |||
font-weight: 500; | |||
} | |||
.infobox b a, | |||
.infobox strong a, | |||
.infobox a b, | |||
.infobox a strong { | |||
font-family: inherit; | |||
font-weight: inherit; | |||
} | |||
/* 섹션 제목 */ | |||
.infobox__section-title, | |||
.infobox__subtitle, | |||
.infobox__panel > h2, | |||
.infobox__panel > h3 { | |||
position: relative; | |||
display: block; | |||
width: calc(100% - 14px); | |||
margin: 0.9rem auto 0.62rem; | |||
padding: 0.7rem 2.04rem 0.7rem 1.18rem; | |||
border: 0; | |||
box-sizing: border-box; | |||
background: var(--infobox-ribbon); | |||
clip-path: polygon( | |||
0 0, | |||
100% 0, | |||
calc(100% - 12px) 50%, | |||
100% 100%, | |||
0 100%, | |||
12px 50% | |||
); | |||
color: var(--infobox-title-text); | |||
font-family: | |||
"SB Aggro B", | |||
"SB 어그로 B", | |||
-apple-system, | |||
BlinkMacSystemFont, | |||
"Segoe UI", | |||
"Apple SD Gothic Neo", | |||
"Noto Sans KR", | |||
sans-serif; | |||
font-size: 1.08rem; | |||
font-weight: 700; | |||
line-height: 1.14; | |||
text-align: center; | |||
text-shadow: | |||
-1px -1px 0 var(--infobox-text-outline), | |||
0 -1px 0 var(--infobox-text-outline), | |||
1px -1px 0 var(--infobox-text-outline), | |||
-1px 0 0 var(--infobox-text-outline), | |||
1px 0 0 var(--infobox-text-outline), | |||
-1px 1px 0 var(--infobox-text-outline), | |||
0 1px 0 var(--infobox-text-outline), | |||
1px 1px 0 var(--infobox-text-outline); | |||
} | } | ||
. | .infobox__section-title::after, | ||
.infobox__subtitle::after, | |||
.infobox__panel > h2::after, | |||
.infobox__panel > h3::after { | |||
position: absolute; | |||
top: 50%; | |||
right: 0.84rem; | |||
width: 0; | |||
height: 0; | |||
border-top: 8px solid var(--infobox-outer-edge); | |||
border-right: 8px solid transparent; | |||
border-left: 8px solid transparent; | |||
content: ""; | |||
transform: translateY(-34%); | |||
} | } | ||
. | /* 섹션 본문 */ | ||
.infobox__section-body, | |||
.infobox__listbox, | |||
.infobox__games, | |||
.infobox__appearance-list { | |||
width: calc(100% - 14px); | |||
margin: 0 auto 0.36rem; | |||
padding: 0.84rem 0.92rem; | |||
border: 1px solid var(--infobox-row-edge); | |||
border-radius: 7px; | |||
box-sizing: border-box; | |||
background: var(--infobox-panel); | |||
color: var(--infobox-text); | |||
font-size: 0.92rem; | |||
line-height: 1.48; | |||
} | } | ||
.infobox__details p { | /* 공통 텍스트 */ | ||
margin: 0. | .infobox__details p, | ||
.infobox__section-body p, | |||
.infobox__listbox p, | |||
.infobox__games p, | |||
.infobox__appearance-list p { | |||
margin: 0.1em 0; | |||
font: inherit; | |||
} | } | ||
.infobox__details ul, | .infobox__details ul, | ||
.infobox__details ol { | .infobox__details ol, | ||
margin: 0. | .infobox__section-body ul, | ||
.infobox__section-body ol, | |||
.infobox__listbox ul, | |||
.infobox__listbox ol, | |||
.infobox__games ul, | |||
.infobox__games ol, | |||
.infobox__appearance-list ul, | |||
.infobox__appearance-list ol { | |||
margin: 0.14em 0 0.14em 1.12em; | |||
padding: 0; | padding: 0; | ||
font: inherit; | |||
} | } | ||
.infobox__details li { | .infobox__details li, | ||
.infobox__section-body li, | |||
.infobox__listbox li, | |||
.infobox__games li, | |||
.infobox__appearance-list li { | |||
margin: 0.1em 0; | margin: 0.1em 0; | ||
font: inherit; | |||
} | } | ||
.infobox__details sup { | .infobox small, | ||
line-height: | .infobox sup, | ||
.infobox__details small, | |||
.infobox__details sup, | |||
.infobox__section-body small, | |||
.infobox__section-body sup, | |||
.infobox__listbox small, | |||
.infobox__listbox sup, | |||
.infobox__games small, | |||
.infobox__games sup, | |||
.infobox__appearance-list small, | |||
.infobox__appearance-list sup { | |||
position: static; | |||
top: auto; | |||
bottom: auto; | |||
vertical-align: baseline; | |||
line-height: inherit; | |||
font-size: 0.85em; | |||
} | } | ||
.infobox a { | .infobox a { | ||
color: | color: var(--infobox-link); | ||
font-family: inherit; | |||
font-weight: inherit; | |||
text-decoration: none; | text-decoration: none; | ||
} | } | ||
.infobox a:hover { | .infobox a:hover { | ||
color: | color: var(--infobox-link-hover); | ||
text-decoration: underline; | text-decoration: underline; | ||
} | } | ||
.infobox a:focus { | |||
outline: 2px solid var(--infobox-focus); | |||
outline-offset: 2px; | |||
} | |||
/* 720px 이하 */ | |||
@media screen and (max-width: 720px) { | @media screen and (max-width: 720px) { | ||
.infobox { | .infobox { | ||
| 172번째 줄: | 584번째 줄: | ||
max-width: 100%; | max-width: 100%; | ||
margin: 0 0 1.1rem; | margin: 0 0 1.1rem; | ||
padding: 0. | padding: 1rem 0.42rem 1.08rem; | ||
border-radius: | border-radius: 22px; | ||
font-size: 1rem; | |||
} | } | ||
. | .infobox::before { | ||
top: 5px; | |||
right: 5px; | |||
bottom: 5px; | |||
left: 5px; | |||
border-radius: 17px; | |||
} | } | ||
. | .infobox__title { | ||
margin | width: calc(100% - 20px); | ||
margin: 0.42rem auto 0; | |||
padding: 0.72rem 2rem 0.66rem; | |||
font-size: 1.54rem; | |||
} | } | ||
.infobox__image { | .infobox__image { | ||
width: calc(100% - 20px); | |||
margin-top: 1.45rem; | |||
margin-bottom: 1.65rem; | |||
padding: 0.48rem; | |||
} | } | ||
.infobox__image | .infobox__image-caption { | ||
transform: translateY(1rem); | |||
} | } | ||
.infobox__details { | .infobox__details { | ||
width: calc(100% - | width: calc(100% - 20px); | ||
border-radius: 12px; | |||
overflow: hidden; | |||
} | |||
.infobox__details th, | |||
.infobox__details td { | |||
padding: 0.52rem 0.72rem; | |||
} | } | ||
.infobox__details th { | .infobox__details th { | ||
width: | width: auto; | ||
font-size: 0.96rem; | |||
} | |||
.infobox__details td { | |||
width: auto; | |||
font-size: 1rem; | |||
} | |||
.infobox__section-title, | |||
.infobox__subtitle, | |||
.infobox__panel > h2, | |||
.infobox__panel > h3, | |||
.infobox__section-body, | |||
.infobox__listbox, | |||
.infobox__games, | |||
.infobox__appearance-list { | |||
width: calc(100% - 10px); | |||
} | |||
.infobox__section-title, | |||
.infobox__subtitle, | |||
.infobox__panel > h2, | |||
.infobox__panel > h3 { | |||
font-size: 1.2rem; | |||
} | |||
.infobox__section-body, | |||
.infobox__listbox, | |||
.infobox__games, | |||
.infobox__appearance-list { | |||
font-size: 1rem; | |||
} | } | ||
} | } | ||
@media screen and (max-width: | /* 480px 이하 */ | ||
@media screen and (max-width: 480px) { | |||
.infobox { | .infobox { | ||
padding: 0. | padding: 0.92rem 0.34rem 0.96rem; | ||
border-radius: 19px; | |||
} | |||
.infobox::before { | |||
top: 4px; | |||
right: 4px; | |||
bottom: 4px; | |||
left: 4px; | |||
border-radius: 14px; | |||
} | } | ||
.infobox__title { | .infobox__title { | ||
width: calc(100% - 16px); | |||
padding | margin: 0.36rem auto 0; | ||
font-size: 1. | padding: 0.66rem 1.72rem 0.6rem; | ||
font-size: 1.36rem; | |||
} | } | ||
.infobox__image { | .infobox__image { | ||
padding: | width: calc(100% - 16px); | ||
margin-top: 1.35rem; | |||
margin-bottom: 1.55rem; | |||
padding: 0.44rem; | |||
} | } | ||
.infobox__image | .infobox__image-caption { | ||
width: calc(100% - 0.7rem); | |||
padding: 0.52rem 0.58rem; | |||
font-size: 0.84rem; | |||
transform: translateY(0.9rem); | |||
} | } | ||
.infobox__details { | .infobox__details { | ||
width: calc(100% - | width: calc(100% - 16px); | ||
border-radius: 12px; | |||
overflow: hidden; | |||
} | } | ||
.infobox__details th, | .infobox__details th, | ||
.infobox__details td { | .infobox__details td { | ||
padding | padding: 0.52rem 0.72rem; | ||
} | } | ||
.infobox__details | .infobox__details tr { | ||
grid-template-columns: minmax(0, 33%) minmax(0, 67%); | |||
} | } | ||
.infobox__details tr::before { | |||
width: 33%; | |||
} | } | ||
.infobox__details th { | |||
width: auto; | |||
font-size: 0.89rem; | |||
} | } | ||
.infobox__details td { | |||
width: auto; | |||
font-size: 0.95rem; | |||
} | } | ||
.infobox__section-title, | |||
.infobox__subtitle, | |||
.infobox__panel > h2, | |||
.infobox__panel > h3, | |||
.infobox__section-body, | |||
.infobox__listbox, | |||
.infobox__games, | |||
.infobox__appearance-list { | |||
width: calc(100% - 6px); | |||
} | } | ||
.infobox__section-title, | |||
.infobox__subtitle, | |||
.infobox__panel > h2, | |||
.infobox__panel > h3 { | |||
padding: 0.64rem 1.78rem 0.64rem 1rem; | |||
font-size: 1.04rem; | |||
} | } | ||
.infobox__section-body, | |||
.infobox__listbox, | |||
.infobox__games, | |||
.infobox__appearance-list { | |||
padding: 0.76rem 0.8rem; | |||
font-size: 0.95rem; | |||
} | } | ||
} | |||
html.skin-theme-clientpref-night . | /* 수동 다크 모드 */ | ||
@media screen { | |||
html.skin-theme-clientpref-night .infobox { | |||
--infobox-outer: #574036; | |||
--infobox-outer-edge: #3f2c25; | |||
--infobox-inner: #cfb894; | |||
--infobox-inner-edge: #aa8e69; | |||
--infobox-panel: #ddd0bf; | |||
--infobox-image-box: #ded4c7; | |||
--infobox-image-pattern: rgba(119, 76, 59, 0.035); | |||
--infobox-image-line: #93634e; | |||
--infobox-ribbon: #7d5543; | |||
--infobox-row-bg: #e4d7c8; | |||
--infobox-row-edge: #a98e72; | |||
--infobox-row-divider: #c4ad96; | |||
--infobox-details-bg: #e1d5c7; | |||
--infobox-detail-label-bg: #d5c4b0; | |||
--infobox-detail-value-bg: #e1d5c7; | |||
--infobox-caption-bg: #ddd0c0; | |||
--infobox-label-text: #2b211d; | |||
--infobox-text: #43332c; | |||
--infobox-link: #7d4e3b; | |||
--infobox-link-hover: #5d372a; | |||
--infobox-focus: #9e6d58; | |||
--infobox-title-text: #fff8f3; | |||
--infobox-text-outline: #3d261e; | |||
--infobox-shadow: rgba(55, 38, 30, 0.2); | |||
--infobox-shape-shadow: rgba(55, 38, 30, 0.23); | |||
--infobox-background-shadow: rgba(55, 38, 30, 0.2); | |||
} | } | ||
} | |||
html.skin-theme-clientpref- | /* OS 다크 모드 */ | ||
@media screen and (prefers-color-scheme: dark) { | |||
html.skin-theme-clientpref-os .infobox { | |||
--infobox-outer: #574036; | |||
--infobox-outer-edge: #3f2c25; | |||
--infobox-inner: #cfb894; | |||
--infobox-inner-edge: #aa8e69; | |||
--infobox-panel: #ddd0bf; | |||
--infobox-image-box: #ded4c7; | |||
--infobox-image-pattern: rgba(119, 76, 59, 0.035); | |||
--infobox-image-line: #93634e; | |||
--infobox-ribbon: #7d5543; | |||
--infobox-row-bg: #e4d7c8; | |||
--infobox-row-edge: #a98e72; | |||
--infobox-row-divider: #c4ad96; | |||
--infobox-details-bg: #e1d5c7; | |||
--infobox-detail-label-bg: #d5c4b0; | |||
--infobox-detail-value-bg: #e1d5c7; | |||
--infobox-caption-bg: #ddd0c0; | |||
--infobox-label-text: #2b211d; | |||
--infobox-text: #43332c; | |||
--infobox-link: #7d4e3b; | |||
--infobox-link-hover: #5d372a; | |||
--infobox-focus: #9e6d58; | |||
--infobox-title-text: #fff8f3; | |||
--infobox-text-outline: #3d261e; | |||
--infobox-shadow: rgba(55, 38, 30, 0.2); | |||
--infobox-shape-shadow: rgba(55, 38, 30, 0.23); | |||
--infobox-background-shadow: rgba(55, 38, 30, 0.2); | |||
} | } | ||
} | |||
html.skin-theme-clientpref-night .infobox__image-caption { | |||
color: rgba(82, 65, 57, 0.64); | |||
} | } | ||
@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__image-caption { | ||
color: rgba(82, 65, 57, 0.64); | |||
color: | |||
} | } | ||
} | |||
html.skin-theme-clientpref-night .infobox__image-media img, | |||
html.skin-theme-clientpref-night .infobox__image-media .mw-file-element { | |||
filter: | |||
drop-shadow(0 3px 2px rgba(32, 24, 20, 0.72)) | |||
drop-shadow(0 1px 1px rgba(32, 24, 20, 0.5)) !important; | |||
} | |||
html.skin-theme-clientpref-os . | @media screen and (prefers-color-scheme: dark) { | ||
html.skin-theme-clientpref-os .infobox__image-media img, | |||
html.skin-theme-clientpref-os .infobox__image-media .mw-file-element { | |||
filter: | |||
drop-shadow(0 3px 2px rgba(32, 24, 20, 0.72)) | |||
drop-shadow(0 1px 1px rgba(32, 24, 20, 0.5)) !important; | |||
} | } | ||
} | |||
html.skin-theme-clientpref-night .infobox { | |||
filter: drop-shadow(0 0 5px rgba(42, 28, 22, 0.4)); | |||
} | |||
html.skin-theme-clientpref-night .infobox__title { | |||
filter: drop-shadow(0 3px 2px rgba(42, 28, 22, 0.36)); | |||
} | |||
html.skin-theme-clientpref-os . | @media screen and (prefers-color-scheme: dark) { | ||
html.skin-theme-clientpref-os .infobox { | |||
filter: drop-shadow(0 0 5px rgba(42, 28, 22, 0.4)); | |||
} | } | ||
html.skin-theme-clientpref-os . | html.skin-theme-clientpref-os .infobox__title { | ||
filter: drop-shadow(0 3px 2px rgba(42, 28, 22, 0.36)); | |||
} | } | ||
} | |||
@media screen and (max-width: 720px) { | |||
.infobox__image-media, | |||
.infobox__image-media img, | |||
.infobox__image-media .mw-file-element { | |||
max-height: 380px; | |||
} | } | ||
} | |||
@media screen and (max-width: 480px) { | |||
.infobox__image-media, | |||
.infobox__image-media img, | |||
.infobox__image-media .mw-file-element { | |||
max-height: 340px; | |||
} | } | ||
} | } | ||
