틀:정보상자/styles.css: 두 판 사이의 차이

식물 vs 좀비 위키
← 이전 편집
편집 취소Brokey (토론 | 기여)
사무관, 인터페이스 관리자, 관리자
385 편집
Brokey (토론)의 278 판 편집을 되돌림
태그: 편집 취소
편집 요약 없음
태그: 모바일 편집 모바일 웹 편집
 
(같은 사용자의 중간 판 8개는 보이지 않습니다)
15번째 줄: 15번째 줄:
--infobox-detail-label-bg: #ead9c2;
--infobox-detail-label-bg: #ead9c2;
--infobox-detail-value-bg: #f6ecde;
--infobox-detail-value-bg: #f6ecde;
--infobox-caption-bg: #eadbc8;
--infobox-caption-bg: #efe2d2;
--infobox-label-text: #231915;
--infobox-label-text: #231915;
--infobox-text: #493329;
--infobox-text: #493329;
264번째 줄: 264번째 줄:
width: calc(100% - 0.8rem);
width: calc(100% - 0.8rem);
margin: -1.8rem auto -0.9rem;
margin: -1.8rem auto -0.9rem;
padding: 0.62rem 0.72rem;
padding: 0.56rem 0.66rem;
border: 1px solid var(--infobox-row-edge);
border: 1px solid var(--infobox-row-edge);
border-radius: 9px;
border-radius: 9px;
270번째 줄: 270번째 줄:
background: var(--infobox-caption-bg);
background: var(--infobox-caption-bg);
box-shadow: 0 3px 8px rgba(68, 42, 31, 0.1);
box-shadow: 0 3px 8px rgba(68, 42, 31, 0.1);
color: #3F2C23;
color: #5a463d;
font-family:
font-family:
"SB Aggro L",
"SB Aggro L",
309번째 줄: 309번째 줄:
box-shadow: none;
box-shadow: none;
overflow: hidden;
overflow: hidden;
}
.infobox__details tbody {
display: block;
width: 100%;
}
}


.infobox__details tr {
.infobox__details tr {
position: relative;
display: grid;
grid-template-columns: minmax(0, 31%) minmax(0, 69%);
width: 100%;
background: transparent;
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;
max-width: 100%;
padding: 0.62rem 0.72rem;
padding: 0.62rem 0.72rem;
border: 0;
border: 0;
324번째 줄: 351번째 줄:
line-height: 1.4;
line-height: 1.4;
text-align: left;
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) > th,
 
.infobox__details tr:not(:last-child) > td {
.infobox__details tr:not(:last-child) {
border-bottom: 1px solid var(--infobox-row-divider);
border-bottom: 1px solid var(--infobox-row-divider);
}
}


.infobox__details th {
.infobox__details th {
width: 31%;
width: auto;
background: var(--infobox-detail-label-bg);
background: transparent;
color: var(--infobox-label-text);
color: var(--infobox-label-text);
font-family:
font-family:
352번째 줄: 385번째 줄:


.infobox__details td {
.infobox__details td {
width: 69%;
width: auto;
color: var(--infobox-text);
color: var(--infobox-text);
font-family:
font-family:
368번째 줄: 401번째 줄:
word-break: break-word;
word-break: break-word;
overflow-wrap: anywhere;
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;
}
}


553번째 줄: 609번째 줄:
margin-bottom: 1.65rem;
margin-bottom: 1.65rem;
padding: 0.48rem;
padding: 0.48rem;
}
.infobox__image-caption {
transform: translateY(1rem);
}
}


568번째 줄: 628번째 줄:


.infobox__details th {
.infobox__details th {
width: 31%;
width: auto;
font-size: 0.96rem;
font-size: 0.96rem;
}
}


.infobox__details td {
.infobox__details td {
width: 69%;
width: auto;
font-size: 1rem;
font-size: 1rem;
}
}
634번째 줄: 694번째 줄:
.infobox__image-caption {
.infobox__image-caption {
width: calc(100% - 0.7rem);
width: calc(100% - 0.7rem);
padding: 0.58rem 0.64rem;
padding: 0.52rem 0.58rem;
font-size: 0.84rem;
font-size: 0.84rem;
transform: translateY(0.9rem);
}
}


649번째 줄: 710번째 줄:
}
}


.infobox__details tr {
grid-template-columns: minmax(0, 33%) minmax(0, 67%);
}
.infobox__details tr::before {
width: 33%;
}


.infobox__details th {
.infobox__details th {
width: 33%;
width: auto;
font-size: 0.89rem;
font-size: 0.89rem;
}
}


.infobox__details td {
.infobox__details td {
width: 67%;
width: auto;
font-size: 0.95rem;
font-size: 0.95rem;
}
}
706번째 줄: 775번째 줄:
--infobox-detail-label-bg: #d5c4b0;
--infobox-detail-label-bg: #d5c4b0;
--infobox-detail-value-bg: #e1d5c7;
--infobox-detail-value-bg: #e1d5c7;
--infobox-caption-bg: #d8c8b6;
--infobox-caption-bg: #ddd0c0;
--infobox-label-text: #2b211d;
--infobox-label-text: #2b211d;
--infobox-text: #43332c;
--infobox-text: #43332c;
738번째 줄: 807번째 줄:
--infobox-detail-label-bg: #d5c4b0;
--infobox-detail-label-bg: #d5c4b0;
--infobox-detail-value-bg: #e1d5c7;
--infobox-detail-value-bg: #e1d5c7;
--infobox-caption-bg: #d8c8b6;
--infobox-caption-bg: #ddd0c0;
--infobox-label-text: #2b211d;
--infobox-label-text: #2b211d;
--infobox-text: #43332c;
--infobox-text: #43332c;
753번째 줄: 822번째 줄:


html.skin-theme-clientpref-night .infobox__image-caption {
html.skin-theme-clientpref-night .infobox__image-caption {
color: rgba(67, 51, 44, 0.68);
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 .infobox__image-caption {
html.skin-theme-clientpref-os .infobox__image-caption {
color: rgba(67, 51, 44, 0.68);
color: rgba(82, 65, 57, 0.64);
}
}
}
}
원본 주소 "https://pvzkrwiki.com/index.php/틀:정보상자/styles.css"