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

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


.infobox__title {
.infobox__title {
position: relative;
display: flex;
display: flex;
align-items: center;
align-items: center;
66번째 줄: 65번째 줄:
box-sizing: border-box;
box-sizing: border-box;
background: #927159;
background: #927159;
clip-path: polygon(
0 0,
21px 50%,
0 100%,
100% 100%,
calc(100% - 21px) 50%,
100% 0
);
color: #fff9f1;
color: #fff9f1;
font-family:
font-family:
81번째 줄: 88번째 줄:
line-height: 1.28;
line-height: 1.28;
text-align: center;
text-align: center;
overflow: hidden;
overflow-wrap: anywhere;
overflow-wrap: anywhere;
word-break: keep-all;
word-break: keep-all;
}
.infobox__title::before,
.infobox__title::after {
position: absolute;
z-index: 2;
top: 0;
bottom: 0;
width: 21px;
background: #e8ddc9;
content: "";
}
.infobox__title::before {
left: 0;
clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.infobox__title::after {
right: 0;
clip-path: polygon(100% 0, 0 50%, 100% 100%);
}
}


.infobox__title p {
.infobox__title p {
position: relative;
z-index: 3;
margin: 0;
margin: 0;
font: inherit;
font: inherit;
242번째 줄: 225번째 줄:
.infobox__details {
.infobox__details {
width: 100%;
width: 100%;
margin: -0.42rem 0;
margin: 0.62rem 0 -0.42rem;
border: 0;
border: 0;
border-collapse: separate;
border-collapse: separate;
260번째 줄: 243번째 줄:


.infobox__image + .infobox__details {
.infobox__image + .infobox__details {
margin-top: -0.42rem;
margin-top: 0.62rem;
}
}


274번째 줄: 257번째 줄:


.infobox__details th {
.infobox__details th {
position: relative;
z-index: 2;
width: 31%;
width: 31%;
padding-right: 0.92rem;
padding-right: 0.72rem;
padding-left: 0.72rem;
padding-left: 0.72rem;
border: 1px solid #ae9272;
border: 1px solid #ae9272;
297번째 줄: 278번째 줄:
text-align: left;
text-align: left;
white-space: normal;
white-space: normal;
}
.infobox__details th::after {
position: absolute;
z-index: 3;
top: -1px;
right: -18px;
bottom: -1px;
width: 19px;
background: #d5c2a4;
content: "";
clip-path: polygon(0 0, 100% 50%, 0 100%);
}
}


.infobox__details td {
.infobox__details td {
position: relative;
z-index: 1;
width: 69%;
width: 69%;
padding-right: 0.76rem;
padding-right: 0.76rem;
padding-left: 1.55rem;
padding-left: 0.76rem;
border: 1px solid #cbb79b;
border: 1px solid #cbb79b;
border-left: 0;
border-left: 0;
396번째 줄: 363번째 줄:
min-height: 64px;
min-height: 64px;
padding: 0.82rem 2.3rem 0.78rem;
padding: 0.82rem 2.3rem 0.78rem;
clip-path: polygon(
0 0,
23px 50%,
0 100%,
100% 100%,
calc(100% - 23px) 50%,
100% 0
);
font-size: 1.9rem;
font-size: 1.9rem;
line-height: 1.18;
line-height: 1.18;
}
.infobox__title::before,
.infobox__title::after {
width: 23px;
}
}


427번째 줄: 397번째 줄:


.infobox__details {
.infobox__details {
margin-top: -0.44rem;
margin-top: 0.6rem;
margin-bottom: -0.44rem;
margin-bottom: -0.44rem;
border-spacing: 0 0.44rem;
border-spacing: 0 0.44rem;
433번째 줄: 403번째 줄:


.infobox__image + .infobox__details {
.infobox__image + .infobox__details {
margin-top: -0.44rem;
margin-top: 0.6rem;
}
}


.infobox__details th {
.infobox__details th {
width: 30%;
width: 30%;
padding-right: 0.9rem;
padding-right: 0.7rem;
padding-left: 0.7rem;
padding-left: 0.7rem;
font-size: 0.98rem;
font-size: 0.98rem;
}
.infobox__details th::after {
right: -20px;
width: 21px;
}
}


451번째 줄: 416번째 줄:
width: 70%;
width: 70%;
padding-right: 0.76rem;
padding-right: 0.76rem;
padding-left: 1.65rem;
padding-left: 0.76rem;
font-size: 1rem;
font-size: 1rem;
}
}
465번째 줄: 430번째 줄:
min-height: 58px;
min-height: 58px;
padding: 0.72rem 1.9rem 0.68rem;
padding: 0.72rem 1.9rem 0.68rem;
clip-path: polygon(
0 0,
18px 50%,
0 100%,
100% 100%,
calc(100% - 18px) 50%,
100% 0
);
font-size: 1.7rem;
font-size: 1.7rem;
}
.infobox__title::before,
.infobox__title::after {
width: 18px;
}
}


503번째 줄: 471번째 줄:


.infobox__details {
.infobox__details {
margin-top: -0.36rem;
margin-top: 0.5rem;
margin-bottom: -0.36rem;
margin-bottom: -0.36rem;
border-spacing: 0 0.36rem;
border-spacing: 0 0.36rem;
509번째 줄: 477번째 줄:


.infobox__image + .infobox__details {
.infobox__image + .infobox__details {
margin-top: -0.36rem;
margin-top: 0.5rem;
}
}


.infobox__details th {
.infobox__details th {
width: 34%;
width: 34%;
padding-right: 0.7rem;
padding-right: 0.58rem;
padding-left: 0.58rem;
padding-left: 0.58rem;
border-radius: 8px 0 0 8px;
border-radius: 8px 0 0 8px;
font-size: 0.92rem;
font-size: 0.92rem;
line-height: 1.4;
line-height: 1.4;
}
.infobox__details th::after {
right: -14px;
width: 15px;
}
}


529번째 줄: 492번째 줄:
width: 66%;
width: 66%;
padding-right: 0.58rem;
padding-right: 0.58rem;
padding-left: 1.2rem;
padding-left: 0.58rem;
border-radius: 0 8px 8px 0;
border-radius: 0 8px 8px 0;
font-size: 0.96rem;
font-size: 0.96rem;
551번째 줄: 514번째 줄:
background: #6b5546;
background: #6b5546;
color: #fff5e9;
color: #fff5e9;
}
html.skin-theme-clientpref-night .infobox__title::before,
html.skin-theme-clientpref-night .infobox__title::after {
background: #39312b;
}
}


596번째 줄: 554번째 줄:
background: #59483b;
background: #59483b;
color: #f0e4d7;
color: #f0e4d7;
}
html.skin-theme-clientpref-night .infobox__details th::after {
background: #59483b;
}
}


636번째 줄: 590번째 줄:
background: #6b5546;
background: #6b5546;
color: #fff5e9;
color: #fff5e9;
}
html.skin-theme-clientpref-os .infobox__title::before,
html.skin-theme-clientpref-os .infobox__title::after {
background: #39312b;
}
}


681번째 줄: 630번째 줄:
background: #59483b;
background: #59483b;
color: #f0e4d7;
color: #f0e4d7;
}
html.skin-theme-clientpref-os .infobox__details th::after {
background: #59483b;
}
}


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