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

식물 vs 좀비 위키
편집 요약 없음
태그: 수동 되돌리기 모바일 편집 모바일 웹 편집
편집 요약 없음
태그: 모바일 편집 모바일 웹 편집
50번째 줄: 50번째 줄:
}
}


/* 이름칸 기존 디자인 유지 */
.infobox__title {
.infobox__title {
display: flex;
display: flex;
127번째 줄: 128번째 줄:
}
}


/* 사진칸 */
.infobox__image {
.infobox__image {
display: flex;
display: flex;
135번째 줄: 137번째 줄:
max-height: 225px;
max-height: 225px;
padding: 0.58rem;
padding: 0.58rem;
border: 1px solid #9e6945;
border: 1px solid #cfb99e;
border-radius: 10px;
border-radius: 10px;
box-sizing: border-box;
box-sizing: border-box;
background: rgba(255, 237, 201, 0.94);
background: rgba(255, 250, 241, 0.96);
overflow: hidden;
overflow: hidden;
}
}
151번째 줄: 153번째 줄:
background: #9b6745;
background: #9b6745;
content: "";
content: "";
opacity: 0.42;
opacity: 0.32;
}
}


170번째 줄: 172번째 줄:
}
}


/* 정보칸 */
.infobox__details {
.infobox__details {
width: 100%;
width: 100%;
margin: 0.31rem 0 -0.42rem;
margin: 0.31rem 0 0;
border: 0;
border: 1px solid #cfb99e;
border-radius: 10px;
border-collapse: separate;
border-collapse: separate;
border-spacing: 0 0.42rem;
border-spacing: 0;
table-layout: fixed;
table-layout: fixed;
background: transparent;
background: #fffaf1;
box-sizing: border-box;
overflow: hidden;
font-family:
font-family:
"SB Aggro L",
"SB Aggro L",
196번째 줄: 202번째 줄:
.infobox__details td {
.infobox__details td {
min-width: 0;
min-width: 0;
padding-top: 0.5rem;
padding-top: 0.56rem;
padding-bottom: 0.5rem;
padding-bottom: 0.56rem;
box-sizing: border-box;
box-sizing: border-box;
vertical-align: middle;
vertical-align: middle;
205번째 줄: 211번째 줄:
.infobox__details th {
.infobox__details th {
width: 31%;
width: 31%;
padding-right: 0.64rem;
padding-right: 0.68rem;
padding-left: 0.64rem;
padding-left: 0.68rem;
border: 1px solid #b89878;
border: 0;
border-right: 0;
border-right: 1px solid #d3bda4;
border-radius: 9px 0 0 9px;
border-bottom: 1px solid #ddcbb6;
background: #ddc5a7;
background: #ead8c2;
color: #49352b;
color: #49352b;
font-family:
font-family:
229번째 줄: 235번째 줄:
.infobox__details td {
.infobox__details td {
width: 69%;
width: 69%;
padding-right: 0.7rem;
padding-right: 0.74rem;
padding-left: 0.7rem;
padding-left: 0.74rem;
border: 1px solid #cfb99e;
border: 0;
border-left: 0;
border-bottom: 1px solid #e2d4c2;
border-radius: 0 9px 9px 0;
background: rgba(255, 250, 241, 0.96);
background: rgba(255, 250, 241, 0.96);
color: #49362c;
color: #49362c;
250번째 줄: 255번째 줄:
overflow-wrap: anywhere;
overflow-wrap: anywhere;
word-break: break-word;
word-break: break-word;
}
.infobox__details tr:last-child th,
.infobox__details tr:last-child td {
border-bottom: 0;
}
}


341번째 줄: 351번째 줄:
.infobox__details {
.infobox__details {
margin-top: 0.3rem;
margin-top: 0.3rem;
margin-bottom: -0.44rem;
border-radius: 9px;
border-spacing: 0 0.44rem;
}
}


351번째 줄: 360번째 줄:
.infobox__details th,
.infobox__details th,
.infobox__details td {
.infobox__details td {
padding-top: 0.52rem;
padding-top: 0.58rem;
padding-bottom: 0.52rem;
padding-bottom: 0.58rem;
line-height: 1.42;
line-height: 1.42;
}
}
358번째 줄: 367번째 줄:
.infobox__details th {
.infobox__details th {
width: 30%;
width: 30%;
padding-right: 0.64rem;
padding-right: 0.68rem;
padding-left: 0.64rem;
padding-left: 0.68rem;
font-size: 0.98rem;
font-size: 0.98rem;
}
}
365번째 줄: 374번째 줄:
.infobox__details td {
.infobox__details td {
width: 70%;
width: 70%;
padding-right: 0.7rem;
padding-right: 0.74rem;
padding-left: 0.7rem;
padding-left: 0.74rem;
font-size: 1rem;
font-size: 1rem;
}
}
410번째 줄: 419번째 줄:
.infobox__details {
.infobox__details {
margin-top: 0.25rem;
margin-top: 0.25rem;
margin-bottom: -0.36rem;
border-radius: 8px;
border-spacing: 0 0.36rem;
}
}


420번째 줄: 428번째 줄:
.infobox__details th,
.infobox__details th,
.infobox__details td {
.infobox__details td {
padding-top: 0.46rem;
padding-top: 0.5rem;
padding-bottom: 0.46rem;
padding-bottom: 0.5rem;
line-height: 1.4;
line-height: 1.4;
}
}
427번째 줄: 435번째 줄:
.infobox__details th {
.infobox__details th {
width: 34%;
width: 34%;
padding-right: 0.56rem;
padding-right: 0.58rem;
padding-left: 0.56rem;
padding-left: 0.58rem;
border-radius: 8px 0 0 8px;
font-size: 0.92rem;
font-size: 0.92rem;
}
}
435번째 줄: 442번째 줄:
.infobox__details td {
.infobox__details td {
width: 66%;
width: 66%;
padding-right: 0.6rem;
padding-right: 0.62rem;
padding-left: 0.6rem;
padding-left: 0.62rem;
border-radius: 0 8px 8px 0;
font-size: 0.96rem;
font-size: 0.96rem;
}
}
469번째 줄: 475번째 줄:


html.skin-theme-clientpref-night .infobox__image {
html.skin-theme-clientpref-night .infobox__image {
border-color: #805838;
border-color: #665244;
background: #44352a;
background: #40342b;
}
}


html.skin-theme-clientpref-night .infobox__image::after {
html.skin-theme-clientpref-night .infobox__image::after {
background: #aa7650;
background: #aa7650;
}
html.skin-theme-clientpref-night .infobox__details {
border-color: #665244;
background: #40342b;
}
}


html.skin-theme-clientpref-night .infobox__details th {
html.skin-theme-clientpref-night .infobox__details th {
border-color: #765a45;
border-right-color: #6f5948;
border-bottom-color: #665244;
background: #594536;
background: #594536;
color: #f0e5d9;
color: #f0e5d9;
484번째 줄: 496번째 줄:


html.skin-theme-clientpref-night .infobox__details td {
html.skin-theme-clientpref-night .infobox__details td {
border-color: #665244;
border-bottom-color: #58483c;
background: #40342b;
background: #40342b;
color: #eee4d9;
color: #eee4d9;
529번째 줄: 541번째 줄:


html.skin-theme-clientpref-os .infobox__image {
html.skin-theme-clientpref-os .infobox__image {
border-color: #805838;
border-color: #665244;
background: #44352a;
background: #40342b;
}
}


html.skin-theme-clientpref-os .infobox__image::after {
html.skin-theme-clientpref-os .infobox__image::after {
background: #aa7650;
background: #aa7650;
}
html.skin-theme-clientpref-os .infobox__details {
border-color: #665244;
background: #40342b;
}
}


html.skin-theme-clientpref-os .infobox__details th {
html.skin-theme-clientpref-os .infobox__details th {
border-color: #765a45;
border-right-color: #6f5948;
border-bottom-color: #665244;
background: #594536;
background: #594536;
color: #f0e5d9;
color: #f0e5d9;
544번째 줄: 562번째 줄:


html.skin-theme-clientpref-os .infobox__details td {
html.skin-theme-clientpref-os .infobox__details td {
border-color: #665244;
border-bottom-color: #58483c;
background: #40342b;
background: #40342b;
color: #eee4d9;
color: #eee4d9;