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

식물 vs 좀비 위키
← 이전 편집다음 편집 →
편집 취소Brokey (토론 | 기여)
사무관, 인터페이스 관리자, 관리자
385 편집
편집 요약 없음
태그: 되돌려진 기여
편집 요약 없음
태그: 수동 되돌리기
6번째 줄: 6번째 줄:
margin: 0 0 1.25rem 1.25rem;
margin: 0 0 1.25rem 1.25rem;
padding: 0.72rem;
padding: 0.72rem;
border: 3px solid #3d733a;
border: 3px solid #587d55;
border-radius: 8px;
border-radius: 6px;
box-sizing: border-box;
box-sizing: border-box;
background: #d9ead4;
background: #dfe9dc;
color: #293728;
color: #293628;
font-family:
font-family:
-apple-system,
-apple-system,
20번째 줄: 20번째 줄:
font-size: 0.92rem;
font-size: 0.92rem;
line-height: 1.5;
line-height: 1.5;
box-shadow: 0 0 22px rgba(48, 88, 45, 0.3);
box-shadow: 0 0 24px rgba(63, 91, 60, 0.32);
}
}


.infobox__title {
.infobox__title {
padding: 0.18rem 0.82rem;
padding: 0.28rem 0.85rem;
border: 1px solid #376e35;
border: 0;
border-bottom-width: 3px;
border-radius: 4px;
border-radius: 4px;
background: #479745;
background: #608b5d;
color: #f8fff6;
color: #f8fff6;
font-family:
font-family:
44번째 줄: 43번째 줄:
overflow-wrap: anywhere;
overflow-wrap: anywhere;
word-break: keep-all;
word-break: keep-all;
box-shadow: 0 3px 8px rgba(48, 83, 45, 0.2);
}
}


.infobox__panel {
.infobox__panel {
margin-top: 0.68rem;
margin-top: 0.7rem;
border: 1px solid #91b18b;
border: 0;
border-radius: 6px;
border-radius: 5px;
overflow: hidden;
overflow: hidden;
background: #f3f8f1;
background: #f2f5f0;
}
}


.infobox__image {
.infobox__image {
position: relative;
display: flex;
display: flex;
align-items: center;
align-items: center;
justify-content: center;
justify-content: center;
padding: 1.35rem 1rem 1.25rem;
padding: 1.5rem 1rem 1.35rem;
box-sizing: border-box;
box-sizing: border-box;
background: #f3f8f1;
background: #f2f5f0;
}
 
.infobox__image::after {
position: absolute;
right: 1rem;
bottom: 0;
left: 1rem;
height: 1px;
background: #bccbbb;
content: "";
}
}


69번째 줄: 78번째 줄:
max-width: 100%;
max-width: 100%;
height: auto;
height: auto;
max-height: 215px;
max-height: 210px;
margin: 0 auto;
margin: 0 auto;
object-fit: contain;
object-fit: contain;
filter: drop-shadow(0 9px 7px rgba(47, 79, 44, 0.24));
filter: drop-shadow(0 11px 9px rgba(59, 81, 56, 0.22));
}
}


.infobox__details {
.infobox__details {
width: calc(100% - 2rem);
width: calc(100% - 2rem);
margin: 0 1rem 0.75rem;
margin: 0 1rem 0.8rem;
padding-top: 0.48rem;
padding-top: 0.45rem;
border-top: 1px solid #abc5a5;
border: 0;
border-collapse: separate;
border-collapse: collapse;
border-spacing: 0 0.34rem;
border-spacing: 0;
table-layout: fixed;
table-layout: fixed;
background: transparent;
background: transparent;
98번째 줄: 107번째 줄:
.infobox__details td {
.infobox__details td {
min-width: 0;
min-width: 0;
padding: 0.4rem 0.55rem;
padding: 0.48rem 0;
border: 0;
box-sizing: border-box;
box-sizing: border-box;
vertical-align: middle;
vertical-align: top;
font-family:
font-family:
"SB Aggro L",
"SB Aggro L",
111번째 줄: 121번째 줄:
sans-serif;
sans-serif;
font-weight: 300;
font-weight: 300;
line-height: 1.45;
line-height: 1.5;
}
}


.infobox__details th {
.infobox__details th {
width: 35%;
width: 35%;
border: 1px solid #72986b;
padding-right: 0.75rem;
border-radius: 4px 0 0 4px;
color: #6d7b6a;
background: #83aa7b;
font-size: 0.86rem;
color: #f8fff6;
font-size: 0.84rem;
text-align: left;
text-align: left;
white-space: normal;
white-space: normal;
126번째 줄: 134번째 줄:


.infobox__details td {
.infobox__details td {
border: 1px solid #c2d6bc;
color: #303b2f;
border-left: 0;
font-size: 0.9rem;
border-radius: 0 4px 4px 0;
background: #e7f1e3;
color: #2d3a2c;
font-size: 0.89rem;
text-align: left;
text-align: left;
overflow-wrap: anywhere;
overflow-wrap: anywhere;
156번째 줄: 160번째 줄:


.infobox a {
.infobox a {
color: #397a36;
color: #52794f;
text-decoration: none;
text-decoration: none;
}
}


.infobox a:hover {
.infobox a:hover {
color: #245522;
color: #365b34;
text-decoration: underline;
text-decoration: underline;
}
}
173번째 줄: 177번째 줄:
margin: 0 0 1.1rem;
margin: 0 0 1.1rem;
padding: 0.62rem;
padding: 0.62rem;
border-radius: 7px;
border-radius: 5px;
box-shadow: 0 0 19px rgba(48, 88, 45, 0.27);
box-shadow: 0 0 21px rgba(63, 91, 60, 0.29);
}
}


.infobox__title {
.infobox__title {
padding: 0.15rem 0.72rem;
padding: 0.25rem 0.75rem;
border-radius: 3px;
font-size: 1.16rem;
font-size: 1.16rem;
}
}


.infobox__panel {
.infobox__panel {
margin-top: 0.6rem;
margin-top: 0.62rem;
border-radius: 5px;
border-radius: 4px;
}
}


.infobox__image {
.infobox__image {
padding: 1.15rem 0.82rem;
padding: 1.25rem 0.85rem;
}
 
.infobox__image::after {
right: 0.8rem;
left: 0.8rem;
}
}


.infobox__image img {
.infobox__image img {
max-height: 200px;
max-height: 195px;
}
}


203번째 줄: 213번째 줄:
.infobox__details th {
.infobox__details th {
width: 34%;
width: 34%;
padding-right: 0.48rem;
padding-right: 0.6rem;
padding-left: 0.48rem;
}
}
}
}
213번째 줄: 222번째 줄:
}
}


.infobox__title {
.infobox__image::after {
padding-top: 0.12rem;
right: 0.65rem;
padding-bottom: 0.12rem;
left: 0.65rem;
font-size: 1.12rem;
}
 
.infobox__image {
padding: 1rem 0.7rem;
}
}


.infobox__image img {
.infobox__image img {
max-height: 185px;
max-height: 180px;
}
}


231번째 줄: 235번째 줄:
margin-right: 0.65rem;
margin-right: 0.65rem;
margin-left: 0.65rem;
margin-left: 0.65rem;
}
.infobox__details th,
.infobox__details td {
padding-top: 0.36rem;
padding-bottom: 0.36rem;
}
}


.infobox__details th {
.infobox__details th {
width: 37%;
width: 36%;
padding-right: 0.42rem;
padding-right: 0.5rem;
padding-left: 0.42rem;
font-size: 0.8rem;
font-size: 0.79rem;
}
}


.infobox__details td {
.infobox__details td {
padding-right: 0.48rem;
font-size: 0.86rem;
padding-left: 0.48rem;
font-size: 0.85rem;
}
}
}
}
255번째 줄: 250번째 줄:
@media screen {
@media screen {
html.skin-theme-clientpref-night .infobox {
html.skin-theme-clientpref-night .infobox {
border-color: #477343;
border-color: #597255;
background: #2d3c2b;
background: #2e382d;
color: #e4eee1;
color: #e3ebe1;
box-shadow: 0 0 24px rgba(0, 0, 0, 0.43);
box-shadow: 0 0 26px rgba(0, 0, 0, 0.46);
}
}


html.skin-theme-clientpref-night .infobox__title {
html.skin-theme-clientpref-night .infobox__title {
border-color: #315d2f;
background: #526f4f;
background: #477f44;
color: #f4faf2;
color: #f5fff2;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
}
}


html.skin-theme-clientpref-night .infobox__panel {
html.skin-theme-clientpref-night .infobox__panel {
border-color: #557651;
background: #293229;
background: #293527;
}
}


html.skin-theme-clientpref-night .infobox__image {
html.skin-theme-clientpref-night .infobox__image {
background: #293527;
background: #293229;
}
}


html.skin-theme-clientpref-night .infobox__image img {
html.skin-theme-clientpref-night .infobox__image::after {
filter: drop-shadow(0 9px 7px rgba(0, 0, 0, 0.36));
background: #536250;
}
}


html.skin-theme-clientpref-night .infobox__details {
html.skin-theme-clientpref-night .infobox__image img {
border-top-color: #526f4e;
filter: drop-shadow(0 11px 9px rgba(0, 0, 0, 0.34));
}
}


html.skin-theme-clientpref-night .infobox__details th {
html.skin-theme-clientpref-night .infobox__details th {
border-color: #587f52;
color: #aebbaa;
background: #668d60;
color: #f4fbf1;
}
}


html.skin-theme-clientpref-night .infobox__details td {
html.skin-theme-clientpref-night .infobox__details td {
border-color: #4e624a;
color: #e3eae1;
background: #374334;
color: #e4ece1;
}
}


html.skin-theme-clientpref-night .infobox a {
html.skin-theme-clientpref-night .infobox a {
color: #9fd098;
color: #a0c49b;
}
}


html.skin-theme-clientpref-night .infobox a:hover {
html.skin-theme-clientpref-night .infobox a:hover {
color: #c0e5ba;
color: #c0dbbc;
}
}
}
}
308번째 줄: 296번째 줄:
@media screen and (prefers-color-scheme: dark) {
@media screen and (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os .infobox {
html.skin-theme-clientpref-os .infobox {
border-color: #477343;
border-color: #597255;
background: #2d3c2b;
background: #2e382d;
color: #e4eee1;
color: #e3ebe1;
box-shadow: 0 0 24px rgba(0, 0, 0, 0.43);
box-shadow: 0 0 26px rgba(0, 0, 0, 0.46);
}
}


html.skin-theme-clientpref-os .infobox__title {
html.skin-theme-clientpref-os .infobox__title {
border-color: #315d2f;
background: #526f4f;
background: #477f44;
color: #f4faf2;
color: #f5fff2;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
}
}


html.skin-theme-clientpref-os .infobox__panel {
html.skin-theme-clientpref-os .infobox__panel {
border-color: #557651;
background: #293229;
background: #293527;
}
}


html.skin-theme-clientpref-os .infobox__image {
html.skin-theme-clientpref-os .infobox__image {
background: #293527;
background: #293229;
}
}


html.skin-theme-clientpref-os .infobox__image img {
html.skin-theme-clientpref-os .infobox__image::after {
filter: drop-shadow(0 9px 7px rgba(0, 0, 0, 0.36));
background: #536250;
}
}


html.skin-theme-clientpref-os .infobox__details {
html.skin-theme-clientpref-os .infobox__image img {
border-top-color: #526f4e;
filter: drop-shadow(0 11px 9px rgba(0, 0, 0, 0.34));
}
}


html.skin-theme-clientpref-os .infobox__details th {
html.skin-theme-clientpref-os .infobox__details th {
border-color: #587f52;
color: #aebbaa;
background: #668d60;
color: #f4fbf1;
}
}


html.skin-theme-clientpref-os .infobox__details td {
html.skin-theme-clientpref-os .infobox__details td {
border-color: #4e624a;
color: #e3eae1;
background: #374334;
color: #e4ece1;
}
}


html.skin-theme-clientpref-os .infobox a {
html.skin-theme-clientpref-os .infobox a {
color: #9fd098;
color: #a0c49b;
}
}


html.skin-theme-clientpref-os .infobox a:hover {
html.skin-theme-clientpref-os .infobox a:hover {
color: #c0e5ba;
color: #c0dbbc;
}
}
}
}
원본 주소 "https://pvzkrwiki.com/index.php/틀:정보상자/styles.css"