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

식물 vs 좀비 위키
← 이전 편집다음 편집 →
편집 취소Brokey (토론 | 기여)
사무관, 인터페이스 관리자, 관리자
385 편집
편집 요약 없음
태그: 모바일 편집 모바일 웹 편집
편집 요약 없음
3번째 줄: 3번째 줄:
float: right;
float: right;
clear: right;
clear: right;
width: 340px;
width: 328px;
max-width: 100%;
max-width: 100%;
margin: 0 0 1.3rem 1.3rem;
margin: 0 0 1.25rem 1.25rem;
padding: 0.82rem;
padding: 0.82rem;
border: 1px solid #bca58c;
border: 2px solid #846951;
border-left: 6px solid #79533b;
border-radius: 22px;
border-radius: 22px 8px 18px 8px;
box-sizing: border-box;
box-sizing: border-box;
background: #ded0bd;
background-color: #e9dec9;
color: #40342c;
background-image: url("/wiki/Special:Redirect/file/paper_texture.png");
background-repeat: repeat;
background-position: left top;
background-size: 360px auto;
color: #3b3028;
font-family:
font-family:
"SB Aggro L",
"SB 어그로 L",
-apple-system,
-apple-system,
BlinkMacSystemFont,
BlinkMacSystemFont,
22번째 줄: 23번째 줄:
"Noto Sans KR",
"Noto Sans KR",
sans-serif;
sans-serif;
font-size: 0.95rem;
font-size: 0.92rem;
font-weight: 300;
line-height: 1.55;
line-height: 1.6;
box-shadow: 0 10px 26px rgba(70, 52, 39, 0.16);
box-shadow: 0 8px 20px rgba(69, 48, 34, 0.14);
overflow: visible;
overflow: visible;
}
}


.infobox__head {
.infobox__hanger {
margin: 0 0.35rem 0 -1.15rem;
position: absolute;
z-index: 3;
top: 1.08rem;
left: 1.12rem;
width: 27px;
height: 27px;
background-image: url("/wiki/Special:Redirect/file/tag.svg");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
filter:
invert(96%)
sepia(8%)
saturate(448%)
hue-rotate(329deg)
brightness(106%)
contrast(101%);
}
}


.infobox__title {
.infobox__title {
padding: 0.58rem 1rem 0.52rem 1.25rem;
position: relative;
border: 1px solid #654531;
display: flex;
border-left: 0;
align-items: center;
border-radius: 0 13px 5px 0;
justify-content: center;
width: 100%;
min-height: 60px;
padding: 0.76rem 3.45rem 0.72rem 3.3rem;
border: 1px solid #765a45;
border-radius: 16px 12px 16px 12px;
box-sizing: border-box;
box-sizing: border-box;
background: #79533b;
background: #92715a;
color: #fff8ef;
color: #fff9f0;
font-family:
font-family:
"SB Aggro B",
"SB 어그로 B",
-apple-system,
-apple-system,
BlinkMacSystemFont,
BlinkMacSystemFont,
50번째 줄: 69번째 줄:
"Noto Sans KR",
"Noto Sans KR",
sans-serif;
sans-serif;
font-size: 1.38rem;
font-size: 1.3rem;
font-weight: 700;
font-weight: 700;
letter-spacing: -0.025em;
letter-spacing: -0.025em;
line-height: 1.35;
line-height: 1.28;
text-align: left;
text-align: center;
overflow-wrap: anywhere;
overflow-wrap: anywhere;
word-break: keep-all;
word-break: keep-all;
}
.infobox__title::after {
position: absolute;
top: 50%;
right: 1rem;
width: 25px;
height: 25px;
margin-top: -12px;
background-image: url("/wiki/Special:Redirect/file/letter.svg");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
content: "";
opacity: 0.88;
filter:
invert(96%)
sepia(8%)
saturate(448%)
hue-rotate(329deg)
brightness(106%)
contrast(101%);
}
}


66번째 줄: 107번째 줄:
}
}


.infobox__body {
.infobox__panel {
margin-top: 0.72rem;
margin-top: 0.7rem;
border: 1px solid #c5ad91;
padding: 0.68rem;
border-radius: 13px 5px 15px 5px;
border: 1px solid #cbb99e;
border-radius: 15px;
box-sizing: border-box;
box-sizing: border-box;
background: #f2e7d7;
background-color: #f5eddf;
background-image: url("/wiki/Special:Redirect/file/paper_texture.png");
background-repeat: repeat;
background-position: left top;
background-size: 360px auto;
overflow: hidden;
overflow: hidden;
}
.infobox__media {
margin: 0;
}
}


.infobox__image {
.infobox__image {
position: relative;
display: flex;
display: flex;
align-items: center;
align-items: center;
justify-content: center;
justify-content: center;
width: 100%;
width: 100%;
min-height: 195px;
min-height: 205px;
max-height: 265px;
max-height: 285px;
padding: 1rem;
padding: 1.1rem;
border: 0;
border: 1px solid #d5c4a8;
border-bottom: 1px solid #c8b298;
border-radius: 12px;
box-sizing: border-box;
box-sizing: border-box;
background: #f7eee2;
background: rgba(252, 248, 239, 0.88);
overflow: hidden;
overflow: hidden;
}
.infobox__image::before {
position: absolute;
top: 0.55rem;
right: 0.55rem;
bottom: 0.55rem;
left: 0.55rem;
border: 1px solid #e6dac6;
border-radius: 8px;
content: "";
}
.infobox__image::after {
position: absolute;
right: 0.9rem;
bottom: 0.78rem;
width: 38px;
height: 4px;
border-radius: 4px;
background: #c29c72;
content: "";
opacity: 0.65;
}
.infobox__image a,
.infobox__image img {
position: relative;
z-index: 1;
}
}


99번째 줄: 171번째 줄:
max-width: 100%;
max-width: 100%;
height: auto;
height: auto;
max-height: 225px;
max-height: 230px;
margin: 0 auto;
margin: 0 auto;
object-fit: contain;
object-fit: contain;
filter: drop-shadow(0 7px 7px rgba(76, 53, 37, 0.18));
filter: drop-shadow(0 4px 4px rgba(68, 49, 36, 0.12));
}
}


.infobox__section {
.infobox__section {
position: relative;
position: relative;
padding: 0.78rem 0.8rem 0.38rem;
display: flex;
align-items: center;
min-height: 34px;
margin: 0.76rem 0 0.36rem;
padding: 0.38rem 0.75rem 0.38rem 2.05rem;
border-left: 4px solid #997456;
border-radius: 0 9px 9px 0;
box-sizing: border-box;
box-sizing: border-box;
background: #eadcca;
background: #dfcfb5;
color: #49382d;
font-size: 0.86rem;
font-weight: 700;
line-height: 1.4;
}
 
.infobox__section::before {
position: absolute;
top: 50%;
left: 0.62rem;
width: 18px;
height: 18px;
margin-top: -9px;
background-image: url("/wiki/Special:Redirect/file/bookmark.svg");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
content: "";
opacity: 0.72;
filter:
invert(34%)
sepia(16%)
saturate(1129%)
hue-rotate(342deg)
brightness(89%)
contrast(83%);
}
}


.infobox__section-title {
.infobox__details {
display: inline-block;
width: 100%;
margin: 0 0 0.42rem -0.8rem;
margin: 0.05rem 0 0;
padding: 0.3rem 0.75rem 0.28rem 0.85rem;
border: 0;
border-left: 4px solid #9e6844;
border-collapse: separate;
border-radius: 0 7px 7px 0;
border-spacing: 0 0.42rem;
background: #d5bea1;
table-layout: fixed;
color: #594234;
background: transparent;
font-family:
font-family:
"SB Aggro M",
"SB 어그로 M",
-apple-system,
-apple-system,
BlinkMacSystemFont,
BlinkMacSystemFont,
129번째 줄: 231번째 줄:
"Noto Sans KR",
"Noto Sans KR",
sans-serif;
sans-serif;
font-size: 0.84rem;
font-weight: 500;
line-height: 1.4;
}
}


.infobox__details {
.infobox__image + .infobox__details {
width: 100%;
margin-top: 0.7rem;
margin: 0;
border: 0;
border-collapse: collapse;
border-spacing: 0;
table-layout: fixed;
background: transparent;
}
}


147번째 줄: 240번째 줄:
.infobox__details td {
.infobox__details td {
min-width: 0;
min-width: 0;
padding: 0.64rem 0;
padding-top: 0.56rem;
border: 0;
padding-bottom: 0.56rem;
box-sizing: border-box;
box-sizing: border-box;
vertical-align: top;
vertical-align: top;
line-height: 1.55;
line-height: 1.5;
}
 
.infobox__details tr + tr th,
.infobox__details tr + tr td {
border-top: 1px solid #d0bba1;
}
}


.infobox__details th {
.infobox__details th {
position: relative;
width: 36%;
width: 35%;
padding-right: 0.76rem;
padding-right: 0.72rem;
padding-left: 0.78rem;
padding-left: 0.78rem;
color: #4d392d;
border: 1px solid #b89d7c;
font-family:
border-right: 0;
"SB Aggro M",
border-left-width: 4px;
"SB 어그로 M",
border-radius: 10px 0 0 10px;
-apple-system,
background: #d7c5a8;
BlinkMacSystemFont,
color: #47372d;
"Segoe UI",
font-size: 0.86rem;
"Apple SD Gothic Neo",
font-weight: 600;
"Noto Sans KR",
sans-serif;
font-size: 0.87rem;
font-weight: 500;
text-align: left;
text-align: left;
white-space: normal;
white-space: normal;
}
.infobox__details th::before {
content: "";
position: absolute;
top: 0.92rem;
left: 0;
width: 3px;
height: 0.82rem;
border-radius: 2px;
background: #9e6844;
}
}


.infobox__details td {
.infobox__details td {
padding-left: 0.42rem;
padding-right: 0.72rem;
color: #40342c;
padding-left: 0.76rem;
font-family:
border: 1px solid #cebaa0;
"SB Aggro L",
border-left: 0;
"SB 어그로 L",
border-radius: 0 10px 10px 0;
-apple-system,
background: rgba(252, 247, 238, 0.94);
BlinkMacSystemFont,
color: #3b3028;
"Segoe UI",
font-size: 0.91rem;
"Apple SD Gothic Neo",
font-weight: 400;
"Noto Sans KR",
sans-serif;
font-size: 0.92rem;
font-weight: 300;
text-align: left;
text-align: left;
overflow-wrap: anywhere;
overflow-wrap: anywhere;
211번째 줄: 279번째 줄:


.infobox__details p {
.infobox__details p {
margin: 0.18em 0;
margin: 0.2em 0;
}
}


.infobox__details ul,
.infobox__details ul,
.infobox__details ol {
.infobox__details ol {
margin: 0.24em 0 0.24em 1.2em;
margin: 0.22em 0 0.22em 1.2em;
padding: 0;
padding: 0;
}
}
229번째 줄: 297번째 줄:


.infobox a {
.infobox a {
color: #85502f;
color: #795940;
text-decoration: none;
text-decoration: none;
}
}


.infobox a:hover {
.infobox a:hover {
color: #5d351f;
color: #523927;
text-decoration: underline;
text-decoration: underline;
}
}


.infobox a:focus {
.infobox a:focus {
outline: 2px solid #9e6844;
outline: 2px solid #a17d5f;
}
}


248번째 줄: 316번째 줄:
width: 100%;
width: 100%;
max-width: 100%;
max-width: 100%;
margin: 0 0 1.15rem;
margin: 0 0 1.1rem;
padding: 0.72rem;
padding: 0.7rem;
border-left-width: 6px;
border-radius: 20px;
border-radius: 20px 7px 17px 7px;
font-size: 1rem;
font-size: 1rem;
line-height: 1.6;
line-height: 1.55;
box-shadow: 0 7px 18px rgba(69, 48, 34, 0.13);
box-shadow: 0 8px 20px rgba(70, 52, 39, 0.14);
}
}


.infobox__head {
.infobox__hanger {
margin-right: 0.25rem;
top: 1.05rem;
margin-left: -1.05rem;
left: 1rem;
width: 28px;
height: 28px;
}
}


.infobox__title {
.infobox__title {
padding: 0.62rem 0.95rem 0.58rem 1.1rem;
min-height: 66px;
border-radius: 0 12px 5px 0;
padding: 0.86rem 3.7rem 0.82rem 3.35rem;
font-size: 2.2rem;
border-radius: 15px 11px 15px 11px;
line-height: 1.25;
font-size: 2rem;
line-height: 1.18;
}
}


.infobox__body {
.infobox__title::after {
margin-top: 0.65rem;
right: 1.1rem;
border-radius: 12px 5px 14px 5px;
width: 27px;
height: 27px;
margin-top: -13px;
}
 
.infobox__panel {
margin-top: 0.64rem;
padding: 0.6rem;
border-radius: 13px;
}
}


.infobox__image {
.infobox__image {
min-height: 200px;
min-height: 210px;
max-height: 275px;
max-height: 295px;
padding: 0.95rem;
padding: 1rem;
border-radius: 11px;
}
}


.infobox__image img {
.infobox__image img {
max-height: 235px;
max-height: 240px;
}
}


.infobox__section {
.infobox__section {
padding-right: 0.72rem;
min-height: 38px;
padding-left: 0.72rem;
padding-left: 2.2rem;
font-size: 0.98rem;
}
}


.infobox__section-title {
.infobox__section::before {
margin-left: -0.72rem;
left: 0.7rem;
font-size: 0.92rem;
width: 19px;
height: 19px;
margin-top: -9px;
}
}


.infobox__details th {
.infobox__details th {
width: 34%;
width: 35%;
padding-left: 0.78rem;
padding-right: 0.7rem;
padding-left: 0.74rem;
font-size: 1rem;
font-size: 1rem;
}
}


.infobox__details td {
.infobox__details td {
padding-right: 0.68rem;
padding-left: 0.7rem;
font-size: 1rem;
font-size: 1rem;
}
}
}
}


@media screen and (max-width: 520px) {
@media screen and (max-width: 480px) {
.infobox {
.infobox {
padding: 0.62rem;
padding: 0.58rem;
border-left-width: 5px;
border-radius: 17px;
border-radius: 18px 6px 15px 6px;
}
}


.infobox__head {
.infobox__hanger {
margin-left: -0.92rem;
top: 0.92rem;
left: 0.85rem;
width: 25px;
height: 25px;
}
}


.infobox__title {
.infobox__title {
padding: 0.58rem 0.82rem 0.54rem 0.95rem;
min-height: 60px;
font-size: 2rem;
padding: 0.76rem 3.2rem 0.72rem 2.95rem;
font-size: 1.75rem;
}
 
.infobox__title::after {
right: 0.85rem;
width: 23px;
height: 23px;
margin-top: -11px;
}
 
.infobox__panel {
padding: 0.5rem;
border-radius: 11px;
}
}


.infobox__image {
.infobox__image {
min-height: 180px;
min-height: 180px;
max-height: 245px;
max-height: 250px;
padding: 0.82rem;
padding: 0.82rem;
border-radius: 10px;
}
}


332번째 줄: 433번째 줄:


.infobox__section {
.infobox__section {
padding-right: 0.62rem;
margin-top: 0.62rem;
padding-left: 0.62rem;
padding-left: 2.05rem;
}
font-size: 0.94rem;
 
.infobox__section-title {
margin-left: -0.62rem;
}
}


349번째 줄: 447번째 줄:
}
}


.infobox__details tr {
.infobox__details {
padding: 0.62rem 0;
margin-top: 0;
border-spacing: 0;
}
}


.infobox__details tr + tr {
.infobox__image + .infobox__details {
border-top: 1px solid #d0bba1;
margin-top: 0.58rem;
}
}


.infobox__details tr + tr th,
.infobox__details tr {
.infobox__details tr + tr td {
margin-bottom: 0.38rem;
border-top: 0;
}
}


.infobox__details th {
.infobox__details th {
padding: 0.04rem 0.18rem 0.22rem 0.78rem;
padding: 0.48rem 0.7rem;
border-right: 1px solid #b89d7c;
border-bottom: 0;
border-left-width: 4px;
border-radius: 9px 9px 0 0;
font-size: 0.96rem;
font-size: 0.96rem;
}
.infobox__details th::before {
top: 0.34rem;
height: 0.74rem;
}
}


.infobox__details td {
.infobox__details td {
padding: 0.05rem 0.18rem 0.05rem 0.78rem;
padding: 0.58rem 0.7rem;
border-top: 0;
border-left: 1px solid #cebaa0;
border-radius: 0 0 9px 9px;
font-size: 1rem;
font-size: 1rem;
line-height: 1.6;
}
}
}
}
381번째 줄: 480번째 줄:
@media screen {
@media screen {
html.skin-theme-clientpref-night .infobox {
html.skin-theme-clientpref-night .infobox {
border-color: #5e4c3f;
border-color: #715e4d;
border-left-color: #a87350;
background-color: #3a322c;
background: #332a24;
color: #eee5da;
color: #ece3d8;
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
}
}


html.skin-theme-clientpref-night .infobox__title {
html.skin-theme-clientpref-night .infobox__title {
border-color: #865c43;
border-color: #7a6350;
background: #684733;
background: #6d5748;
color: #f7eee4;
color: #fff5e9;
}
}


html.skin-theme-clientpref-night .infobox__body {
html.skin-theme-clientpref-night .infobox__panel {
border-color: #675548;
border-color: #665747;
background: #3a3029;
background-color: #2f2924;
}
}


html.skin-theme-clientpref-night .infobox__image {
html.skin-theme-clientpref-night .infobox__image {
border-bottom-color: #665448;
border-color: #685a4b;
background: #41362e;
background: rgba(55, 48, 42, 0.94);
}
}


html.skin-theme-clientpref-night .infobox__image img {
html.skin-theme-clientpref-night .infobox__image::before {
filter: drop-shadow(0 7px 7px rgba(0, 0, 0, 0.3));
border-color: #4f463e;
}
}


html.skin-theme-clientpref-night .infobox__section {
html.skin-theme-clientpref-night .infobox__image::after {
background: #3a3029;
background: #ad8765;
}
}


html.skin-theme-clientpref-night .infobox__section-title {
html.skin-theme-clientpref-night .infobox__image img {
border-left-color: #bd8055;
filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.28));
background: #4e3e33;
color: #eddccc;
}
}


html.skin-theme-clientpref-night .infobox__details tr + tr th,
html.skin-theme-clientpref-night .infobox__section {
html.skin-theme-clientpref-night .infobox__details tr + tr td,
border-left-color: #ad8765;
html.skin-theme-clientpref-night .infobox__details tr + tr {
background: #51443a;
border-top-color: #594a3f;
color: #f0e3d5;
}
}


html.skin-theme-clientpref-night .infobox__details th {
html.skin-theme-clientpref-night .infobox__section::before {
color: #ead8c7;
filter:
invert(80%)
sepia(18%)
saturate(589%)
hue-rotate(343deg)
brightness(93%)
contrast(87%);
}
}


html.skin-theme-clientpref-night .infobox__details th::before {
html.skin-theme-clientpref-night .infobox__details th {
background: #bd8055;
border-color: #75624f;
background: #594a3e;
color: #f0e4d7;
}
}


html.skin-theme-clientpref-night .infobox__details td {
html.skin-theme-clientpref-night .infobox__details td {
color: #ece3d8;
border-color: #6b594a;
background: rgba(68, 57, 48, 0.96);
color: #eee5da;
}
}


html.skin-theme-clientpref-night .infobox a {
html.skin-theme-clientpref-night .infobox a {
color: #e0af82;
color: #dcb28b;
}
}


html.skin-theme-clientpref-night .infobox a:hover {
html.skin-theme-clientpref-night .infobox a:hover {
color: #f1c9a5;
color: #f1cfad;
}
}


html.skin-theme-clientpref-night .infobox a:focus {
html.skin-theme-clientpref-night .infobox a:focus {
outline-color: #d59a69;
outline-color: #c39a76;
}
}
}
}
451번째 줄: 557번째 줄:
@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: #5e4c3f;
border-color: #715e4d;
border-left-color: #a87350;
background-color: #3a322c;
background: #332a24;
color: #eee5da;
color: #ece3d8;
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
}
}


html.skin-theme-clientpref-os .infobox__title {
html.skin-theme-clientpref-os .infobox__title {
border-color: #865c43;
border-color: #7a6350;
background: #684733;
background: #6d5748;
color: #f7eee4;
color: #fff5e9;
}
}


html.skin-theme-clientpref-os .infobox__body {
html.skin-theme-clientpref-os .infobox__panel {
border-color: #675548;
border-color: #665747;
background: #3a3029;
background-color: #2f2924;
}
}


html.skin-theme-clientpref-os .infobox__image {
html.skin-theme-clientpref-os .infobox__image {
border-bottom-color: #665448;
border-color: #685a4b;
background: #41362e;
background: rgba(55, 48, 42, 0.94);
}
}


html.skin-theme-clientpref-os .infobox__image img {
html.skin-theme-clientpref-os .infobox__image::before {
filter: drop-shadow(0 7px 7px rgba(0, 0, 0, 0.3));
border-color: #4f463e;
}
}


html.skin-theme-clientpref-os .infobox__section {
html.skin-theme-clientpref-os .infobox__image::after {
background: #3a3029;
background: #ad8765;
}
}


html.skin-theme-clientpref-os .infobox__section-title {
html.skin-theme-clientpref-os .infobox__image img {
border-left-color: #bd8055;
filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.28));
background: #4e3e33;
color: #eddccc;
}
}


html.skin-theme-clientpref-os .infobox__details tr + tr th,
html.skin-theme-clientpref-os .infobox__section {
html.skin-theme-clientpref-os .infobox__details tr + tr td,
border-left-color: #ad8765;
html.skin-theme-clientpref-os .infobox__details tr + tr {
background: #51443a;
border-top-color: #594a3f;
color: #f0e3d5;
}
}


html.skin-theme-clientpref-os .infobox__details th {
html.skin-theme-clientpref-os .infobox__section::before {
color: #ead8c7;
filter:
invert(80%)
sepia(18%)
saturate(589%)
hue-rotate(343deg)
brightness(93%)
contrast(87%);
}
}


html.skin-theme-clientpref-os .infobox__details th::before {
html.skin-theme-clientpref-os .infobox__details th {
background: #bd8055;
border-color: #75624f;
background: #594a3e;
color: #f0e4d7;
}
}


html.skin-theme-clientpref-os .infobox__details td {
html.skin-theme-clientpref-os .infobox__details td {
color: #ece3d8;
border-color: #6b594a;
background: rgba(68, 57, 48, 0.96);
color: #eee5da;
}
}


html.skin-theme-clientpref-os .infobox a {
html.skin-theme-clientpref-os .infobox a {
color: #e0af82;
color: #dcb28b;
}
}


html.skin-theme-clientpref-os .infobox a:hover {
html.skin-theme-clientpref-os .infobox a:hover {
color: #f1c9a5;
color: #f1cfad;
}
}


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