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

식물 vs 좀비 위키
편집 요약 없음
편집 요약 없음
태그: 모바일 편집 모바일 웹 편집
50번째 줄: 50번째 줄:
);
);
box-shadow: 0 4px 9px rgba(67, 43, 29, 0.22);
box-shadow: 0 4px 9px rgba(67, 43, 29, 0.22);
}
.infobox__panel {
margin-top: 0.7rem;
border: 0;
border-radius: 3px;
overflow: hidden;
background: #fff7eb;
}
}


.infobox__image {
.infobox__image {
position: relative;
display: flex;
display: flex;
align-items: center;
align-items: center;
justify-content: center;
justify-content: center;
margin-top: 0.7rem;
padding: 1.5rem 1rem 1.35rem;
padding: 1.5rem 1rem 1.35rem;
border-radius: 3px;
box-sizing: border-box;
box-sizing: border-box;
background: #fff7eb;
background-color: #d3b696;
}
background-image: url("/wiki/Special:Redirect/file/Template_Bg.png");
 
background-repeat: no-repeat;
.infobox__image::after {
background-position: center;
position: absolute;
background-size: cover;
right: 1rem;
overflow: hidden;
bottom: 0;
left: 1rem;
height: 1px;
background: #d4b99c;
content: "";
}
}


88번째 줄: 76번째 줄:
margin: 0 auto;
margin: 0 auto;
object-fit: contain;
object-fit: contain;
filter: drop-shadow(0 11px 9px rgba(74, 49, 32, 0.24));
filter: drop-shadow(0 11px 9px rgba(74, 49, 32, 0.3));
}
 
.infobox__panel {
margin-top: 0.7rem;
padding: 0.45rem 1rem 0.8rem;
border: 1px solid #d4b99c;
border-radius: 3px;
box-sizing: border-box;
background: #fff7eb;
overflow: hidden;
}
}


.infobox__details {
.infobox__details {
width: calc(100% - 2rem);
width: 100%;
margin: 0 1rem 0.8rem;
margin: 0;
padding-top: 0.45rem;
border: 0;
border: 0;
border-collapse: collapse;
border-collapse: collapse;
200번째 줄: 197번째 줄:
}
}


.infobox__panel {
.infobox__image {
margin-top: 0.62rem;
margin-top: 0.62rem;
padding: 1.25rem 0.85rem;
border-radius: 2px;
border-radius: 2px;
}
.infobox__image {
padding: 1.25rem 0.85rem;
}
.infobox__image::after {
right: 0.8rem;
left: 0.8rem;
}
}


218번째 줄: 207번째 줄:
}
}


.infobox__details {
.infobox__panel {
width: calc(100% - 1.6rem);
margin-top: 0.62rem;
margin-right: 0.8rem;
padding-right: 0.8rem;
margin-left: 0.8rem;
padding-left: 0.8rem;
border-radius: 2px;
}
}


242번째 줄: 232번째 줄:
}
}


.infobox__panel {
.infobox__image {
border-radius: 2px;
padding: 1rem 0.7rem;
}
 
.infobox__image::after {
right: 0.65rem;
left: 0.65rem;
}
}


255번째 줄: 240번째 줄:
}
}


.infobox__details {
.infobox__panel {
width: calc(100% - 1.3rem);
padding-right: 0.65rem;
margin-right: 0.65rem;
padding-left: 0.65rem;
margin-left: 0.65rem;
}
}


284번째 줄: 268번째 줄:
color: #fff8ef;
color: #fff8ef;
box-shadow: 0 4px 9px rgba(0, 0, 0, 0.28);
box-shadow: 0 4px 9px rgba(0, 0, 0, 0.28);
}
html.skin-theme-clientpref-night .infobox__panel {
background: #30241e;
}
}


html.skin-theme-clientpref-night .infobox__image {
html.skin-theme-clientpref-night .infobox__image {
background: #30241e;
background-color: #30241e;
}
}


html.skin-theme-clientpref-night .infobox__image::after {
html.skin-theme-clientpref-night .infobox__image img {
background: #66503e;
filter: drop-shadow(0 11px 9px rgba(0, 0, 0, 0.4));
}
}


html.skin-theme-clientpref-night .infobox__image img {
html.skin-theme-clientpref-night .infobox__panel {
filter: drop-shadow(0 11px 9px rgba(0, 0, 0, 0.36));
border-color: #66503e;
background: #30241e;
}
}


332번째 줄: 313번째 줄:
color: #fff8ef;
color: #fff8ef;
box-shadow: 0 4px 9px rgba(0, 0, 0, 0.28);
box-shadow: 0 4px 9px rgba(0, 0, 0, 0.28);
}
html.skin-theme-clientpref-os .infobox__panel {
background: #30241e;
}
}


html.skin-theme-clientpref-os .infobox__image {
html.skin-theme-clientpref-os .infobox__image {
background: #30241e;
background-color: #30241e;
}
}


html.skin-theme-clientpref-os .infobox__image::after {
html.skin-theme-clientpref-os .infobox__image img {
background: #66503e;
filter: drop-shadow(0 11px 9px rgba(0, 0, 0, 0.4));
}
}


html.skin-theme-clientpref-os .infobox__image img {
html.skin-theme-clientpref-os .infobox__panel {
filter: drop-shadow(0 11px 9px rgba(0, 0, 0, 0.36));
border-color: #66503e;
background: #30241e;
}
}