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

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


/* 이름칸은 기존 스타일 유지 */
.infobox__title,
.infobox__title,
.infobox__panel {
.infobox__panel {
80번째 줄: 79번째 줄:
}
}


/* 아래부터 새 디자인 */
.infobox__panel {
.infobox__panel {
margin-top: 0.72rem;
margin-top: 0.72rem;
96번째 줄: 94번째 줄:
}
}


/* 이미지칸 */
.infobox__image {
.infobox__image {
position: relative;
display: flex;
display: flex;
align-items: center;
align-items: center;
justify-content: center;
justify-content: center;
width: 100%;
width: 100%;
min-height: 330px;
aspect-ratio: 1 / 1;
padding: 1rem;
margin: 0 0 1rem;
margin: 0 0 1rem;
padding: 2.2rem;
border: 0;
border: 0;
border-radius: 0;
box-sizing: border-box;
box-sizing: border-box;
background: transparent;
background-color: transparent;
overflow: visible;
background-image: url("/wiki/Special:Redirect/file/Template%20Bg.png");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
overflow: hidden;
}
}


.infobox__image::before {
.infobox__image a {
position: absolute;
display: flex;
inset: 0;
align-items: center;
border: 2px solid #934f2c;
justify-content: center;
background:
width: 100%;
url("/wiki/Special:Redirect/file/Template%20Bg.png") center center / cover no-repeat,
height: 100%;
#efdfbf;
clip-path: polygon(
0 0,
100% 1.2%,
99% 37%,
100% 37.8%,
100% 58%,
97.9% 60.5%,
100% 100%,
61.5% 100%,
58% 95.6%,
54% 100%,
1.5% 100%,
1% 14%,
0 13.2%,
0 9%,
3.2% 6.2%,
0 3.8%
);
border-radius: 2px;
content: "";
}
 
.infobox__image::after {
position: absolute;
inset: 2.35rem 2.35rem 2.45rem;
background: rgba(243, 226, 194, 0.96);
border-radius: 2px;
content: "";
}
 
.infobox__image a,
.infobox__image img {
position: relative;
z-index: 1;
}
}


158번째 줄: 124번째 줄:
display: block;
display: block;
width: auto;
width: auto;
max-width: calc(100% - 3.6rem);
max-width: 100%;
height: auto;
height: auto;
max-height: 230px;
max-height: 100%;
margin: 0 auto;
margin: 0 auto;
object-fit: contain;
object-fit: contain;
166번째 줄: 132번째 줄:
}
}


/* 정보칸 */
.infobox__details {
.infobox__details {
width: 100%;
width: 100%;
194번째 줄: 159번째 줄:
padding-top: 0.72rem;
padding-top: 0.72rem;
padding-bottom: 0.72rem;
padding-bottom: 0.72rem;
border: 0;
box-sizing: border-box;
box-sizing: border-box;
background: transparent;
vertical-align: top;
vertical-align: top;
line-height: 1.46;
line-height: 1.46;
border: 0;
background: transparent;
}
}


287번째 줄: 252번째 줄:
.infobox a:focus {
.infobox a:focus {
outline: 2px solid #a87959;
outline: 2px solid #a87959;
outline-offset: 1px;
}
}


324번째 줄: 288번째 줄:


.infobox__image {
.infobox__image {
min-height: 300px;
width: 100%;
padding: 0.92rem;
aspect-ratio: 1 / 1;
margin-bottom: 0.92rem;
margin-bottom: 0.92rem;
}
padding: 2rem;
 
background-size: contain;
.infobox__image::after {
inset: 2.1rem 2.1rem 2.2rem;
}
 
.infobox__image img {
max-width: calc(100% - 3.1rem);
max-height: 215px;
}
}


389번째 줄: 346번째 줄:


.infobox__image {
.infobox__image {
min-height: 258px;
width: 100%;
padding: 0.78rem;
aspect-ratio: 1 / 1;
margin-bottom: 0.82rem;
margin-bottom: 0.82rem;
}
padding: 1.7rem;
 
background-size: contain;
.infobox__image::after {
inset: 1.78rem 1.78rem 1.9rem;
}
 
.infobox__image img {
max-width: calc(100% - 2.6rem);
max-height: 188px;
}
}


443번째 줄: 393번째 줄:
}
}


html.skin-theme-clientpref-night .infobox__image::before {
html.skin-theme-clientpref-night .infobox__image {
border-color: #8c5c3d;
background-color: transparent;
background:
background-image: url("/wiki/Special:Redirect/file/Template%20Bg.png");
url("/wiki/Special:Redirect/file/Template%20Bg.png") center center / cover no-repeat,
background-repeat: no-repeat;
#58473a;
background-position: center;
}
background-size: contain;
 
html.skin-theme-clientpref-night .infobox__image::after {
background: rgba(80, 62, 47, 0.94);
}
}


493번째 줄: 440번째 줄:
}
}


html.skin-theme-clientpref-os .infobox__image::before {
html.skin-theme-clientpref-os .infobox__image {
border-color: #8c5c3d;
background-color: transparent;
background:
background-image: url("/wiki/Special:Redirect/file/Template%20Bg.png");
url("/wiki/Special:Redirect/file/Template%20Bg.png") center center / cover no-repeat,
background-repeat: no-repeat;
#58473a;
background-position: center;
}
background-size: contain;
 
html.skin-theme-clientpref-os .infobox__image::after {
background: rgba(80, 62, 47, 0.94);
}
}


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