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

식물 vs 좀비 위키
← 이전 편집다음 편집 →
편집 취소Brokey (토론 | 기여)
사무관, 인터페이스 관리자, 관리자
385 편집
편집 요약 없음
태그: 되돌려진 기여
편집 요약 없음
태그: 되돌려진 기여
1번째 줄: 1번째 줄:
.infobox {
.infobox {
position: relative;
float: right;
float: right;
clear: right;
clear: right;
6번째 줄: 5번째 줄:
max-width: 100%;
max-width: 100%;
margin: 0 0 1.25rem 1.25rem;
margin: 0 0 1.25rem 1.25rem;
padding: 0.78rem;
padding: 0.72rem;
border: 3px solid #53634d;
border: 3px solid #3d733a;
border-radius: 12px;
border-radius: 8px;
box-sizing: border-box;
box-sizing: border-box;
background: #d9dfd2;
background: #d9ead4;
color: #30382d;
color: #293728;
font-family:
font-family:
-apple-system,
-apple-system,
21번째 줄: 20번째 줄:
font-size: 0.92rem;
font-size: 0.92rem;
line-height: 1.5;
line-height: 1.5;
box-shadow:
box-shadow: 0 0 22px rgba(48, 88, 45, 0.3);
0 0 23px rgba(54, 67, 50, 0.28),
inset 0 0 0 2px #aeb8a7;
}
 
.infobox::before {
position: absolute;
z-index: 0;
top: 6px;
right: 6px;
bottom: 6px;
left: 6px;
border: 1px solid #7d8a76;
border-radius: 7px;
content: "";
}
 
.infobox__title,
.infobox__panel {
position: relative;
z-index: 1;
}
}


.infobox__title {
.infobox__title {
margin: 0 0.35rem;
padding: 0.18rem 0.82rem;
padding: 0.2rem 0.85rem;
border: 1px solid #376e35;
border: 2px solid #4f6049;
border-bottom-width: 3px;
border-radius: 4px;
border-radius: 4px;
background: #6f8168;
background: #479745;
color: #fbfff8;
color: #f8fff6;
font-family:
font-family:
"SB Aggro B",
"SB Aggro B",
65번째 줄: 44번째 줄:
overflow-wrap: anywhere;
overflow-wrap: anywhere;
word-break: keep-all;
word-break: keep-all;
box-shadow:
box-shadow: 0 3px 8px rgba(48, 83, 45, 0.2);
0 3px 0 #4f6049,
0 5px 9px rgba(50, 61, 46, 0.2);
}
 
.infobox__title::before,
.infobox__title::after {
position: absolute;
top: 50%;
width: 0;
height: 0;
transform: translateY(-50%);
content: "";
}
 
.infobox__title::before {
left: -0.55rem;
border-top: 0.56rem solid transparent;
border-right: 0.55rem solid #4f6049;
border-bottom: 0.56rem solid transparent;
}
 
.infobox__title::after {
right: -0.55rem;
border-top: 0.56rem solid transparent;
border-bottom: 0.56rem solid transparent;
border-left: 0.55rem solid #4f6049;
}
}


.infobox__panel {
.infobox__panel {
margin-top: 0.82rem;
margin-top: 0.68rem;
padding: 0.72rem;
border: 1px solid #91b18b;
border: 2px solid #84917c;
border-radius: 6px;
border-radius: 8px;
overflow: hidden;
overflow: hidden;
background: #f3f2e8;
background: #f3f8f1;
box-shadow:
inset 0 0 0 3px #e3e5d9,
0 2px 0 rgba(73, 84, 68, 0.18);
}
}


.infobox__image {
.infobox__image {
position: relative;
display: flex;
display: flex;
align-items: center;
align-items: center;
justify-content: center;
justify-content: center;
min-width: 0;
padding: 1.35rem 1rem 1.25rem;
padding: 1.35rem 1rem;
border: 2px solid #c3c9b9;
border-radius: 9px;
box-sizing: border-box;
box-sizing: border-box;
background: #f3f2e8;
background: #f3f8f1;
box-shadow:
inset 0 0 0 4px #e6e6d9,
0 3px 7px rgba(67, 77, 63, 0.14);
}
 
.infobox__image::before,
.infobox__image::after {
position: absolute;
top: 50%;
width: 12px;
height: 12px;
border: 2px solid #c3c9b9;
background: #f3f2e8;
transform: translateY(-50%) rotate(45deg);
content: "";
}
 
.infobox__image::before {
left: -8px;
border-top: 0;
border-right: 0;
}
 
.infobox__image::after {
right: -8px;
border-bottom: 0;
border-left: 0;
}
}


151번째 줄: 69번째 줄:
max-width: 100%;
max-width: 100%;
height: auto;
height: auto;
max-height: 220px;
max-height: 215px;
margin: 0 auto;
margin: 0 auto;
object-fit: contain;
object-fit: contain;
filter: drop-shadow(0 9px 7px rgba(55, 67, 51, 0.24));
filter: drop-shadow(0 9px 7px rgba(47, 79, 44, 0.24));
}
}


.infobox__details {
.infobox__details {
width: 100%;
width: calc(100% - 2rem);
margin: 0.72rem 0 0;
margin: 0 1rem 0.75rem;
padding-top: 0.38rem;
padding-top: 0.48rem;
border-top: 2px solid #bcc4b4;
border-top: 1px solid #abc5a5;
border-collapse: separate;
border-collapse: separate;
border-spacing: 0 0.36rem;
border-spacing: 0 0.34rem;
table-layout: fixed;
table-layout: fixed;
background: transparent;
background: transparent;
180번째 줄: 98번째 줄:
.infobox__details td {
.infobox__details td {
min-width: 0;
min-width: 0;
padding: 0.42rem 0.58rem;
padding: 0.4rem 0.55rem;
box-sizing: border-box;
box-sizing: border-box;
vertical-align: middle;
vertical-align: middle;
197번째 줄: 115번째 줄:


.infobox__details th {
.infobox__details th {
width: 37%;
width: 35%;
border: 1px solid #7f8d76;
border: 1px solid #72986b;
border-right: 0;
border-radius: 4px 0 0 4px;
border-radius: 7px 0 0 7px;
background: #83aa7b;
background: #98a58e;
color: #f8fff6;
color: #f9fcf6;
font-size: 0.84rem;
font-size: 0.84rem;
text-align: left;
text-align: left;
white-space: normal;
white-space: normal;
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.22),
0 2px 3px rgba(64, 75, 60, 0.1);
}
}


.infobox__details td {
.infobox__details td {
border: 1px solid #c5cabc;
border: 1px solid #c2d6bc;
border-left: 0;
border-left: 0;
border-radius: 0 7px 7px 0;
border-radius: 0 4px 4px 0;
background: #ebeade;
background: #e7f1e3;
color: #333a31;
color: #2d3a2c;
font-size: 0.89rem;
font-size: 0.89rem;
text-align: left;
text-align: left;
overflow-wrap: anywhere;
overflow-wrap: anywhere;
word-break: break-word;
word-break: break-word;
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.38),
0 2px 3px rgba(64, 75, 60, 0.08);
}
}


245번째 줄: 156번째 줄:


.infobox a {
.infobox a {
color: #536f4d;
color: #397a36;
text-decoration: none;
text-decoration: none;
}
}


.infobox a:hover {
.infobox a:hover {
color: #354d31;
color: #245522;
text-decoration: underline;
text-decoration: underline;
}
}
261번째 줄: 172번째 줄:
max-width: 100%;
max-width: 100%;
margin: 0 0 1.1rem;
margin: 0 0 1.1rem;
padding: 0.68rem;
padding: 0.62rem;
border-radius: 10px;
border-radius: 7px;
box-shadow:
box-shadow: 0 0 19px rgba(48, 88, 45, 0.27);
0 0 20px rgba(54, 67, 50, 0.26),
inset 0 0 0 2px #aeb8a7;
}
 
.infobox::before {
top: 5px;
right: 5px;
bottom: 5px;
left: 5px;
border-radius: 6px;
}
}


.infobox__title {
.infobox__title {
margin-right: 0.3rem;
padding: 0.15rem 0.72rem;
margin-left: 0.3rem;
padding: 0.17rem 0.72rem;
font-size: 1.16rem;
font-size: 1.16rem;
}
.infobox__title::before {
left: -0.48rem;
border-right-width: 0.48rem;
}
.infobox__title::after {
right: -0.48rem;
border-left-width: 0.48rem;
}
}


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


.infobox__image {
.infobox__image {
padding: 1.18rem 0.82rem;
padding: 1.15rem 0.82rem;
border-radius: 8px;
}
}


309번째 줄: 196번째 줄:


.infobox__details {
.infobox__details {
margin-top: 0.62rem;
width: calc(100% - 1.6rem);
border-spacing: 0 0.32rem;
margin-right: 0.8rem;
margin-left: 0.8rem;
}
}


.infobox__details th {
.infobox__details th {
width: 35%;
width: 34%;
padding-right: 0.48rem;
padding-right: 0.48rem;
padding-left: 0.48rem;
padding-left: 0.48rem;
322번째 줄: 210번째 줄:
@media screen and (max-width: 420px) {
@media screen and (max-width: 420px) {
.infobox {
.infobox {
padding: 0.58rem;
padding: 0.52rem;
}
}


.infobox__title {
.infobox__title {
padding-top: 0.14rem;
padding-top: 0.12rem;
padding-bottom: 0.14rem;
padding-bottom: 0.12rem;
font-size: 1.12rem;
font-size: 1.12rem;
}
.infobox__panel {
padding: 0.52rem;
}
}


341번째 줄: 225번째 줄:
.infobox__image img {
.infobox__image img {
max-height: 185px;
max-height: 185px;
}
.infobox__details {
width: calc(100% - 1.3rem);
margin-right: 0.65rem;
margin-left: 0.65rem;
}
}


.infobox__details th,
.infobox__details th,
.infobox__details td {
.infobox__details td {
padding-top: 0.38rem;
padding-top: 0.36rem;
padding-bottom: 0.38rem;
padding-bottom: 0.36rem;
}
}


365번째 줄: 255번째 줄:
@media screen {
@media screen {
html.skin-theme-clientpref-night .infobox {
html.skin-theme-clientpref-night .infobox {
border-color: #43503f;
border-color: #477343;
background: #31382f;
background: #2d3c2b;
color: #e5eae2;
color: #e4eee1;
box-shadow:
box-shadow: 0 0 24px rgba(0, 0, 0, 0.43);
0 0 25px rgba(0, 0, 0, 0.43),
inset 0 0 0 2px #596456;
}
 
html.skin-theme-clientpref-night .infobox::before {
border-color: #657060;
}
}


html.skin-theme-clientpref-night .infobox__title {
html.skin-theme-clientpref-night .infobox__title {
border-color: #394735;
border-color: #315d2f;
background: #596a54;
background: #477f44;
color: #f6faf3;
color: #f5fff2;
box-shadow:
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
0 3px 0 #394735,
0 5px 9px rgba(0, 0, 0, 0.26);
}
 
html.skin-theme-clientpref-night .infobox__title::before {
border-right-color: #394735;
}
 
html.skin-theme-clientpref-night .infobox__title::after {
border-left-color: #394735;
}
}


html.skin-theme-clientpref-night .infobox__panel {
html.skin-theme-clientpref-night .infobox__panel {
border-color: #596456;
border-color: #557651;
background: #292f28;
background: #293527;
box-shadow:
inset 0 0 0 3px #353d33,
0 2px 0 rgba(0, 0, 0, 0.25);
}
}


html.skin-theme-clientpref-night .infobox__image {
html.skin-theme-clientpref-night .infobox__image {
border-color: #525d4f;
background: #293527;
background: #292f28;
box-shadow:
inset 0 0 0 4px #333a31,
0 3px 7px rgba(0, 0, 0, 0.22);
}
 
html.skin-theme-clientpref-night .infobox__image::before,
html.skin-theme-clientpref-night .infobox__image::after {
border-color: #525d4f;
background: #292f28;
}
}


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


html.skin-theme-clientpref-night .infobox__details {
html.skin-theme-clientpref-night .infobox__details {
border-top-color: #505a4d;
border-top-color: #526f4e;
}
}


html.skin-theme-clientpref-night .infobox__details th {
html.skin-theme-clientpref-night .infobox__details th {
border-color: #55634f;
border-color: #587f52;
background: #657260;
background: #668d60;
color: #f2f6ef;
color: #f4fbf1;
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.08),
0 2px 3px rgba(0, 0, 0, 0.18);
}
}


html.skin-theme-clientpref-night .infobox__details td {
html.skin-theme-clientpref-night .infobox__details td {
border-color: #50594d;
border-color: #4e624a;
background: #373e35;
background: #374334;
color: #e4e9e1;
color: #e4ece1;
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.04),
0 2px 3px rgba(0, 0, 0, 0.15);
}
}


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


html.skin-theme-clientpref-night .infobox a:hover {
html.skin-theme-clientpref-night .infobox a:hover {
color: #c9ddc4;
color: #c0e5ba;
}
}
}
}
453번째 줄: 308번째 줄:
@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: #43503f;
border-color: #477343;
background: #31382f;
background: #2d3c2b;
color: #e5eae2;
color: #e4eee1;
box-shadow:
box-shadow: 0 0 24px rgba(0, 0, 0, 0.43);
0 0 25px rgba(0, 0, 0, 0.43),
inset 0 0 0 2px #596456;
}
 
html.skin-theme-clientpref-os .infobox::before {
border-color: #657060;
}
}


html.skin-theme-clientpref-os .infobox__title {
html.skin-theme-clientpref-os .infobox__title {
border-color: #394735;
border-color: #315d2f;
background: #596a54;
background: #477f44;
color: #f6faf3;
color: #f5fff2;
box-shadow:
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
0 3px 0 #394735,
0 5px 9px rgba(0, 0, 0, 0.26);
}
 
html.skin-theme-clientpref-os .infobox__title::before {
border-right-color: #394735;
}
 
html.skin-theme-clientpref-os .infobox__title::after {
border-left-color: #394735;
}
}


html.skin-theme-clientpref-os .infobox__panel {
html.skin-theme-clientpref-os .infobox__panel {
border-color: #596456;
border-color: #557651;
background: #292f28;
background: #293527;
box-shadow:
inset 0 0 0 3px #353d33,
0 2px 0 rgba(0, 0, 0, 0.25);
}
}


html.skin-theme-clientpref-os .infobox__image {
html.skin-theme-clientpref-os .infobox__image {
border-color: #525d4f;
background: #293527;
background: #292f28;
box-shadow:
inset 0 0 0 4px #333a31,
0 3px 7px rgba(0, 0, 0, 0.22);
}
 
html.skin-theme-clientpref-os .infobox__image::before,
html.skin-theme-clientpref-os .infobox__image::after {
border-color: #525d4f;
background: #292f28;
}
}


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


html.skin-theme-clientpref-os .infobox__details {
html.skin-theme-clientpref-os .infobox__details {
border-top-color: #505a4d;
border-top-color: #526f4e;
}
}


html.skin-theme-clientpref-os .infobox__details th {
html.skin-theme-clientpref-os .infobox__details th {
border-color: #55634f;
border-color: #587f52;
background: #657260;
background: #668d60;
color: #f2f6ef;
color: #f4fbf1;
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.08),
0 2px 3px rgba(0, 0, 0, 0.18);
}
}


html.skin-theme-clientpref-os .infobox__details td {
html.skin-theme-clientpref-os .infobox__details td {
border-color: #50594d;
border-color: #4e624a;
background: #373e35;
background: #374334;
color: #e4e9e1;
color: #e4ece1;
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.04),
0 2px 3px rgba(0, 0, 0, 0.15);
}
}


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


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