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

식물 vs 좀비 위키
← 이전 편집다음 편집 →
편집 취소Brokey (토론 | 기여)
사무관, 인터페이스 관리자, 관리자
385 편집
편집 요약 없음
편집 요약 없음
태그: 되돌려진 기여
1번째 줄: 1번째 줄:
.infobox {
.infobox {
--infobox-outer: #5d3b30;
--infobox-outer-edge: #896247;
--infobox-outer-edge: #45291f;
--infobox-inner: #d5c4ae;
--infobox-inner: #ead5af;
--infobox-inner-edge: #c2ad94;
--infobox-inner-edge: #c8aa7e;
--infobox-panel: #f4efe5;
--infobox-panel: #f3e8d7;
--infobox-image-paper: #efe1bf;
--infobox-image-frame: #9a5b32;
--infobox-image-bg: url("/wiki/Special:Redirect/file/Template_Bg_Light.png");
--infobox-image-bg: url("/wiki/Special:Redirect/file/Template_Bg_Light.png");
--infobox-ribbon: #875340;
--infobox-ribbon: #6f4a34;
--infobox-row-bg: #f7efe4;
--infobox-row-bg: #f3efe6;
--infobox-row-edge: #bca184;
--infobox-row-edge: #d8cdc0;
--infobox-row-divider: #d5c0aa;
--infobox-label-text: #3f3026;
--infobox-label-text: #231915;
--infobox-text: #5d4434;
--infobox-text: #493329;
--infobox-link: #8b6044;
--infobox-link: #8f573f;
--infobox-link-hover: #68442d;
--infobox-link-hover: #653929;
--infobox-focus: #ae7d60;
--infobox-focus: #ad775f;
--infobox-title-text: #fffaf3;
--infobox-title-text: #fffaf4;
--infobox-text-outline: #4e3426;
--infobox-text-outline: #472b20;
--infobox-shadow: rgba(58, 39, 28, 0.12);
--infobox-shadow: rgba(68, 42, 31, 0.16);
--infobox-shape-shadow: rgba(69, 41, 31, 0.24);
--infobox-background-shadow: rgba(69, 41, 31, 0.2);


position: relative;
position: relative;
27번째 줄: 25번째 줄:
max-width: 100%;
max-width: 100%;
margin: 0 0 1.25rem 1.25rem;
margin: 0 0 1.25rem 1.25rem;
padding: 1.05rem 0.48rem 1.18rem;
padding: 0.9rem 0.9rem 1rem;
border: 3px solid var(--infobox-outer-edge);
border: 4px solid var(--infobox-outer-edge);
border-radius: 24px;
border-radius: 9px;
box-sizing: border-box;
box-sizing: border-box;
background: var(--infobox-inner);
background: var(--infobox-inner);
44번째 줄: 42번째 줄:
font-size: 0.92rem;
font-size: 0.92rem;
font-weight: 300;
font-weight: 300;
line-height: 1.55;
line-height: 1.6;
box-shadow: 0 0 22px 3px var(--infobox-shadow);
box-shadow: 0 8px 24px var(--infobox-shadow);
overflow: visible;
overflow: hidden;
}
}


.infobox::before {
.infobox::before {
position: absolute;
position: absolute;
top: 6px;
top: 12px;
right: 6px;
right: 12px;
bottom: 6px;
bottom: 12px;
left: 6px;
left: 12px;
border: 3px solid var(--infobox-inner-edge);
border: 1px solid var(--infobox-inner-edge);
border-radius: 18px;
border-radius: 5px;
box-sizing: border-box;
box-sizing: border-box;
content: "";
content: "";
73번째 줄: 71번째 줄:
align-items: center;
align-items: center;
justify-content: center;
justify-content: center;
width: calc(100% - 2px);
width: calc(100% - 12px);
margin: -1.72rem auto 0;
margin: 0.6rem auto 1rem;
padding: 0.94rem 2.35rem;
padding: 0.92rem 1.4rem;
border: 0;
border: 0;
box-sizing: border-box;
box-sizing: border-box;
background: var(--infobox-ribbon);
background: var(--infobox-ribbon);
clip-path: polygon(
clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%);
0 0,
100% 0,
calc(100% - 16px) 50%,
100% 100%,
0 100%,
16px 50%
);
color: var(--infobox-title-text);
color: var(--infobox-title-text);
font-family:
font-family:
97번째 줄: 88번째 줄:
"Noto Sans KR",
"Noto Sans KR",
sans-serif;
sans-serif;
font-size: 1.28rem;
font-size: 1.34rem;
font-weight: 700;
font-weight: 700;
line-height: 1.14;
line-height: 1.16;
letter-spacing: -0.03em;
letter-spacing: -0.025em;
text-align: center;
text-align: center;
text-shadow:
text-shadow:
110번째 줄: 101번째 줄:
-2px 2px 0 var(--infobox-text-outline),
-2px 2px 0 var(--infobox-text-outline),
0 2px 0 var(--infobox-text-outline),
0 2px 0 var(--infobox-text-outline),
2px 2px 0 var(--infobox-text-outline),
2px 2px 0 var(--infobox-text-outline);
-1px -2px 0 var(--infobox-text-outline),
1px -2px 0 var(--infobox-text-outline),
-2px -1px 0 var(--infobox-text-outline),
2px -1px 0 var(--infobox-text-outline),
-2px 1px 0 var(--infobox-text-outline),
2px 1px 0 var(--infobox-text-outline),
-1px 2px 0 var(--infobox-text-outline),
1px 2px 0 var(--infobox-text-outline);
overflow-wrap: anywhere;
overflow-wrap: anywhere;
word-break: keep-all;
word-break: keep-all;
132번째 줄: 115번째 줄:
/* 내부 영역 */
/* 내부 영역 */
.infobox__panel {
.infobox__panel {
margin-top: 0.58rem;
margin-top: 0;
padding: 0 0.08rem 0.1rem;
padding: 0;
background: transparent;
background: transparent;
}
}
143번째 줄: 126번째 줄:
align-items: center;
align-items: center;
justify-content: center;
justify-content: center;
width: calc(100% - 14px);
width: calc(100% - 18px);
aspect-ratio: 1 / 1;
aspect-ratio: 1 / 1;
margin: 0 auto 0.78rem;
margin: 0 auto 1rem;
padding: 0;
padding: 1.1rem;
border: 0;
border: 0;
border-radius: 0;
box-sizing: border-box;
box-sizing: border-box;
background: transparent;
background: var(--infobox-image-paper);
box-shadow: none;
background-image: var(--infobox-image-bg);
overflow: visible;
background-repeat: no-repeat;
text-align: center;
background-position: center;
background-size: cover;
clip-path: polygon(
0 0,
100% 1.5%,
98.5% 38%,
98.5% 45%,
100% 45%,
100% 100%,
61% 100%,
56% 95%,
50% 100%,
2% 100%,
2% 17%,
0 16%
);
overflow: hidden;
}
}


.infobox__image::before {
.infobox__image::before {
position: absolute;
position: absolute;
z-index: 0;
inset: 4px;
top: 0;
border: 6px solid var(--infobox-image-frame);
right: 0;
border-radius: 2px;
bottom: 0;
clip-path: polygon(
left: 0;
0 0,
background-image: var(--infobox-image-bg);
100% 1.5%,
background-repeat: no-repeat;
98.5% 38%,
background-position: center;
98.5% 45%,
background-size: contain;
100% 45%,
100% 100%,
61% 100%,
56% 95%,
50% 100%,
2% 100%,
2% 17%,
0 16%
);
content: "";
content: "";
filter: drop-shadow(0 4px 3px var(--infobox-background-shadow));
pointer-events: none;
pointer-events: none;
}
}


.infobox__image::after {
.infobox__image::after {
display: none;
position: absolute;
inset: 3rem;
border-radius: 2px;
background: rgba(247, 234, 206, 0.96);
content: "";
pointer-events: none;
}
}


197번째 줄: 207번째 줄:
max-height: 100%;
max-height: 100%;
margin: 0 auto;
margin: 0 auto;
object-fit: cover;
object-fit: contain;
filter: drop-shadow(0 4px 4px var(--infobox-shape-shadow));
filter: drop-shadow(0 10px 12px rgba(78, 52, 38, 0.18));
}
}


/* 정보칸 */
/* 정보칸 */
.infobox__details {
.infobox__details {
width: calc(100% - 24px);
width: calc(100% - 12px);
margin: 0 auto;
margin: 0 auto;
border: 0;
border: 2px solid var(--infobox-row-edge);
border-collapse: separate;
border-collapse: separate;
border-spacing: 0;
border-spacing: 0;
border-radius: 14px;
border-radius: 6px;
table-layout: fixed;
table-layout: fixed;
background: var(--infobox-row-bg);
background: var(--infobox-row-bg);
221번째 줄: 231번째 줄:
.infobox__details th,
.infobox__details th,
.infobox__details td {
.infobox__details td {
padding: 0.52rem 0.72rem;
padding: 0.78rem 0.86rem;
border: 0;
border: 0;
border-radius: 0;
box-sizing: border-box;
box-sizing: border-box;
background-color: var(--infobox-row-bg);
background: transparent;
background-repeat: no-repeat;
line-height: 1.5;
line-height: 1.38;
text-align: left;
text-align: left;
vertical-align: top;
}
}


.infobox__details th {
.infobox__details th {
width: 31%;
width: 36%;
color: var(--infobox-label-text);
color: var(--infobox-label-text);
font-family:
font-family:
"SB Aggro M",
"SB Aggro B",
"SB 어그로 M",
"SB 어그로 B",
-apple-system,
-apple-system,
BlinkMacSystemFont,
BlinkMacSystemFont,
244번째 줄: 252번째 줄:
"Noto Sans KR",
"Noto Sans KR",
sans-serif;
sans-serif;
font-size: 0.83rem;
font-size: 0.82rem;
font-weight: 500;
font-weight: 700;
vertical-align: top;
text-shadow: none;
word-break: keep-all;
word-break: keep-all;
}
}


.infobox__details td {
.infobox__details td {
width: 69%;
width: 64%;
color: var(--infobox-text);
color: var(--infobox-text);
font-family:
font-family:
"SB Aggro L",
"SB Aggro M",
"SB 어그로 L",
"SB 어그로 M",
-apple-system,
-apple-system,
BlinkMacSystemFont,
BlinkMacSystemFont,
264번째 줄: 270번째 줄:
sans-serif;
sans-serif;
font-size: 0.9rem;
font-size: 0.9rem;
font-weight: 300;
font-weight: 400;
vertical-align: middle;
word-break: break-word;
word-break: break-word;
overflow-wrap: anywhere;
overflow-wrap: anywhere;
275번째 줄: 280번째 줄:
.infobox__panel > h2,
.infobox__panel > h2,
.infobox__panel > h3 {
.infobox__panel > h3 {
position: relative;
display: block;
display: block;
width: calc(100% - 14px);
width: calc(100% - 12px);
margin: 0.9rem auto 0.62rem;
margin: 1rem auto 0.62rem;
padding: 0.7rem 2.04rem 0.7rem 1.18rem;
padding: 0.82rem 1.12rem;
border: 0;
border: 0;
box-sizing: border-box;
box-sizing: border-box;
background: var(--infobox-ribbon);
background: var(--infobox-ribbon);
clip-path: polygon(
clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%);
0 0,
100% 0,
calc(100% - 12px) 50%,
100% 100%,
0 100%,
12px 50%
);
color: var(--infobox-title-text);
color: var(--infobox-title-text);
font-family:
font-family:
301번째 줄: 298번째 줄:
"Noto Sans KR",
"Noto Sans KR",
sans-serif;
sans-serif;
font-size: 1.08rem;
font-size: 1.06rem;
font-weight: 700;
font-weight: 700;
line-height: 1.14;
line-height: 1.14;
320번째 줄: 317번째 줄:
.infobox__panel > h2::after,
.infobox__panel > h2::after,
.infobox__panel > h3::after {
.infobox__panel > h3::after {
position: absolute;
display: none;
top: 50%;
right: 0.84rem;
width: 0;
height: 0;
border-top: 8px solid var(--infobox-outer-edge);
border-right: 8px solid transparent;
border-left: 8px solid transparent;
content: "";
transform: translateY(-34%);
}
}


337번째 줄: 325번째 줄:
.infobox__games,
.infobox__games,
.infobox__appearance-list {
.infobox__appearance-list {
width: calc(100% - 14px);
width: calc(100% - 12px);
margin: 0 auto 0.36rem;
margin: 0 auto;
padding: 0.84rem 0.92rem;
padding: 0.86rem 0.96rem;
border: 1px solid var(--infobox-row-edge);
border: 2px solid var(--infobox-row-edge);
border-radius: 7px;
border-radius: 6px;
box-sizing: border-box;
box-sizing: border-box;
background: var(--infobox-panel);
background: var(--infobox-row-bg);
color: var(--infobox-text);
color: var(--infobox-text);
font-size: 0.92rem;
font-size: 0.92rem;
line-height: 1.48;
line-height: 1.55;
}
}


355번째 줄: 343번째 줄:
.infobox__games p,
.infobox__games p,
.infobox__appearance-list p {
.infobox__appearance-list p {
margin: 0.1em 0;
margin: 0.12em 0;
font: inherit;
font: inherit;
}
}
428번째 줄: 416번째 줄:
max-width: 100%;
max-width: 100%;
margin: 0 0 1.1rem;
margin: 0 0 1.1rem;
padding: 1rem 0.42rem 1.08rem;
padding: 0.82rem 0.82rem 0.92rem;
border-radius: 22px;
border-radius: 8px;
font-size: 1rem;
font-size: 1rem;
}
}


.infobox::before {
.infobox::before {
top: 5px;
top: 10px;
right: 5px;
right: 10px;
bottom: 5px;
bottom: 10px;
left: 5px;
left: 10px;
border-radius: 17px;
border-radius: 4px;
}
}


.infobox__title {
.infobox__title {
width: 100%;
width: calc(100% - 8px);
margin-top: -1.6rem;
margin: 0.52rem auto 0.9rem;
padding: 0.9rem 2rem;
padding: 0.92rem 1.1rem;
font-size: 1.46rem;
font-size: 1.42rem;
}
}


.infobox__image {
.infobox__image {
width: calc(100% - 12px);
width: calc(100% - 12px);
padding: 0;
padding: 1rem;
margin-bottom: 0.92rem;
}
 
.infobox__image::after {
inset: 2.7rem;
}
}


.infobox__details {
.infobox__details {
width: calc(100% - 20px);
width: calc(100% - 8px);
border-radius: 13px;
}
}


.infobox__details th,
.infobox__details th,
.infobox__details td {
.infobox__details td {
padding: 0.52rem 0.72rem;
padding: 0.74rem 0.82rem;
}
}


.infobox__details th {
.infobox__details th {
width: 31%;
width: 36%;
font-size: 0.96rem;
font-size: 0.96rem;
}
}


.infobox__details td {
.infobox__details td {
width: 69%;
width: 64%;
font-size: 1rem;
font-size: 1rem;
}
}
482번째 줄: 473번째 줄:
.infobox__games,
.infobox__games,
.infobox__appearance-list {
.infobox__appearance-list {
width: calc(100% - 10px);
width: calc(100% - 8px);
}
}


489번째 줄: 480번째 줄:
.infobox__panel > h2,
.infobox__panel > h2,
.infobox__panel > h3 {
.infobox__panel > h3 {
font-size: 1.2rem;
font-size: 1.16rem;
}
 
.infobox__section-body,
.infobox__listbox,
.infobox__games,
.infobox__appearance-list {
font-size: 1rem;
}
}
}
}
503번째 줄: 487번째 줄:
@media screen and (max-width: 480px) {
@media screen and (max-width: 480px) {
.infobox {
.infobox {
padding: 0.92rem 0.34rem 0.96rem;
padding: 0.72rem 0.72rem 0.82rem;
border-radius: 19px;
}
}


.infobox::before {
.infobox::before {
top: 4px;
top: 8px;
right: 4px;
right: 8px;
bottom: 4px;
bottom: 8px;
left: 4px;
left: 8px;
border-radius: 14px;
}
}


.infobox__title {
.infobox__title {
margin-top: -1.42rem;
width: calc(100% - 4px);
padding: 0.78rem 1.72rem;
margin: 0.44rem auto 0.78rem;
font-size: 1.28rem;
padding: 0.82rem 0.92rem;
font-size: 1.22rem;
}
}


.infobox__image {
.infobox__image {
width: calc(100% - 8px);
width: calc(100% - 4px);
padding: 0;
padding: 0.82rem;
}
 
.infobox__image::after {
inset: 2.2rem;
}
}


.infobox__details {
.infobox__details {
width: calc(100% - 16px);
width: calc(100% - 4px);
border-radius: 12px;
}
}


.infobox__details th,
.infobox__details th,
.infobox__details td {
.infobox__details td {
padding: 0.52rem 0.72rem;
padding: 0.68rem 0.72rem;
}
}


.infobox__details th {
.infobox__details th {
width: 33%;
width: 38%;
font-size: 0.89rem;
font-size: 0.89rem;
}
}


.infobox__details td {
.infobox__details td {
width: 67%;
width: 62%;
font-size: 0.95rem;
font-size: 0.95rem;
}
}
555번째 줄: 540번째 줄:
.infobox__games,
.infobox__games,
.infobox__appearance-list {
.infobox__appearance-list {
width: calc(100% - 6px);
width: calc(100% - 4px);
}
}


562번째 줄: 547번째 줄:
.infobox__panel > h2,
.infobox__panel > h2,
.infobox__panel > h3 {
.infobox__panel > h3 {
padding: 0.64rem 1.78rem 0.64rem 1rem;
font-size: 1.02rem;
font-size: 1.04rem;
}
}


570번째 줄: 554번째 줄:
.infobox__games,
.infobox__games,
.infobox__appearance-list {
.infobox__appearance-list {
padding: 0.76rem 0.8rem;
padding: 0.74rem 0.8rem;
font-size: 0.95rem;
font-size: 0.95rem;
}
}
578번째 줄: 562번째 줄:
@media screen {
@media screen {
html.skin-theme-clientpref-night .infobox {
html.skin-theme-clientpref-night .infobox {
--infobox-outer: #4c3329;
--infobox-outer-edge: #5d4336;
--infobox-outer-edge: #36231c;
--infobox-inner: #4a3c34;
--infobox-inner: #6d5644;
--infobox-inner-edge: #6c594b;
--infobox-inner-edge: #8c7157;
--infobox-panel: #3d332d;
--infobox-panel: #3d332d;
--infobox-image-paper: #51443a;
--infobox-image-frame: #8f6546;
--infobox-image-bg: url("/wiki/Special:Redirect/file/Template_Bg_Dark.png");
--infobox-image-bg: url("/wiki/Special:Redirect/file/Template_Bg_Dark.png");
--infobox-ribbon: #805542;
--infobox-ribbon: #6a4a3a;
--infobox-row-bg: #433731;
--infobox-row-bg: #efe7db;
--infobox-row-edge: #896c59;
--infobox-row-edge: #d2c0ac;
--infobox-row-divider: #6f5748;
--infobox-label-text: #3a2c24;
--infobox-label-text: #f3e8df;
--infobox-text: #5b4334;
--infobox-text: #f3e8df;
--infobox-link: #925f45;
--infobox-link: #edc1a9;
--infobox-link-hover: #6b432e;
--infobox-link-hover: #ffe1d0;
--infobox-focus: #d6a788;
--infobox-focus: #d1a58b;
--infobox-title-text: #fff8f2;
--infobox-title-text: #fff8f2;
--infobox-text-outline: #301d16;
--infobox-text-outline: #2f1e17;
--infobox-shadow: rgba(0, 0, 0, 0.24);
--infobox-shadow: rgba(0, 0, 0, 0.28);
--infobox-shape-shadow: rgba(0, 0, 0, 0.32);
--infobox-background-shadow: rgba(0, 0, 0, 0.28);
}
}
}
}
604번째 줄: 586번째 줄:
@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 {
--infobox-outer: #4c3329;
--infobox-outer-edge: #5d4336;
--infobox-outer-edge: #36231c;
--infobox-inner: #4a3c34;
--infobox-inner: #6d5644;
--infobox-inner-edge: #6c594b;
--infobox-inner-edge: #8c7157;
--infobox-panel: #3d332d;
--infobox-panel: #3d332d;
--infobox-image-paper: #51443a;
--infobox-image-frame: #8f6546;
--infobox-image-bg: url("/wiki/Special:Redirect/file/Template_Bg_Dark.png");
--infobox-image-bg: url("/wiki/Special:Redirect/file/Template_Bg_Dark.png");
--infobox-ribbon: #805542;
--infobox-ribbon: #6a4a3a;
--infobox-row-bg: #433731;
--infobox-row-bg: #efe7db;
--infobox-row-edge: #896c59;
--infobox-row-edge: #d2c0ac;
--infobox-row-divider: #6f5748;
--infobox-label-text: #3a2c24;
--infobox-label-text: #f3e8df;
--infobox-text: #5b4334;
--infobox-text: #f3e8df;
--infobox-link: #925f45;
--infobox-link: #edc1a9;
--infobox-link-hover: #6b432e;
--infobox-link-hover: #ffe1d0;
--infobox-focus: #d6a788;
--infobox-focus: #d1a58b;
--infobox-title-text: #fff8f2;
--infobox-title-text: #fff8f2;
--infobox-text-outline: #301d16;
--infobox-text-outline: #2f1e17;
--infobox-shadow: rgba(0, 0, 0, 0.24);
--infobox-shadow: rgba(0, 0, 0, 0.28);
--infobox-shape-shadow: rgba(0, 0, 0, 0.32);
--infobox-background-shadow: rgba(0, 0, 0, 0.28);
}
}
}
}
원본 주소 "https://pvzkrwiki.com/index.php/틀:정보상자/styles.css"