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

식물 vs 좀비 위키
편집 요약 없음
편집 요약 없음
61번째 줄: 61번째 줄:
width: 100%;
width: 100%;
min-height: 58px;
min-height: 58px;
padding: 0.72rem 3.3rem 0.68rem;
padding: 0.72rem 2.1rem 0.68rem;
border: 1px solid #765b45;
border: 1px solid #765b45;
border-radius: 0;
border-radius: 0;
81번째 줄: 81번째 줄:
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;
89번째 줄: 90번째 줄:
position: absolute;
position: absolute;
z-index: 2;
z-index: 2;
top: 50%;
top: -1px;
width: 0;
bottom: -1px;
height: 0;
width: 21px;
margin-top: -30px;
background: #e8ddc9;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
content: "";
content: "";
}
}
100번째 줄: 99번째 줄:
.infobox__title::before {
.infobox__title::before {
left: -1px;
left: -1px;
border-left: 38px solid #e8ddc9;
clip-path: polygon(0 0, 100% 50%, 0 100%);
}
}


.infobox__title::after {
.infobox__title::after {
right: -1px;
right: -1px;
border-right: 38px solid #e8ddc9;
clip-path: polygon(100% 0, 0 50%, 100% 100%);
}
}


279번째 줄: 278번째 줄:
width: 35%;
width: 35%;
padding-right: 1rem;
padding-right: 1rem;
padding-left: 0.82rem;
padding-left: 0.78rem;
border: 1px solid #ae9272;
border: 1px solid #ae9272;
border-right: 0;
border-right: 0;
border-left-width: 5px;
border-radius: 9px 0 0 9px;
border-radius: 10px 0 0 10px;
background: #d5c2a4;
background: #d5c2a4;
color: #49372c;
color: #49372c;
304번째 줄: 302번째 줄:
position: absolute;
position: absolute;
z-index: 3;
z-index: 3;
top: 50%;
top: -1px;
right: -11px;
right: -18px;
width: 0;
bottom: -1px;
height: 0;
width: 19px;
margin-top: -11px;
background: #d5c2a4;
border-top: 11px solid transparent;
border-bottom: 11px solid transparent;
border-left: 11px solid #d5c2a4;
content: "";
content: "";
clip-path: polygon(0 0, 100% 50%, 0 100%);
}
}


.infobox__details td {
.infobox__details td {
position: relative;
z-index: 1;
width: 65%;
width: 65%;
padding-right: 0.76rem;
padding-right: 0.76rem;
padding-left: 1.15rem;
padding-left: 1.35rem;
border: 1px solid #cbb79b;
border: 1px solid #cbb79b;
border-left: 0;
border-left: 0;
border-radius: 0 10px 10px 0;
border-radius: 0 9px 9px 0;
background: rgba(253, 249, 241, 0.96);
background: rgba(253, 249, 241, 0.96);
color: #3b3028;
color: #3b3028;
397번째 줄: 395번째 줄:
.infobox__title {
.infobox__title {
min-height: 64px;
min-height: 64px;
padding: 0.82rem 4rem 0.78rem;
padding: 0.82rem 2.3rem 0.78rem;
font-size: 1.9rem;
font-size: 1.9rem;
line-height: 1.18;
line-height: 1.18;
404번째 줄: 402번째 줄:
.infobox__title::before,
.infobox__title::before,
.infobox__title::after {
.infobox__title::after {
margin-top: -33px;
width: 23px;
border-top-width: 33px;
border-bottom-width: 33px;
}
 
.infobox__title::before {
border-left-width: 44px;
}
 
.infobox__title::after {
border-right-width: 44px;
}
}


447번째 줄: 435번째 줄:
padding-left: 0.78rem;
padding-left: 0.78rem;
font-size: 0.98rem;
font-size: 0.98rem;
}
.infobox__details th::after {
right: -20px;
width: 21px;
}
}


452번째 줄: 445번째 줄:
width: 66%;
width: 66%;
padding-right: 0.76rem;
padding-right: 0.76rem;
padding-left: 1.18rem;
padding-left: 1.45rem;
font-size: 1rem;
font-size: 1rem;
}
}
465번째 줄: 458번째 줄:
.infobox__title {
.infobox__title {
min-height: 58px;
min-height: 58px;
padding: 0.72rem 3.35rem 0.68rem;
padding: 0.72rem 1.9rem 0.68rem;
font-size: 1.7rem;
font-size: 1.7rem;
}
}
471번째 줄: 464번째 줄:
.infobox__title::before,
.infobox__title::before,
.infobox__title::after {
.infobox__title::after {
margin-top: -30px;
width: 18px;
border-top-width: 30px;
border-bottom-width: 30px;
}
 
.infobox__title::before {
border-left-width: 37px;
}
 
.infobox__title::after {
border-right-width: 37px;
}
}


519번째 줄: 502번째 줄:
.infobox__details th {
.infobox__details th {
width: 38%;
width: 38%;
padding-right: 0.82rem;
padding-right: 0.78rem;
padding-left: 0.62rem;
padding-left: 0.62rem;
border-left-width: 4px;
border-radius: 8px 0 0 8px;
border-radius: 8px 0 0 8px;
font-size: 0.92rem;
font-size: 0.92rem;
528번째 줄: 510번째 줄:


.infobox__details th::after {
.infobox__details th::after {
right: -8px;
right: -14px;
margin-top: -8px;
width: 15px;
border-top-width: 8px;
border-bottom-width: 8px;
border-left-width: 8px;
}
}


538번째 줄: 517번째 줄:
width: 62%;
width: 62%;
padding-right: 0.58rem;
padding-right: 0.58rem;
padding-left: 0.92rem;
padding-left: 1.05rem;
border-radius: 0 8px 8px 0;
border-radius: 0 8px 8px 0;
font-size: 0.96rem;
font-size: 0.96rem;
563번째 줄: 542번째 줄:
}
}


html.skin-theme-clientpref-night .infobox__title::before {
html.skin-theme-clientpref-night .infobox__title::before,
border-left-color: #39312b;
}
 
html.skin-theme-clientpref-night .infobox__title::after {
html.skin-theme-clientpref-night .infobox__title::after {
border-right-color: #39312b;
background: #39312b;
}
}


612번째 줄: 588번째 줄:


html.skin-theme-clientpref-night .infobox__details th::after {
html.skin-theme-clientpref-night .infobox__details th::after {
border-left-color: #59483b;
background: #59483b;
}
}


652번째 줄: 628번째 줄:
}
}


html.skin-theme-clientpref-os .infobox__title::before {
html.skin-theme-clientpref-os .infobox__title::before,
border-left-color: #39312b;
}
 
html.skin-theme-clientpref-os .infobox__title::after {
html.skin-theme-clientpref-os .infobox__title::after {
border-right-color: #39312b;
background: #39312b;
}
}


701번째 줄: 674번째 줄:


html.skin-theme-clientpref-os .infobox__details th::after {
html.skin-theme-clientpref-os .infobox__details th::after {
border-left-color: #59483b;
background: #59483b;
}
}