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

식물 vs 좀비 위키
← 이전 편집다음 편집 →
편집 취소Brokey (토론 | 기여)
사무관, 인터페이스 관리자, 관리자
385 편집
편집 요약 없음
태그: 수동 되돌리기 모바일 편집 모바일 웹 편집
편집 요약 없음
48번째 줄: 48번째 줄:
line-height: 1.55;
line-height: 1.55;
box-shadow: 0 10px 26px var(--infobox-shadow);
box-shadow: 0 10px 26px var(--infobox-shadow);
overflow: hidden;
overflow: visible;
}
}


87번째 줄: 87번째 줄:
align-items: center;
align-items: center;
justify-content: center;
justify-content: center;
width: calc(100% - 24px);
width: calc(100% - 6px);
margin: 0 auto;
margin: -1.55rem auto 0;
padding: 0.96rem 2.25rem;
padding: 0.96rem 2.35rem;
border: 2px solid var(--infobox-ribbon-edge);
border: 0;
box-sizing: border-box;
box-sizing: border-box;
background: var(--infobox-ribbon);
background: var(--infobox-ribbon);
clip-path: polygon(4% 0, 96% 0, 100% 100%, 0 100%);
clip-path: polygon(
0 0,
100% 0,
calc(100% - 15px) 50%,
100% 100%,
0 100%,
15px 50%
);
color: var(--infobox-title-text);
color: var(--infobox-title-text);
font-family:
font-family:
131번째 줄: 138번째 줄:
/* 내부 영역 */
/* 내부 영역 */
.infobox__panel {
.infobox__panel {
margin-top: 0.92rem;
margin-top: 0.58rem;
padding: 0 0.16rem 0.1rem;
padding: 0 0.16rem 0.1rem;
background: transparent;
background: transparent;
139번째 줄: 146번째 줄:
.infobox__image {
.infobox__image {
position: relative;
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: calc(100% - 18px);
width: calc(100% - 18px);
min-height: 92px;
aspect-ratio: 1 / 1;
max-height: 248px;
margin: 0 auto 0.78rem;
margin: 0 auto 0.78rem;
padding: 0.9rem 0.9rem 1rem;
padding: 0.9rem;
border: 3px solid var(--infobox-image-frame);
border: 3px solid var(--infobox-image-frame);
box-sizing: border-box;
box-sizing: border-box;
background-color: var(--infobox-image-inner);
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: 100% 100%;
clip-path: polygon(
clip-path: polygon(
0 0,
0 0,
184번째 줄: 193번째 줄:
position: relative;
position: relative;
z-index: 1;
z-index: 1;
}
.infobox__image a {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
}


.infobox__image img {
.infobox__image img {
display: block;
display: block;
width: auto;
width: 100%;
max-width: 100%;
max-width: 100%;
height: auto;
height: 100%;
max-height: 208px;
max-height: 100%;
margin: 0 auto;
margin: 0 auto;
object-fit: contain;
object-fit: contain;
198번째 줄: 215번째 줄:
/* 정보 표 */
/* 정보 표 */
.infobox__details {
.infobox__details {
width: calc(100% - 18px);
width: calc(100% - 4px);
margin: 0 auto;
margin: 0 auto;
border: 0;
border: 2px solid var(--infobox-row-value-edge);
border-collapse: separate;
border-collapse: separate;
border-spacing: 0 0.38rem;
border-spacing: 0;
border-radius: 8px;
table-layout: fixed;
table-layout: fixed;
background: transparent;
background: var(--infobox-row-value);
box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
}
}


214번째 줄: 233번째 줄:
.infobox__details th,
.infobox__details th,
.infobox__details td {
.infobox__details td {
padding: 0.5rem 0.76rem;
width: 69%;
box-sizing: border-box;
border: 0;
vertical-align: middle;
border-radius: 0;
line-height: 1.35;
background: var(--infobox-row-value);
color: var(--infobox-text);
font-family:
"SB Aggro L",
"SB 어그로 L",
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
"Apple SD Gothic Neo",
"Noto Sans KR",
sans-serif;
font-size: 0.9rem;
font-weight: 300;
text-align: left;
word-break: break-word;
overflow-wrap: anywhere;
}
 
.infobox__details tr:not(:last-child) th,
.infobox__details tr:not(:last-child) td {
border-bottom: 1px solid var(--infobox-row-value-edge);
}
}


.infobox__details th {
.infobox__details th {
width: 31%;
width: 31%;
border: 2px solid var(--infobox-row-label-edge);
border: 0;
border-right: 0;
border-right: 1px solid var(--infobox-row-value-edge);
border-radius: 6px 0 0 6px;
border-radius: 0;
background: var(--infobox-row-label);
background: var(--infobox-row-value);
color: var(--infobox-title-text);
color: var(--infobox-title-text);
font-family:
font-family:
239번째 줄: 278번째 줄:
font-weight: 500;
font-weight: 500;
text-align: left;
text-align: left;
vertical-align: top;
text-shadow:
text-shadow:
-1px -1px 0 var(--infobox-text-outline),
-1px -1px 0 var(--infobox-text-outline),
544번째 줄: 584번째 줄:


.infobox__title {
.infobox__title {
margin-top: -1.25rem;
padding: 0.8rem 1.72rem;
padding: 0.8rem 1.72rem;
font-size: 1.3rem;
font-size: 1.3rem;
549번째 줄: 590번째 줄:


.infobox__image {
.infobox__image {
min-height: 80px;
aspect-ratio: 1 / 1;
max-height: 220px;
padding: 0.7rem;
padding: 0.7rem 0.68rem 0.82rem;
}
 
.infobox__image img {
max-height: 178px;
}
}


.infobox__details {
.infobox__details {
border-spacing: 0 0.34rem;
width: calc(100% - 2px);
border-spacing: 0;
}
}


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