틀:정보상자/styles.css: 두 판 사이의 차이
식물 vs 좀비 위키
편집 요약 없음 |
편집 요약 없음 |
||
| 1번째 줄: | 1번째 줄: | ||
.infobox { | .infobox { | ||
--infobox-frame: #5f7047; | |||
--infobox-frame-dark: #435432; | |||
--infobox-shell: #d8c5a5; | |||
--infobox-shell-light: #e7d7ba; | |||
--infobox-paper: #fffaf0; | |||
--infobox-paper-alt: #f2e7d3; | |||
--infobox-rule: #d1bea3; | |||
--infobox-label: #71805a; | |||
--infobox-label-dark: #4e5e3d; | |||
--infobox-label-light: #8e9a73; | |||
--infobox-label-text: #fffdf5; | |||
--infobox-title: #704830; | |||
--infobox-title-dark: #543421; | |||
--infobox-ink: #49372d; | |||
--infobox-muted: #675143; | |||
--infobox-link: #825334; | |||
--infobox-link-hover: #5e3822; | |||
--infobox-focus: #879a67; | |||
--infobox-stitch: rgba(77, 92, 57, 0.42); | |||
--infobox-shadow: rgba(70, 48, 32, 0.2); | |||
--infobox-cell-shadow: rgba(79, 55, 37, 0.08); | |||
position: relative; | position: relative; | ||
isolation: isolate; | |||
float: right; | float: right; | ||
clear: right; | clear: right; | ||
| 7번째 줄: | 30번째 줄: | ||
margin: 0 0 1.25rem 1.25rem; | margin: 0 0 1.25rem 1.25rem; | ||
padding: 0.78rem; | padding: 0.78rem; | ||
border: 2px solid | border: 2px solid var(--infobox-frame-dark); | ||
border-radius: | border-radius: 22px; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
background: | background: | ||
color: | linear-gradient( | ||
135deg, | |||
rgba(255, 255, 255, 0.2), | |||
transparent 34% | |||
), | |||
linear-gradient( | |||
180deg, | |||
var(--infobox-shell-light), | |||
var(--infobox-shell) | |||
); | |||
color: var(--infobox-ink); | |||
font-family: | font-family: | ||
"SB Aggro L", | "SB Aggro L", | ||
| 24번째 줄: | 57번째 줄: | ||
font-weight: 300; | font-weight: 300; | ||
line-height: 1.55; | line-height: 1.55; | ||
box-shadow: 0 | box-shadow: | ||
0 10px 25px var(--infobox-shadow), | |||
inset 0 1px rgba(255, 255, 255, 0.45); | |||
overflow: hidden; | overflow: hidden; | ||
} | } | ||
| 30번째 줄: | 65번째 줄: | ||
.infobox::before { | .infobox::before { | ||
position: absolute; | position: absolute; | ||
z-index: | z-index: -2; | ||
top: 0; | top: 0; | ||
right: 0; | right: 0; | ||
bottom: 0; | bottom: 0; | ||
left: 0; | left: 0; | ||
border-radius: | border-radius: 20px; | ||
background-image: url("/wiki/Special:Redirect/file/paper_texture.png"); | background-image: url("/wiki/Special:Redirect/file/paper_texture.png"); | ||
background-repeat: repeat; | background-repeat: repeat; | ||
| 41번째 줄: | 76번째 줄: | ||
background-size: 520px auto; | background-size: 520px auto; | ||
content: ""; | content: ""; | ||
opacity: 0. | opacity: 0.025; | ||
pointer-events: none; | |||
} | |||
.infobox::after { | |||
position: absolute; | |||
z-index: -1; | |||
top: 5px; | |||
right: 5px; | |||
bottom: 5px; | |||
left: 5px; | |||
border: 1px dashed var(--infobox-stitch); | |||
border-radius: 16px; | |||
box-sizing: border-box; | |||
content: ""; | |||
pointer-events: none; | |||
} | } | ||
| 50번째 줄: | 100번째 줄: | ||
} | } | ||
/* 이름칸 | /* 이름칸 */ | ||
.infobox__title { | .infobox__title { | ||
display: flex; | display: flex; | ||
| 57번째 줄: | 107번째 줄: | ||
width: 100%; | width: 100%; | ||
min-height: 0; | min-height: 0; | ||
padding: 0. | padding: 0.58rem 2.1rem 0.54rem; | ||
border: 0; | border: 0; | ||
border-radius: 0; | border-radius: 0; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
background: # | background: | ||
linear-gradient( | |||
180deg, | |||
#7e543a 0%, | |||
var(--infobox-title) 48%, | |||
var(--infobox-title-dark) 100% | |||
); | |||
clip-path: polygon( | clip-path: polygon( | ||
0 0, | 0 0, | ||
| 85번째 줄: | 141번째 줄: | ||
line-height: 1.12; | line-height: 1.12; | ||
text-align: center; | text-align: center; | ||
text-shadow: | |||
0 1px 0 rgba(60, 35, 21, 0.9), | |||
0 2px 2px rgba(45, 27, 17, 0.35); | |||
filter: drop-shadow(0 3px 2px rgba(72, 43, 27, 0.25)); | |||
box-shadow: | |||
inset 0 1px rgba(255, 255, 255, 0.18), | |||
inset 0 -2px rgba(57, 34, 21, 0.22); | |||
overflow-wrap: anywhere; | overflow-wrap: anywhere; | ||
word-break: keep-all; | word-break: keep-all; | ||
| 96번째 줄: | 159번째 줄: | ||
} | } | ||
/* | /* 본체 */ | ||
.infobox__panel { | .infobox__panel { | ||
margin-top: 0. | margin-top: 0.68rem; | ||
padding: 0; | padding: 0; | ||
border: 0; | border: 0; | ||
| 112번째 줄: | 175번째 줄: | ||
} | } | ||
/* 사진칸 | /* 사진칸 */ | ||
.infobox__image { | .infobox__image { | ||
display: flex; | display: flex; | ||
| 121번째 줄: | 184번째 줄: | ||
max-height: 225px; | max-height: 225px; | ||
padding: 0.58rem; | padding: 0.58rem; | ||
border: 1px solid | border: 1px solid var(--infobox-rule); | ||
border-radius: | border-radius: 11px; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
background: rgba(255, | background: | ||
linear-gradient( | |||
135deg, | |||
rgba(255, 255, 255, 0.64), | |||
transparent 44% | |||
), | |||
var(--infobox-paper); | |||
box-shadow: | |||
0 3px 8px var(--infobox-cell-shadow), | |||
inset 0 0 0 3px rgba(216, 198, 170, 0.18); | |||
overflow: hidden; | overflow: hidden; | ||
} | |||
.infobox__image::before { | |||
position: absolute; | |||
top: 0; | |||
right: 0; | |||
bottom: 0; | |||
left: 0; | |||
background-image: | |||
linear-gradient( | |||
45deg, | |||
rgba(113, 128, 90, 0.025) 25%, | |||
transparent 25%, | |||
transparent 75%, | |||
rgba(113, 128, 90, 0.025) 75% | |||
), | |||
linear-gradient( | |||
-45deg, | |||
rgba(113, 128, 90, 0.025) 25%, | |||
transparent 25%, | |||
transparent 75%, | |||
rgba(113, 128, 90, 0.025) 75% | |||
); | |||
background-position: | |||
0 0, | |||
8px 8px; | |||
background-size: 16px 16px; | |||
content: ""; | |||
pointer-events: none; | |||
} | } | ||
| 135번째 줄: | 236번째 줄: | ||
height: 3px; | height: 3px; | ||
border-radius: 3px; | border-radius: 3px; | ||
background: | background: var(--infobox-label); | ||
content: ""; | content: ""; | ||
opacity: 0. | opacity: 0.38; | ||
} | } | ||
| 154번째 줄: | 255번째 줄: | ||
margin: 0 auto; | margin: 0 auto; | ||
object-fit: contain; | object-fit: contain; | ||
filter: drop-shadow(0 3px 2px rgba(67, 49, 36, 0.14)); | |||
} | } | ||
/* 정보칸 | /* 정보칸 */ | ||
.infobox__details { | .infobox__details { | ||
width: 100%; | width: calc(100% + 0.64rem); | ||
margin: 0. | margin: 0.3rem -0.32rem -0.22rem; | ||
border: | border: 0; | ||
border-collapse: separate; | border-collapse: separate; | ||
border-spacing: 0; | border-spacing: 0.32rem 0.34rem; | ||
table-layout: fixed; | table-layout: fixed; | ||
background: | background: transparent; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
font-family: | font-family: | ||
"SB Aggro L", | "SB Aggro L", | ||
| 177번째 줄: | 277번째 줄: | ||
"Noto Sans KR", | "Noto Sans KR", | ||
sans-serif; | sans-serif; | ||
box-shadow: | box-shadow: none; | ||
overflow: visible; | |||
} | } | ||
.infobox__image + .infobox__details { | .infobox__image + .infobox__details { | ||
margin-top: 0. | margin-top: 0.3rem; | ||
} | } | ||
| 190번째 줄: | 291번째 줄: | ||
.infobox__details th, | .infobox__details th, | ||
.infobox__details td { | .infobox__details td { | ||
position: relative; | |||
min-width: 0; | min-width: 0; | ||
padding-top: 0. | padding-top: 0.62rem; | ||
padding-bottom: 0. | padding-bottom: 0.62rem; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
vertical-align: | vertical-align: middle; | ||
line-height: 1. | line-height: 1.46; | ||
overflow: hidden; | |||
} | } | ||
/* 항목명 라벨 */ | |||
.infobox__details th { | .infobox__details th { | ||
width: | width: 32%; | ||
padding-right: | padding-right: 1.08rem; | ||
padding-left: 0. | padding-left: 0.92rem; | ||
color: | border: 1px solid var(--infobox-label-dark); | ||
border-radius: 10px; | |||
background-color: var(--infobox-label); | |||
background-image: | |||
linear-gradient( | |||
90deg, | |||
var(--infobox-label-dark) 0, | |||
var(--infobox-label-dark) 7px, | |||
transparent 7px | |||
), | |||
linear-gradient( | |||
45deg, | |||
rgba(255, 255, 255, 0.055) 25%, | |||
transparent 25%, | |||
transparent 75%, | |||
rgba(255, 255, 255, 0.055) 75% | |||
), | |||
linear-gradient( | |||
-45deg, | |||
rgba(67, 84, 50, 0.09) 25%, | |||
transparent 25%, | |||
transparent 75%, | |||
rgba(67, 84, 50, 0.09) 75% | |||
); | |||
background-position: | |||
left top, | |||
0 0, | |||
9px 9px; | |||
background-size: | |||
auto, | |||
18px 18px, | |||
18px 18px; | |||
color: var(--infobox-label-text); | |||
font-family: | font-family: | ||
"SB Aggro M", | "SB Aggro M", | ||
| 214번째 줄: | 348번째 줄: | ||
"Noto Sans KR", | "Noto Sans KR", | ||
sans-serif; | sans-serif; | ||
font-size: 0. | font-size: 0.82rem; | ||
font-weight: 500; | font-weight: 500; | ||
text-align: left; | text-align: left; | ||
text-shadow: | |||
0 1px 0 rgba(54, 68, 40, 0.9), | |||
0 1px 2px rgba(40, 51, 30, 0.28); | |||
word-break: keep-all; | |||
box-shadow: | |||
inset 0 1px rgba(255, 255, 255, 0.15), | |||
0 2px 4px rgba(56, 70, 42, 0.13); | |||
} | |||
.infobox__details th::after { | |||
position: absolute; | |||
top: 50%; | |||
right: 0.42rem; | |||
width: 5px; | |||
height: 5px; | |||
border-radius: 50%; | |||
background: rgba(255, 253, 245, 0.66); | |||
box-shadow: 0 1px 1px rgba(48, 61, 36, 0.35); | |||
content: ""; | |||
transform: translateY(-50%); | |||
} | } | ||
/* 정보값 종이칸 */ | |||
.infobox__details td { | .infobox__details td { | ||
width: | width: 68%; | ||
padding-right: 0. | padding-right: 0.82rem; | ||
padding-left: 0. | padding-left: 0.86rem; | ||
color: | border: 1px solid var(--infobox-rule); | ||
border-radius: 10px; | |||
background-color: var(--infobox-paper); | |||
background-image: | |||
linear-gradient( | |||
90deg, | |||
var(--infobox-paper-alt) 0, | |||
var(--infobox-paper-alt) 5px, | |||
transparent 5px | |||
), | |||
repeating-linear-gradient( | |||
0deg, | |||
transparent 0, | |||
transparent 19px, | |||
rgba(122, 95, 68, 0.035) 20px | |||
); | |||
color: var(--infobox-ink); | |||
font-family: | font-family: | ||
"SB Aggro L", | "SB Aggro L", | ||
| 234번째 줄: | 404번째 줄: | ||
"Noto Sans KR", | "Noto Sans KR", | ||
sans-serif; | sans-serif; | ||
font-size: 0. | font-size: 0.89rem; | ||
font-weight: 300; | font-weight: 300; | ||
text-align: left; | text-align: left; | ||
overflow-wrap: anywhere; | overflow-wrap: anywhere; | ||
word-break: break-word; | word-break: break-word; | ||
box-shadow: | |||
0 2px 5px var(--infobox-cell-shadow), | |||
inset 0 1px rgba(255, 255, 255, 0.72); | |||
. | |||
} | } | ||
| 268번째 줄: | 436번째 줄: | ||
.infobox a { | .infobox a { | ||
color: | color: var(--infobox-link); | ||
font-family: inherit; | font-family: inherit; | ||
font-weight: inherit; | font-weight: inherit; | ||
text-decoration: | text-decoration: underline; | ||
} | } | ||
.infobox a:hover { | .infobox a:hover { | ||
color: | color: var(--infobox-link-hover); | ||
text-decoration: | text-decoration-color: currentColor; | ||
} | } | ||
.infobox a:focus { | .infobox a:focus { | ||
outline: 2px solid | border-radius: 3px; | ||
outline: 2px solid var(--infobox-focus); | |||
outline-offset: 2px; | |||
} | } | ||
/* 태블릿·모바일 */ | |||
@media screen and (max-width: 720px) { | @media screen and (max-width: 720px) { | ||
.infobox { | .infobox { | ||
| 291번째 줄: | 462번째 줄: | ||
margin: 0 0 1.1rem; | margin: 0 0 1.1rem; | ||
padding: 0.68rem; | padding: 0.68rem; | ||
border-radius: | border-radius: 20px; | ||
font-size: 1rem; | font-size: 1rem; | ||
line-height: 1.55; | line-height: 1.55; | ||
box-shadow: 0 | box-shadow: | ||
0 8px 20px var(--infobox-shadow), | |||
inset 0 1px rgba(255, 255, 255, 0.38); | |||
} | } | ||
.infobox::before { | .infobox::before { | ||
border-radius: | border-radius: 18px; | ||
} | |||
.infobox::after { | |||
border-radius: 15px; | |||
} | } | ||
.infobox__title { | .infobox__title { | ||
padding: 0.64rem 2.3rem 0.6rem; | |||
padding: 0. | |||
clip-path: polygon( | clip-path: polygon( | ||
0 0, | 0 0, | ||
| 312번째 줄: | 488번째 줄: | ||
100% 0 | 100% 0 | ||
); | ); | ||
font-size: 1. | font-size: 1.65rem; | ||
line-height: 1.12; | line-height: 1.12; | ||
} | } | ||
.infobox__panel { | .infobox__panel { | ||
margin-top: 0. | margin-top: 0.62rem; | ||
} | } | ||
| 324번째 줄: | 500번째 줄: | ||
max-height: 235px; | max-height: 235px; | ||
padding: 0.58rem; | padding: 0.58rem; | ||
} | } | ||
| 332번째 줄: | 507번째 줄: | ||
.infobox__details { | .infobox__details { | ||
margin- | width: calc(100% + 0.56rem); | ||
border- | margin-right: -0.28rem; | ||
margin-left: -0.28rem; | |||
border-spacing: 0.28rem 0.32rem; | |||
} | } | ||
.infobox__image + .infobox__details { | .infobox__image + .infobox__details { | ||
margin-top: 0. | margin-top: 0.28rem; | ||
} | } | ||
.infobox__details th, | .infobox__details th, | ||
.infobox__details td { | .infobox__details td { | ||
padding-top: 0. | padding-top: 0.72rem; | ||
padding-bottom: 0. | padding-bottom: 0.72rem; | ||
line-height: 1.46; | line-height: 1.46; | ||
} | } | ||
.infobox__details th { | .infobox__details th { | ||
width: | width: 30%; | ||
padding-right: | padding-right: 1.02rem; | ||
padding-left: 0. | padding-left: 0.88rem; | ||
font-size: 0. | font-size: 0.96rem; | ||
} | } | ||
.infobox__details td { | .infobox__details td { | ||
width: | width: 70%; | ||
padding-right: 0. | padding-right: 0.84rem; | ||
padding-left: 0. | padding-left: 0.9rem; | ||
font-size: 1rem; | font-size: 1rem; | ||
} | } | ||
| 365번째 줄: | 542번째 줄: | ||
.infobox { | .infobox { | ||
padding: 0.56rem; | padding: 0.56rem; | ||
border-radius: 18px; | |||
} | |||
.infobox::before { | |||
border-radius: 16px; | border-radius: 16px; | ||
} | |||
.infobox::after { | |||
top: 4px; | |||
right: 4px; | |||
bottom: 4px; | |||
left: 4px; | |||
border-radius: 14px; | |||
} | } | ||
.infobox__title { | .infobox__title { | ||
padding: 0.6rem 1.9rem 0.56rem; | |||
padding: 0. | |||
clip-path: polygon( | clip-path: polygon( | ||
0 0, | 0 0, | ||
| 379번째 줄: | 567번째 줄: | ||
100% 0 | 100% 0 | ||
); | ); | ||
font-size: 1. | font-size: 1.48rem; | ||
line-height: 1.12; | line-height: 1.12; | ||
} | } | ||
| 391번째 줄: | 579번째 줄: | ||
max-height: 205px; | max-height: 205px; | ||
padding: 0.46rem; | padding: 0.46rem; | ||
border-radius: | border-radius: 9px; | ||
} | } | ||
| 399번째 줄: | 587번째 줄: | ||
.infobox__details { | .infobox__details { | ||
margin- | display: block; | ||
border- | width: 100%; | ||
margin: 0.28rem 0 -0.16rem; | |||
border-spacing: 0; | |||
} | |||
.infobox__details tbody { | |||
display: block; | |||
width: 100%; | |||
} | } | ||
.infobox__details tr { | |||
margin | display: grid; | ||
grid-template-columns: minmax(88px, 31%) minmax(0, 1fr); | |||
gap: 0.3rem; | |||
width: 100%; | |||
margin: 0 0 0.34rem; | |||
} | } | ||
.infobox__details th, | .infobox__details th, | ||
.infobox__details td { | .infobox__details td { | ||
padding-top: 0. | display: flex; | ||
padding-bottom: 0. | align-items: center; | ||
width: auto; | |||
min-height: 44px; | |||
padding-top: 0.62rem; | |||
padding-bottom: 0.62rem; | |||
line-height: 1.42; | line-height: 1.42; | ||
} | } | ||
.infobox__details th { | .infobox__details th { | ||
padding-right: 0.96rem; | |||
padding-right: 0. | padding-left: 0.76rem; | ||
padding-left: 0. | border-radius: 9px; | ||
font-size: 0. | font-size: 0.87rem; | ||
} | } | ||
.infobox__details td { | .infobox__details td { | ||
padding-right: 0.7rem; | |||
padding-right: 0. | padding-left: 0.76rem; | ||
padding-left: 0. | border-radius: 9px; | ||
font-size: 0. | font-size: 0.94rem; | ||
} | } | ||
} | } | ||
/* 직접 선택한 다크 모드 */ | |||
@media screen { | @media screen { | ||
html.skin-theme-clientpref-night .infobox { | html.skin-theme-clientpref-night .infobox { | ||
--infobox-frame: #71805b; | |||
--infobox-frame-dark: #445039; | |||
--infobox-shell: #37352c; | |||
--infobox-shell-light: #454238; | |||
--infobox-paper: #302f29; | |||
--infobox-paper-alt: #3b3a31; | |||
--infobox-rule: #5c594c; | |||
--infobox-label: #566247; | |||
--infobox-label-dark: #35402d; | |||
--infobox-label-light: #687556; | |||
--infobox-label-text: #f5f1e5; | |||
--infobox-title: #674631; | |||
--infobox-title-dark: #4d3223; | |||
--infobox-ink: #eee8dc; | |||
--infobox-muted: #c5bbaa; | |||
--infobox-link: #dfb183; | |||
--infobox-link-hover: #f1cba4; | |||
--infobox-focus: #a8bb82; | |||
--infobox-stitch: rgba(157, 172, 126, 0.34); | |||
--infobox-shadow: rgba(0, 0, 0, 0.34); | |||
--infobox-cell-shadow: rgba(0, 0, 0, 0.18); | |||
background: | |||
linear-gradient( | |||
135deg, | |||
rgba(255, 255, 255, 0.045), | |||
transparent 34% | |||
), | |||
linear-gradient( | |||
180deg, | |||
var(--infobox-shell-light), | |||
var(--infobox-shell) | |||
); | |||
} | } | ||
html.skin-theme-clientpref-night .infobox::before { | html.skin-theme-clientpref-night .infobox::before { | ||
opacity: 0. | opacity: 0.009; | ||
} | } | ||
html.skin-theme-clientpref-night .infobox__title { | html.skin-theme-clientpref-night .infobox__title { | ||
background: | background: | ||
linear-gradient( | |||
180deg, | |||
#76513a 0%, | |||
var(--infobox-title) 48%, | |||
var(--infobox-title-dark) 100% | |||
); | |||
} | } | ||
html.skin-theme-clientpref-night .infobox__image { | html.skin-theme-clientpref-night .infobox__image { | ||
background: | |||
background: | linear-gradient( | ||
135deg, | |||
rgba(255, 255, 255, 0.045), | |||
transparent 44% | |||
), | |||
var(--infobox-paper); | |||
} | } | ||
html.skin-theme-clientpref-night .infobox__details td { | html.skin-theme-clientpref-night .infobox__details td { | ||
color: | background-color: var(--infobox-paper); | ||
background-image: | |||
linear-gradient( | |||
90deg, | |||
var(--infobox-paper-alt) 0, | |||
var(--infobox-paper-alt) 5px, | |||
transparent 5px | |||
), | |||
repeating-linear-gradient( | |||
0deg, | |||
transparent 0, | |||
transparent 19px, | |||
rgba(255, 255, 255, 0.018) 20px | |||
); | |||
} | } | ||
} | } | ||
/* 운영체제 설정을 따르는 다크 모드 */ | |||
@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-frame: #71805b; | |||
--infobox-frame-dark: #445039; | |||
--infobox-shell: #37352c; | |||
--infobox-shell-light: #454238; | |||
--infobox-paper: #302f29; | |||
--infobox-paper-alt: #3b3a31; | |||
--infobox-rule: #5c594c; | |||
--infobox-label: #566247; | |||
--infobox-label-dark: #35402d; | |||
--infobox-label-light: #687556; | |||
--infobox-label-text: #f5f1e5; | |||
--infobox-title: #674631; | |||
--infobox-title-dark: #4d3223; | |||
--infobox-ink: #eee8dc; | |||
--infobox-muted: #c5bbaa; | |||
--infobox-link: #dfb183; | |||
--infobox-link-hover: #f1cba4; | |||
--infobox-focus: #a8bb82; | |||
--infobox-stitch: rgba(157, 172, 126, 0.34); | |||
--infobox-shadow: rgba(0, 0, 0, 0.34); | |||
--infobox-cell-shadow: rgba(0, 0, 0, 0.18); | |||
background: | |||
linear-gradient( | |||
135deg, | |||
rgba(255, 255, 255, 0.045), | |||
transparent 34% | |||
), | |||
linear-gradient( | |||
180deg, | |||
var(--infobox-shell-light), | |||
var(--infobox-shell) | |||
); | |||
} | } | ||
html.skin-theme-clientpref-os .infobox::before { | html.skin-theme-clientpref-os .infobox::before { | ||
opacity: 0. | opacity: 0.009; | ||
} | } | ||
html.skin-theme-clientpref-os .infobox__title { | html.skin-theme-clientpref-os .infobox__title { | ||
background: | background: | ||
linear-gradient( | |||
180deg, | |||
#76513a 0%, | |||
var(--infobox-title) 48%, | |||
var(--infobox-title-dark) 100% | |||
); | |||
} | } | ||
html.skin-theme-clientpref-os .infobox__image { | html.skin-theme-clientpref-os .infobox__image { | ||
background: | |||
background: | linear-gradient( | ||
135deg, | |||
rgba(255, 255, 255, 0.045), | |||
transparent 44% | |||
), | |||
var(--infobox-paper); | |||
} | } | ||
html.skin-theme-clientpref-os .infobox__details td { | html.skin-theme-clientpref-os .infobox__details td { | ||
color: | background-color: var(--infobox-paper); | ||
background-image: | |||
linear-gradient( | |||
90deg, | |||
var(--infobox-paper-alt) 0, | |||
var(--infobox-paper-alt) 5px, | |||
transparent 5px | |||
), | |||
repeating-linear-gradient( | |||
0deg, | |||
transparent 0, | |||
transparent 19px, | |||
rgba(255, 255, 255, 0.018) 20px | |||
); | |||
} | } | ||
} | } | ||
