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

식물 vs 좀비 위키
← 이전 편집다음 편집 →
편집 취소Brokey (토론 | 기여)
사무관, 인터페이스 관리자, 관리자
385 편집
편집 요약 없음
편집 요약 없음
25번째 줄: 25번째 줄:
max-width: 100%;
max-width: 100%;
margin: 0 0 1.25rem 1.25rem;
margin: 0 0 1.25rem 1.25rem;
padding: 1.05rem 0.48rem 0.72rem;
padding: 1.05rem 0.48rem 1.44rem;
border: 3px solid var(--infobox-outer-edge);
border: 3px solid var(--infobox-outer-edge);
border-radius: 24px;
border-radius: 24px;
53번째 줄: 53번째 줄:
bottom: 6px;
bottom: 6px;
left: 6px;
left: 6px;
border: 1px solid var(--infobox-inner-edge);
border: 3px solid var(--infobox-inner-edge);
border-radius: 18px;
border-radius: 18px;
box-sizing: border-box;
box-sizing: border-box;
145번째 줄: 145번째 줄:
margin: 0 auto 0.78rem;
margin: 0 auto 0.78rem;
padding: 0.82rem;
padding: 0.82rem;
border: 1px solid var(--infobox-row-edge);
border: 0;
border-radius: 11px;
border-radius: 0;
box-sizing: border-box;
box-sizing: border-box;
background-color: var(--infobox-panel);
background-color: transparent;
background-image: var(--infobox-image-bg);
background-image: var(--infobox-image-bg);
background-repeat: no-repeat;
background-repeat: no-repeat;
background-position: center;
background-position: center;
background-size: cover;
background-size: contain;
box-shadow:
box-shadow: none;
0 3px 8px rgba(68, 42, 31, 0.1),
overflow: visible;
inset 0 0 0 3px rgba(200, 170, 126, 0.14);
overflow: hidden;
text-align: center;
text-align: center;
}
}


/* 이미지칸 안쪽 테두리 */
.infobox__image::before,
.infobox__image::before {
position: absolute;
top: 7px;
right: 7px;
bottom: 7px;
left: 7px;
border: 1px solid rgba(146, 95, 70, 0.18);
border-radius: 7px;
box-sizing: border-box;
content: "";
pointer-events: none;
}
 
/* 오른쪽 아래 짧은 선 */
.infobox__image::after {
.infobox__image::after {
position: absolute;
display: none;
right: 0.72rem;
bottom: 0.58rem;
width: 30px;
height: 3px;
border-radius: 3px;
background: var(--infobox-ribbon);
content: "";
opacity: 0.48;
pointer-events: none;
}
}


216번째 줄: 191번째 줄:
width: calc(100% - 24px);
width: calc(100% - 24px);
margin: 0 auto;
margin: 0 auto;
border: 1px solid var(--infobox-row-edge);
border: 0;
border-collapse: separate;
border-collapse: separate;
border-spacing: 0;
border-spacing: 0;
242번째 줄: 217번째 줄:
}
}


.infobox__details tr:not(:last-child) th {
background-image:
linear-gradient(
var(--infobox-row-divider),
var(--infobox-row-divider)
);
background-position: right bottom;
background-size: calc(100% - 0.72rem) 1px;
}
.infobox__details tr:not(:last-child) td {
background-image:
linear-gradient(
var(--infobox-row-divider),
var(--infobox-row-divider)
);
background-position: left bottom;
background-size: calc(100% - 0.72rem) 1px;
}


.infobox__details th {
.infobox__details th {
458번째 줄: 414번째 줄:
max-width: 100%;
max-width: 100%;
margin: 0 0 1.1rem;
margin: 0 0 1.1rem;
padding: 1rem 0.42rem 0.66rem;
padding: 1rem 0.42rem 1.32rem;
border-radius: 22px;
border-radius: 22px;
font-size: 1rem;
font-size: 1rem;
493번째 줄: 449번째 줄:
}
}


.infobox__details tr:not(:last-child) th {
background-size: calc(100% - 0.66rem) 1px;
}
.infobox__details tr:not(:last-child) td {
background-size: calc(100% - 0.66rem) 1px;
}


.infobox__details th {
.infobox__details th {
540번째 줄: 489번째 줄:
@media screen and (max-width: 480px) {
@media screen and (max-width: 480px) {
.infobox {
.infobox {
padding: 0.92rem 0.34rem 0.58rem;
padding: 0.92rem 0.34rem 1.16rem;
border-radius: 19px;
border-radius: 19px;
}
}
573번째 줄: 522번째 줄:
}
}


.infobox__details tr:not(:last-child) th {
background-size: calc(100% - 0.58rem) 1px;
}
.infobox__details tr:not(:last-child) td {
background-size: calc(100% - 0.58rem) 1px;
}


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