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

식물 vs 좀비 위키
← 이전 편집다음 편집 →
편집 취소Brokey (토론 | 기여)
사무관, 인터페이스 관리자, 관리자
385 편집
편집 요약 없음
편집 요약 없음
태그: 되돌려진 기여
1번째 줄: 1번째 줄:
.infobox {
.infobox {
--infobox-outer: #5d3b30;
--infobox-outer: #5a382d;
--infobox-outer-edge: #45291f;
--infobox-outer-edge: #382117;
--infobox-inner: #ead5af;
--infobox-outer-highlight: #7a5143;
--infobox-inner-edge: #c8aa7e;
--infobox-inner: #ead2aa;
--infobox-panel: #f3e8d7;
--infobox-inner-edge: #c59d6d;
--infobox-inner-glow: rgba(255, 246, 224, 0.42);
--infobox-panel: #f5e9d7;
--infobox-panel-soft: #efe0ca;
--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: #8a533f;
--infobox-row-bg: #f7efe4;
--infobox-ribbon-dark: #603628;
--infobox-row-edge: #bca184;
--infobox-ribbon-light: #a66b55;
--infobox-row-divider: #d5c0aa;
--infobox-row-bg: #f8efe3;
--infobox-label-text: #231915;
--infobox-row-edge: #b99471;
--infobox-row-divider: #d4b99d;
--infobox-label-text: #2c1d17;
--infobox-text: #493329;
--infobox-text: #493329;
--infobox-link: #8f573f;
--infobox-link: #8c543e;
--infobox-link-hover: #653929;
--infobox-link-hover: #5f3326;
--infobox-focus: #ad775f;
--infobox-focus: #b47b5f;
--infobox-title-text: #fffaf4;
--infobox-title-text: #fffaf4;
--infobox-text-outline: #472b20;
--infobox-text-outline: #3e241a;
--infobox-shadow: rgba(68, 42, 31, 0.22);
--infobox-shadow: rgba(60, 34, 24, 0.3);
--infobox-pin: #c4a17e;
--infobox-pin-edge: #7f5d45;
--infobox-pin-light: #f1d9bd;


position: relative;
position: relative;
25번째 줄: 33번째 줄:
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 0.72rem;
padding: 1.2rem 0.58rem 0.8rem;
border: 3px solid var(--infobox-outer-edge);
border: 4px solid var(--infobox-outer-edge);
border-radius: 24px;
border-radius: 27px;
box-sizing: border-box;
box-sizing: border-box;
background: var(--infobox-inner);
background:
linear-gradient(
180deg,
var(--infobox-outer-highlight) 0,
var(--infobox-outer) 14%,
var(--infobox-outer) 86%,
var(--infobox-outer-edge) 100%
);
color: var(--infobox-text);
color: var(--infobox-text);
font-family:
font-family:
43번째 줄: 58번째 줄:
font-weight: 300;
font-weight: 300;
line-height: 1.55;
line-height: 1.55;
box-shadow: 0 8px 22px var(--infobox-shadow);
box-shadow:
0 14px 30px var(--infobox-shadow),
0 4px 0 rgba(56, 33, 23, 0.32),
inset 0 1px 0 rgba(255, 255, 255, 0.12);
overflow: visible;
overflow: visible;
}
}
49번째 줄: 67번째 줄:
.infobox::before {
.infobox::before {
position: absolute;
position: absolute;
top: 6px;
top: 8px;
right: 6px;
right: 8px;
bottom: 6px;
bottom: 8px;
left: 6px;
left: 8px;
border: 1px solid var(--infobox-inner-edge);
border: 2px solid var(--infobox-inner-edge);
border-radius: 18px;
border-radius: 20px;
box-sizing: border-box;
box-sizing: border-box;
background:
radial-gradient(
circle at 50% 0,
var(--infobox-inner-glow),
transparent 34%
),
var(--infobox-inner);
box-shadow:
inset 0 0 0 1px rgba(255, 250, 237, 0.52),
inset 0 -10px 24px rgba(121, 82, 52, 0.08);
content: "";
pointer-events: none;
}
.infobox::after {
position: absolute;
right: 20px;
bottom: 18px;
left: 20px;
height: 4px;
border-radius: 999px;
background:
linear-gradient(
90deg,
transparent,
rgba(103, 66, 45, 0.25) 18%,
rgba(103, 66, 45, 0.25) 82%,
transparent
);
content: "";
content: "";
pointer-events: none;
pointer-events: none;
71번째 줄: 118번째 줄:
align-items: center;
align-items: center;
justify-content: center;
justify-content: center;
width: calc(100% - 2px);
width: calc(100% + 10px);
margin: -1.72rem auto 0;
margin: -1.95rem -5px 0;
padding: 0.94rem 2.35rem;
padding: 1rem 2.65rem;
border: 0;
border: 0;
box-sizing: border-box;
box-sizing: border-box;
background: var(--infobox-ribbon);
background:
linear-gradient(
180deg,
var(--infobox-ribbon-light) 0,
var(--infobox-ribbon) 42%,
var(--infobox-ribbon-dark) 100%
);
clip-path: polygon(
clip-path: polygon(
0 0,
0 0,
100% 0,
100% 0,
calc(100% - 16px) 50%,
calc(100% - 18px) 50%,
100% 100%,
100% 100%,
0 100%,
0 100%,
16px 50%
18px 50%
);
);
color: var(--infobox-title-text);
color: var(--infobox-title-text);
95번째 줄: 148번째 줄:
"Noto Sans KR",
"Noto Sans KR",
sans-serif;
sans-serif;
font-size: 1.28rem;
font-size: 1.3rem;
font-weight: 700;
font-weight: 700;
line-height: 1.14;
line-height: 1.14;
109번째 줄: 162번째 줄:
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),
0 3px 2px rgba(45, 24, 17, 0.38);
1px -2px 0 var(--infobox-text-outline),
filter: drop-shadow(0 5px 3px rgba(56, 31, 21, 0.28));
-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;
}
.infobox__title::before,
.infobox__title::after {
position: absolute;
top: 50%;
width: 11px;
height: 11px;
border: 1px solid var(--infobox-pin-edge);
border-radius: 50%;
box-sizing: border-box;
background:
radial-gradient(
circle at 68% 28%,
var(--infobox-pin-light) 0,
var(--infobox-pin-light) 1px,
transparent 2px
),
var(--infobox-pin);
box-shadow:
0 1px 1px rgba(50, 31, 23, 0.45),
inset 0 -1px rgba(92, 62, 45, 0.3);
content: "";
transform: translateY(-50%);
}
.infobox__title::before {
left: 0.9rem;
}
.infobox__title::after {
right: 0.9rem;
}
}


130번째 줄: 209번째 줄:
/* 내부 영역 */
/* 내부 영역 */
.infobox__panel {
.infobox__panel {
margin-top: 0.58rem;
margin-top: 0.72rem;
padding: 0 0.08rem 0.1rem;
padding: 0 0.1rem 0.2rem;
background: transparent;
background: transparent;
}
}
141번째 줄: 220번째 줄:
align-items: center;
align-items: center;
justify-content: center;
justify-content: center;
width: calc(100% - 14px);
width: calc(100% - 12px);
aspect-ratio: 1 / 1;
aspect-ratio: 1 / 1;
margin: 0 auto 0.78rem;
margin: 0 auto 0.9rem;
padding: 0.82rem;
padding: 0.78rem;
border: 0;
border: 0;
border-radius: 0;
border-radius: 0;
185번째 줄: 264번째 줄:
margin: 0 auto;
margin: 0 auto;
object-fit: contain;
object-fit: contain;
filter: drop-shadow(0 7px 5px rgba(72, 45, 32, 0.18));
}
}


/* 정보칸 */
/* 정보칸 */
.infobox__details {
.infobox__details {
width: calc(100% - 24px);
width: calc(100% - 20px);
margin: 0 auto;
margin: 0 auto;
border: 1px solid var(--infobox-row-edge);
border: 2px solid var(--infobox-row-edge);
border-collapse: separate;
border-collapse: separate;
border-spacing: 0;
border-spacing: 0;
border-radius: 14px;
border-radius: 16px;
table-layout: fixed;
table-layout: fixed;
background: var(--infobox-row-bg);
background:
linear-gradient(
180deg,
var(--infobox-row-bg),
var(--infobox-panel-soft)
);
box-sizing: border-box;
box-sizing: border-box;
box-shadow:
0 6px 14px rgba(89, 58, 41, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.62);
overflow: hidden;
overflow: hidden;
}
}
207번째 줄: 295번째 줄:
.infobox__details th,
.infobox__details th,
.infobox__details td {
.infobox__details td {
padding: 0.52rem 0.72rem;
padding: 0.58rem 0.76rem;
border: 0;
border: 0;
border-radius: 0;
border-radius: 0;
box-sizing: border-box;
box-sizing: border-box;
background-color: var(--infobox-row-bg);
background-color: transparent;
background-repeat: no-repeat;
background-repeat: no-repeat;
line-height: 1.38;
line-height: 1.4;
text-align: left;
text-align: left;
}
}
224번째 줄: 312번째 줄:
);
);
background-position: right bottom;
background-position: right bottom;
background-size: calc(100% - 0.72rem) 1px;
background-size: calc(100% - 0.76rem) 1px;
}
}


234번째 줄: 322번째 줄:
);
);
background-position: left bottom;
background-position: left bottom;
background-size: calc(100% - 0.72rem) 1px;
background-size: calc(100% - 0.76rem) 1px;
}
}


249번째 줄: 337번째 줄:
"Noto Sans KR",
"Noto Sans KR",
sans-serif;
sans-serif;
font-size: 0.83rem;
font-size: 0.84rem;
font-weight: 500;
font-weight: 500;
vertical-align: top;
vertical-align: top;
282번째 줄: 370번째 줄:
position: relative;
position: relative;
display: block;
display: block;
width: calc(100% - 14px);
width: calc(100% - 12px);
margin: 0.9rem auto 0.62rem;
margin: 1rem auto 0.64rem;
padding: 0.7rem 2.04rem 0.7rem 1.18rem;
padding: 0.74rem 2.1rem 0.74rem 1.2rem;
border: 0;
border: 0;
box-sizing: border-box;
box-sizing: border-box;
background: var(--infobox-ribbon);
background:
linear-gradient(
180deg,
var(--infobox-ribbon-light),
var(--infobox-ribbon-dark)
);
clip-path: polygon(
clip-path: polygon(
0 0,
0 0,
100% 0,
100% 0,
calc(100% - 12px) 50%,
calc(100% - 13px) 50%,
100% 100%,
100% 100%,
0 100%,
0 100%,
12px 50%
13px 50%
);
);
color: var(--infobox-title-text);
color: var(--infobox-title-text);
306번째 줄: 399번째 줄:
"Noto Sans KR",
"Noto Sans KR",
sans-serif;
sans-serif;
font-size: 1.08rem;
font-size: 1.1rem;
font-weight: 700;
font-weight: 700;
line-height: 1.14;
line-height: 1.14;
319번째 줄: 412번째 줄:
0 1px 0 var(--infobox-text-outline),
0 1px 0 var(--infobox-text-outline),
1px 1px 0 var(--infobox-text-outline);
1px 1px 0 var(--infobox-text-outline);
filter: drop-shadow(0 3px 2px rgba(56, 31, 21, 0.22));
}
}


327번째 줄: 421번째 줄:
position: absolute;
position: absolute;
top: 50%;
top: 50%;
right: 0.84rem;
right: 0.86rem;
width: 0;
width: 0;
height: 0;
height: 0;
342번째 줄: 436번째 줄:
.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 0.42rem;
padding: 0.84rem 0.92rem;
padding: 0.9rem 0.96rem;
border: 1px solid var(--infobox-row-edge);
border: 2px solid var(--infobox-row-edge);
border-radius: 7px;
border-radius: 12px;
box-sizing: border-box;
box-sizing: border-box;
background: var(--infobox-panel);
background:
linear-gradient(
180deg,
var(--infobox-panel),
var(--infobox-panel-soft)
);
color: var(--infobox-text);
color: var(--infobox-text);
font-size: 0.92rem;
font-size: 0.92rem;
line-height: 1.48;
line-height: 1.48;
box-shadow:
0 5px 12px rgba(89, 58, 41, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
}


433번째 줄: 535번째 줄:
max-width: 100%;
max-width: 100%;
margin: 0 0 1.1rem;
margin: 0 0 1.1rem;
padding: 1rem 0.42rem 0.66rem;
padding: 1.1rem 0.46rem 0.74rem;
border-radius: 22px;
border-radius: 24px;
font-size: 1rem;
font-size: 1rem;
}
}


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


.infobox__title {
.infobox__title {
width: 100%;
width: calc(100% + 6px);
margin-top: -1.6rem;
margin: -1.8rem -3px 0;
padding: 0.9rem 2rem;
padding: 0.92rem 2.1rem;
font-size: 1.46rem;
font-size: 1.48rem;
}
}


.infobox__image {
.infobox__image {
width: calc(100% - 12px);
width: calc(100% - 10px);
padding: 0.76rem;
padding: 0.74rem;
}
}


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


.infobox__details th,
.infobox__details th,
.infobox__details td {
.infobox__details td {
padding: 0.52rem 0.66rem;
padding: 0.56rem 0.7rem;
}
}


.infobox__details tr:not(:last-child) th {
.infobox__details tr:not(:last-child) th {
background-size: calc(100% - 0.66rem) 1px;
background-size: calc(100% - 0.7rem) 1px;
}
}


.infobox__details tr:not(:last-child) td {
.infobox__details tr:not(:last-child) td {
background-size: calc(100% - 0.66rem) 1px;
background-size: calc(100% - 0.7rem) 1px;
}
}


515번째 줄: 617번째 줄:
@media screen and (max-width: 480px) {
@media screen and (max-width: 480px) {
.infobox {
.infobox {
padding: 0.92rem 0.34rem 0.58rem;
padding: 1rem 0.36rem 0.64rem;
border-radius: 19px;
border-radius: 21px;
}
}


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


.infobox__title {
.infobox__title {
margin-top: -1.42rem;
width: calc(100% + 4px);
padding: 0.78rem 1.72rem;
margin: -1.58rem -2px 0;
font-size: 1.28rem;
padding: 0.8rem 1.78rem;
font-size: 1.3rem;
}
 
.infobox__title::before,
.infobox__title::after {
width: 9px;
height: 9px;
}
 
.infobox__title::before {
left: 0.68rem;
}
 
.infobox__title::after {
right: 0.68rem;
}
}


.infobox__image {
.infobox__image {
width: calc(100% - 8px);
width: calc(100% - 8px);
padding: 0.66rem;
padding: 0.64rem;
}
}


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


.infobox__details th,
.infobox__details th,
.infobox__details td {
.infobox__details td {
padding: 0.48rem 0.58rem;
padding: 0.5rem 0.6rem;
}
}


.infobox__details tr:not(:last-child) th {
.infobox__details tr:not(:last-child) th {
background-size: calc(100% - 0.58rem) 1px;
background-size: calc(100% - 0.6rem) 1px;
}
}


.infobox__details tr:not(:last-child) td {
.infobox__details tr:not(:last-child) td {
background-size: calc(100% - 0.58rem) 1px;
background-size: calc(100% - 0.6rem) 1px;
}
}


574번째 줄: 691번째 줄:
.infobox__games,
.infobox__games,
.infobox__appearance-list {
.infobox__appearance-list {
width: calc(100% - 6px);
width: calc(100% - 8px);
}
}


581번째 줄: 698번째 줄:
.infobox__panel > h2,
.infobox__panel > h2,
.infobox__panel > h3 {
.infobox__panel > h3 {
padding: 0.64rem 1.78rem 0.64rem 1rem;
padding: 0.66rem 1.82rem 0.66rem 1rem;
font-size: 1.04rem;
font-size: 1.05rem;
}
}


589번째 줄: 706번째 줄:
.infobox__games,
.infobox__games,
.infobox__appearance-list {
.infobox__appearance-list {
padding: 0.76rem 0.8rem;
padding: 0.78rem 0.82rem;
font-size: 0.95rem;
font-size: 0.95rem;
}
}
597번째 줄: 714번째 줄:
@media screen {
@media screen {
html.skin-theme-clientpref-night .infobox {
html.skin-theme-clientpref-night .infobox {
--infobox-outer: #4c3329;
--infobox-outer: #452c24;
--infobox-outer-edge: #36231c;
--infobox-outer-edge: #2f1d17;
--infobox-inner: #6d5644;
--infobox-outer-highlight: #624238;
--infobox-inner-edge: #8c7157;
--infobox-inner: #6a5242;
--infobox-panel: #3d332d;
--infobox-inner-edge: #8a6b53;
--infobox-inner-glow: rgba(255, 233, 207, 0.08);
--infobox-panel: #3b302b;
--infobox-panel-soft: #332a26;
--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: #7e4f3d;
--infobox-row-bg: #433731;
--infobox-ribbon-dark: #593326;
--infobox-row-edge: #896c59;
--infobox-ribbon-light: #99634f;
--infobox-row-divider: #6f5748;
--infobox-row-bg: #41342f;
--infobox-label-text: #f3e8df;
--infobox-row-edge: #856650;
--infobox-text: #f3e8df;
--infobox-row-divider: #695142;
--infobox-link: #edc1a9;
--infobox-label-text: #f1e5dc;
--infobox-link-hover: #ffe1d0;
--infobox-text: #f1e5dc;
--infobox-focus: #d1a58b;
--infobox-link: #edbea5;
--infobox-link-hover: #ffe0cf;
--infobox-focus: #d2a187;
--infobox-title-text: #fff8f2;
--infobox-title-text: #fff8f2;
--infobox-text-outline: #301d16;
--infobox-text-outline: #2d1b15;
--infobox-shadow: rgba(0, 0, 0, 0.34);
--infobox-shadow: rgba(0, 0, 0, 0.4);
--infobox-pin: #98806a;
--infobox-pin-edge: #4f4034;
--infobox-pin-light: #d8c2aa;
}
}
}
}
621번째 줄: 746번째 줄:
@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: #452c24;
--infobox-outer-edge: #36231c;
--infobox-outer-edge: #2f1d17;
--infobox-inner: #6d5644;
--infobox-outer-highlight: #624238;
--infobox-inner-edge: #8c7157;
--infobox-inner: #6a5242;
--infobox-panel: #3d332d;
--infobox-inner-edge: #8a6b53;
--infobox-inner-glow: rgba(255, 233, 207, 0.08);
--infobox-panel: #3b302b;
--infobox-panel-soft: #332a26;
--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: #7e4f3d;
--infobox-row-bg: #433731;
--infobox-ribbon-dark: #593326;
--infobox-row-edge: #896c59;
--infobox-ribbon-light: #99634f;
--infobox-row-divider: #6f5748;
--infobox-row-bg: #41342f;
--infobox-label-text: #f3e8df;
--infobox-row-edge: #856650;
--infobox-text: #f3e8df;
--infobox-row-divider: #695142;
--infobox-link: #edc1a9;
--infobox-label-text: #f1e5dc;
--infobox-link-hover: #ffe1d0;
--infobox-text: #f1e5dc;
--infobox-focus: #d1a58b;
--infobox-link: #edbea5;
--infobox-link-hover: #ffe0cf;
--infobox-focus: #d2a187;
--infobox-title-text: #fff8f2;
--infobox-title-text: #fff8f2;
--infobox-text-outline: #301d16;
--infobox-text-outline: #2d1b15;
--infobox-shadow: rgba(0, 0, 0, 0.34);
--infobox-shadow: rgba(0, 0, 0, 0.4);
--infobox-pin: #98806a;
--infobox-pin-edge: #4f4034;
--infobox-pin-light: #d8c2aa;
}
}
}
}
원본 주소 "https://pvzkrwiki.com/index.php/틀:정보상자/styles.css"