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

식물 vs 좀비 위키
편집 요약 없음
편집 요약 없음
태그: 모바일 편집 모바일 웹 편집
7번째 줄: 7번째 줄:
margin: 0 0 1.25rem 1.25rem;
margin: 0 0 1.25rem 1.25rem;
padding: 0.78rem;
padding: 0.78rem;
border: 2px solid #826950;
border: 2px solid #587656;
border-radius: 20px;
border-radius: 20px;
box-sizing: border-box;
box-sizing: border-box;
background: #e8ddc9;
background: #dce8d8;
color: #3b3028;
color: #30402f;
font-family:
font-family:
"SB Aggro L",
"SB Aggro L",
24번째 줄: 24번째 줄:
font-weight: 300;
font-weight: 300;
line-height: 1.55;
line-height: 1.55;
box-shadow: 0 9px 24px rgba(70, 52, 39, 0.15);
box-shadow: 0 9px 24px rgba(51, 82, 49, 0.15);
overflow: hidden;
overflow: hidden;
}
}
60번째 줄: 60번째 줄:
border-radius: 0;
border-radius: 0;
box-sizing: border-box;
box-sizing: border-box;
background: #927159;
background: #638861;
clip-path: polygon(
clip-path: polygon(
0 0,
0 0,
69번째 줄: 69번째 줄:
100% 0
100% 0
);
);
color: #fff9f1;
color: #f7fbf5;
font-family:
font-family:
"SB Aggro B",
"SB Aggro B",
98번째 줄: 98번째 줄:
margin-top: 0.66rem;
margin-top: 0.66rem;
padding: 0.62rem;
padding: 0.62rem;
border: 1px solid #cbb99e;
border: 1px solid #aebfa9;
border-radius: 14px;
border-radius: 14px;
box-sizing: border-box;
box-sizing: border-box;
background: #f5eddf;
background: #edf3e9;
overflow: hidden;
overflow: hidden;
}
}
135번째 줄: 135번째 줄:
max-height: 225px;
max-height: 225px;
padding: 0.58rem;
padding: 0.58rem;
border: 1px solid #d3c2a6;
border: 1px solid #bdcbb8;
border-radius: 10px;
border-radius: 10px;
box-sizing: border-box;
box-sizing: border-box;
background: rgba(252, 248, 240, 0.94);
background: rgba(248, 251, 246, 0.94);
overflow: hidden;
overflow: hidden;
}
}
149번째 줄: 149번째 줄:
height: 3px;
height: 3px;
border-radius: 3px;
border-radius: 3px;
background: #bc9870;
background: #7fa17a;
content: "";
content: "";
opacity: 0.42;
opacity: 0.42;
196번째 줄: 196번째 줄:
.infobox__details td {
.infobox__details td {
min-width: 0;
min-width: 0;
padding-top: 0.42rem;
padding-top: 0.5rem;
padding-bottom: 0.42rem;
padding-bottom: 0.5rem;
box-sizing: border-box;
box-sizing: border-box;
vertical-align: middle;
vertical-align: middle;
line-height: 1.42;
line-height: 1.44;
}
}


.infobox__details th {
.infobox__details th {
width: 31%;
width: 31%;
padding-right: 0.56rem;
padding-right: 0.64rem;
padding-left: 0.56rem;
padding-left: 0.64rem;
border: 1px solid #ae9272;
border: 1px solid #8fa58a;
border-right: 0;
border-right: 0;
border-radius: 9px 0 0 9px;
border-radius: 9px 0 0 9px;
background: #d5c2a4;
background: #c7d8c1;
color: #49372c;
color: #30462f;
font-family:
font-family:
"SB Aggro M",
"SB Aggro M",
229번째 줄: 229번째 줄:
.infobox__details td {
.infobox__details td {
width: 69%;
width: 69%;
padding-right: 0.62rem;
padding-right: 0.7rem;
padding-left: 0.62rem;
padding-left: 0.7rem;
border: 1px solid #cbb79b;
border: 1px solid #b2c3ad;
border-left: 0;
border-left: 0;
border-radius: 0 9px 9px 0;
border-radius: 0 9px 9px 0;
background: rgba(253, 249, 241, 0.96);
background: rgba(247, 250, 245, 0.96);
color: #3b3028;
color: #30402f;
font-family:
font-family:
"SB Aggro L",
"SB Aggro L",
253번째 줄: 253번째 줄:


.infobox__details p {
.infobox__details p {
margin: 0.12em 0;
margin: 0.14em 0;
font: inherit;
font: inherit;
}
}
259번째 줄: 259번째 줄:
.infobox__details ul,
.infobox__details ul,
.infobox__details ol {
.infobox__details ol {
margin: 0.16em 0 0.16em 1.1em;
margin: 0.18em 0 0.18em 1.1em;
padding: 0;
padding: 0;
font: inherit;
font: inherit;
265번째 줄: 265번째 줄:


.infobox__details li {
.infobox__details li {
margin: 0.08em 0;
margin: 0.1em 0;
font: inherit;
font: inherit;
}
}
274번째 줄: 274번째 줄:


.infobox a {
.infobox a {
color: #75563e;
color: #3f7441;
font-family: inherit;
font-family: inherit;
font-weight: inherit;
font-weight: inherit;
281번째 줄: 281번째 줄:


.infobox a:hover {
.infobox a:hover {
color: #4f3727;
color: #2d5a30;
text-decoration: underline;
text-decoration: underline;
}
}


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


300번째 줄: 300번째 줄:
font-size: 1rem;
font-size: 1rem;
line-height: 1.55;
line-height: 1.55;
box-shadow: 0 7px 18px rgba(70, 52, 39, 0.13);
box-shadow: 0 7px 18px rgba(51, 82, 49, 0.13);
}
}


351번째 줄: 351번째 줄:
.infobox__details th,
.infobox__details th,
.infobox__details td {
.infobox__details td {
padding-top: 0.44rem;
padding-top: 0.52rem;
padding-bottom: 0.44rem;
padding-bottom: 0.52rem;
line-height: 1.4;
line-height: 1.42;
}
}


.infobox__details th {
.infobox__details th {
width: 30%;
width: 30%;
padding-right: 0.56rem;
padding-right: 0.64rem;
padding-left: 0.56rem;
padding-left: 0.64rem;
font-size: 0.98rem;
font-size: 0.98rem;
}
}
365번째 줄: 365번째 줄:
.infobox__details td {
.infobox__details td {
width: 70%;
width: 70%;
padding-right: 0.62rem;
padding-right: 0.7rem;
padding-left: 0.62rem;
padding-left: 0.7rem;
font-size: 1rem;
font-size: 1rem;
}
}
420번째 줄: 420번째 줄:
.infobox__details th,
.infobox__details th,
.infobox__details td {
.infobox__details td {
padding-top: 0.38rem;
padding-top: 0.46rem;
padding-bottom: 0.38rem;
padding-bottom: 0.46rem;
line-height: 1.38;
line-height: 1.4;
}
}


.infobox__details th {
.infobox__details th {
width: 34%;
width: 34%;
padding-right: 0.48rem;
padding-right: 0.56rem;
padding-left: 0.48rem;
padding-left: 0.56rem;
border-radius: 8px 0 0 8px;
border-radius: 8px 0 0 8px;
font-size: 0.92rem;
font-size: 0.92rem;
435번째 줄: 435번째 줄:
.infobox__details td {
.infobox__details td {
width: 66%;
width: 66%;
padding-right: 0.52rem;
padding-right: 0.6rem;
padding-left: 0.52rem;
padding-left: 0.6rem;
border-radius: 0 8px 8px 0;
border-radius: 0 8px 8px 0;
font-size: 0.96rem;
font-size: 0.96rem;
444번째 줄: 444번째 줄:
@media screen {
@media screen {
html.skin-theme-clientpref-night .infobox {
html.skin-theme-clientpref-night .infobox {
border-color: #705d4b;
border-color: #4f694d;
background: #39312b;
background: #293329;
color: #eee5da;
color: #e3ebe0;
box-shadow: 0 9px 24px rgba(0, 0, 0, 0.28);
box-shadow: 0 9px 24px rgba(0, 0, 0, 0.28);
}
}
455번째 줄: 455번째 줄:


html.skin-theme-clientpref-night .infobox__title {
html.skin-theme-clientpref-night .infobox__title {
background: #6b5546;
background: #486747;
color: #fff5e9;
color: #f3f8f1;
}
}


html.skin-theme-clientpref-night .infobox__panel {
html.skin-theme-clientpref-night .infobox__panel {
border-color: #645646;
border-color: #4e604c;
background: #2e2823;
background: #222a22;
}
}


469번째 줄: 469번째 줄:


html.skin-theme-clientpref-night .infobox__image {
html.skin-theme-clientpref-night .infobox__image {
border-color: #68594a;
border-color: #536651;
background: #39322c;
background: #2c352c;
}
}


html.skin-theme-clientpref-night .infobox__image::after {
html.skin-theme-clientpref-night .infobox__image::after {
background: #aa8462;
background: #86a582;
}
}


html.skin-theme-clientpref-night .infobox__details th {
html.skin-theme-clientpref-night .infobox__details th {
border-color: #765f4b;
border-color: #5d745a;
background: #59483b;
background: #3d503c;
color: #f0e4d7;
color: #e7efe4;
}
}


html.skin-theme-clientpref-night .infobox__details td {
html.skin-theme-clientpref-night .infobox__details td {
border-color: #695849;
border-color: #50634e;
background: #40362f;
background: #303c30;
color: #eee5da;
color: #e3ebe0;
}
}


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


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


html.skin-theme-clientpref-night .infobox a:focus {
html.skin-theme-clientpref-night .infobox a:focus {
outline-color: #c39a76;
outline-color: #8caf88;
}
}
}
}
504번째 줄: 504번째 줄:
@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: #705d4b;
border-color: #4f694d;
background: #39312b;
background: #293329;
color: #eee5da;
color: #e3ebe0;
box-shadow: 0 9px 24px rgba(0, 0, 0, 0.28);
box-shadow: 0 9px 24px rgba(0, 0, 0, 0.28);
}
}
515번째 줄: 515번째 줄:


html.skin-theme-clientpref-os .infobox__title {
html.skin-theme-clientpref-os .infobox__title {
background: #6b5546;
background: #486747;
color: #fff5e9;
color: #f3f8f1;
}
}


html.skin-theme-clientpref-os .infobox__panel {
html.skin-theme-clientpref-os .infobox__panel {
border-color: #645646;
border-color: #4e604c;
background: #2e2823;
background: #222a22;
}
}


529번째 줄: 529번째 줄:


html.skin-theme-clientpref-os .infobox__image {
html.skin-theme-clientpref-os .infobox__image {
border-color: #68594a;
border-color: #536651;
background: #39322c;
background: #2c352c;
}
}


html.skin-theme-clientpref-os .infobox__image::after {
html.skin-theme-clientpref-os .infobox__image::after {
background: #aa8462;
background: #86a582;
}
}


html.skin-theme-clientpref-os .infobox__details th {
html.skin-theme-clientpref-os .infobox__details th {
border-color: #765f4b;
border-color: #5d745a;
background: #59483b;
background: #3d503c;
color: #f0e4d7;
color: #e7efe4;
}
}


html.skin-theme-clientpref-os .infobox__details td {
html.skin-theme-clientpref-os .infobox__details td {
border-color: #695849;
border-color: #50634e;
background: #40362f;
background: #303c30;
color: #eee5da;
color: #e3ebe0;
}
}


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


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


html.skin-theme-clientpref-os .infobox a:focus {
html.skin-theme-clientpref-os .infobox a:focus {
outline-color: #c39a76;
outline-color: #8caf88;
}
}
}
}