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

식물 vs 좀비 위키
← 이전 편집다음 편집 →
편집 취소Brokey (토론 | 기여)
사무관, 인터페이스 관리자, 관리자
385 편집
편집 요약 없음
태그: 모바일 편집 모바일 웹 편집
편집 요약 없음
50번째 줄: 50번째 줄:
}
}


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


/* 아래부터 깔끔하게 재정리 */
.infobox__panel {
.infobox__panel {
margin-top: 0.66rem;
margin-top: 0.66rem;
padding: 0.62rem;
padding: 0;
border: 1px solid #b99472;
border: 0;
border-radius: 14px;
border-radius: 0;
box-sizing: border-box;
background: transparent;
background: #f1dfc5;
overflow: visible;
overflow: hidden;
}
 
.infobox__panel::before {
position: absolute;
z-index: 0;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: 13px;
background-image: url("/wiki/Special:Redirect/file/paper_texture.png");
background-repeat: repeat;
background-position: left top;
background-size: 520px auto;
content: "";
opacity: 0.012;
}
}


128번째 줄: 112번째 줄:
}
}


/* 사진칸 */
/* 사진칸 디자인 유지 */
.infobox__image {
.infobox__image {
display: flex;
display: flex;
172번째 줄: 156번째 줄:
}
}


/* 정보칸 */
/* 정보칸 새 디자인 */
.infobox__details {
.infobox__details {
width: 100%;
width: 100%;
margin: 0.31rem 0 0;
margin: 0.44rem 0 0;
border: 1px solid #cfb99e;
border: 1px solid #d4c1ae;
border-radius: 10px;
border-radius: 12px;
border-collapse: separate;
border-collapse: separate;
border-spacing: 0;
border-spacing: 0;
table-layout: fixed;
table-layout: fixed;
background: #fffaf1;
background: rgba(255, 251, 245, 0.97);
box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
overflow: hidden;
193번째 줄: 177번째 줄:
"Noto Sans KR",
"Noto Sans KR",
sans-serif;
sans-serif;
box-shadow: 0 2px 8px rgba(92, 63, 44, 0.04);
}
}


.infobox__image + .infobox__details {
.infobox__image + .infobox__details {
margin-top: 0.31rem;
margin-top: 0.44rem;
}
 
.infobox__details tr {
background: transparent;
}
}


202번째 줄: 191번째 줄:
.infobox__details td {
.infobox__details td {
min-width: 0;
min-width: 0;
padding-top: 0.56rem;
padding-top: 0.78rem;
padding-bottom: 0.56rem;
padding-bottom: 0.78rem;
box-sizing: border-box;
box-sizing: border-box;
vertical-align: middle;
vertical-align: top;
line-height: 1.44;
line-height: 1.5;
border: 0;
background: transparent;
}
}


.infobox__details th {
.infobox__details th {
width: 31%;
width: 29%;
padding-right: 0.68rem;
padding-right: 0.8rem;
padding-left: 0.68rem;
padding-left: 0.88rem;
border: 0;
color: #5d4638;
border-right: 1px solid #d3bda4;
border-bottom: 1px solid #ddcbb6;
background: #ead8c2;
color: #49352b;
font-family:
font-family:
"SB Aggro M",
"SB Aggro M",
234번째 줄: 221번째 줄:


.infobox__details td {
.infobox__details td {
width: 69%;
width: 71%;
padding-right: 0.74rem;
padding-right: 0.9rem;
padding-left: 0.74rem;
padding-left: 0.1rem;
border: 0;
border-bottom: 1px solid #e2d4c2;
background: rgba(255, 250, 241, 0.96);
color: #49362c;
color: #49362c;
font-family:
font-family:
257번째 줄: 241번째 줄:
}
}


.infobox__details tr:last-child th,
.infobox__details tr:not(:last-child) th,
.infobox__details tr:last-child td {
.infobox__details tr:not(:last-child) td {
border-bottom: 0;
border-bottom: 1px solid #e6d8c9;
}
}


334번째 줄: 318번째 줄:
.infobox__panel {
.infobox__panel {
margin-top: 0.6rem;
margin-top: 0.6rem;
padding: 0.56rem;
border-radius: 12px;
}
}


350번째 줄: 332번째 줄:


.infobox__details {
.infobox__details {
margin-top: 0.3rem;
margin-top: 0.4rem;
border-radius: 9px;
border-radius: 11px;
}
}


.infobox__image + .infobox__details {
.infobox__image + .infobox__details {
margin-top: 0.3rem;
margin-top: 0.4rem;
}
}


.infobox__details th,
.infobox__details th,
.infobox__details td {
.infobox__details td {
padding-top: 0.58rem;
padding-top: 0.8rem;
padding-bottom: 0.58rem;
padding-bottom: 0.8rem;
line-height: 1.42;
line-height: 1.46;
}
}


.infobox__details th {
.infobox__details th {
width: 30%;
width: 28%;
padding-right: 0.68rem;
padding-right: 0.72rem;
padding-left: 0.68rem;
padding-left: 0.8rem;
font-size: 0.98rem;
font-size: 0.98rem;
}
}


.infobox__details td {
.infobox__details td {
width: 70%;
width: 72%;
padding-right: 0.74rem;
padding-right: 0.82rem;
padding-left: 0.74rem;
padding-left: 0.08rem;
font-size: 1rem;
font-size: 1rem;
}
}
402번째 줄: 384번째 줄:


.infobox__panel {
.infobox__panel {
padding: 0.46rem;
margin-top: 0.58rem;
border-radius: 10px;
}
}


418번째 줄: 399번째 줄:


.infobox__details {
.infobox__details {
margin-top: 0.25rem;
margin-top: 0.34rem;
border-radius: 8px;
border-radius: 10px;
}
}


.infobox__image + .infobox__details {
.infobox__image + .infobox__details {
margin-top: 0.25rem;
margin-top: 0.34rem;
}
}


.infobox__details th,
.infobox__details th,
.infobox__details td {
.infobox__details td {
padding-top: 0.5rem;
padding-top: 0.68rem;
padding-bottom: 0.5rem;
padding-bottom: 0.68rem;
line-height: 1.4;
line-height: 1.42;
}
}


.infobox__details th {
.infobox__details th {
width: 34%;
width: 31%;
padding-right: 0.58rem;
padding-right: 0.58rem;
padding-left: 0.58rem;
padding-left: 0.68rem;
font-size: 0.92rem;
font-size: 0.92rem;
}
}


.infobox__details td {
.infobox__details td {
width: 66%;
width: 69%;
padding-right: 0.62rem;
padding-right: 0.68rem;
padding-left: 0.62rem;
padding-left: 0.06rem;
font-size: 0.96rem;
font-size: 0.96rem;
}
}
466번째 줄: 447번째 줄:


html.skin-theme-clientpref-night .infobox__panel {
html.skin-theme-clientpref-night .infobox__panel {
border-color: #69513f;
background: transparent;
background: #302720;
}
 
html.skin-theme-clientpref-night .infobox__panel::before {
opacity: 0.006;
}
}


485번째 줄: 461번째 줄:
html.skin-theme-clientpref-night .infobox__details {
html.skin-theme-clientpref-night .infobox__details {
border-color: #665244;
border-color: #665244;
background: #40342b;
background: #372d26;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
}


html.skin-theme-clientpref-night .infobox__details th {
html.skin-theme-clientpref-night .infobox__details th {
border-right-color: #6f5948;
color: #cbb3a1;
border-bottom-color: #665244;
background: #594536;
color: #f0e5d9;
}
}


html.skin-theme-clientpref-night .infobox__details td {
html.skin-theme-clientpref-night .infobox__details td {
border-bottom-color: #58483c;
background: #40342b;
color: #eee4d9;
color: #eee4d9;
}
html.skin-theme-clientpref-night .infobox__details tr:not(:last-child) th,
html.skin-theme-clientpref-night .infobox__details tr:not(:last-child) td {
border-bottom-color: #514238;
}
}


532번째 줄: 509번째 줄:


html.skin-theme-clientpref-os .infobox__panel {
html.skin-theme-clientpref-os .infobox__panel {
border-color: #69513f;
background: transparent;
background: #302720;
}
 
html.skin-theme-clientpref-os .infobox__panel::before {
opacity: 0.006;
}
}


551번째 줄: 523번째 줄:
html.skin-theme-clientpref-os .infobox__details {
html.skin-theme-clientpref-os .infobox__details {
border-color: #665244;
border-color: #665244;
background: #40342b;
background: #372d26;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
}


html.skin-theme-clientpref-os .infobox__details th {
html.skin-theme-clientpref-os .infobox__details th {
border-right-color: #6f5948;
color: #cbb3a1;
border-bottom-color: #665244;
background: #594536;
color: #f0e5d9;
}
}


html.skin-theme-clientpref-os .infobox__details td {
html.skin-theme-clientpref-os .infobox__details td {
border-bottom-color: #58483c;
background: #40342b;
color: #eee4d9;
color: #eee4d9;
}
html.skin-theme-clientpref-os .infobox__details tr:not(:last-child) th,
html.skin-theme-clientpref-os .infobox__details tr:not(:last-child) td {
border-bottom-color: #514238;
}
}


원본 주소 "https://pvzkrwiki.com/index.php/틀:정보상자/styles.css"